首页 > 代码库 > Jquery-核心:常用页面元素对象访问器

Jquery-核心:常用页面元素对象访问器

1.      each(callback)

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

Example:

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

1 <img/><img/>2 3 3$("img").each(function(i){4    this.src = "http://www.mamicode.com/test" + i + ".jpg";5 });6 [ <img src="http://www.mamicode.com/test0.jpg" />, <img src="http://www.mamicode.com/test1.jpg" /> ]     //结果

2.      size()

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

Example:

计算文档中所有图片数量

1 <img src="http://www.mamicode.com/test1.jpg"/> <img src="http://www.mamicode.com/test2.jpg"/>2 3 $(“img”).size();4 5 2            //结果

3.      length()

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

Example:

计算文档中所有图片数量

1 <img src="http://www.mamicode.com/test1.jpg"/> <img src="http://www.mamicode.com/test2.jpg"/>2 $(“img”).length();3 4 2            //结果

4.      selector()

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

Example:

确定查询的选择器

1  $("ul")2   .append("<li>" + $("ul").selector + "</li>")3   .append("<li>" + $("ul li").selector + "</li>")4   .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");5        //结果6         ul7         ul li8         div#foo ul:not([class])

5.      context()

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

Example:

检测使用的文档内容

1 $("ul")2   .append("<li>" + $("ul").context + "</li>")3   .append("<li>" + $("ul", document.body).context.nodeName + "</li>");4 [object HTMLDocument]       //结果5 BODY 6 7 //如果是IE浏览器,则返回[object]

6.      get()

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

Example:

选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。

1 <img src="http://www.mamicode.com/test1.jpg"/> <img src="http://www.mamicode.com/test2.jpg"/>2 jQuery 代码: $("img").get().reverse();3 [ <img src="http://www.mamicode.com/test2.jpg"/> <img src="http://www.mamicode.com/test1.jpg"/> ]      //结果

7.      get(index)

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

Example:

1 <img src="http://www.mamicode.com/test1.jpg"/> <img src="http://www.mamicode.com/test2.jpg"/>2 jQuery 代码: $("img").get(0);3 <img src="http://www.mamicode.com/test1.jpg"/> ]     //结果

 

8.      index([subject])

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

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

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

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

Example:

查找元素的索引值

 1 <ul> 2   <li id="foo">foo</li> 3   <li id="bar">bar</li> 4   <li id="baz">baz</li> 5 </ul> 6  7 $(‘li‘).index(document.getElementById(‘bar‘));     //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置 8 $(‘li‘).index($(‘#bar‘));    //1,传递一个jQuery对象 9 $(‘li‘).index($(‘li:gt(0)‘));    //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置10 $(‘#bar‘).index(‘li‘);    //1,传递一个选择器,返回#bar在所有li中的做引位置11 $(‘#bar‘).index();    //1,不传递参数,返回这个元素在同辈中的索引位置。

 

Jquery-核心:常用页面元素对象访问器