JQuery 参考手册 学习笔记（2）-jquery 对象访问

一.each(callback)

示例

描述:

迭代两个图像，并设置它们的 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) 函数。

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; 
  } 
});
});

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

二.size() ，length

示例

描述:

计算文档中所有图片数量

HTML 代码:

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

jQuery 代码:

$("img").size();

$("img").length;

结果:

2

2

三。selector 返回值:String

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

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


  
  

   
   
示例
   
   
描述:
   
   
确定查询的选择器
   
   
jQuery 代码:
   
   
$("ul")
  .append("<li>" + $("ul").selector + "</li>")
  .append("<li>" + $("ul li").selector + "</li>")

   
   
结果:
   
   
ul
ul li


  
  
四。context 返回值:Elementcontext
 
 

  
  

   
   
返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。
   
   

    
    
可以与selector一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
   
   
  
  
  
  

   
   
示例
   
   
描述:
   
   
检测使用的文档内容
   
   
jQuery 代码:
   
   
$("ul")
  .append("<li>" + $("ul").context + "</li>")
  .append("<li>" + $("ul", document.body).context.nodeName + "</li>");
   
   
结果:
   
   
[object HTMLDocument]  //如果是IE浏览器，则返回[object]BODY
  
  
  
  

 
 
 
 

  
  

 
 
五。get() 。get(index)

 
 

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

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

 
 

六。index([subject])    返回值:Numberindex([subject])

搜索匹配的元素，并返回相应元素的索引值，从0开始计数。如果找不到匹配的元素，则返回-1。

示例

描述:

查找元素的索引值

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，不传递参数，返回这个元素在同辈中的索引位置。