这篇文章主要介绍了关于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...
二、选择器apiid$('#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')
三、css解析原理以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
jquery源码之数据缓冲的学习
jquery源码之异步机制的解析
以上就是jquery源码之选择器的学习的详细内容。