JQuery详解：选择器过滤器和理解

JQuery 介绍

JQuery的特点:

JQuery如此好用的两大特性：

1）链式编程：$('#p1').text('Test').html('<b>Html</b>').链式编程的原因是JQuery的几乎所有的方法最后的部分都有Return this，即把当前选择器选定的对象返回，因此可以不停的调用方法，看起来就像是chain。

2）隐式迭代：$('p').Click(function (){}); 选择器选择的是所有P标签，但是，我们没有循环遍历所有P标签即可对所有P操作，都是因为JQuery内部的隐式迭代。这两种编程思路十分值得借鉴。

PS：隐式迭代会导致选择器选中的结果就是集合，因此JQuery中允许使用$('p')[0] 这样的写法，看选择器是否选中了元素可以用

$('p').length的方式，如果Length不为0 则选中了元素。

JQuery 选择器：

JQuery是使用最广泛的JavaScript 库之一，应用极为广泛，而JQuery的学习的关键在于选择器和过滤器

 

JQuery选择器主要分为以下6种：

1 ID选择器   $('#div01').click()

2 tag选择器  $('p').text()

3 类选择器 $('.class').click()

4 标签+类选择器 $('p.class').click()  

5 组合选择器 $('p,#div1').click()(逗号分隔）同时选择p标签和id 为div1的元素，组合选择器会将匹配的结果合并在一起

6 层次选择器

6.1 $('div p') (后代选择器 一个空格，即表示选择div下所有的p标签）

6.2 $('div > p')(直接子元素选择器，即div下所有的P子元素,不包括子元素的后代元素 格式是：空格+>+空格 必须是直接子元素)

6.3 相邻元素选择器：（层次选择器的一种）$('.menuitem + div') 获取样式名称为menuitem 之后的相邻的第一个div 元素 等同于

$('.menuitem').next('div'),如果相邻的元素不是div,则不会继续向后找

$('.menuitem ~ div') 获取样式名称为menuitem 之后的所有的兄弟div 元素 等同于

$('.menuitem').nextAll('div') 

请注意有next就有prev,prev表示前一个元素 , siblings()表示所有兄弟元素

7 '*'

$('*') 表示选取所有元素，nextAll('*') 或者nextAll() 表示选取后面的所有元素

 

重点：相邻元素选择器会破坏链式编程的链（因为返回的不再是变量本身），需要用end() 返回破坏前的对象

JQuery attr 和 prop

JQuery中的attr相当于JS中的getAttribute 和setAttribute

1,2,3 行有代表性的用法，prop 和 attr的区别

JQuery 过滤器

1、基本过滤器：

1.1  first选取第一个元素,$("div:first") 选取第一个div，同理有last表示选取最后一个元素 

1.2  not 选择器 选取不满足“选择器”条件的元素，$("input:not(.myclass)") 选取样式不是myclass的input

1.3  :even :odd 选取索引为偶数、奇数(都是针对索引来说的)的元素：$("input:even")

1.4 :eq()、gt()、lt() 选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")

注意使用lt（小于）的时候 通常要加大于0

1.5 $(":header")选取所有H1到H6的元素

1.6 $("div:animated")选取正在执行动画的div

//gt lt 组合使用过滤器，先选取大于0的结果集，然后再在结果集中选出小于2的
 $('p:gt(0):lt(2)').css('background', 'green');

2、属性过滤选择器

                //1 选择有name 属性的input
                //$('input[name]').css('background', 'yellow');
                //2 选取具有name 属性且值为txt1的input
                //$('input[name=txt1]').css('background', 'blue');
                //3 body 下有name 属性的元素 结果层次过滤器
                //$('body [name]').css('background','red');
                //4 结合正则 选取以t 开头的input 同理结尾用$ 包含则用*
                $('input[name^=t]').css('background', 'green');
                //5 name 不等于使用!=

3、表单过滤器：请注意表单过滤器的空格

 

JQuery 操作样式

 

JQuery动态创建元素

主要由四个方法append,prepend,insertbefore,insertAfter

 

Window.Onload() 和JQuery的document.ready()区别

浏览器中的对象：

一级对象：window 级对象

二级对象：document对象

window.Onload() 是整个页面加载完成才执行，包括document和document标签所引用的其他资源（图片 css等等）

$(document).Ready() 即document加载完成就可以执行 可以提升用户的感知性能

$(document).Ready()的4中等价写法：

JQuery对象可以简写为$

JQuery 遍历

JQuery 使用each方法可以遍历 数组和Json (Key,Value) 格式的文件

 

each跳出循环的方式：

使用Return false 不能使用break，原因是查看JQuery 中each的源码发现

实际是每个成员的call 方法不是循环 因此用break是错的 

 

JS JQuery代码的调试：

找到sources或者脚本 找到JS代码

刷新F5 打断点 监控变量即可

 

JQuery 经典案例：

实例1：

 

实例2：JQuery的5星打分实现

 

JQuery 的智能提示：

可以百度搜索JQuery智能提示;

JQuery 智能提示需要引用vsdoc版本的jquery库。

<script type="text/javascript" src="scripts/jquery-1.4.1-vsdoc2.js"></script>

但是发布的时候必须使用min版本的 减少资源的大小

1. • 了即能在Visual Studio中增加脚本提示, 又能在上线的时候使用min版本的脚本库, 我们一般是用如下方式引入jQuery库：

      

     

   • 8

     8.使用后端变量。

     

     

2.