jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)第2/4頁
四、語法總結(jié)和注意事項(xiàng)
1、關(guān)于頁面元素的引用
通過jquery的$()引用元素包括通過id、class、元素名以及元素的層級(jí)關(guān)系及dom或者xpath條件等方法,且返回的對(duì)象為jquery對(duì)象(集合對(duì)象),不能直接調(diào)用dom定義的方法。
2、jQuery對(duì)象與dom對(duì)象的轉(zhuǎn)換
只有jquery對(duì)象才能使用jquery定義的方法。注意dom對(duì)象和jquery對(duì)象是有區(qū)別的,調(diào)用方法時(shí)要注意操作的是dom對(duì)象還是jquery對(duì)象。
普通的dom對(duì)象一般可以通過$()轉(zhuǎn)換成jquery對(duì)象。
1、如:$(document.getElementById("msg"))則為jquery對(duì)象,可以使用jquery的方法。由于jquery對(duì)象本身是一個(gè)集合。所以如果jquery對(duì)象要轉(zhuǎn)換為dom對(duì)象則必須取出其中的某一項(xiàng),一般可通過索引取出。
2、如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]這些都是dom對(duì)象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下幾種寫法都是正確的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3、如何jQuery集合的某一項(xiàng)
對(duì)于獲取的元素集合,獲取其中的某一項(xiàng)(通過索引指定)可以使用eq或get(n)方法或者索引號(hào)獲取,要注意,eq返回的是jquery對(duì)象,而get(n)和索引返回的是dom元素對(duì)象。對(duì)于jquery對(duì)象只能使用jquery的方法,而dom對(duì)象只能使用dom的方法,如要獲取第三個(gè)<div>元素的內(nèi)容。有如下兩種方法:
$("div").eq(2).html(); //調(diào)用jquery對(duì)象的方法
$("div").get(2).innerHTML; //調(diào)用dom的方法屬性
4、同一函數(shù)實(shí)現(xiàn)set和get
Jquery中的很多方法都是如此,主要包括如下幾個(gè):
$("#msg").html(); //返回id為msg的元素節(jié)點(diǎn)的html內(nèi)容。
$("#msg").html("<b>new content</b>");
//將“<b>new content</b>” 作為html串寫入id為msg的元素節(jié)點(diǎn)內(nèi)容中,頁面顯示粗體的new content
$("#msg").text(); //返回id為msg的元素節(jié)點(diǎn)的文本內(nèi)容。
$("#msg").text("<b>new content</b>");
//將“<b>new content</b>” 作為普通文本串寫入id為msg的元素節(jié)點(diǎn)內(nèi)容中,頁面顯示粗體的<b>new content</b>
$("#msg").height(); //返回id為msg的元素的高度
$("#msg").height("300"); //將id為msg的元素的高度設(shè)為300
$("#msg").width(); //返回id為msg的元素的寬度
$("#msg").width("300"); //將id為msg的元素的寬度設(shè)為300
$("input").val("); //返回表單輸入框的value值
$("input").val("test"); //將表單輸入框的value值設(shè)為test
$("#msg").click(); //觸發(fā)id為msg的元素的單擊事件
$("#msg").click(fn); //為id為msg的元素單擊事件添加函數(shù)
同樣blur,focus,select,submit事件都可以有著兩種調(diào)用方法
相關(guān)文章
jQuery實(shí)現(xiàn)簡潔的導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡潔的導(dǎo)航菜單效果,簡潔大方的導(dǎo)航菜單,需要的朋友可以參考下2015-11-11JQ技術(shù)實(shí)現(xiàn)注冊(cè)頁面帶有校驗(yàn)密碼強(qiáng)度
這篇文章主要介紹了JQ技術(shù)實(shí)現(xiàn)注冊(cè)頁面帶有校驗(yàn)密碼強(qiáng)度,需要的朋友可以參考下2015-07-07jquery+css3問卷答題卡翻頁動(dòng)畫效果示例
本篇文章主要介紹了jquery css3問卷答題卡翻頁動(dòng)畫效果,具有一定的參考價(jià)值,有需要的朋友可以了解一下。2016-10-10通過jquery的$.getJSON做一個(gè)跨域ajax請(qǐng)求試驗(yàn)
jquery提供了$.getJSON的方法,讓我們可以實(shí)現(xiàn)跨域ajax請(qǐng)求,但jqueryAPI上的內(nèi)容實(shí)在太少,如何用$.getJSON,請(qǐng)求網(wǎng)站應(yīng)該返回怎樣的數(shù)據(jù)庫才能讓$.getJSON獲取到,下面我就用一個(gè)實(shí)際例子來說明下。2011-05-05幻燈片帶網(wǎng)頁設(shè)計(jì)中的20個(gè)奇妙應(yīng)用示例小結(jié)
幻燈片效果在網(wǎng)站中的使用非常流行,使用幻燈片效果既能在有限的網(wǎng)頁空間內(nèi)展示更多的內(nèi)容,又能增強(qiáng)視覺趣味,網(wǎng)上眾多的幻燈片插件資源也使得幻燈片的實(shí)現(xiàn)變得十分簡單2012-05-05一個(gè)用jquery寫的判斷div滾動(dòng)條到底部的方法【推薦】
下面小編就為大家?guī)硪黄粋€(gè)用jquery寫的判斷div滾動(dòng)條到底部的方法【推薦】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧2016-04-04jquery實(shí)現(xiàn)實(shí)時(shí)改變網(wǎng)頁字體大小、字體背景色和顏色的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)實(shí)時(shí)改變網(wǎng)頁字體大小、字體背景色和顏色的方法,涉及jquery使用css方法動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jQuery中ajax的相關(guān)知識(shí)點(diǎn)匯總
這篇文章主要給大家介紹了關(guān)于jQuery中ajax相關(guān)知識(shí)點(diǎn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口的方法,涉及jQuery操作鼠標(biāo)事件及show、hide等方法的使用技巧,需要的朋友可以參考下2015-04-04