jquery對于一個(gè)程序員來說，或多或少都聽過。相信很多人在項(xiàng)目中也都用過。現(xiàn)在也有很多開源的庫都是依賴于jQuery，因此熟悉jQuery還是很有必要的。使用熟練的大神可以簡單看看，對于小白來說還是純純的干貨。熟悉jQuery還是先從核心函數(shù)入手比較好，后面其他的功能都是在此核心函數(shù)的基礎(chǔ)上擴(kuò)展的。
jQuery 核心函數(shù) jQuery(expression, [context])
jQuery(html, [ownerDocument])
jQuery(html, props)
jQuery(elements)
jQuery()
jQuery(callback)
測試用例
以下是通過代碼的方式測試上述jQuery核心函數(shù)，供不明白的朋友們參考：
<!DOCTYPE html><html><head> <title>JQueryTets</title> <script type="text/javascript" src="./js/jquery.min.js"></script></head><body><!-- 測試jQuery環(huán)境是否OK 使用$(function(){js代碼});表示網(wǎng)頁在加載的過程中執(zhí)行 下面存在多個(gè)以上函數(shù)，在網(wǎng)頁加載的過程中會(huì)分別彈出"jquery.min.js ready!"和"auto load..." 即：一個(gè)網(wǎng)頁中可以出現(xiàn)多個(gè)$(function(){js代碼}); 它們在網(wǎng)頁加載的過程中會(huì)按照先后出現(xiàn)的順序執(zhí)行--><script type="text/javascript"> $(function(){ // alert("jquery.min.js ready!"); }); $(function(){ // alert("auto load..."); });</script>jQuery核心函數(shù)：<!-- jQuery核心函數(shù)之一jQuery(expression, [context])--><!--1.第一種情形--><div> <p id="h1">id為h1的p標(biāo)簽</p> <p>p標(biāo)簽</p></div><script type="text/javascript"> //獲取div下的p標(biāo)簽節(jié)點(diǎn) var plist = $("div > p"); // alert(plist.size()); //輸出結(jié)果是2 即是上面的div內(nèi)存在兩個(gè)p標(biāo)簽 可以使用size()函數(shù)查看集合元素的個(gè)數(shù) var div_p = $("div p"); // alert(div_p.get(0)); //效果同上，可以使用get(index)獲取集合中指定的元素(注意不是對象)，index為集合元素的下標(biāo)</script><!--1.第二種情形--><form> <input id="text" type="text" value="this is text"></input><br> <input type="radio" name="city">安徽</input> <input type="radio" name="city">北京</input> <input type="radio" name="city">上海</input> <input type="radio" name="city">廣東</input></form><script type="text/javascript"> var pInForm = $("input:radio",document.forms[0]); //獲取form表單中的radio標(biāo)簽 var tInForm = $("input:text",document.forms[0]); //獲取form表單中的text標(biāo)簽 var ahInputNode = tInForm.get(0); //獲取form表單中的第一個(gè)text元素 // alert(pInForm.size()); // 輸出結(jié)果是4 // alert(ahInputNode.value); // 輸出結(jié)果是 this is text // alert($("#text").val()); // 輸出結(jié)果是 this is text 但是需要注意與上一個(gè)的區(qū)別</script><hr><!-- jQuery核心函數(shù)之二jQuery(html, [ownerDocument])--><div id="hx2"></div><script type="text/javascript"> $("<font color='red'>這是動(dòng)態(tài)添加的font標(biāo)簽</font>").appendTo("#hx2"); //動(dòng)態(tài)的在上面id為hx2的div里添加font標(biāo)簽</script><hr><!-- jQuery核心函數(shù)之三jQuery(html, props)--><div id="hx3"></div><script type="text/javascript"> $("<div>",{ text:"click me", click:function(){ alert("click!") } }).appendTo("#hx3"); //動(dòng)態(tài)的創(chuàng)建div標(biāo)簽 并添加相應(yīng)的屬性和響應(yīng)事件</script><br><!-- jQuery核心函數(shù)之四jQuery(elements)--><div id="hx4">jQuery核心函數(shù)之四jQuery(elements)</div><div id="hx4d" onclick="hided()">點(diǎn)一下就會(huì)隱藏</div><script type="text/javascript"> $("#hx4").css("background-color","gray"); //給id為hx4的div添加樣式，設(shè)背景色為灰色 function hided() { $("#hx4d").hide(); //隱藏id為hx4d的div標(biāo)簽 }</script><!-- jQuery核心函數(shù)之五jQuery() 返回一個(gè)空的jQuery對象。 jQuery 1.4中，如果不提供任何參數(shù)，則返回一個(gè)空jQuery對象。在先前版本中，這會(huì)返回一個(gè)包含document節(jié)點(diǎn)的對象。--><script type="text/javascript"> var jQueryObj = $(); // alert(jQueryObj.size()); //結(jié)果為0 也就是返回的是一個(gè)空對象</script><!-- jQuery核心函數(shù)之六jQuery(callback) $(document).ready()的簡寫。 允許你綁定一個(gè)在DOM文檔載入完成后執(zhí)行的函數(shù)。這個(gè)函數(shù)的作用如同$(document).ready()一樣，只不過用這個(gè)函數(shù)時(shí)，需要把頁面中所有需要在 DOM 加載完成時(shí)執(zhí)行的$()操作符都包裝到其中來。從技術(shù)上來說，這個(gè)函數(shù)是可鏈接的－－但真正以這種方式鏈接的情況并不多。 --><script type="text/javascript"> $(function(){ // alert("jQuery核心函數(shù)之六jQuery(callback)"); });</script></body></html>運(yùn)行結(jié)果：
以上就是介紹的jQuery的核心函數(shù)模塊，希望對大家的學(xué)習(xí)有所幫助。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
