這篇文章主要介紹jQuery中常見(jiàn)選擇器怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司長(zhǎng)期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為荔城企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)，荔城網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

jQuery簡(jiǎn)介

jQuery是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript庫(kù)，是一個(gè)由John Resig創(chuàng)建與2006年1月的開(kāi)源項(xiàng)目。現(xiàn)在的jQuery團(tuán)隊(duì)主要包括核心庫(kù)、UI、插件和jQuery Mobile 等開(kāi)發(fā)人員以及推廣和網(wǎng)站設(shè)計(jì)、維護(hù)人員。

jQuery憑借簡(jiǎn)潔的語(yǔ)法和跨平臺(tái)的兼容性，極大地簡(jiǎn)化了JavaScript開(kāi)發(fā)人員遍歷HTML文檔、操作DOM樹、處理事件、執(zhí)行動(dòng)畫和開(kāi)發(fā)AJAX的操作。其獨(dú)特而優(yōu)雅的代碼風(fēng)格改變了JavaScript程序員的設(shè)計(jì)思路和編寫程序的方式?？傊瑹o(wú)論是網(wǎng)頁(yè)設(shè)計(jì)師、后臺(tái)開(kāi)發(fā)者、業(yè)務(wù)愛(ài)好者還是項(xiàng)目管理者，也無(wú)論是JavaScript初學(xué)者還是JavaScript高手，都有足夠多的理由去學(xué)習(xí)jQuery。

jQuery的核心特性可以總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery優(yōu)勢(shì)

jQuery強(qiáng)調(diào)的理念是寫得少，做得多（write less，do more）。jQuery獨(dú)特的選擇器、鏈?zhǔn)讲僮?、事件處理機(jī)制和封裝完善的AJAX都是其他JavaScript庫(kù)望塵莫及的。概括起來(lái)，jQuery有以下優(yōu)勢(shì)：

1.輕量級(jí)（那些說(shuō)jQuery臃腫的，自己定制庫(kù)的大神就當(dāng)我沒(méi)說(shuō)）。相對(duì)于其他庫(kù)來(lái)說(shuō)jQuery非常輕巧，采用UglifyJS壓縮后，目前最新版壓縮后大小在85KB左右（隨著版本的不同這個(gè)數(shù)字可能不一樣）。

（題外話：為了使jQuery變得輕巧，jQuery一直在尋求最好的壓縮工具，所以jQuery的壓縮工具也一直在變化，從最早采用Dean Edward編寫的Packer，到后來(lái)使用Google Compiler進(jìn)行壓縮，最后到目前使用UglifyJS進(jìn)行壓縮。）

2.強(qiáng)大的選擇器。jQuery允許開(kāi)發(fā)者使用從CSS1到CSS3幾乎所有的選擇器，以及jQuery獨(dú)創(chuàng)的高級(jí)而復(fù)雜的選擇器。另外還可以加入插件使其支持XPath選擇器，甚至開(kāi)發(fā)者可以編寫屬于自己的選擇器。由于jQuery支持選擇器這一特性，因此有一定CSS經(jīng)驗(yàn)的開(kāi)發(fā)人員可以很容易的切入到j(luò)Query的學(xué)習(xí)中來(lái)。

3.出色的DOM操作的封裝。jQuery封裝了大量常用的DOM操作，使開(kāi)發(fā)者在編寫DOM操作相關(guān)程序的時(shí)候能夠得心應(yīng)手。通過(guò)jQuery可以輕松地完成各種原本非常復(fù)雜的操作，讓 JavaScript 新手也能寫出出色的程序。

4.可靠的事件處理機(jī)制。jQuery的事件處理機(jī)制吸收了JavaScript專家Dean Edward編寫的事件處理函數(shù)的精華，使得jQuery在處理事件綁定的時(shí)候相當(dāng)可靠。在預(yù)留退路（graceful degradation）、循序漸進(jìn)以及非***式（Unobtrusive）編程思想方面，jQuery也做得非常不錯(cuò)。

5.完善的AJAX。jQuery將所有的AJAX操作封裝到一個(gè)函數(shù)$.ajax()里，使得開(kāi)發(fā)者處理AJAX的時(shí)候能夠?qū)Ｐ奶幚順I(yè)務(wù)邏輯而無(wú)需關(guān)心復(fù)雜的瀏覽器兼容性和XMLHttpRequest對(duì)象的創(chuàng)建和使用的問(wèn)題。

6.不污染頂級(jí)變量。jQuery只建立一個(gè)名為jQuery的對(duì)象，其所有的函數(shù)方法都在這個(gè)對(duì)象之下。其別名$也可以隨時(shí)交出控制權(quán)，絕對(duì)不會(huì)污染其他的對(duì)象。該特性使jQuery可以與其他JavaScript庫(kù)共存，在項(xiàng)目中放心的引用而不需要考慮到后期可能的沖突。

