JQuery选择器大全

一.基本选择器:

它由元素id、class、元素名、多个元素符组成。

eg:

<button id="btn" class="btn1">按钮</button>
//获取方式:
console.log($("#btn"));
console.log($(".btn1"));
console.log($("*"));
console.log($("button"));
console.log($("#btn,.btn1,button"));

二.层次选择器:

通过DOM元素间的层次关系来获取元素，主要层次关系包括父子、后代、相邻、兄弟关系。

注意:ancestor descendant与parent > child 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系;prev + next可以使用.next() 代替，而prev ~siblings可以使用nextAll()代替。
eg:

<ul>
    <li>1</li>
    <li>2
        <ol>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ol>
    </li>
    <li class="li3">3</li>
    <p>0000</p>
    <li>4</li>
</ul>
//获取
console.log($("ul li"));
console.log($("ul>li"));
console.log($(".li3+"));
console.log($(".li3~li"));

三.过滤选择器:

(1).简单过滤选择器:
过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头；简单过滤是使用最广泛的一种。

eg:

<ul>
    <li>1</li>
    <li>2
        <ol>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ol>
    </li>
    <li class="li3">3</li>
    <p>0000</p>
    <li>4</li>
</ul>
//获取
console.log($("ul>li:first"));
console.log($("ul>li:last"));
console.log($("ul>li:even"));
console.log($("ul>li:odd"));
console.log($("ul>li:gt(1)"));
console.log($("ul>li:lt(1)"));
console.log($("ul>li:eq(1)"));
console.log($("ul>li:not(.li3)"));

如图:

（2).内容过滤选择器:
根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。

eg:

<ul>
    <li>1</li>
    <li>2
        <ol>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ol>
    </li>
    <li class="li3">3</li>
    <p>0000</p>
    <li>4</li>
</ul>
<div><span>40</span></div>
<span></span>
//获取
console.log($("li:contains(2)"));
console.log($("span:empty"));
console.log($("span:parent"));
console.log($("div:has(span)"));

（3.可见性过滤选择器
根据元素是否可见的特征来获取元素

eg:

<input type="button" class="btninput" value="按钮1" >
<input type="button" class="btninput" value="按钮2" >
获取
console.log($(".btninput:hidden"));
console.log($(".btninput:visible"));

（4）.属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以"[“号开始，以”]"号结束。

eg:

<button id="btn" class="btn1">按钮</button>
console.log($("button[id][class]"));
console.log($("button[id='btn'][class='btn1']"));

（5）子元素过滤选择器

获取所有父元素中指定的某个元素

eg:

<ul>
    <li>1</li>
    <li>2
        <ol>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ol>
    </li>
    <li class="li3">3</li>
    <p>0000</p>
    <li>4</li>
</ul>
<div><span>40</span></div>
//获取
console.log($("ul>li:nth-child(2)"));
console.log($("ul>li:first-child"));
console.log($("ul>li:last-child"));
console.log($("div>span:only-child"));

（6）.表单对象属性过滤选择器
对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素

eg:

<input type="checkbox" checked>
<input type="checkbox">
<input type="radio">男
<input type="radio">女
<input type="text">
<select id="sel">
    <option>宝鸡</option>
    <option selected>西安</option>
</select>
//获取
console.log($("input[type='checkbox']:checked"));
console.log($("input[type='radio']"));
console.log($("input[type='text']"));
console.log($("input:text"));
console.log($(":input"));
console.log($(":button"));
$("#sel").change(function(){
    console.log($("#sel>option:selected"));
});