快捷導(dǎo)航

JQuery核心函數(shù)是什么及使用方法介紹

更新時(shí)間：2016年05月03日 11:19:02 作者：HiveDark

這篇文章主要為大家詳細(xì)介紹了JQuery核心函數(shù)是什么，及使用方法介紹，感興趣的小伙伴們可以參考一下

jquery對(duì)于一個(gè)程序員來說，或多或少都聽過。相信很多人在項(xiàng)目中也都用過。現(xiàn)在也有很多開源的庫都是依賴于jQuery，因此熟悉jQuery還是很有必要的。使用熟練的大神可以簡(jiǎn)單看看，對(duì)于小白來說還是純純的干貨。熟悉jQuery還是先從核心函數(shù)入手比較好，后面其他的功能都是在此核心函數(shù)的基礎(chǔ)上擴(kuò)展的。

jQuery 核心函數(shù) jQuery(expression, [context])

這里寫圖片描述

jQuery(html, [ownerDocument])

這里寫圖片描述

jQuery(html, props)

這里寫圖片描述

jQuery(elements)

這里寫圖片描述

jQuery()

這里寫圖片描述

jQuery(callback)

這里寫圖片描述

測(cè)試用例

以下是通過代碼的方式測(cè)試上述jQuery核心函數(shù)，供不明白的朋友們參考：

<!DOCTYPE html>
<html>
<head>
 <title>JQueryTets</title>
 <script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<!--
  測(cè)試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代碼}); 它們?cè)诰W(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)獲取集合中指定的元素(注意不是對(duì)象)，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對(duì)象。
  jQuery 1.4中，如果不提供任何參數(shù)，則返回一個(gè)空jQuery對(duì)象。在先前版本中，這會(huì)返回一個(gè)包含document節(jié)點(diǎn)的對(duì)象。
-->
<script type="text/javascript">
 var jQueryObj = $();
 // alert(jQueryObj.size()); //結(jié)果為0 也就是返回的是一個(gè)空對(duì)象
</script>
<!--
  jQuery核心函數(shù)之六jQuery(callback)
  $(document).ready()的簡(jiǎn)寫。
  允許你綁定一個(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é)果：

這里寫圖片描述