jQuery的对象访问函数(get,index,size,each)

Posted 2020-10-13 Qiao_Zhi

1.get()　　元素集合

取得所有匹配的 DOM 元素集合。

这是取得所有匹配元素的一种向后兼容的方式（不同于jQuery对象，而实际上是元素数组）。 

如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用。

示例
描述:
选择文档中所有图像作为元素数组，并用数组内建的 reverse 方法将数组反向。

html 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代码:
$("img").get().reverse();结果:
[ <img src="test2.jpg"/> <img src="test1.jpg"/> ]

 

2.get(index) 　　　　返回的是DOM元素

取得其中一个匹配的元素。 num表示取得第几个匹配的元素。

这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。

参数
indexNumber取得第 index 个位置上的元素

示例
描述:

HTML 代码:
<img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代码:
$("img").get(0);结果:
[ <img src="test1.jpg"/> ]

 

 

 3.index()  查找元素在同辈中位置

搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。

如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。

具体请参考示例。

参数

subject (可选)Selector,Element

要搜索的对象

示例

描述:

查找元素的索引值

HTML 代码:

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

 

jQuery 代码:

$(‘li‘).index(document.getElementById(‘bar‘)); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$(‘li‘).index($(‘#bar‘)); //1，传递一个jQuery对象
$(‘li‘).index($(‘li:gt(0)‘)); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$(‘#bar‘).index(‘li‘); //1，传递一个选择器，返回#bar在所有li中的做引位置
$(‘#bar‘).index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

 

 

4.each遍历对象的方法:　　循环遍历对象

以每一个匹配的元素作为上下文来执行一个函数。

　　意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 ‘false‘ 将停止循环 (就像在普通的循环中使用 ‘break‘)。返回 ‘true‘ 跳至下一个循环(就像在普通的循环中使用‘continue‘)。

参数

callbackFunction

对于每个匹配的元素所要执行的函数

示例

描述:

迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

HTML 代码:

<img/><img/>

 

jQuery 代码:

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

 

结果:

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

 

描述:

如果你想得到 jQuery对象，可以使用 $(this) 函数。

HTML 代码:

<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>

<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>

<div></div>
<div></div>

 

jQuery 代码:

$("img").each(function(){
  $(this).toggleClass("example");
});

 

描述:

 

你可以使用 ‘return‘ 来提前跳出 each() 循环。

HTML 代码:

<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>

<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>

<div></div>
<div></div>

 

jQuery 代码:

$("button").click(function () { 
$("div").each(function (index, domEle) { 
  // domEle == this 
  $(domEle).css("backgroundColor", "yellow");  
  if ($(this).is("#stop")) { 
  $("span").text("Stopped at div index #" + index); 
  return false; 
  } 
});
});

 

 

 5.length属性:　　与size()一样

jQuery 对象中元素的个数。

当前匹配的元素个数。 size 将返回相同的值。

示例

描述:

计算文档中所有图片数量

HTML 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

jQuery 代码:

$("img").length;

 

结果:2

 

6. selector　　返回选择器

jQuery 1.3新增。返回传给jQuery()的原始选择器。

换句话说，就是返回你用什么选择器来找到这个元素的。可以与context一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。

示例

描述:

确定查询的选择器

jQuery 代码:

$("ul")
  .append("<li>" + $("ul").selector + "</li>")
  .append("<li>" + $("ul li").selector + "</li>")
  .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");

 

结果:

ul
ul li
div#foo ul:not([class])

 

 

7.size()　　与length属性一样

jQuery 对象中元素的个数。

这个函数的返回值与 jQuery 对象的‘length‘ 属性一致。

示例

描述:

计算文档中所有图片数量

HTML 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>

 

jQuery 代码:

$("img").size();

 

结果:

2