淺談Jquery核心函數(shù)
在Jquery中,所有的DOM對(duì)象都將封裝成Jquery對(duì)象,而且只有Jquery對(duì)象才能使用Jquery方法或者屬性來(lái)執(zhí)行相應(yīng)的操作。
所以Jquery提供了一個(gè)可以將DOM對(duì)象封裝成Jquery對(duì)象的函數(shù),就是Jquery核心函數(shù)jquery(),也稱為工廠函數(shù)。
jquery核心函數(shù)有7個(gè)重載,分別如下:
jquery() 該函數(shù)返回一個(gè)空的jquery對(duì)象。
jquery(elements) 該函數(shù)將一個(gè)或多個(gè)DOM元素轉(zhuǎn)化為Jquery對(duì)象(或jquery集合)
jquery(callback) 該函數(shù)是jquery(document).ready(callback)的簡(jiǎn)寫(xiě)。 該函數(shù)將綁定一個(gè)在DOM文檔載入完成后執(zhí)行的函數(shù)。頁(yè)面中所有需要在DOM加載完成時(shí),執(zhí)行的jquery操作,都需要包含在這個(gè)函數(shù)中。這個(gè)函數(shù),可以在頁(yè)面中,出現(xiàn)多次。
jquery(expression,[context])
jquery(html)
jquery(html,props)
jquery(html,[ownerDocument])
我們?cè)敿?xì)來(lái)看下其中的
jQuery(expression, [context])
這個(gè)函數(shù)接收一個(gè)包含 CSS 選擇器的字符串,然后用這個(gè)字符串去匹配一組元素。
通過(guò) doc[0]、doc[1] 可以分別取出一個(gè) DOM 對(duì)象,其它的則是一些 jQuery 對(duì)象特有的屬性和方法;實(shí)際上 jQuery 對(duì)象包裝了 DOM 對(duì)象,同時(shí)還包含了一些操作 DOM 元素的 jQuery 方法。
在使用 jQuery 的過(guò)程中,大部分情況下第一步工作同時(shí)也是最重要的一步工作,就是取得包裝了要操作 DOM 對(duì)象的 jQuery 對(duì)象;然后通過(guò)調(diào)用取得的 jQuery 對(duì)象的方法來(lái)完成對(duì) DOM 對(duì)象的操作。
for example
1.查找#first context中節(jié)點(diǎn)為p的搜有元素,并循環(huán)顯示對(duì)應(yīng)的值。
$(function() {
var items = $("p", "#first");
$.each(items, function(i, n) {
alert(i);
});
});
i為對(duì)應(yīng)的index,n對(duì)應(yīng)的節(jié)點(diǎn)
2.找到所有 p 元素,并且這些元素都必須是 div 元素的子元素。
HTML 代碼:
<p>one</p> <div><p>two</p></div> <p>three</p>
jQuery 代碼:
$("div > p");<br>
結(jié)果:
[ <p>two</p> ]
3.在文檔的第一個(gè)表單中,查找所有的單選按鈕(即: type 值為 radio 的 input 元素)。
jQuery 代碼:
$("input:radio", document.forms[0]);
jQuery(html, [ownerDocument])
根據(jù)提供的原始 HTML 標(biāo)記字符串,動(dòng)態(tài)創(chuàng)建由 jQuery 對(duì)象包裝的 DOM 元素。
你可以傳遞一個(gè)手寫(xiě)的 HTML 字符串,或者由某些模板引擎或插件創(chuàng)建的字符串,也可以是通過(guò) AJAX 加載過(guò)來(lái)的字符串。
jQuery(html, props)
根據(jù)提供的原始 HTML 標(biāo)記字符串,動(dòng)態(tài)創(chuàng)建由 jQuery 對(duì)象包裝的 DOM 元素。同時(shí)設(shè)置一系列的屬性、事件等。
參數(shù)
htmlString
用于動(dòng)態(tài)創(chuàng)建DOM元素的HTML標(biāo)記字符串
propsMap
用于附加到新創(chuàng)建元素上的屬性、事件和方法
示例
描述:
動(dòng)態(tài)創(chuàng)建一個(gè) div 元素(以及其中的所有內(nèi)容),并將它追加到 body 元素中。在這個(gè)函數(shù)的內(nèi)部,是通過(guò)臨時(shí)創(chuàng)建一個(gè)元素,并將這個(gè)元素的 innerHTML 屬性設(shè)置為給定的標(biāo)記字符串,來(lái)實(shí)現(xiàn)標(biāo)記到 DOM 元素轉(zhuǎn)換的。所以,這個(gè)函數(shù)既有靈活性,也有局限性。
jQuery 代碼:
$("<div>", {
"class": "test",
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
}).appendTo("body");
$(document).ready()的簡(jiǎn)寫(xiě)。
當(dāng)DOM加載完成后,執(zhí)行其中的函數(shù)。
jQuery 代碼:
$(function(){
// 文檔就緒
});
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
相關(guān)文章
jQuery實(shí)現(xiàn)圖片輪播效果代碼(基于jquery.pack.js插件)
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片輪播效果的方法,該功能基于jquery.pack.js插件實(shí)現(xiàn),涉及jQuery針對(duì)頁(yè)面元素與樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-06-06
jQuery 數(shù)據(jù)緩存模塊進(jìn)化史詳細(xì)介紹
數(shù)據(jù)緩存系統(tǒng)最早應(yīng)該是jQuery1.2引入的,那時(shí)它的事件系統(tǒng)完成照搬DE大神的addEvent.js,而addEvent在實(shí)現(xiàn)有個(gè)缺憾,它把事件的回調(diào)都放到EventTarget之上,這會(huì)引發(fā)循環(huán)引用2012-11-11
jquery滾動(dòng)條插件jScrollPane的使用介紹
jScrollPane想必大家都不陌生吧它就是所謂的jquery滾動(dòng)條插件,下面為大家介紹下其具體的使用,感興趣的朋友不要錯(cuò)過(guò)2013-11-11
jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法,可實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊上方文字即可在下方勾選處文本框顯示對(duì)應(yīng)文字的效果,涉及jQuery鼠標(biāo)事件及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下2015-05-05
jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)定時(shí)讀取分析xml文件的方法,涉及jquery通過(guò)定時(shí)器采用Ajax方法讀取并處理XML文件的相關(guān)技巧,需要的朋友可以參考下2015-07-07
jQuery簡(jiǎn)單驗(yàn)證上傳文件大小及類(lèi)型的方法
這篇文章主要介紹了jQuery簡(jiǎn)單驗(yàn)證上傳文件大小及類(lèi)型的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)上傳文件的類(lèi)型與大小運(yùn)算操作相關(guān)技巧,需要的朋友可以參考下2016-06-06
js前臺(tái)判斷開(kāi)始時(shí)間是否小于結(jié)束時(shí)間
js前臺(tái)判斷開(kāi)始時(shí)間是否小于結(jié)束時(shí)間,結(jié)合了jquery需要的朋友可以參考下2012-02-02

