$()函數(shù)是JQuery函數(shù)的別稱,就是一種標(biāo)志,符合其思想:write less,do more。第一次接觸可能有些不適應(yīng),是jQuery代碼佶屈聱牙,晦澀難懂。我們需要適應(yīng)一段時(shí)間,過(guò)一段時(shí)間,就會(huì)愛上其簡(jiǎn)潔,方便,飛起來(lái)。
$()函數(shù)用于將任何對(duì)象包裹成jQuery對(duì)象,接著就可以被允許調(diào)用定義在jQuery對(duì)象上的多個(gè)不同方法。甚至可以將一個(gè)選擇器字符串傳入 $()函數(shù),它會(huì)返回一個(gè)包含所有匹配的DOM 元素?cái)?shù)組的jQuery對(duì)象??梢杂胑ach()方法進(jìn)行遍歷里面的對(duì)象。
這個(gè)問題是jQuery基于選擇器的。jQuery支持不同類型的選擇器,有 ID選擇器、class選擇器、標(biāo)簽選擇器。這個(gè)問題的答案是使用標(biāo)簽選擇器來(lái)選擇所有的div元素。jQuery代碼:
$("div").
其返回值是一個(gè)包含5個(gè)div標(biāo)簽的jQuery對(duì)象。
ID選擇器使用ID來(lái)選擇元素,例: $("#idtest1"). 而 class選擇器使用CSS class 來(lái)選擇元素,例:$(".classtest1")。當(dāng)只需要選擇一個(gè)元素時(shí),使用ID選擇器,如果需要選擇具有相同 CSS class的元素,就要用class 選擇器。
這里和CSS里的標(biāo)記符合 (#,.) 是一 一 對(duì)應(yīng)的。
此功能是jQuery的事件處理問題。jQuery為按鈕點(diǎn)擊之類的事件提供了很好的支持??梢酝ㄟ^(guò)ID或class選擇器定位到圖片,并將按鈕綁定事件,再執(zhí)行hide()方法。
ready( ) 函數(shù)用于在文檔進(jìn)入ready狀態(tài)時(shí)執(zhí)行代碼。當(dāng)DOM完全加載(HTML被完全解析DOM樹構(gòu)建完成時(shí)),jQuery允許我們的執(zhí)行代碼。使用$(document).ready()的最大好處在于它適用于所有瀏覽器,jQuery幫我們解決了跨瀏覽器的問題。
前者,window.onload( ) 事件需要等待 DOM被創(chuàng)建,還要等待包括 大型圖片、音頻、視頻等 所有的外部資源全部都加載完全,才能執(zhí)行;
如果圖片、視頻等內(nèi)容的加載花費(fèi)時(shí)間過(guò)多,就會(huì)有明顯的延遲。更嚴(yán)重的是使用戶感受到。。。say byebye。。。
后者,$().ready( ) 函數(shù),只需要等待DOM樹的建立完成,而不需要等待圖片、音頻、視頻的大型文件的加載,從而執(zhí)行的會(huì)更快。
再有,在網(wǎng)頁(yè)中可以多次使用ready( ) ,瀏覽器會(huì)按照其在HTML頁(yè)面里出現(xiàn)的順序執(zhí)行,而onload只執(zhí)行一次。
表單選擇器與屬性選擇器的應(yīng)用
我們使用選擇器進(jìn)行選擇時(shí),例如涉及到選擇class的相關(guān)操作,其返回值是jQuery數(shù)組,我們想要獲取數(shù)組中的每一個(gè)值,這是就要用到each()函數(shù)了。
each()函數(shù)類似于Java中集合中遍歷所使用的 Iterator 迭代器,允許我們遍歷一個(gè)元素的集合。
可以傳一個(gè)函數(shù)給each()方法,被調(diào)用的jQuery對(duì)象會(huì)在其每個(gè)元素上執(zhí)行傳入的函數(shù)。
這樣就可以遍歷到每個(gè)元素了。
jQuery提供了append()、appendTo()等相關(guān)方法 可以將一個(gè)HTML元素添加到DOM樹中。
相關(guān)用法如下
內(nèi)部(子元素):