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

1.      each(callback)

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

Example:

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

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

2.      size()

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

Example:

计算文档中所有图片数量

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

3.      length()

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

Example:

计算文档中所有图片数量

1 <img src="test1.jpg"/> <img src="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         ul
7         ul li
8         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="test1.jpg"/> <img src="test2.jpg"/>
2 jQuery 代码: $("img").get().reverse();
3 [ <img src="test2.jpg"/> <img src="test1.jpg"/> ]      //结果

7.      get(index)

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

Example:

1 <img src="test1.jpg"/> <img src="test2.jpg"/>
2 jQuery 代码: $("img").get(0);
3 <img src="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,不传递参数,返回这个元素在同辈中的索引位置。
时间: 2024-10-07 07:24:25

Jquery-核心:常用页面元素对象访问器的相关文章

JavaScript对象访问器属性

对象访问器就是setter和getter,他们的作用就是 提供另外一种方法来获取或者设置对象的属性值, 并且在获取和设置的时候,可以用一定的其他操作. 看下面代码: <script> var person = { _name : "abc", //注意此处的_name有一个下划线 }; Object.defineProperty(person,"name",{ //注意第二个参数的前面没有下划线,所以_name和name是两个不同的属性 set : fu

html中iframe子页面与父页面元素的访问以及js变量的访问

1.子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素 document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); contentDocument后可以使用document相关方法 3.子页面访问父页面js变量或方法(注:父页面的js变量需为全局变量和全局方法) 子页面var var

jQuery中常用的元素查找方法

$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass")   选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.mycla

jQuery中常用的元素查找方法总结

$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass")   选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.mycla

JQuery核心知识和快速入门

JQuery是什么? JQuery 是一套JavaScript库, 使用它,可以很方便的进行 JavaScript的编程.比如: 获取页面元素, 修改页面元素的CSS样式等等都可以以很简单的语法完成. 节省代码行数和减少开发的时间. 物理上来看就是一份.js的文件. 如何获取和使用? JQuery  的官方网址是: http://jquery.com/ . 从这里可以获取JQuery的最新版本.(目前最新版是 V1.9.1). 使用的话,就是导入这份js文件.导入方式是在页面的head部分通过<

Selenium操作页面元素

转自:http://blog.sina.com.cn/s/blog_6966650401012a7q.html 一.输入框(text field or textarea) //找到输入框元素: WebElement element = driver.findElement(By.id("passwd-id")); //将输入框清空: element.clear(); //在输入框中输入内容: element.sendKeys(“test”); //获取输入框的文本内容: element

jquery的常用操作(操作html页面的Dom对象的元素)

一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法) //第一种写法: $(document).ready(function() { // 执行体 }); //第二种写法 $(function() { //执行体 }); 二:用jquery获取dom对象,判断该对象是否有内容的两种方法(有返回true,没有返回false) jqObj.text().trim() var jqObj = $(this); if(jqObj.text().tr

jsp页面元素和内置对象

java server pages其根本是一个简化的servlet设计.实现了在java当中使用html标签.javaEE标准 一.页面元素 1.静态内容 html.js.css相关标签元素. 2.指令 <%@ java指令%> 2.1 page指令:通常位于jsp页面的顶端,同一个页面可以有多个page指令. <%@ page 属性=""%> language:指定jsp页面中使用的脚本语言,默认值java import:指定引用的类库 contentType

jQuery操作页面元素之包装元素

一:包装结点:指用指定HTML结构包装现有元素,被包装元素成为结构的子结点.就好像python中的装饰器. 1:wrap(): wrap方法用指定HTML结构包装结点,参数可以是HTML字符串.选择器或者jQuery对象.匹配多个结点时,分别包装各个结点. 2:wrapAll(): wrapAll方法将所有选中的结点包装在一个HTML结构中,参数可以是HTML字符串.选择器或者jQuery对象. 1 <!DOCTYPE html> 2 <html> 3 4 <head>