jQuery 选择器

http://edu.51cto.com/lesson/id-14460.html

jQuery最核心的组成部分：选择器引擎。它继承了CSS语法，可以对DOM元素的标签名、属性名、状态灯进行快速准确的选择，

最重要的是无需担心浏览器的兼容性。

使用方法：

1、使用$()函数来包装CSS规则，如$("#box")返回ID为box的DOM节点对象

2、对DOM节点对象进行CSS操作，$("#box").css('color','red');

注意：在页面中ID只允许出现一次，class和标签没有次数限制，如果有多个ID时，使用CSS样式，多个ID元素都可以获得CSS的样式，当使用jQuery时，就只有第一个ID元素可以得到相应处理。

jQuery 兼容性问题

注：

1、CSS子选择器在IE6下不支持：#myId > div {}

2、jQuery子选择器兼容IE6：$('#myId > div'}).css('color', 'red');

jQuery容错功能：

1、jQuery：$('#myId').css('color', 'red');  //如果myId元素不存在，则该语句不会报错，因为jQuery内存进行了判断。

2、CSS：document.getElementById('myId').style.color='red';//如果myId元素不存在，该语句会报错；

对于不存在的元素，jQuery如何判断？

方法：if($('#myId').get(0)) {} 或者if($('#myId')[0]) {}

进阶选择器：

群组选择器：span,em,a,.className,#myId {}获取以，分割的所有DOM元素的集合

后代选择器：ul li a{} 按照从左到右顺序作为层级关系选择DOM元素集合

通配选择器：*{} 获取所有DOM元素

还有一种选择器，在ID和类名之前指定元素前缀。如$('div.className')表示类名为className的div元素。

层级选择器

后代选择器：（全兼容）

$('#box p').css('color','red');//等价于

$('#box').find('p').css('color','red');

子选择器：

$('#box > p').css('color','red');//等价于

$('#box').children('p').css('color','red');

next选择器：（获取下一个同一节点）

$('#box + p').css('color','red');//等价于

$('#box').next('p').css('color','red');

注意：

1、如果#box下一个同级DOM元素如果不是p，则该语句失效。

2、如果next()没有参数，则相当于不匹配下一个元素的类型，直接获取下一个位置的元素。

nextAll选择器：（获取后面所有同级节点）

$('#box ~ p').css('color','red');//等价于

$('#box').nextAll('p').css('color','red');

补充高级选择器：

1、$('#box').prev('p').css('color','red');//同一级上一个相邻的元素

2、$('#box').prevAll('p').css('color','red');//同一级前面的所有元素

3、$('#box').prevUntil('p').css('color','red');//同一级前面所有不是p类型的元素，如果遇到p元素则停止搜索。

4、$('#box').nextUntil('p').css('color','red');//同一级后面所有不是p类型的元素，如果遇到p元素则停止搜索。

5、$('#box').siblings('p').css('color','red');//获取同级中前后所有p类型的元素

选择器速度：

理论上将， find()、next()、nextAll()和 children()方法运行速度要快于高级选择器，推荐使用这些方法，而尽量少用高级选择器

属性选择器

$('a[title]').css('color', 'red');//包含title属性的所有a标签，如<a title="a"></a>

$('a[title=num1]').css('color', 'red');//匹配<a title="num1"></a>

$('a[title^=num1]').css('color', 'red');//匹配<a title="num1"></a>或<a title="num1xxx"></a>

$('a[title$=num1]').css('color', 'red');//匹配<a title="num1"></a>或<a title="xxxnum1"></a>

$('a[title|=num1]').css('color', 'red');//匹配<a title="num1"></a>或<a title="num1-xxx"></a>

$('a[title!=num1]').css('color', 'red');//匹配<a title="非num1"></a>

$('a[title~=num1]').css('color', 'red');//匹配<a title="num1 aaa"></a>或<a title="num1 bbb ccc"></a>

$('a[title*=num1]').css('color', 'red');//匹配<a title="prefixnum1"></a>或<a title="num1subfix"></a>

$('a[bbb][title=num1]').css('color', 'red');//匹配<a title="num1" bbb="bbb"></a>

过滤选择器

jQuery 为最常用的过滤器提供了专用的方法，已达到提到性能和效率的作用：
$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素，负数从后开始
$('li').first().css('background', '#ccc'); //元素 li 的第一个元素
$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
$('li').not('.red').css('background', '#ccc'); //元素 li 不含 class 为 red 的元素

内容过滤器：

jQuery 提供了一个 has()方法来提高:has 过滤器的性能：
$('ul').has('.red').css('background', '#ccc'); //选择子元素含有 class 是 red 的元素

jQuery 提供了一个名称和:parent 相似的方法， 但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合。
$('li').parent().css('background', '#ccc'); //选择当前元素的父元素
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到 div 父元素停止