JQuery中常用的选择器

jQuery常用选择器

基础选择器

基本选择器	语法	功能
ID选择器	$('#ID')	找到匹配指定ID的元素
元素(标签)选择器	$('element')	找到指定的元素
class选择器	$('.class')	找到匹配指定class的元素
通配符选择器	$('*')	匹配所有元素
并集(组合)选择器	$('sel,sel')	多个选择器匹配的元素合并

层级选择器	语法	功能
后代选择器	$('parent child')	当前元素的所有后代元素
直接后代选择器	$('parent>child')	当前元素所有的子元素
下一个兄弟	$('prev+next')	当前元素的下一个元素
后面所有兄弟	$('prev~siblings')	当前元素后面的所有兄弟元素

筛选选择器

基本筛选选择器	语法
获取第一个元素	$('ele:first')
获取最后一个元素	$('ele:last')
获取指定索引的元素	$('ele:eq(index)') 方法eq(index)
获取所有元素除某个	$('ele:not(selector)')
获取索引为偶数的元素	$('ele:even')
获取索引为奇数的元素	$('ele:odd')
获取大于该索引元素	$('ele:gt(index)')
获取小于于该索引元素	$('ele:lt(index)')
获取所有标题类型元素	$('ele:header')

例题:

基础选择器

<button>选择所有段落标签</button>
    <button>选择class为left的标签</button>
    <button>选择id为box的标签</button>
    <button>选择所有不分类型标签</button>
    <button>选择ul里面的li标签</button>
    <button>选择body下的第一级所有标签并添加边框</button>
    <button>选择p后的一个div</button>
    <button>选择p后的所有div</button>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <div class="left">类选择器</div>
    <div class="left">类选择器</div>
    <div id="box">id选择器</div>
    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    <ol>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>
​
    <script>
        $("button:first").click(function(){
            $("p").css("color","red")
        })
​
        $("button:eq(1)").click(function(){
            $(".left").css("color","blue")
        })
​
        $("button:eq(2)").click(function(){
            $("#box").css("color","yellow")
        })
​
        $("button:eq(3)").click(function(){
            $("body>:not(.left)").css("color","yellow")
        })
​
        $("button:eq(4)").click(function(){
            $("ul li").css("color","skyblue")
        })
​
        $("button:eq(5)").click(function(){
            $("body>*").css("border","1px solid #000")
        })
        
        $("button:eq(6)").click(function(){
            $("p~div:first").css("color","purple")
        })
​
        $("button:last").click(function(){
            $("p~div").css("color","green")
        })
    </script>

筛选选择器

<button>选择第一个li</button>
    <button>选择最后一个li</button>
    <button>选择所有li排除最后一个</button>
    <button>选择所有li排除第二个</button>
    <button>选择所有索引值为偶数个li</button>
    <button>选择所有索引值为奇数个li</button>
    <button>选择大于第5个的li</button>
    <button>选择小于第5个的li</button>
    <button>选择等于第5个的li</button>
    <button>选择所有标题标签</button>
    <ul>
        <li>这是一个li</li>
        <li>这是一个li</li>
        <li>这是一个li</li>
        <li>这是一个li</li>
        <li>这是一个li</li>
        <li>这是一个li</li>
        <li>这是一个li</li>
        <li>这是一个li</li>
        <li>这是一个li</li>
        <li>这是一个li</li>
    </ul>
    <h1>标题1标签</h1>
    <h2>标题2标签</h2>
    <h3>标题3标签</h3>
    <script>
       $("button:first").click(function () {
            $("li:first").css("color", "red")
        })
        $("button:eq(1)").click(function () {
            $("li:last").css("color", "green")
        })
        $("button:eq(2)").click(function () {
            $("li:not(:last)").css("color", "blue")
        })
        $("button:eq(3)").click(function () {
            $("li:not(:eq(1))").css("color", "yellow")
        })
        $("button:eq(4)").click(function () {
            $("li:even").css("color", "pink")
        })
        $("button:eq(5)").click(function () {
            $("li:odd").css("color", "orange")
        })
        $("button:eq(6)").click(function () {
            $("li:gt(4)").css("background", "blue")
        })
        $("button:eq(7)").click(function () {
            $("li:lt(4)").css("background", "red")
        })
        $("button:eq(8)").click(function () {
            $("li:eq(4)").css("background", "green")
        })
        $("button:eq(9)").click(function () {
            $("*:header").css("background", "skyblue")
        })
     </script>