搜索
首页web前端js教程jQuery选择器全集详解_jquery
jQuery选择器全集详解_jquery
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 04:30 PM
jquery选择器

选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器 的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行 了介绍，也列举出了一些需要注意和区分的地方。

一、基本选择器

1. id选择器（指定id元素）

将id="one"的元素背景色设置为黑色。（id选择器返单个元素）

$(document).ready(function () {<br>        $('#one').css('background', '#000');<br>    });

2. class选择器（遍历css类元素）

将class="cube"的元素背景色设为黑色

$(document).ready(function () {<br>        $('.cube').css('background', '#000');<br>    });

3. element选择器（遍历html元素）

将p元素的文字大小设置为12px

$(document).ready(function () {<br>        $('p').css('font-size', '12px');<br>    });<br>

4. * 选择器（遍历所有元素）

$(document).ready(function () {<br>        // 遍历form下的所有元素，将字体颜色设置为红色<br>        $('form *').css('color', '#FF0000');<br>    });

5. 并列选择器

$(document).ready(function () {
    // 将p元素和div元素的margin设为0
    $('p, div').css('margin', '0');
  });


二、 层次选择器

1. parent > child（直系子元素）

$(document).ready(function () {
    // 选取div下的第一代span元素，将字体颜色设为红色
    $('div > span').css('color', '#FF0000');
  });

下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。

<div>
    <span>123</span>
    <p>
      <span>456</span>
    </p>
</div>

2. prev + next（下一个兄弟元素，等同于next()方法）

$(document).ready(function () {
  // 选取class为item的下一个div兄弟元素
  $('.item + div').css('color', '#FF0000');
  // 等价代码  
//$('.item').next('div').css('color', '#FF0000');});

下面的代码，只有123和789会变色

<p class="item"></p><br><div>123</div><br><div>456</div><br><span class="item"></span><br><div>789</div>

3. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

$(document).ready(function () {<br>    // 选取class为inside之后的所有div兄弟元素<br>    $('.inside ~ div').css('color', '#FF0000');<br>    // 等价代码<br>    //$('.inside').nextAll('div').css('color', '#FF0000');});

下面的代码，G2和G4会变色

<div class="inside">G1</div><br><div>G2</div><br><span>G3</span><br><div>G4</div>

三、 过滤选择器

1. 基本过滤选择器

——1.1 :first和:last（取第一个元素或最后一个元素）

$(document).ready(function () {<br>            $('span:first').css('color', '#FF0000');<br>            $('span:last').css('color', '#FF0000');<br>        });

下面的代码，G1（first元素）和G3（last元素）会变色

<span>G1</span><br><span>G2</span><br><span>G3</span>

——1.2 :not（取非元素）

$(document).ready(function () {<br>            $('div:not(.wrap)').css('color', '#FF0000');<br>        });

下面的代码，G1会变色

<div>G1</div><br><div class="wrap">G2</div>

但是，请注意下面的代码：

<div>
<br>    G1    <div class="wrap">G2</div>
<br>
</div>

当G1所在div和G2所在div是父子关系时，G1和G2都会变色。

——1.3 :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）

$(document).ready(function () {<br>            $('tr:even').css('background', '#EEE'); // 偶数行颜色<br>            $('tr:odd').css('background', '#DADADA'); // 奇数行颜色<br>        });

A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADA

image



    
        
        
        
        
    



A


B


C


D








——1.4 :eq(x) （取指定索引的元素）


image


$(document).ready(function () {<br>            $('tr:eq(2)').css('background', '#FF0000');<br>        });


更改第三行的背景色，在上面的代码中C的背景会变色。


——1.5 :gt(x)和:lt(x)（取大于x索引或小于x索引的元素）


$(document).ready(function () {<br>            $('ul li:gt(2)').css('color', '#FF0000');<br>            $('ul li:lt(2)').css('color', '#0000FF');<br>        });


L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色


image




    

        
  • L1
    • 

        
  • L2
    • 

        
  • L3
    • 

        
  • L4
    • 

        
  • L5
    • 

    



——1.6 :header（取H1~H6标题元素）


$(document).ready(function () {<br>            $(':header').css('background', '#EFEFEF');<br>        });<br>


下面的代码，H1~H6的背景色都会变


image


<h1 id="H">H1</h1><br><h2 id="H">H2</h2><br><h3 id="H">H3</h3><br><h4 id="H">H4</h4><br><h5 id="H">H5</h5><br><h6 id="H">H6</h6>


2. 内容过滤选择器


——2.1 :contains(text)（取包含text文本的元素）


$(document).ready(<span style="color: blue">function </span>() {
      <span style="color: #006400">// dd元素中包含"jQuery"文本的会变色
      </span>$(<span style="color: maroon">'dd:contains("jQuery")'</span>).css(<span style="color: maroon">'color'</span>, <span style="color: maroon">'#FF0000'</span>);
    });


下面的代码，第一个dd会变色


image






    
技术


    
jQuery, .NET, CLR


    
SEO


    
关键字排名


    
其他


    






——2.2 :empty（取不包含子元素或文本为空的元素）


$(document).ready(function () {<br>            $('dd:empty').html('没有内容');<br>});<br>


image


上面第三个dd会显示"没有内容"文本


——2.3 :has(selector)（取选择器匹配的元素）


$(document).ready(function () {<br>            // 为包含span元素的div添加边框<br>            $('div:has(span)').css('border', '1px solid #000');<br>        });


即使span不是div的直系子元素，也会生效


image


<div>
<br>    <h2>
<br>        A        <span>B</span><br>    </h2>
<br>
</div>


——2.4 :parent（取包含子元素或文本的元素）


$(document).ready(function () {<br>            $('ol li:parent').css('border', '1px solid #000');<br>        });


下面的代码，A和D所在的li会有边框


image


<ol>
<br>    <li>
<br>    <li>A</li>
<br>    <li>
<br>    <li>D</li>
<br>
</ol>


3. 可见性过滤选择器 


——3.1 :hidden（取不可见的元素）


jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或 opactity:0的元素占据了空间，会被排除在外。


参照：http://www.jquerysdk.com/api/hidden-selector


下面的代码，先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。


image


http://www.w3.org/1999/xhtml" ><br><br>    <title></title><br>    <style type="text/css"><br />        div<br />        {<br />            margin: 10px;<br />            width: 200px;<br />            height: 40px;<br />            border: 1px solid #FF0000;<br />            display:block;<br />        }<br />        .hid-1<br />        {<br />            display: none;<br />        }<br />        .hid-2<br />        {<br />            visibility: hidden;<br />        }<br />    </style><br>    <script type="text/javascript" src="js/jquery.min.js"></script><br>    <script type="text/javascript"><br />        $(document).ready(function() {<br />            $('div:hidden').show(500);<br />            alert($('input:hidden').val());<br />        });<br />    </script><br><br><br>    <div class="hid-1">display: none</div><br>    <div class="hid-2">visibility: hidden</div><br>    <input type="hidden" value="hello"><br><br>


——3.2 :visible（取可见的元素）


下面的代码，最后一个div会有背景色


image


<script type="text/javascript"><br />    $(document).ready(function() {        $('div:visible').css('background', '#EEADBB');    });</script><br><div class="hid-1">display: none</div><br><div class="hid-2">visibility: hidden</div><br><input type="hidden" value="hello"><br><div>
<br>    jQuery选择器大全</div>


4. 属性过滤选择器 


——4.1 [attribute]（取拥有attribute属性的元素）


下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线


image


<script type="text/javascript"><br />        $(document).ready(function() {            $('a[title]').css('text-decoration', 'none');       });    </script>       <br>    



——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）


分别为class="item"和class!=item的a标签指定文字颜色


image


<script type="text/javascript"><br />       $(document).ready(function() {<br />           $('a[class=item]').css('color', '#FF99CC');<br />           $('a[class!=item]').css('color', '#FF6600');<br />       });</script>


——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute属性值以value开始，以value结束，或包含value值）


在属性选择器中，^$符号和正则表达式的开始结束符号表示的含义是一致的，*模糊匹配，类似于sql中的like '%str%'。


image


<script type="text/javascript"><br />    // 识别大小写，输入字符串时可以输入引号，[title^=jQuery]和[title^="jQuery"]是一样的<br />    $('a[title^=jQuery]').css('font-weight', 'bold');<br />    $('a[title$=jQuery]').css('font-size', '24px');<br />    $('a[title*=jQuery]').css('text-decoration', 'line-through');</script>


——4.4 [selector1][selector2]（复合型属性过滤器，同时满足多个条件）


将title以"jQuery"开始，并且class="item"的a标签隐藏，那么jQuery事件大全会被隐藏


<script type="text/javascript"><br />        $(document).ready(function() {<br />            $('a[title^=jQuery][class=item]').hide();<br />        });<br />    </script>


5. 子元素过滤选择器 


——5.1 :first-child和:last-child


:first-child表示第一个子元素，:last-child表示最后一个子元素。


需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。举个 例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集 合。


这里有个问题：如果一个元素没有子元素，:first-child和:last-child会返回null吗？请看下面的代码：


http://www.w3.org/1999/xhtml" ><br><br>    <title></title><br>    <script type="text/javascript" src="js/jquery.min.js"></script><br>    <script type="text/javascript"><br />    $(document).ready(function() {<br />        var len1 = $('div:first-child').length;<br />        var len2 = $('div:last-child').length;<br />     });<br />    </script><br><br><br><div>
<br>    <div>
<br>        <div></div>
<br>    </div>
<br>
</div><br><br>


也许你觉得这个答案，是不是太简单了？len1 = 2, len2 = 2。但实际确并不是，它们俩都等于3。 

把上面的代码稍微修改一下：


http://www.w3.org/1999/xhtml" ><br><br>    <title></title><br>    <script type="text/javascript" src="js/jquery.min.js"></script><br>    <script type="text/javascript"><br />    $(document).ready(function() {<br />        var len1 = $('div:first-child').length;<br />        var len2 = $('div:last-child').length;<br />        $('div:first-child').each(function() {<br />            alert($(this).html());<br />        });<br />     });<br />    </script><br><br><br><div>123<br>    <div>456<br>        <div></div>
<br>    </div>
<br>
</div><br><br>


结果却是弹出三个alert，只不过最后一个alert里面是空白的。


image


——5.2 :only-child


当某个元素有且仅有一个子元素时，:only-child才会生效。


http://www.w3.org/1999/xhtml" ><br><br>    <title></title><br>    <script type="text/javascript" src="js/jquery.min.js"></script><br>    <script type="text/javascript"><br />        $(document).ready(function() {<br />            $('div:only-child').css('border', '1px solid #FF0000').css('width','200px');<br />        });<br />    </script><br><br><br><div>123<br>    <div>456<br>        <div></div>
<br>    </div>
<br>
</div><br><br>


这里:only-child也是三个元素，从最后一个很粗的红色边框（实际是两个元素的边框重叠了）也可以看出来。


image


——5.3 :nth-child


看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。要注意的是，这儿的n不像eq(x)、gt(x)或lt(x)是从 0开始的，它是从1开始的，英文里好像也没有zeroth这样的序号词吧。


:nth-child有三种用法：


1) :nth-child(x)，获取第x个子元素 

2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素 

3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。（当x=0,y>=0时，等同于:hth- child(x)；当x=2,y=0时，等同于nth-child(even)；当x=2,y=1时，等同于:nth-child(odd)）


下面的两个例子是针对2)和3)的，1)的例子我就不列举了。


例2：


image


http://www.w3.org/1999/xhtml" ><br><br>    <title></title><br>    <style type="text/css"><br />        <br />        td {<br />            width: 200px;<br />            height: 32px;<br />            line-height: 32px;<br />        }<br />        <br />    </style><br>    <script type="text/javascript" src="js/jquery.min.js"></script><br>    <script type="text/javascript"><br />        $(document).ready(function() {<br />            // 偶数行背景红色<br />            $('tr:nth-child(even)').css('background', '#FF0000');<br />            // 奇数行背景蓝色<br />            $('tr:nth-child(odd)').css('background', '#0000FF');<br />        });<br />    </script><br><br><br>    


        
        
        
        
        
        
    


1. NBA 2012季后赛


2. NBA 2011季后赛


3. NBA 2010季后赛


4. NBA 2009季后赛


5. NBA 2008季后赛


6. NBA 2007季后赛








例3（html代码和例2是一样的）：


SNAGHTMLd6d414


<script type="text/javascript"><br />    $(document).ready(function() {<br />        $('tr:nth-child(3n)').css('background', '#0000FF');<br />    });</script><br>


6. 表单对象属性过滤选择器 


——6.1 :enabled和:disabled（取可用或不可用元素）


:enabled和:diabled的匹配范围包括input, select, textarea。


image


<script type="text/javascript"><br />        $(document).ready(function() {<br />            $(':enabled').css('border', '1px solid #FF0000');<br />            $(':disabled').css('border', '1px solid #0000FF');<br />        });<br />    </script><br>    <div>
<br>        <input type="text" value="可用的文本框"><br>    </div><br>    <div>
<br>        <input type="text" disabled value="不可用的文本框"><br>    </div><br>    <div>
<br>        <textarea disabled>不可用的文本域</textarea><br>    </div><br>    <div>
<br>        <select disabled><br>            <option>English</option>
<br>            <option>简体中文</option>
<br>        </select><br>    </div>


——6.2 :checked（取选中的单选框或复选框元素）


下面的代码，更改边框或背景色仅在IE下有效果，chrome和firefox不会改变，但是alert都会弹出来。


image


<script type="text/javascript"><br />    $(document).ready(function() {<br />        $(':checked').css('background', '#FF0000').each(function() {<br />            alert($(this).val());<br />        });<br />    });</script><br><div>
<br>    <input type="checkbox" checked value="must">必须勾选</div><br><div>你现在工作的企业属于：<br>    <input type="radio" name="radio" checked value="外企">外企<br>    <input type="radio" name="radio" value="国企">国企<br>    <input type="radio" name="radio" value="民企">民企</div>


——6.3 :selected（取下拉列表被选中的元素）


SNAGHTML14414ae


<script type="text/javascript"><br />    $(document).ready(function() {<br />        alert($(':selected').val());<br />    });</script><br><select><br>    <option value="外企">外企</option>
<br>    <option value="国企">国企</option>
<br>    <option value="私企">私企</option>
<br></select>


四、表单选择器 


1. :input（取input,textarea,select,button元素）


:input元素这里就不再多说了，前面的一些例子中也已经囊括了。


2. :text（取单行文本框元素）和:password（取密码框元素）


这两个选择器分别和属性选择器$('input[type=text]')、$('input[type=password]')等同。


image


<script type="text/javascript"><br />   $(document).ready(function() {<br />        $(':text').css('border', '1px solid #FF0000');<br />        $(':password').css('border', '1px solid #0000FF');</script>


        // 等效代码<br>        //$('input[type=text]').css('border', '1px solid #FF0000');<br>        //$('input[type=password]').css('border', '1px solid #0000FF');<br>   });<br>




    账户登录

     


        
    


    


        
    






3. :radio（取单选框元素）


:radio选择器和属性选择器$('input[type=radio]')等同


<script type="text/javascript"><br />    $(document).ready(function() {<br />        $(':radio').each(function() {<br />            alert($(this).val());<br />        });<br />        // 等效代码<br />        /*<br />        $('input[type=radio]').each(function() {<br />            alert($(this).val());<br />        });<br />        */<br />    });</script>你现在工作的企业属于：<br>    <input type="radio" name="radio" checked value="外企">外企<br>    <input type="radio" name="radio" value="国企">国企<br>    <input type="radio" name="radio" value="民企">民企


4. :checkbox（取复选框元素）


:checkbox选择器和属性选择器$('input[type=checkbox]')等同


<script type="text/javascript"><br />    $(document).ready(function() {<br />        $(':checkbox').each(function() {<br />            alert($(this).val());<br />        });<br />        // 等效代码<br />        /*<br />        $('input[type=checkbox]').each(function() {<br />            alert($(this).val());<br />        });<br />        */<br />    });</script><br>    您的兴趣爱好：<br>    <input type="checkbox">游泳<br>    <input type="checkbox">看书<br>    <input type="checkbox" checked value="打篮球">打篮球<br>    <input type="checkbox" checked value="电脑游戏">电脑游戏


上面的代码，会将所有额checkbox的value输出出来。若你想选择选中项，有三种写法：


$(':checkbox:checked').each(function() {<br>    alert($(this).val());<br>});<br>$('input[type=checkbox][checked]').each(function() {<br>    alert($(this).val());<br>});<br>$(':checked').each(function() {<br>    alert($(this).val());<br>});


5. :submit（取提交按钮元素）


:submit选择器和属性选择器$('input[type=submit]')等同


6. :reset（取重置按钮元素）


:reset选择器和属性选择器$('input[type=reset]')等同


7. :button（取按钮元素）


:button选择器和属性选择器$('input[type=button]')等同


8. :file（取上传域元素）


:file选择器和属性选择器$('input[type=file]')等同


9. :hidden（取不可见元素）


:hidden选择器和属性选择器$('input[type=hidden]')等同


以上就是jQuery选择器的全部内容了，是不是很全面？如有遗漏的，请告之一下，本文持续更新。




声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm	 05:33 PM
实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。
axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm	 06:18 PM
区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。
jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm	 12:19 PM
修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。
jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am	 11:13 AM
增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。
jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm	 07:08 PM
删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。
jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm	 05:35 PM
在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。
jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am	 11:29 AM
on()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。
jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm	 07:55 PM
去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。
See all articles
热AI工具
Undresser.AI Undress
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
Undress AI Tool
免费脱衣服图片
Clothoff.io
Clothoff.io
AI脱衣机
AI Hentai Generator
AI Hentai Generator
免费生成ai无尽的。
显示更多
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库：如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险：如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间？
3 周前ByDDD
R.E.P.O.保存文件位置：在哪里以及如何保护它？
3 周前ByDDD
显示更多
热工具
Dreamweaver CS6
Dreamweaver CS6
视觉化网页开发工具
禅工作室 13.0.1
禅工作室 13.0.1
功能强大的PHP集成开发环境
EditPlus 中文破解版
EditPlus 中文破解版
体积小，语法高亮，不支持代码提示功能
SublimeText3 英文版
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
ZendStudio 13.5.1 Mac
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
显示更多
热门话题
gmail邮箱登陆入口在哪里
7341
9
Java教程
1627
14
CakePHP 教程
1352
46
Laravel 教程
1265
25
PHP教程
1210
29
显示更多