jQuery选择器

学习jQuery的过程之中发现的不错的两个关于jQuery的选择器的教程，转载过来，方便以后查阅。

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

一、基本选择器

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

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

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

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

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

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

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

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

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

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

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

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><div>123</div><div>456</div><span class="item"></span><div>789</div>

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

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

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

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

---

三、 过滤选择器

1. 基本过滤选择器

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

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

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

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

——1.2 :not（取非元素）

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

下面的代码，G1会变色

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

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

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

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

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

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

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

<table width="200" cellpadding="0" cellspacing="0">    <tbody>        <tr><td>A</td></tr>        <tr><td>B</td></tr>        <tr><td>C</td></tr>        <tr><td>D</td></tr>    </tbody></table>

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

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

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

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

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

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

<ul>    <li>L1</li>    <li>L2</li>    <li>L3</li>    <li>L4</li>    <li>L5</li></ul>

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

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

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

<h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6>

2. 内容过滤选择器

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

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

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

<dl>    <dt>技术</dt>    <dd>jQuery, .NET, CLR</dd>    <dt>SEO</dt>    <dd>关键字排名</dd>    <dt>其他</dt>    <dd></dd></dl>

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

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

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

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

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

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

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

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

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

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

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

3. 可见性过滤选择器

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

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

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

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

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

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

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

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

4. 属性过滤选择器

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

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

<script type="text/javascript">        $(document).ready(function() {            $('a[title]').css('text-decoration', 'none');       });    </script>           <ul>        <li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>        <li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>        <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>        <li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>        <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>        <li><a href="#" class="item">其他</a></li>    </ul>

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

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

jQuery选择器

jQuery选择器

一、基本分类

jQuery选择器大致可以分为两类，基本选择器和过滤选择器,总体结构体系如下:

二、基本选择器

　　基本选择器又可以分为三种,分别为

• CSS选择器
• 层级选择器
• 表单域选择器

2.1 CSS选择器

jQuery借用一套CSS选择器，共5种。

CSS选择器（链接：http://www.cnblogs.com/qinwang913/p/3443766.html）

2.1.1 标签选择器

　　用于选择HTML页面已有的标签元素，也称元素选择器。

　　格式： $("element");

　　例： $("div")

2.1.2 ID选择器

　　用于获取某个具有ID属性的元素。

　　格式： $("id")

　　例：　　$("#test").val();

2.1.3 类选择器

　　获取某个具有class属性的元素。

　　格式：$("class")

　　例： $(".t").css("border","2px solid blue");

2.1.4 通用选择器

　　通用选择器（*）匹配所有元素，多用于结合上下文来搜索。

　　格式：$("*")

　　例：$("*").css("color","red");

2.1.5 群组选择器

　　又称多元素选择器，用于选择所有指定的选择器组合的结果。

　　格式：$("selector,selector2,......,selectorN")

　　例： $("div,span,p.styleClass").css("border","2px solid blue");

2.2 层级选择器

在HTML方档中，每个元素总是处在DOM节点树上的某个位置，文档层次结构中元素之间总是存在着某种层级关系。

2.2.1 子元素选择器

　　用于在给定的父元素下查找其下面的所有子元素。

　　格式：$("parent>child")

　　例：$("form > input");

　　　　匹配form表单中所有的子级input元素。

2.2.2 后代选择器

　　用于在给定的祖先元素下匹配所有的后代元素。

　　格式：$("ancestor descendant")

　　例：$("form input");

　　　　查找form元素的后代元素中为input的标记。

2.2.3 紧邻同辈选择器

　　用于匹配所有紧接在某元素后的第一个元素。

　　格式：$("prev+next")

　　例：$("div+span");

　　　　匹配所有跟在div后的span元素。

2.2.4 相邻同辈选择器

　　用于匹配某元素后面的所有同辈元素。

　　格式：$("prev~slblings")

　　例：$("input~p").css("color","red");

2.3 表单域选择器

表单域指网页中的input,textareaselect,button元素。jQuery 表单域选择器专门用于从文档中选择表单域。

2.3.1 :input选择器

　　用于选择所有input,textareaselect,button元素。

　　格式：$(":input")

2.3.2 :text选择器

　　用于选择所有单行文本框(<input type="text"/>)。

　　格式：$(":text")

2.3.3 :password选择器

