首页 > 代码库 > 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-核心:常用页面元素对象访问器