这篇文章主要介绍了关于jQuery源码之选择器的学习 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
jQuery的选择器和CSS的选择器非常相似
大致可以分为几类： 基本筛选器： eq get first lang It not odd root... 内容筛选器： contains empty has parent... 可见筛选器： hidden visible 子元素筛选器： first-child nth-child only-child... 表单： bottom checkbox foucs input text...
id
$('#app')
/* 如果含有特殊字符 */
$('#app\\:ip') ==> id="app:ip"class
$('.class')element
$('p')*
$('*')
/*匹配全部 */selector1,selector2,selector3
$('p,#p,.class,span.love')parent selector （祖先和后代的关系）
/* 指定的祖先元素下的所有的后代元素 */
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$('form input')
/* result */
/* [ <input name="name" />, <input name="newsletter" /> ] */parent > child （父亲和儿子的关系）
/* 匹配父元素下的所有的子元素 */
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$('form > input')
/* result */
/* [ <input name="name" /> ] */prev + next （下一个兄弟关系）
/* 匹配所有跟在prev后面的下一个元素 */
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$('label + input')
/* result */
/* [ <input name="name" />, <input name="newsletter" /> ] */prev ~ siblings (下面的所有兄弟元素)
/* 匹配prev后面的所有的兄弟元素 */
<form>
<label id="name">Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
<input name="none" />
<input name="sex" />
</form>
$('#name ~ input')
/* result */
/* <input name="name" />
<input name="none" />
<input name="sex" /> */:first
获取匹配的第一个元素
$('input:first')
$('ul li:first');
// 捕获到同类型元素后，在取其第一个:not(selector)
去除选定的selector那部分
// 去除已选择的元素中的部分
$('input:not(:checked)')
<input name="apple" />
<input name="flower" checked="checked" />
// result
// [ <input name="apple" /> ]:even(index)
// 匹配索引为偶数的，从 0 开始计数（将0包含进even）
// 第 1，3，5，7 行
//
$('tr:even'):odd(index)
// 匹配索引为奇数的 // 第2，4，6，8 行
:eq(index)
// 匹配给定一个索引
$('tr:eq(1)'):gt(index)
// 匹配大于索引值的项
$('tr:gt(1)'):lang(language) 1.9+
// 匹配指定语言的元素
$('p:lang(en)')
// 选择器$("p:lang(en)")将匹配<p lang="en"> and <p lang="en-us">（和他们的后代<p>），但不包括<p lang="fr">:last
// 获取匹配的最后个元素
$('p:last'):lt(index)
// 匹配索引小于指定值
//
$('p:lt(4)'):header
// 匹配所有的标题元素
// h1 h2 h3 h4 h5 h6
$(":header").css("background", "#EEE");:animated
// 匹配所有正在执行动画的元素
<button id="run">Run</button><p></p>
$('p:not(:animated)').animate({
left: '+=20px'
},1000);:focus 1.6+
// 匹配当前获取焦点的元素。
$('input:focus').css("background":"#ccc");:root 1.9+
// 匹配页面的根元素
$(':root').css("background":"yellow");
// 设置<html>背景颜色为黄色:target 1.9+
// 如果url中包含有http://example.com/#foo
$('a:target')
// 就是选中了 <a id="foo"></a>:contains(text)
// 匹配包含给定文本的
$('p:contains('join')');:empty()
$('p:empty')
// 匹配不包含子元素或文本内容
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
$('td:empty')
// [ <td></td>, <td></td> ]:has()
// 匹配含有has内部选择器选中的元素的元素
$('p:has('p')'):parent 与empty相反
// 匹配含有子元素或者文本内容的
$('td:parent')
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
// <td>Value 1</td><td>Value 2</td>:hidden
// 匹配不可见的元素
//
$('input:hidden'):visable
// 匹配可见的元素
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
$('tr:visable')
// <tr><td>Value 2</td></tr> ][attribute]
// 匹配包含给定属性的元素
$('input[name]')[attribute=value]
// 匹配给定的属性是某个特定值的元素
$('input[name="sex"]')[attribute!=value]
[attribute^=vlaue]
// 匹配属性以value开头
[attribute$=value]
// 匹配属性以value结尾
[attribute*=value]
// 匹配属性包含某些值的元素
selector1[selector3]
// 匹配同时满足多个属性选择器的元素
$("input[id][name$='man']"):first-child
// 匹配所给选择器( :之前的选择器)的第一个子元素，最终的结果可能是多个，不同于:first 之处是，:first是指匹配到的元素（：之前的元素）的第一个。
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$('ul li:first-child');
// [ <li>John</li>, <li>Glen</li> ]:first-of-type
// [1]
$('span:first-of-type')
// 匹配到span元素，而且这个span元素是其父级的第一个span
<p id="n1">
<p id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
</p>
<p id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</p>
</p>
// <span id="n4">span1</span> <span id="n8" class="abc">span1</span>
// 【2】
$('.abc:first-of-type')
<p id="n1">
<p id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
</p>
<p id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</p>
</p>
// <p id="n2" class="abc"></p> <span id="n8" class="abc">span1</span>:last-child
同理:first-child
:last-of-type
:nth-child(n)
n可以是：
序号、even、odd、（3n+2）
(3n+2)表示从第二个开始，匹配3的倍数的元素
// 这里的n是从1 开始的，跟:first-child类似
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$('ul li:nth-child(2)')
// <li>Karl</li><li>Tane</li>:nth-last-child(n)
n可以是：
序号、even、odd、（3n+2）
(3n+2)表示从第二个开始，匹配3的倍数的元素
跟:nth-child(n) 类似，只是它是从后往前算的
only-child
// 如果某个元素是父元素中唯一的子元素，那将会被匹配
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
$('ul li:only-child')
// <li>Glen</li>:input
匹配所有 input, textarea, select 和 button 元素
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
// 全选$(':input'):text
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(':text')
// <input type="text" />:password
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(':password')
// <input type="password" />:radio
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(':radio')
// <input type="radio" />:submit
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(':submit')
// <input type="submit" />:image
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(':image')
// <input type="image" />:reset:button
:file
:enabled
选择可用的元素
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled")
// <input name="id" />:disabled
选择不能使用的
:checked
$("input:checked"):selected
$('option:selected')以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Atas ialah kandungan terperinci jQuery源码之选择器的学习. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah pemalam jquery?
Bagaimana untuk mengendalikan json dengan jquery
Bagaimana untuk memadam elemen dalam jquery
Penggunaan kaedah jQuery hover().
jquery melaksanakan kaedah paging
Apakah elemen tersembunyi dalam jquery
Apa yang ditonjolkan dalam jquery
Apakah yang dimaksudkan dengan rangkaian mesh?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