　　用于选择所有密码框(<input type="password"/>)。

　　格式：$(":password")

2.3.4 :radio选择器

　　用于选择所有单选按钮(<input type="radio"/>)。

　　格式：$(":radio")

2.3.5 :chckbox选择器

　　用于选择所有复选框(<input type="chckbox"/>)。

　　格式：$(":chckbox")

2.3.6 :file选择器

　　用于选择所有文件域(<input type="file"/>。

　　格式：$(":file")

2.3.7 :image选择器

　　用于选择所有图像域(<input type="image"/>)。

　　格式：$(":image")

2.3.8 :hidden选择器

　　用于选择所有不可见元素(<input type="hidden"/>)。

　　格式：$(":hidden")

2.3.9 :button选择器

　　用于选择所有按钮(<input type="button"/>和<button>···</button>)。

　　格式：$(":button")

2.3.10 :submit选择器

　　用于选择所有提交按钮(<input type="submit"/>和<button>···</button>)。

　　格式：$(":submit")

2.3.11 :reset选择器

　　用于选择所有重置按钮(<input type="reset"/>)。。

　　格式：$(":reset")

三、过滤选择器

过滤选择器可以使用元素的索引值，内容，属性，子元素位置，表单域属性以及可见性作为筛选条件获取相关元素。

3.1简单过滤选择器

根据索引值对元素进行筛选，类似于CSS的伪类选择器，以冒号（：）开头；并且要和另一选择器一起使用。

3.1.1 :first选择器

　　对当前jQuery集合进行过滤并选择出第一个匹配元素。

　　格式：$(":selector:first")

　　例： $("td:first").css("border","2px solid blue");

　　　　将第一列的边框颜色设置为蓝色。

3.1.2 :last选择器

　　对当前jQuery集合进行过滤并选择出最后一个匹配元素。

　　格式：$(":selector:last")

3.1.3 :odd选择器

　　用于选择索引为奇数（从0开始计数）的所有元素。

　　格式：$(":selector:odd")

3.1.4 :even选择器

　　用于选择索引为偶数（从0开始计数）的所有元素。

　　格式：$(":selector:even")

3.1.5 :eq()选择器

　　用于从匹配的集合中选择索引等于给定值的元素。

　　格式：$(":selector:eq(index)),index 为指定元素在selector集合中的索引值（从0开始计数）

3.1.6 :gt()选择器

　　用于从匹配的集合中选择索引大于给定值的所有元素。

　　格式：$(":selector:gt(index)),index 为指定元素在selector集合中的索引值（从0开始计数），只有索引值大于此值的元素才会包含在查询结果中。

3.1.7 :lt()选择器

　　用于从匹配的集合中选择索引小于给定值的所有元素。

　　格式：$(":selector:lt(index)),index 为指定元素在selector集合中的索引值（从0开始计数），只有索引值小于此值的元素才会包含在查询结果中。

3.1.8 :not选择器

　　用于从匹配的集合中去除与给定选择器匹配的元素。

　　格式：$(":selector1:not(selector2)),其中selector1,selector2为任意有效的选择器,使用:not()选择器时， 将selector1匹配的集合中去掉 selector2匹配的所有元素。

　　例：$("td:not(:first,:last)").css("background","#FCF")

3.1.9 :header选择器

　　用于选择所有诸如h1,h2,h3之类的标题元素。

　　格式：$(":header")

3.1.10 :animated选择器

　　用于选择所有正在执行动画效果的元素。

　　格式：$("selector:animated")

3.2内容过滤选择器

在HTML文档中，元素的内容可以是文本或子元素。

3.2.1:contains()选择器

　　用于选择包含给定文本的所有元素。

　　格式：$("selector:contains(text)")

3.2.2: has()选择器

　　用于选择包含给定子元素的元素。

　　格式：$("selector1:has(selector2)"),selector1，selector2为任意有效的选择器。

3.2.3 :empty选择器

　　用于选择不包含子元素或者文本的所有空元素。

　　格式：$("selector:empty）

3.2.4 :parent选择器

　　用于选择包含子元素或者文本的所有空元素，与：empty选择器作用相反。

　　格式：$("selector:parent(")

3.3简单过滤选择器

在HTML文档中，元素的开始标记中通常包含多个属性，根据各种属性对由选择器查询到的元素进行过滤。

属性过滤选择器包含在中括号“[]”中。

语法格式：“选择器[属性过滤选择器]”，可根据是否包含指定属性或根据属性值从查询到的元素进行筛选。

　3.3.1 包含属性选择器

　　用于选择包含给定属性的所有元素。

　　格式：$("selector[attribute]")

　　　例：　$("div[id]")

　　　　　　从文档中选择包含id属性的div元素。

　3.3.2 属性等于选择器

　　用于选择给定属性等于某特定值的的所有元素。

　　格式：$("selector[attribute=value]")

　　　例：$("input[name=accept]").attr("checked","true");

　3.3.3 属性包含选择器

　　用于选择给定属性值包含给定子字符串的所有元素。

　　格式：$("selector[attribute*=value]")

　　　例：$("input[name*='news']").val("name 中包含news 的元素");

　3.3.4 属性包含单词选择器

　　用于选择指定属性中包含给定单词（由空格分隔）的元素。

　　格式：$("selector[attribute~=value]")

　　例：$("input[name~='news']").val("name 中包含news单词的元素");

　3.3.5 属性不等于选择器

　　用于选择不包含给定属性，或者包含指定属性但该属性不等于某个值的所有元素。

　　格式：$("selector[attribute!=value]")

　3.3.6 属性开始选择器

　　用于选择包含给定属性是以某特定值开始的所有元素。

　　格式：$("selector[attribute^=value]")

　3.3.7 属性结尾选择器

　　用于选择包含给定属性是以某个给定值结尾的所有元素。

　　格式：$("selector[attribute$=value]")

　3.3.8 复合属性选择器

　　用于选择同时满足多个条件的所有元素。

　　格式：$("selector[selector1][selector2]....[selectorN]")

　　　例：$("input[id][name^='news’]").val(“选择包含id属性且name属性以news开头的文本框”);

3.4子元素过滤选择器

子元素过滤选择器必须与某个选择器一起使用，得到一个父元素数组，然后再按照子元素过滤选择器指定的索引值或规则进一步筛选出部分子元素。

3.4.1 :first-child选择器

　　用于选择其父级的第一个子元素的所有元素。

　　格式：$("selector:first-child")

　　　例：$("ul:first-child").css("text-decoration","underline");

　　　　第一个列表的文本都被添加下划线。

3.4.2 :last-child选择器

　　用于选择其父级的最后一个子元素的所有元素。

　　格式：$("selector:last-child")

3.4.3 :nth-child选择器

　　用于选择其父级的第N个子元素或奇偶的所有元素。

　　格式：$("selector:nth-child(index/even/odd/equation)")

3.4.4 :only-child选择器

　　用于选择某元素的唯一选择。

　　格式：$("selector:only-child")

3.5表单过滤选择器

表单中包含各种表单域。其结构分类如下：

　

3.5.1:checked选择器

　　用于选择所有被选中的表单域。

　　格式：$("selector:checked")

　　　　　　选择器可指定要查找的元素类型，可以是input(单选按钮和复选框),:radio(单选按扭) :checkbox(复选框)

3.5.2:enabled选择器

　　用于选择所有可用的表单域。

　　格式：$("selector:enabled")

3.5.3:disabled选择器

　　用于选择所有被禁用的表单域。

　　格式：$("selector:disabled")

3.5.4:selected选择器

　　用于选择从列表框选择所有选中的option元素。

　　格式：$("selector:selected")

3.6可见性过滤选择器

如果某元素及其父元素在文档中占用空间，则认为该元素为可见；反之，则此元素不可见。

3.6.1:hidden选择器

　　用于选择所有的不可见元素。

　　格式：$("selector:hidden")

　　　　　　selector为任意有效选择器。

3.6.1:visible选择器

　　用于选择所有的可见元素。

　　格式：$("selector:visible")

　　　　selector为任意有效选择器。

四、总结

至此，关于CSS选择器和jQuery选择器的知识小结终于结束了，很释然，很快乐，给自己的知识作个整理，也将这些分享给每个需要的人，大家一起加油努力。

JQuery选择器大全

jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法

$("#myELement")    选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 

$("div")           选择所有的div标签元素，返回div元素数组 

$(".myClass")      选择使用myClass类的css的所有元素 

$("*")             选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")

层叠选择器： 

$("form input")         选择所有的form元素中的input元素 

$("#main > *")          选择id值为main的所有的子元素 

$("label + input")     选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 

$("#prev ~ div")       同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器： 

$("tr:first")               选择所有tr元素的第一个 

$("tr:last")                选择所有tr元素的最后一个 

$("input:not(:checked) + span")  

过滤掉：checked的选择器的所有的input元素

$("tr:even")               选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）

$("tr:odd")                选择所有的tr元素的第1，3，5... ...个元素 

$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素 

$("td:gt(4)")             选择td元素中序号大于4的所有td元素 

$("td:lt(4)")              选择td元素中序号小于4的所有的td元素 

$(":header")            选择h1、h2、h3之类的

$("div:animated")     选择正在执行动画效果的元素

内容过滤选择器：

$("div:contains('John')") 选择所有div中含有John文本的元素 

$("td:empty")           选择所有的为空（也不包括文本节点）的td元素的数组 

$("div:has(p)")        选择所有含有p标签的div元素 

$("td:parent")          选择所有的以td为父节点的元素数组 

可视化过滤选择器：

$("div:hidden")        选择所有的被hidden的div元素 

$("div:visible")        选择所有的可视化的div元素 

属性过滤选择器：

$("div[id]")              选择所有含有id属性的div元素 

$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素

$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素

$("input[name^='news']")         选择所有的name属性以'news'开头的input元素 

$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素 

$("input[name*='man']")          选择所有的name属性包含'news'的input元素

$("input[id][name$='man']")    可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器：

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("div span:first-child")          返回所有的div元素的第一个子节点的数组 

$("div span:last-child")           返回所有的div元素的最后一个节点的数组 

$("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器：

$(":input")                  选择所有的表单输入元素，包括input, textarea, select 和 button

$(":text")                     选择所有的text input元素 

$(":password")           选择所有的password input元素 

$(":radio")                   选择所有的radio input元素 

$(":checkbox")            选择所有的checkbox input元素 

$(":submit")               选择所有的submit input元素 

$(":image")                 选择所有的image input元素 

$(":reset")                   选择所有的reset input元素 

$(":button")                选择所有的button input元素 

$(":file")                     选择所有的file input元素 

$(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器：

$(":enabled")             选择所有的可操作的表单元素 

$(":disabled")            选择所有的不可操作的表单元素 

$(":checked")            选择所有的被checked的表单元素 

$("select option:selected") 选择所有的select 的子元素中被selected的元素

 

选取一个 name 为”S_03_22″的input text框的上一个td的text值

$(”input[@ name =S_03_22]“).parent().prev().text()

名字以”S_”开始，并且不是以”_R”结尾的

$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)

一个名为 radio_01的radio所选的值

$(”input[@ name =radio_01][@checked]“).val();

 

 

$("A B") 查找A元素下面的所有子节点，包括非直接子节点

$("A>B") 查找A元素下面的直接子节点

$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点

$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点

1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点

例子：找到表单中所有的 input 元素

HTML 代码:

<form><label>Name:</label><input name="name" /><fieldset>      <label>Newsletter:</label>      <input name="newsletter" /></fieldset></form><input name="none" />

jQuery 代码:

$("form input") 

结果:

[ <input name="name" />, <input name="newsletter" /> ]

2. $("A>B") 查找A元素下面的直接子节点 

例子：匹配表单中所有的子级input元素。

HTML 代码:

<form><label>Name:</label><input name="name" /><fieldset>      <label>Newsletter:</label>      <input name="newsletter" /></fieldset></form><input name="none" />

jQuery 代码:

$("form > input") 

结果:

[ <input name="name" /> ]

3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点 

例子：匹配所有跟在 label 后面的 input 元素

HTML 代码:

<form><label>Name:</label><input name="name" /><fieldset>      <label>Newsletter:</label>      <input name="newsletter" /></fieldset></form><input name="none" /> 

 jQuery 代码:

$("label + input") 

结果:

[ <input name="name" />, <input name="newsletter" /> ]

 

4. $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点 

例子：找到所有与表单同辈的 input 元素

HTML 代码:

<form><label>Name:</label><input name="name" /><fieldset>      <label>Newsletter:</label>      <input name="newsletter" /></fieldset></form><input name="none" /> 

jQuery 代码:

$("form ~ input") 

结果:

[ <input name="none" /> ]