常見用法

$(’.demo’)： 按類搜索
$(’#demo’)：按ID搜索

優勢

防止 undefined 錯誤

//假設當前網頁中沒有ID為id的元素，$('#id')只是返回一個簡單的jQuery實例，后面的鏈式操作靜默失敗， //絕不會發生錯誤，相反如果你使用document.getElementById('id')，則會返回undefined，后面無法進行鏈式操作 $('#id').css('color', 'red')

基本選擇器

選擇器描述示例

#id	根據id匹配一個元素	$(’#id) 選擇ID為id的單個元素
.class	根據給定的類名匹配元素	$(’.text’) 選擇所有class為text的所有元素
element	根據給定的元素名匹配元素	$(‘p’) 選擇所有的<p>元素
*	匹配所有元素	$(’*’) 選擇所有的元素
selector1, selector2, …selectorN	將每一個選擇器匹配到的元素合并后一起返回	$(‘div, span, p.myClass’) 選擇所有<div>,<span>,以及class為myClass的p元素

層次選擇器

選擇器描述示例

$(‘ancestor descendant’)	選擇ancestor元素里的所有descendant(后代)元素	$(‘div span’)選擇<div>里的所有的<span>元素
$(‘parent > child’)	選擇parent元素下的直接子元素child	$(‘div>span’)選擇<div>元素下的直接<span>子元素
$(‘prev+next’)	選擇緊接在prev元素后的next元素	$(’.one+div’)選擇class為one的后面的兄弟元素<div>
$(‘prev ~ siblings’)	選擇prev元素之后的所有siblings元素	$(’#two~div’)選擇id為two的元素后面的所有<div>同輩元素

選擇器與 jQuery中的等價方法

在jQuery中的源代碼文件src\traversing.js中，可以看到如下幾個方法：

jQuery.each( {parent: function( elem ) {var parent = elem.parentNode;return parent && parent.nodeType !== 11 ? parent : null;},....

上面這些方法就是用來遍歷元素的，通常與層次選擇器有關聯，我們先來分析一下這些常用的方法是怎么使用的。
先來一個demo文件吧。

<div class="one" id="one" >id為one,class為one的div<div class="mini">class為mini</div> </div><div class="one" id="two" title="test" >id為two,class為one,title為test的div.<div class="mini" title="other">class為mini,title為other</div><div class="mini" title="test">class為mini,title為test</div> </div><div class="one"><div class="mini">class為mini</div><div class="mini">class為mini</div><div class="mini">class為mini</div><div class="mini"></div> </div><div class="one"><div class="mini">class為mini</div><div class="mini">class為mini</div><div class="mini">class為mini</div><div class="mini" title="tesst">class為mini,title為tesst</div> </div>

parent()方法

// 找到class是mini的所有元素的父元素 $('.mini').parent();

一共有4個父元素，都是div元素：

我們看一下parent()是怎么執行的：

//在這里把對應的方法全部添加到了jQuery.fn中去，也就是變成jQuery實例方法了 }, function( name, fn ) {jQuery.fn[ name ] = function( until, selector ) {//until，selector參數都是undefined，在jQuery.map()中會調用fn()函數，也就是我們文件中的// parent方法var matched = jQuery.map( this, fn, until );

在core.js中可以看到jQuery.map方法的實現：

// arg is for internal usage onlymap: function( elems, callback, arg ) {var length, value,i = 0,ret = [];// Go through the array, translating each of the items to their new valuesif ( isArrayLike( elems ) ) {length = elems.length;for ( ; i < length; i++ ) {// 就是針對當前jQuery實例$('.mini')中的每個網頁元素遍歷調用callback方法，其實也就是// parent()方法，并且把結果存儲起來value = callback( elems[ i ], i, arg );

看一下parent方法：

parent: function( elem ) {//很簡單，直接調用元素的parentNode屬性，如果類型不是DocumentFragment,就直接返回，否則返回nullvar parent = elem.parentNode;return parent && parent.nodeType !== 11 ? parent : null; },

所以最后的操作結果就是4個div元素。

我們還可以加個過濾，比如只取parent中id為two的元素：

$('.mini').parent('#two');

結果只有一個：

這時候看一下parent()方法怎么執行的：

}, function( name, fn ) {//參數until為'#two', selector為undefinedjQuery.fn[ name ] = function( until, selector ) {var matched = jQuery.map( this, fn, until );// selector變成'#two'if ( name.slice( -5 ) !== "Until" ) {selector = until;}// 針對selector為"#two"，對結果進行過濾，這樣就把4個結果變成了1個結果if ( selector && typeof selector === "string" ) {matched = jQuery.filter( selector, matched );}

parents()方法

這個方法是查找某個元素的所有祖先元素：

$('.mini').parents();

看一下結果，多了2個元素，分別是body, html元素：

parents實現如下：

parents: function( elem ) {//遞歸調用parentNode屬性return dir( elem, "parentNode" ); }, // src\traversing\var\dir.js export default function( elem, dir, until ) {var matched = [],truncate = until !== undefined;//只要父結點不是Document類型，而且結點類型是元素，就加入進來while ( ( elem = elem[ dir ] ) && elem.nodeType !== 9 ) {if ( elem.nodeType === 1 ) {if ( truncate && jQuery( elem ).is( until ) ) {break;}matched.push( elem );}}return matched; }

你也可以傳入參數，對結果進行再過濾。

上面兩個方法只是拋磚引玉，這樣你了解了上面方法的使用，其他方法的使用也就會了。
有些層次選擇器可以找到對應的方法調用：

選擇器等價方法

$(’.one + div’)	$(’.one’).next(‘div’)
$(’#prev~div’)	$(’#prev’).nextAll(‘div’)

選擇過濾器

基本過濾選擇器

選擇器描述返回示例

:first	選取第1個元素	單個元素	$(‘div:first’)選取所有<div>元素中的第1個<div>元素
:last	選擇最后1個元素	單個元素	$(‘div:last’)選取所有<div>元素中的最后1個<div>元素
:not(selector)	去除所有與給定選擇器匹配的元素	集合元素	$(‘input:not(.myClass)’)選擇class不是myClass的所有<input>元素
:even	選取索引是偶數的所有元素，索引從0開始	集合元素	$(‘input:even’)選取索引是偶數的<input>元素
:odd	選取索引是奇數的所有元素，索引從0開始	集合元素	$(‘input:odd’)選取索引是奇數的<input>元素
:eq(index)	選取索引等于index的元素(index從0開始)	單個元素	$(‘input:eq(1)’)選取索引等于1的<input>元素
:gt(index)	選取索引大于index的元素(index從0開始)	集合元素	$(‘input:gt(1)’)選取索引大于1的<input>元素(注：大于1，而不包括1)
:lt(index)	選取索引小于index的元素(index從0開始)	集合元素	$(input:lt(1)’)選取索引小于1的<input>元素(注：小于1，而不包括1)
:header	選取所有的標題元素，如h1, h2, h3等等	集合元素	$(’:header’)選擇網頁中所有的<h1>, <h2>,<h3>…
:animated	選取當前正在執行動畫的元素	集合元素	$(‘div:animated’)選取正在執行動畫的<div>元素
:focus	選取當前獲取焦點的元素	集合元素	$(’:focus’)選取當前獲取焦點的元素

內容過濾選擇器

選擇器描述返回示例

:contains(text)	選取含有文本內容為"text"的元素	集合元素	$(‘div:contains(‘我’)’)選取含有文本"我"的<div>元素
:empty	選取不包含子元素或者文本的空元素	集合元素	$(‘div:empty’)選取不包含子元素(包括文本元素)的<div>空元素
:has(selector)	選取含有選擇器匹配的元素的元素	集合元素	$(‘div:has§’)選取含有<p>元素的<div>元素
:parent	選取含有子元素或者文本的元素	集合元素	$(‘div:parent’)選取擁有子元素(包括文本元素)的<div>元素

可見性過濾選擇器

選擇器描述返回示例

:hidden	選取所有不可見的元素	集合元素	$(’:hidden’)選擇所有不可見的元素。包括<input type=“hidden”/>，<div style=“display:none;”>和<div style=“visibility:hidden”>等元素。如果只想選取<input>元素，可以使用$(‘input:hidden’)
:visible	選取所有可見的元素	集合元素	$(‘div:visible’)選取所有可見的<div>元素

屬性過濾選擇器

選擇器描述返回示例

[attribute]	選取擁有此屬性的元素	集合元素	$(‘div[id]’)選取擁有屬性id的<div>元素
[attribute=value]	選取屬性的值為value的元素	集合元素	$(‘div[title=test]’)選取屬性title為’test’的’<div>元素
[attribute!=value]	選取屬性的值不等于value的元素	集合元素	$(‘div[title!=test]’)選取屬性title不等于’test’的<div>元素（注意：沒有屬性title的<div>元素也會被選取）
[attribute^=value]	選取屬性的值以value開頭的元素	集合元素	$("div[title^=test]’)選取屬性title以’test’開頭的<div>元素
[attribute$=value]	選取屬性的值以value結尾的元素	集合元素	$(‘div[title$=test]’)選取屬性title以’test’結尾的<div>元素
[attribute*=value]	選取屬性的值含有value的元素	集合元素	$(‘div[title*=test]’)選取屬性title含有’test’的<div>元素
[attribute|=value]	選取屬性等于給定字符串或以該字符串為前綴(該字符串后跟一個連字符"-")的元素	集合元素	$(‘div[title|=en]’)選取屬性title等于en或以en為前綴(該字符串后跟一個連字符"-")的元素
[attribute~=value]	選取屬性用空格分隔的值中包含一個給定值的元素	集合元素	$(‘div[title~=uk]’)選取屬性title用空格分隔的值中包含字符uk的元素
[attribute][attribute2][attributeN]	用屬性選擇器合并成一個復合屬性選擇器，滿足多個條件。每選擇一次，縮小一次范圍	集合元素	$(‘div[id][title$=test]’)選取擁有屬性id，并且title屬性值以’test’結尾的<div>元素

子元素過濾選擇器

選擇器描述返回示例

:nth-child(index/even/odd/equation)	選取每個父元素下的第index個子元素或者奇偶元素(index從1算起)	集合元素	:eq(index)只匹配一個元素，而:nth-child將為每一個父元素匹配子元素，并且 :nth-child(index)的index是從1開始的，而:eq(index)是從0算起的
:first-child	選取每個父元素的第1個子元素	集合元素	:first只返回單個元素，而:first-child選擇符將為每個父元素匹配第1個子元素。例如$(‘ul li:first-child’)選擇第個<ul>中第一個<li>元素
:last-child	選取每個父元素的最后一個子元素	集合元素	同樣，:last只返回單個元素，而:last-child選擇符將為每個父元素匹配最后一個子元素。例如$(‘ul li:last-child’)選擇每個<ul>中最后一個<li>元素
:only-child	如果某個元素是它父元素中惟一的子元素，那么將會被匹配。如果父元素中含有其他元素，則不會被匹配	集合元素	$(‘ul li:only-child’)，在<ul>中選擇是唯一子元素的<li>元素

表單對象屬性過濾選擇器

選擇器描述返回示例

:enabled	選取所有可用元素	集合元素	$(’#form1 :enabled’)選擇id為‘form1‘ 表單內的所有可用元素
:disabled	選取所有不可用元素	集合元素	$(’#form2 :disabled’)選取id為’form2’的表單內的所有不可用元素
:checked	選取所有被選中的元素(單選框，復選框)	集合元素	$(‘input:checked’)選擇所有被選中的<input>元素
:selected	選擇所有被選中的選項元素(下拉列表)	集合元素	$(‘select option:selected’)選取所有被選中的選項元素

表單選擇器

選擇器描述返回示例

:input	選取所有的<input>、<textarea>、<select>和<button>元素	集合元素	$(’:input’)選擇所有的<input>、<textarea>、<select>和<button>元素
:text	選擇所有的單行文本框	集合元素	$(’:text’)選取所有的單行文本框
:password	選取所有的密碼框	集合元素	$(’:password’)選取所有的密碼框
:radio	選取所有的單選框	集合元素	$(’:radio’)選取所有的單選框
:checkbox	選取所有的多選框	集合元素	$(’:checkbox’)選取所有的復選框
:submit	選取所有的提交按鈕	集合元素	$(’:submit’)選取所有的提交按鈕
:image	選取所有的圖像按鈕	集合元素	$(’:image’)選取所有的圖像按鈕
:reset	選取所有的重置按鈕	集合元素	$(’:reset’)選取所有的重置按鈕
:button	選取所有的按鈕	集合元素	$(’:button’)選取所有的按鈕
:file	選取所有的上傳域	集合元素	$(’:file’)選取所有的上傳域
:hidden	選取所有不可見元素	集合元素	$(’:hidden’)選取所有不可見元素

總結

以上是生活随笔為你收集整理的《锋利的jQuery》笔记 第2章 jQuery选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。