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...
二、选择器API
id$('#app')
/* 如果含有特殊字符 */
$('#app\\:ip') ==> id="app:ip"class$('.class')element$('div')*$('*')
/*匹配全部 */selector1,selector2,selector3$('div,#div,.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+// 匹配指定语言的元素
$('div:lang(en)')
// 选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr">:last// 获取匹配的最后个元素
$('div:last'):lt(index)// 匹配索引小于指定值
//
$('div:lt(4)'):header// 匹配所有的标题元素
// h1 h2 h3 h4 h5 h6
$(":header").css("background", "#EEE");:animated// 匹配所有正在执行动画的元素
<button id="run">Run</button><div></div>
$('div: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)// 匹配包含给定文本的
$('div:contains('join')');:empty()$('div: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内部选择器选中的元素的元素
$('div: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
<div id="n1">
<div 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>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
// <span id="n4">span1</span> <span id="n8" class="abc">span1</span>
// 【2】
$('.abc:first-of-type')
<div id="n1">
<div 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>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
// <div id="n2" class="abc"></div> <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解析原理
相关推荐
89510194 2019-10-19
小仙儿 2015-11-04
yFifhting 2017-07-23
84483065 2019-02-15
nicepainkiller 2019-06-28
80510692 2017-07-23
81423067 2017-04-24
domino 2016-10-21
scjcjlu 2016-09-22
byn0 2016-09-09
Kindlecode 2016-07-07
CaoMary 2016-07-06
handsomezsc 2016-03-26
Haoroid 2016-01-20
jiaojiao0 2015-12-28
天虹 2015-11-04
suis 2015-09-04