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')

jQuery 源码学习（六）选择器

选择器

一、选择器分类

二、选择器API

三、css解析原理

Meils

引用和评论

微信小程序知识点总结（一）

采用测试驱动开发理念(Test Driven Development)进行 SAP UI5 应用的功能开发(二)试读版

jQuery 源码学习 （六） 选择器

选择器

一、选择器分类

二、选择器API

三、css解析原理

Meils

引用和评论

微信小程序知识点总结（一）

采用测试驱动开发理念(Test Driven Development)进行 SAP UI5 应用的功能开发(二)试读版

jQuery 源码学习（六）选择器