2017年2月14日
jQuery無疑是前端最重要的開源項目，全世界有70%左右的網(wǎng)站都在使用它。它會前端開發(fā)者封裝了很多原生dom操作方法以及ajax。學好jQuery是成為優(yōu)秀前端工程師必備技能。今天來了解一下jQuery選擇器的概念。
Dom對象與jQuery對象
在實際編碼過程中，我們常常會對Dom對象和jquery對象感到困惑，常常會遇到XXX.YYY() is not a function的報錯，主要原因就是Dom對象去訪問jquery中的方法導致的，因此有必要先對這兩個對象做一個區(qū)分
1.Dom對象
DOM（Document Object Model）文檔對象模型，是可以訪問當前文檔的API合集，利用它可以訪問到文檔中的node和element。那么document.getElementById()一定不會陌生吧， 傳統(tǒng)我們選取一個元素通常這樣做：
var divDom = document.getElementById('testDiv');
var pDoms = document.getElementByTagName('p');
我們經(jīng)常使用 document.getElementById 方法根據(jù)id獲取單個Dom對象, 或者使用document.getElementsByTagName 方法根據(jù)HTML標簽名稱獲取Dom對象集合.
Dom對象封裝很多可用的方法，具體方法可點擊查看更多
2.jQuery對象
jquery對象是對Dom對象的一種擴充。在jQuery中，所有對象，無論是一個還是多個，都會被包裝成一個jQuery包裝集（它是一個數(shù)組）。比如，jquery獲取僅有一個元素的包裝集：
var $dom = $('#mydiv')
jquery包裝集都是作為一個對象來調(diào)用，jquery封裝了很多特有的API，可供開發(fā)者使用
3.Dom對象和jQuery對象的轉(zhuǎn)換
（1）Dom對象轉(zhuǎn)jQuery對象
使用jquery的選擇器帶入jquery構(gòu)造函數(shù)可以很方便的直接獲得jquery對象，如獲取頁面上某個id的p：
var $p = $('#article_title')
以上代碼$p就是包含一個元素的jquery包裝集
習慣上，我們使用
$符打頭的變量來表示jquery包裝集
如果我們已經(jīng)有了一個Dom對象，如：
var divDom = document.getElementById('testDiv');
那么我們可以直接將dom對象傳入到jquery構(gòu)造函數(shù)中就可以了：
var $div = $(divDom)
（2）jquery包裝集轉(zhuǎn)換為dom對象
首先，我們必須明確jQuery包裝集是一個集合，不管它包含了多少個元素，因此我們可以通過索引器來訪問其中的元素：
var pDom = $('.title')[0]
注意, 通過索引器返回的不再是jQuery包裝集, 而是一個Dom對象!
jQuery包裝集的某些遍歷方法,比如each()中, 可以傳遞遍歷函數(shù), 在遍歷函數(shù)中的this也是Dom元素,比如:
$("#testDiv").each(function() { alert(this) })
如果我們需要在循環(huán)體中繼續(xù)使用jquery對象怎么辦？那么就需要繼續(xù)傳到jquery構(gòu)造函數(shù)中了：
$("#testDiv").each(function() { $(this).html("blablabla") })
我們在編碼過程中，常常會因為dom對象與jquery對象的轉(zhuǎn)換導致一些問題，理清它們之間的區(qū)別有助于我們更快更好的編碼
jQuery構(gòu)造函數(shù)
jQuery構(gòu)造函數(shù)以四種方式存在
（1）jQuery([selector[, context]])
這個函數(shù)接收一個包含 CSS 選擇器的字符串，然后用這個字符串去匹配一組元素。（jquery包裝集）
默認情況下, 如果沒有指定context參數(shù)，$()將在當前的 HTML document中查找 DOM 元素；如果指定了 context 參數(shù)，如一個 DOM 元素集或 jQuery 對象，那就會在這個 context 中查找。在jQuery 1.3.2以后，其返回的元素順序等同于在context中出現(xiàn)的先后順序。
jQuery()返回一個空的jquery對象
這是jQuery中最重要的函數(shù)，幾乎所有的操作都是依賴這個構(gòu)造函數(shù)進行的。
（2）jQuery(elements)
將一個或多個Dom對象封裝jQuery函數(shù)功能(即封裝為jQuery包裝集)
（3）jQuery(html,[ownerDocument])
根據(jù)提供的原始 HTML 標記字符串，動態(tài)創(chuàng)建由 jQuery 對象包裝的 DOM 元素。同時設置一系列的屬性、事件等。
（4）jQuery(callback)
$(document).ready()的簡寫。
選擇器
jquery主要有四類的選擇器：基本選擇器、層疊選擇器、過濾選擇器以及表單選擇器
jquery選擇器返回都是jquery對象數(shù)據(jù)集
可以訪問jquery文檔查看詳情
1.基本選擇器
通過標簽的id、class、name等基本屬性完成標簽選擇
$('#id')
$('.className')
$('div')
$('selector1,selector2...')
2.層疊選擇器
通過dom的層級關(guān)系完成選擇
$('parent > child') // 選擇所有指定“parent”元素中指定的"child"的**直接**子元素。
$('ancestor descendant') // 選擇給定的祖先元素的所有后代元素。
$('prev + next') // 選擇所有**緊接**在 “prev” 元素后的 “next” 元素
$('prev ~ siblings') // 匹配 “prev” 元素之后的所有 兄弟元素。具有相同的父元素，并匹配過濾“siblings”選擇器。
3.過濾選擇器
可以配合使用 .filter(selector) 提高性能
// 基本篩選
:animated // 所有正在執(zhí)行動畫的元素
:eq(index) // 在匹配的集合中選擇索引值為index的元素。
:gt(index) // 選擇匹配集合中所有大于給定index（索引值）的元素。
:lt(index) // 選擇匹配集合中所有索引值小于給定index參數(shù)的元素。
:even // 選擇索引值為偶數(shù)的元素，從 0 開始計數(shù)。
:odd // 選擇索引值為奇數(shù)元素，從 0 開始計數(shù)。
:first // 選擇第一個匹配的DOM元素。
:header // 選擇所有標題元素，像h1, h2, h3 等.
:lang() // 選擇指定語言的所有元素。
:last // 選擇最后一個匹配的元素。
:not(selector) // 選擇所有元素去除不匹配給定的選擇器的元素。
:root // 選擇該文檔的根元素。=> <html>
:target // 選擇由文檔URI的格式化識別碼表示的目標元素。
:hidden // 選擇所有隱藏的元素。
:visible // 選擇所有可見的元素。
// 內(nèi)容篩選
:contains(text) // 選擇所有包含指定文本的元素。
:empy // 選擇所有沒有子元素的元素（包括文本節(jié)點）。
:has(selector) // 選擇元素其中至少包含指定選擇器匹配的一個種元素。
:parent // 選擇所有含有子元素或者文本的父級元素。
// 屬性篩選
[name|="value"] // 選擇指定屬性值等于給定字符串或以該字符串為前綴（該字符串后跟一個連字符“-” ）的元素。
[name*="value"] // 選擇指定屬性具有包含一個給定的子字符串的元素。（選擇給定的屬性是以包含某些值的元素）
[name~="value"] // 選擇指定屬性用空格分隔的值中包含一個給定值的元素。
[name$="value"] // 選擇指定屬性是以給定值結(jié)尾的元素。這個比較是區(qū)分大小寫的。
[name="value"] // 選擇指定屬性是給定值的元素。
[name!="value"] // 選擇不存在指定屬性，或者指定的屬性值不等于給定值的元素。
[name^="value"] // 選擇指定屬性是以給定字符串開始的元素
[name] // 選擇所有具有指定屬性的元素，該屬性可以是任何值。
[name="value"][name="value2"] // 選擇匹配所有指定的屬性篩選器的元素
// 子元素篩選
:first-child // 選擇所有父級元素下的第一個子元素。 => :nth-child(1)
:first-of-type // 選擇所有相同的元素名稱的第一個兄弟元素。
:last-child // 選擇所有父級元素下的最后一個子元素。
:last-of-type // 選擇的所有元素之間具有相同元素名稱的最后一個兄弟元素。
:nth-child(n) // 選擇的他們所有父元素的第n個子元素。 n從1開始
:nth-last-child(n) // 選擇所有他們父元素的第n個子元素。計數(shù)從最后一個元素開始到第一個
:nth-of-type(n) // 選擇同屬于一個父元素之下，并且標簽名相同的子元素中的第n個
:nth-last-of-type(n) // 選擇所有他們父級兄弟元素下具有相同的元素名的倒數(shù)第n個子元素，計數(shù)從最后一個元素開始到第一個。
:only-child // 如果某個元素是其父元素的唯一子元素，那么它就會被選中。
:only-of-type // 選擇所有沒有兄弟元素，且具有相同的元素名稱的元素。
4.表單選擇器
:button // 選擇所有按鈕元素和類型為按鈕的元素。
:checkbox // 選擇所有類型為復選框的元素。
:checked // 匹配所有勾選的元素。
:disabled // 選擇所有被禁用的元素。
:enabled // 選擇所有可用的（未被禁用的元素）元素。
:focus // 選擇當前獲取焦點的元素。
:file // 選擇所有類型為文件（file）的元素。
:image // 選擇所有圖像類型的元素。
:input // 選擇所有 input, textarea, select 和 button 元素.
:password // 選擇所有類型為密碼的元素。
:radio // 選擇所有類型為單選框的元素。
:reset // 選擇所有類型為重置的元素。
:selected // 獲取 select 元素中所有被選中的元素。
:submit // 選擇所有類型為提交的元素。
:text // 選擇所有類型為text的input元素。
