jquery系列之五——几个常用的公共方法

1.循环执行一个函数：.each(callback)

 示例1：把所有段落的所有事件取消绑定。

html:

<img/>
<img/>

jquery：

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
});
注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

结果：

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

示例2：你可以使用 '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; 
        } 
    });
});

 

2.获取对象中元素的个数：.size()

 示例：计算文档中所有图片数量。

html：

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

jquery：

$("img").size();

结果：2

 

3.获取对象中元素的个数：.length

 示例：计算文档中所有图片数量。

html：

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

jquery：

$("img").length;

结果：2

 

4.获取其中一个匹配的元素：.get([index])

注意：get()表示取得所有匹配的 DOM 元素集合。

 示例：取得第1个 DOM 元素集合。

html：

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

jquery：

$("img").get(0);

结果：

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

 

5.获取元素的索引值：.index([selector|element])

注意：从0开始计数。

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

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

如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-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，不传递参数，返回这个元素在同辈中的索引位置。 

 

 6.empty()与remove()区别：

       要用到移除指定元素的时候，发现empty()与remove([expr])都可以用来实现。可仔细观察效果的话就可以发现。empty()是只移除了 指定元素中的所有子节点，拿$("p").empty()来说，他只是把<p>dsfsd</p>中的文本给移除了，而留下 了<p></p>,仍保留其在dom中所占的位置。而remove([expr])则是把其从dom中删除，而不会保留其所占的位置。

例如：

html：

<p>Hello</p>
World
<p>welcome</p> 

执行$("p").empty()其结果是：

<p></p>
World
<p></p> 

执行$("p").remove()其结果是：

World