jQuery選擇器基礎(chǔ)入門教程
本文實(shí)例講述了jQuery選擇器用法。分享給大家供大家參考,具體如下:
什么是jQuery選擇器
使用JavaScript操作頁面上得DOM元素時(shí),首先要獲取DOM元素。但是原始的javascript只元件根據(jù)ID或者TagName獲取DOM對象。
在jQuery中則完全不同,jQuery提供了異常強(qiáng)大的選擇器用以幫助我們獲取頁面上的對象,并且將對象以jquery對象的形式返回。
首先來看看什么是選擇器。
//根據(jù)id獲取jQuery對象 var jQueryObject=$("#testDiv");
上例中使用了id選擇器,選取id為testDiv的DOM對象并將它放入jQuery對象,最后返回了一個(gè)jQuery對象。
現(xiàn)在通過jQueryObject變量就可以操作testDiv圖層了,因?yàn)閖QueryObject是一個(gè)jQuery對象,所以可以使用所有的jQuery對象方法。比如修改圖層中的HTML內(nèi)容:
jQueryObject.html("修改后的HTML內(nèi)容");
通過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的核心功能都是通過這個(gè)函數(shù)實(shí)現(xiàn)的。jQuery中的大部分功能都基于這個(gè)函數(shù),或者說都是在以某種方式使用這個(gè)函數(shù)。該函數(shù)最基本的用法就是向他傳遞一個(gè)表達(dá)式(通常由CSS選擇器組成),然后根據(jù)這個(gè)表達(dá)式查找所有匹配的元素。
默認(rèn)情況下,如果沒有指定context參數(shù),$()將在當(dāng)前的HTML document中查找DOM元素:如果指定了context參數(shù),如一個(gè)dom元素集jQuery對象,則會在這個(gè)context中查找。在jQuery1.3.2以后,其返回的元素順序等同于在context中出現(xiàn)的先后順序。
參數(shù)說明如下:
~Expression:必選參數(shù),選擇器表達(dá)式。
~Context:可選參數(shù),選擇器上下文
~jQuery,選擇器返回的jQuery對象,jQuery對象,jQuery對象是一個(gè)集合,可以使用鏈?zhǔn)秸Z法調(diào)用各種jQuery函數(shù)。
Context參數(shù)能夠縮小選擇器的范圍,加快查找速度。
更多關(guān)于jquery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery選擇器用法總結(jié)》、《jquery常用操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery操作xml技巧總結(jié)》及《jQuery擴(kuò)展技巧總結(jié)》
希望本文所述對大家jquery程序設(shè)計(jì)有所幫助。
相關(guān)文章
Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例
這篇文章主要介紹了Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證示例,需要的朋友可以參考下2015-12-12JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果
這篇文章主要介紹了JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)修改按鈕屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12jquery checkbox 勾選的bug問題解決方案與分析
本文首先由一個(gè)在項(xiàng)目中遇到的jquery checkbox 勾選的bug的解決方案,引申出jQuery中attr()和prop()的差異分析,非常的實(shí)用,需要的小伙伴快來研究下吧2014-11-11dreamweaver 8實(shí)現(xiàn)Jquery自動(dòng)提示
這篇文章主要介紹了dreamweaver 8實(shí)現(xiàn)Jquery自動(dòng)提示的方法,需要的朋友可以參考下2014-12-12jQuery實(shí)現(xiàn)下滑菜單導(dǎo)航效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)下滑菜單導(dǎo)航效果代碼,通過jquery操作鼠標(biāo)事件及頁面樣式動(dòng)態(tài)操作實(shí)現(xiàn)下滑菜單導(dǎo)航功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08