jQuery选择器、特殊选择器、筛选器

一、选择器

 <ul>
         <li class="a">1</li>
         <li class="a">2</li>
         <li class="b">3</li>
         <li class="c">4</li>
         <li class="abc">5</li>
         <li id="aaa"></li>
         <li></li>        
 </ul>

（1）获取页面中所有的ul标签

$('ul')

（2）获取页面中所有的ul的里标签

$('ul li')

（3）获取页面中ul的子元素中的li

$('ul>li')

（4）获取ul子元素的li中的第一个

$('ul>li:first-child')

（5）获取ul的子元素中的最后一个li

$('ul>li:last-child')

（6）获取ul下所有的li里面的类名为a的元素

$('ul li.a')

（7）根据id获取元素

$('#aaa')

（8）获取li里面的奇数个

$('li:nth-child(odd)')

（9）获取li里面的偶数个

$('li:nth-child(even)')

结果：

二、jQuery的特殊选择器

<div>
        <ul>
            <li class="ab">1</li>
            <li class="aa">2</li>
            <li class="b">3</li>
            <li class="c">4</li>
            <li class="abc">5</li>
            <li id="aaa"></li>
            <li></li>        
        </ul>

         <ul>
            <li class="a">1</li>
            <li class="aaa">2</li>
            <li class="b">3</li>
            <li class="c">4</li>
            <li class="abc">5</li>
            <li id="aaa"></li>
            <li></li>        
        </ul>
 </div>

 （1）有多个值

$('li:nth-child(1)')

（2）获取li里的第一个

$('li:first')

（3）获取li里的最后一个

$('li:last)

（4）获取li里的第二个  

$('li:eq(1)')  //这个获取的是索引值  索引为1即第2个

（5）获取奇数(看索引的)

$('li:odd')

（6）获取偶数

$('li:even')

 

 

 

三、筛选器

（1）筛选集合里面的第一个

$('li').first()

 （2）筛选出一个元素里面的下一个兄弟元素

$('.b').next()

（3）筛选出元素后面的所有兄弟元素

$('.b').nextAll()

（4）查找当前元素之后所有的同辈元素 直到遇到匹配的那个元素为止

$('.b').nextUntil()

（5）筛选出元素的上一个兄弟元素

$('.b').prev()

（6）筛选出元素前面所有兄弟元素

$('.b').prevAll()

（7）查找当前元素值所有的同辈元素 直到遇到匹配的那个元素为止

$('.b').prevUntil()

（8）筛选出父级元素

$('.b').parent()

（9）筛选出所有的祖先元素

$('.b').parents()

（10）查找当前祖先元素 直到遇到匹配的那个元素为止

$('.b').parentsUntil()

（11）筛选出所有的子元素

$('.b').children()

（12）筛选出元素的所有兄弟元素

$('.b').siblings()

（13）在元素中所有后代里面找符合的选择器

$('.body').find('.a')

（14）获取到元素的索引位置 不合适元素集合里面的第几个 找到他父元素下的第几个元素 拿到的是一个数字

$('.c').index()

 <div>
        <ul>
            <li class="a">1</li>
            <li class="aa">2</li>
            <li class="b">3</li>
            <li class="c">4</li>
            <li class="abc">5</li>
            <li id="aaa"></li>
            <li></li>        
        </ul>  
 </div>