jQuery 源码学习 （六） 选择器

头像
Meils
    阅读 9 分钟

    选择器

    一、选择器分类

    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解析原理

    jquery
    Meils
    1.6k 声望157 粉丝

    前端开发实践者

    « 上一篇
    c/c++ 数据结构之—— 查找
    下一篇 »
    jQuery 源码学习 （四） 数据缓冲

    引用和评论

    推荐阅读
    头像
    微信小程序知识点总结（一）

    Meils赞 1阅读 6k

    头像
    jQuery国内大厂CDN加速链接

    TANKING赞 1阅读 989

    0 条评论
    得票最新