jQuery选择器

一、简单选择器

元素 $('div')  只允许出现一次

id     $('#id')

类    $('.class')

长度可以用length属性和size()方法来获取，id长度为一个，其他可以为多个

元素缺失js和jq的不同

$('#pox').css('color', 'red');                                          //不存在 ID 为 pox 的元素，也不报错 （原因是jq内部进行了判断）

jq查找属性是否缺失可用length属性
document.getElementById('pox').style.color = 'red';  //报错了

js解决方案：

if (document.getElementById('pox')) { 　　//先判断是否存在这个对象
　　document.getElementById('pox').style.color = 'red';
}

 

二、进阶选择器

群组选择器   $('span,em,.box')

后代选择器   $('ul li a') 

通配选择器   $('*')  大通配，效率低

还有一种选择器，可以在 ID 和类(class)中指明元素前缀 ，eg：

$('div.box');    //限定必须是.box 元素获取必须是 div

多class选择器 $('.box.pox')  一个dom节点下有的多个class属性，没有","和群组选择器区分

 

三、高级选择器

后代选择器      $('box p')    #box p {}                提供find()方法等价         $('#box').find('p')

子选择器         $('#box>p')  #box>div > p {}      提供children()方法等价  $('#box').children('p')    只有子元素，孙子元素不行

next选择器      $('div + p')   div + p {}                提供next()方法等价        $('div').next('p')             同一层次后的

nextAll选择器  $('div ~ p')   div ~ p {}                提供nextAll()方法等价    $('div').nextAll('p') 

为了补充高级选择器的这三种模式，jQuery 还提供了更加丰富的方法来选择元素：

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

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

nextUntil()和 prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有元素，一旦遇到指定的元素就停止选定。

　　$('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定，遇到则停止

　　$('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定，遇到则停止

siblings()方法正好集成了 prevAll()和 nextAll()两个功能的效果，及上下相邻的所有元素进行选定：

　　$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定

　　//等价于下面：

　　$('#box').prevAll('p').css('color', 'red'); //同级上所有元素选定

　　$('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定 

jQuery方法要快于高级选择器