7.出色的瀏覽器兼容性。作為一個(gè)流行的JavaScript庫(kù)，瀏覽器的兼容性是必須具備的條件之一。jQuery能夠在IE6.0+、FF3.6+、Safari5.0+、Opera和Chrome等瀏覽器下正常運(yùn)行。jQuery同時(shí)修復(fù)了一些瀏覽器之間的差異，使開(kāi)發(fā)者不必在開(kāi)展項(xiàng)目前建立瀏覽器兼容庫(kù)。

8.鏈?zhǔn)讲僮鞣绞健?/strong>jQuery中最具有特色的莫過(guò)于它的鏈?zhǔn)讲僮鞣绞健磳?duì)發(fā)生在同一個(gè)jQuery對(duì)象上的一組動(dòng)作，可以直接連寫而無(wú)需重復(fù)獲取對(duì)象。這一特點(diǎn)是jQuery的代碼無(wú)比優(yōu)雅。

9.隱式迭代。當(dāng)用jQuery找到帶有“.myClass”類的全部元素，然后隱藏它們時(shí)，無(wú)需循環(huán)遍歷每一個(gè)返回的元素。相反，jQuery里的方法都被設(shè)計(jì)成自動(dòng)操作對(duì)象集合，而不是單獨(dú)的對(duì)象，這使得大量的循環(huán)結(jié)構(gòu)變得不再必要，從而大幅減少代碼量。

10.行為層與結(jié)構(gòu)層的分離。開(kāi)發(fā)者可以使用jQuery選擇器選中元素，然后直接給元素添加事件。這種將行為層與結(jié)構(gòu)層完全分離的思想，可以使jQuery開(kāi)發(fā)人員和HTML或其他頁(yè)面開(kāi)發(fā)人員各司其職，擺脫過(guò)去開(kāi)發(fā)沖突或個(gè)人單干的開(kāi)發(fā)模式。同時(shí)，后期維護(hù)也非常方便，不需要再HTML代碼中尋找某些函數(shù)和重復(fù)修復(fù)HTML代碼。

11.豐富的插件支持。jQuery的易擴(kuò)展性，吸引了來(lái)自全球的開(kāi)發(fā)者來(lái)編寫jQuery的擴(kuò)展插件。目前已經(jīng)有成百上千的官方插件支持，而且還不斷有新插件面世。

12.完善的文檔。jQuery的文檔非常豐富，不管是英文文檔還是中文文檔。

13.開(kāi)源。jQuery是一個(gè)開(kāi)源的產(chǎn)品，任何人都可以自由地使用并提出改進(jìn)意見(jiàn)。

注：以上轉(zhuǎn)自《鋒利的jQuery》一書

配置jQuery環(huán)境

jQuery的環(huán)境配置很簡(jiǎn)單，只需要到官網(wǎng)下載一個(gè).js文件放到工程里就可以了。
官網(wǎng)下載地址：https://jquery.com/download/

圖中的Download the compressed, production jQuery 3.2.1是最小化版，代碼經(jīng)過(guò)壓縮的，一般用于生產(chǎn)環(huán)境。
Download the uncompressed, development jQuery 3.2.1則是未壓縮版，代碼未經(jīng)過(guò)壓縮，可供閱讀，一般用于開(kāi)發(fā)環(huán)境。

下載完成：

打開(kāi)壓縮版的jQuery可以發(fā)現(xiàn)，除了注釋外，代碼中幾乎沒(méi)有空格和換行，這附帶在生產(chǎn)環(huán)境中可以節(jié)省資源：

未壓縮版的jQuery代碼是正常的格式，在開(kāi)發(fā)時(shí)遇到一些特殊的問(wèn)題就可以參考源碼尋找解決方法：

注意：雖然有壓縮和未壓縮的兩種版本，但是兩個(gè)版本除了在代碼壓縮之外并沒(méi)有任何區(qū)別，壓縮版并沒(méi)有刪減jQuery的功能，未壓縮版也沒(méi)有增加什么功能。

選擇一個(gè)版本的jQuery，導(dǎo)入工程中，我選擇的是min版：

然后在HTML文件中引入jQuery：

使用如下語(yǔ)句測(cè)試jQuery是否能夠正常使用：

使用瀏覽器訪問(wèn)該頁(yè)面，彈出如下對(duì)話框則代表沒(méi)問(wèn)題：

使用jQuery的選擇器

在開(kāi)始使用jQuery之前，首先應(yīng)該明確一點(diǎn)，在jQuery庫(kù)中，\$就是jQuery的一個(gè)簡(jiǎn)寫形式，例如\$("#foo")  等價(jià)于  jQuery("#foo")，\$.ajax和jQuery.ajax是等價(jià)的。如果沒(méi)有特別的說(shuō)明，程序中的\$符號(hào)都是jQuery的一個(gè)簡(jiǎn)寫形式。既然是簡(jiǎn)寫形式，那么我們來(lái)看看jQuery在源碼中是怎么定義的：

    // Define a local copy of jQuery
    jQuery = function( selector, context ) {

        // The jQuery object is actually just the init constructor 'enhanced'
        // Need init if jQuery is called (just allow error to be thrown if not included)
        return new jQuery.fn.init( selector, context );
    },

    //......以下代碼省略......

從以上源碼可以看到，jQuery是通過(guò)函數(shù)表達(dá)式定義的，所以它是一個(gè)函數(shù)（function）對(duì)象。

知道jQuery是怎么定義的，那么再來(lái)看看$這個(gè)別名是怎么定義的，順便再看看jQuery是如何防止變量沖突的，這段代碼是jQuery源碼的最后一段：

//......以上代碼省略......

var

    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    // Map over the $ in case of overwrite
    _$ = window.$;
    // 以上兩個(gè)私有變量映射了 window 的 jQuery 和 $ 兩個(gè)對(duì)象，以防止變量被強(qiáng)行覆蓋

// 這是防止變量沖突，用來(lái)釋放變量控制權(quán)的一個(gè)重要函數(shù)，deep是一個(gè)可選的布爾參數(shù)，用以決定移交 $ 引用的同時(shí)是否移交 jQuery 對(duì)象本身。一旦 noConflict 方法被調(diào)用，則通過(guò) _jQuery, _$, jQuery, $ 四者之間的差異，來(lái)決定控制權(quán)的移交方式。
jQuery.noConflict = function( deep ) {
    // 默認(rèn)處理 $ 
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }

    // 當(dāng)deep設(shè)置為 true 的話，_jQuery 覆蓋 window.jQuery，此時(shí) $ 和 jQuery 都將失效。
    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }

    // 無(wú)論如何都會(huì)返回jQuery對(duì)象給jQuery.noConflict
    return jQuery;
};

// Expose jQuery and $ identifiers, even in AMD
// (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
// noGlobal函數(shù)沒(méi)被調(diào)用就把jQuery對(duì)象給window中的 jQuery 和 $ 
if ( !noGlobal ) {
    window.jQuery = window.$ = jQuery;
}

return jQuery;
} );

在使用jQuery時(shí)，通過(guò)$( )來(lái)包裝、簡(jiǎn)化操作，這個(gè)括號(hào)中可以傳遞選擇器的名稱，也可以傳遞DOM對(duì)象。傳遞DOM對(duì)象的話，就是直接包裝傳遞過(guò)去的DOM對(duì)象。傳遞選擇器的名稱則包裝的是使用這個(gè)選擇器的DOM對(duì)象。不管傳遞什么，包裝后生成的都是jQuery對(duì)象，jQuery對(duì)象不能調(diào)用DOM對(duì)象的方法或?qū)傩?，例如innerHTML、checked等。jQuery對(duì)象只能調(diào)用自己的方法，例如html、attr等。而且我們得知道，在DOM樹中的每一個(gè)節(jié)點(diǎn)或者說(shuō)標(biāo)簽，都是一個(gè)對(duì)象。

以下演示幾個(gè)常用的選擇器：
1.標(biāo)簽選擇器。傳入標(biāo)簽的名稱，就可以控制所有符合該名稱的標(biāo)簽，示例：

運(yùn)行結(jié)果：

hello

hello

hello

hello

hello

2.類選擇器。傳入css中定義的類選擇器名稱，就可以控制包含該選擇器的所有標(biāo)簽，示例：

運(yùn)行結(jié)果：

hello

hello

hello

3.id選擇器。傳入標(biāo)簽的id值，然后在值的前面加上 # （與css中的選擇器命名一樣）即可，無(wú)論css中是否有定義該id選擇器都可以這么使用，示例：

運(yùn)行結(jié)果：

hello

hello1

hello2

屬性選擇器，同樣的和CSS里的使用方式是一樣的：
p[title]  p標(biāo)記中只要有titile屬性即可
p[title='1'] 只要寫類title屬性并且等于 1
p[title*='1'] 只要屬性中包含1即可
p[title^='1']  只要屬性開(kāi)頭是1即可
p[title$=1]    只要屬性結(jié)尾是1即可

示例：

    
        
        
    
    
    
        Hi