jQuery 源碼學習 （六） 選擇器

時間  2019-11-16
標籤 jquery 源碼 學習 選擇器 欄目 JQuery 简体版
原文   原文鏈接

選擇器

1、選擇器分類

jQuery的選擇器和CSS的選擇器很是類似javascript

大體能夠分爲幾類：
基本篩選器： 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...

2、選擇器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

獲取匹配的第一個元素css

$('input:first')
$('ul li:first');

// 捕獲到同類型元素後，在取其第一個
:not(selector)

去除選定的selector那部分html

// 去除已選擇的元素中的部分
$('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-childjava

:last-of-type
:nth-child(n)

n能夠是：
序號、even、odd、（3n+2）
(3n+2)表示從第二個開始，匹配3的倍數的元素app

// 這裏的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) 相似，只是它是從後往前算的url

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 元素spa

<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

:buttoncode

:fileorm

:enabled

選擇可用的元素

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")
// <input name="id" />
:disabled

選擇不能使用的

:checked 
$("input:checked")
:selected 
$('option:selected')

3、css解析原理

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程