Heim > Web-Frontend > js-Tutorial > jquery 学习之一 对象访问_jquery

jquery 学习之一 对象访问_jquery

WBOY
Freigeben: 2016-05-16 18:15:39
Original
1052 Leute haben es durchsucht

each()

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。

而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

Execute a function within the context of every matched element.

返回值

jQuery

参数

callback (Function) : 对于每个匹配的元素所要执行的函数

示例

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

HTML 代码:

jquery 学习之一 对象访问_jqueryjquery 学习之一 对象访问_jquery

jQuery 代码:

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

结果:

[ jquery 学习之一 对象访问_jquery, jquery 学习之一 对象访问_jquery ]

如果你想得到 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>
Nach dem Login kopieren

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;  } });});
Nach dem Login kopieren
--------------------------------------------------------------------------------------------------------------------------------

size()

jQuery 对象中元素的个数。
这个函数的返回值与 jQuery 对象的'length' 属性一致。
The number of elements in the jQuery object.

返回值

Number

示例

计算文档中所有图片数量

HTML 代码:

jquery 学习之一 对象访问_jquery jquery 学习之一 对象访问_jquery

jQuery 代码:

$("img").size();

结果:

2
-------------------------------------------------------------------------------------------------------------------------

length

jQuery 对象中元素的个数。
当前匹配的元素个数。 size 将返回相同的值。
The number of elements in the jQuery object.

返回值

Number

示例

计算文档中所有图片数量

HTML 代码:

jquery 学习之一 对象访问_jquery jquery 学习之一 对象访问_jquery

jQuery 代码:

$("img").length;

结果:

2
---------------------------------------------------------------------------------------------------------------------------------------

get()

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

这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。

 

如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。

Access all matched DOM elements.

返回值

Array

示例

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

HTML 代码:

jquery 学习之一 对象访问_jquery jquery 学习之一 对象访问_jquery

jQuery 代码:

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

结果:

[ jquery 学习之一 对象访问_jquery jquery 学习之一 对象访问_jquery ]
---------------------------------------------------------------------------------------------------------------------------------------

get(index)

取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
Access a single matched DOM element at a specified index in the matched set.

返回值

Element

参数

index (Number) :取得第 index 个位置上的元素

示例

 

HTML 代码:

jquery 学习之一 对象访问_jquery jquery 学习之一 对象访问_jquery

jQuery 代码:

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

结果:

[ jquery 学习之一 对象访问_jquery ]
---------------------------------------------------------------------------------------------------------------------------------------

index(subject)

搜索与参数表示的对象匹配的元素,并返回相应元素的索引值值。
如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1。
Searches every matched element for the object and returns the index of the element, if found, starting with zero.

返回值

Number

参数

subject (Element) : 要搜索的对象

示例

返回ID值为foobar的元素的索引值值。

HTML 代码:

jQuery 代码:

$("*").index($('#foobar')[0])

结果:

5
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage