這篇文章主要介紹了jQuery選擇器基礎(chǔ)知識(shí),結(jié)合實(shí)例分析了jQuery選擇器的功能、使用方法與相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery選擇器用法。分享給大家供大家參考,具體如下:
什么是jQuery選擇器
使用JavaScript操作頁(yè)面上得DOM元素時(shí),首先要獲取DOM元素。但是原始的javascript只元件根據(jù)ID或者TagName獲取DOM對(duì)象。
在jQuery中則完全不同,jQuery提供了異常強(qiáng)大的選擇器用以幫助我們獲取頁(yè)面上的對(duì)象,并且將對(duì)象以jquery對(duì)象的形式返回。
首先來(lái)看看什么是選擇器:
//根據(jù)id獲取jQuery對(duì)象
var jQueryObject=$("#testDiv");
上例中使用了id選擇器,選取id為testDiv的DOM對(duì)象并將它放入jQuery對(duì)象,最后返回了一個(gè)jQuery對(duì)象。
現(xiàn)在通過(guò)jQueryObject變量就可以操作testDiv圖層了,因?yàn)閖QueryObject是一個(gè)jQuery對(duì)象,所以可以使用所有的jQuery對(duì)象方法。比如修改圖層中的HTML內(nèi)容:
jQueryObject.html("修改后的HTML內(nèi)容");
通過(guò)ID選中元素是最有效率的jQuery選擇器。這是因?yàn)樵谠嫉膉avascript中就提供了選中id的方法document.getElementById()。有關(guān)選擇器的使用技巧將在后面提到。
jQuery選擇器的強(qiáng)大在于提供了豐富的選擇器,如果使用原始javascript則需要編寫很多的代碼才能實(shí)現(xiàn)。這極大減少了開發(fā)人員的工作量。
jQuery選擇器核心函數(shù)
jQuery選擇器調(diào)用的是jQuery核心函數(shù):
jQuery(EXPRESSION,[econtext]);
這個(gè)函數(shù)接收一個(gè)包含選擇器表達(dá)式的字符串,然后用這個(gè)字符串去匹配一組元素。
jQuery的核心功能都是通過(guò)這個(gè)函數(shù)實(shí)現(xiàn)的。jQuery中的大部分功能都基于這個(gè)函數(shù),或者說(shuō)都是在以某種方式使用這個(gè)函數(shù)。該函數(shù)最基本的用法就是向他傳遞一個(gè)表達(dá)式(通常由CSS選擇器組成),然后根據(jù)這個(gè)表達(dá)式查找所有匹配的元素。
默認(rèn)情況下,如果沒有指定context參數(shù),$()將在當(dāng)前的HTML document中查找DOM元素:如果指定了context參數(shù),如一個(gè)dom元素集jQuery對(duì)象,則會(huì)在這個(gè)context中查找。在jQuery1.3.2以后,其返回的元素順序等同于在context中出現(xiàn)的先后順序。
參數(shù)說(shuō)明如下:
~Expression:必選參數(shù),選擇器表達(dá)式。
~Context:可選參數(shù),選擇器上下文
~jQuery,選擇器返回的jQuery對(duì)象,jQuery對(duì)象,jQuery對(duì)象是一個(gè)集合,可以使用鏈?zhǔn)秸Z(yǔ)法調(diào)用各種jQuery函數(shù)。
Context參數(shù)能夠縮小選擇器的范圍,加快查找速度。
希望本文所述對(duì)大家jquery程序設(shè)計(jì)有所幫助。