jquery對(duì)象訪問(wèn)是什么及使用方法介紹

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

這篇文章主要為大家詳細(xì)介紹了jquery對(duì)象訪問(wèn)是什么及使用方法介紹，感興趣的小伙伴們可以參考一下

本篇是繼上篇jQuery核心函數(shù)之后介紹如何訪問(wèn)jQuery對(duì)象。

jquery對(duì)象訪問(wèn)

each(callback)

這里寫圖片描述

size()

這里寫圖片描述

length

這里寫圖片描述

selector

這里寫圖片描述

context

這里寫圖片描述

get()

這里寫圖片描述

get(index)

這里寫圖片描述

index([subject])

這里寫圖片描述

測(cè)試用例

以下是通過(guò)代碼的方式測(cè)試上述jQuery對(duì)象訪問(wèn)，供不明白的朋友們參考：

<!DOCTYPE html>
<html>
<head>
  <title>jquery對(duì)象訪問(wèn)</title>
  <script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<!--
  jquery對(duì)象訪問(wèn)之一each(callback)
-->
<div>
  <span>span1</span>
  <span>span2</span>
  <span>span3</span>
  <span>span4</span>
  <span>span5</span>
</div>
<script type="text/javascript">
  var spanList = $("div span");
  spanList.each(function(){
    // alert(this.innerHTML);  //這個(gè)獲取的是span元素而不是jQuery對(duì)象，這點(diǎn)需要注意。依次輸出span1 ... span5
    // alert($(this).html()); //輸出結(jié)果同上 只是$(this)會(huì)將元素轉(zhuǎn)為jQuery對(duì)象
    if($(this).html() == "span4")
      return false;      //可以提前使用return 退出循環(huán)
  });
</script>
<!--
  jquery對(duì)象訪問(wèn)之二size()
-->
<script type="text/javascript">
  // alert($("div span").size());  //輸出結(jié)果5 size()函數(shù)是獲取jQuery集合中元素的個(gè)數(shù)
</script>
<!--
  jquery對(duì)象訪問(wèn)之三length
-->
<script type="text/javascript">
  // alert($("div span").length);  //輸出結(jié)果5 當(dāng)前匹配的元素個(gè)數(shù).同size 返回相同的值
</script>
<!--
  jquery對(duì)象訪問(wèn)之四selector
-->
<ul id="ul1"></ul>
<script type="text/javascript">
  $("#ul1")
   .append("<li>" + $("ul").selector + "</li>")
   .append("<li>" + $("ul li").selector + "</li>")
   .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
</script>
<!--
  jquery對(duì)象訪問(wèn)之五context
-->
<ul id="ul2"></ul>
<script type="text/javascript">
  $("#ul2")
   .append("<li>" + $("ul").context + "</li>")
   .append("<li>" + $("ul", document.body).context.nodeName + "</li>");
</script>
<!--
  jquery對(duì)象訪問(wèn)之六get()
-->
<div id="get">
  <span>get1</span>
  <span>get2</span>
  <span>get3</span>
  <span>get4</span>
</div>
<script type="text/javascript">
  var spans = $("#get span");
  var span1 = spans.get();
  // alert(span1);  // 返回的是span元素的集合
  // alert($(span1).html()); //輸出結(jié)果get1 將節(jié)點(diǎn)元素包裝成jQuery對(duì)象
</script>
<!--
  jquery對(duì)象訪問(wèn)之七get(index)
-->
<div id="get">
  <span>get1</span>
  <span>get2</span>
  <span>get3</span>
  <span>get4</span>
</div>
<script type="text/javascript">
  var spans = $("#get span");
  var span1 = spans.get(0);
  // alert(span1.innerText); //輸出結(jié)果是get1 通過(guò)節(jié)點(diǎn)元素
  // alert($(span1).html()); //輸出結(jié)果同上   將節(jié)點(diǎn)元素包裝成jQuery對(duì)象
</script>
<!--
  jquery對(duì)象訪問(wèn)之八index([subject])
-->
<ul id="ul8">
 <li id="foo">foo</li>
 <li id="bar">bar</li>
 <li id="baz">baz</li>
</ul>
<script type="text/javascript">
  alert($('#ul8 li').index(document.getElementById('bar'))); //1，傳遞一個(gè)DOM對(duì)象，返回這個(gè)對(duì)象在原先集合中的索引位置
  alert($('#ul8 li').index($('#bar'))); //1，傳遞一個(gè)jQuery對(duì)象
  alert($('#ul8 li').index($('#ul8 li:gt(0)'))); //1，傳遞一組jQuery對(duì)象，返回這個(gè)對(duì)象中第一個(gè)元素在原先集合中的索引位置
  alert($('#bar').index('#ul8 li'));   //1，傳遞一個(gè)選擇器，返回#bar在所有l(wèi)i中的做引位置
  alert($('#bar').index()); //1，不傳遞參數(shù)，返回這個(gè)元素在同輩中的索引位置。
</script>
</body>
</html>

運(yùn)行結(jié)果

這里寫圖片描述