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