jquery 학습 객체 access_jquery

each（）

each(callback)

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

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。

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

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

---

Execute a function within the context of every matched element.

This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element.

Additionally, the function, when executed, is passed a single argument representing the position of the element in the matched set (integer, zero-index).

Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop).

返回值

jQuery

参数

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

示例

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

HTML 代码:

jQuery 代码:

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

结果:

[ , ]

如果你想得到 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>

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;  } });});

--------------------------------------------------------------------------------------------------------------------------------

size()

jQuery 对象中元素的个数。

这个函数的返回值与 jQuery 对象的'length' 属性一致。

The number of elements in the jQuery object.

This returns the same number as the 'length' property of the jQuery object.

返回值

Number

示例

计算文档中所有图片数量

HTML 代码:

jQuery 代码:

$("img").size();

结果:

2

-------------------------------------------------------------------------------------------------------------------------

length

jQuery 对象中元素的个数。

当前匹配的元素个数。 size 将返回相同的值。

The number of elements in the jQuery object.

The number of elements currently matched. The size function will return the same value.

返回值

Number

示例

计算文档中所有图片数量

HTML 代码:

jQuery 代码:

$("img").length;

结果:

2

---------------------------------------------------------------------------------------------------------------------------------------

얻기()

일치하는 모든 DOM 요소의 컬렉션을 가져옵니다.

이는 일치하는 모든 요소를 ​​가져오는 이전 버전과 호환되는 방법입니다(실제로 요소 배열인 jQuery 개체와는 다름).

jQuery 객체 대신 DOM 객체를 직접 조작하려는 경우에 유용한 기능입니다.

일치하는 모든 DOM 요소에 액세스하세요.

이는 일치하는 모든 요소(실제로는 요소의 배열인 jQuery 개체 자체 제외)에 액세스하는 이전 버전과 호환되는 방법으로 사용됩니다. 대신 DOM 요소 자체에 대해 작업해야 하는 경우 유용합니다. 내장된 jQuery 함수를 사용하는 방법

반환값

배열

예

문서의 모든 이미지를 요소의 배열로 선택하고, 내장된 배열 역방향 방법을 사용하여 배열을 반전시킵니다.

HTML 코드:

img src="test2.jpg"/>

jQuery 코드:

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

결과:

[ img src="test1.jpg"/>

---------------------------------- --- ---------------------------------- --- --------------

get(색인)

일치하는 요소 중 하나를 가져옵니다. num은 어떤 일치 요소가 얻어졌는지 나타냅니다.

이를 사용하면 jQuery 함수를 통하지 않고 실제 DOM 요소를 선택하고 직접 조작할 수 있습니다. $(this).get(0)은 $(this)[0]과 동일합니다.

일치된 세트의 지정된 인덱스에서 일치하는 단일 DOM 요소에 액세스합니다.

이를 통해 실제 DOM 요소를 추출하고 jQuery 기능을 반드시 사용하지 않고도 직접 작업할 수 있습니다. $(this).get(0)이라는 이 함수는 jQuery 객체에 대괄호 표기법을 사용하는 것과 동일합니다. $(this)[0]과 같습니다.

반환값

요소

매개변수

index

(Number): 인덱스 위치에 있는 요소를 가져옵니다 예

HTML 코드:

img src="test2.jpg"/>

jQuery 코드:

$("img").get(0)

결과:

[ ]

---------------------------------- --- ---------------------------------- --- --------------

색인(주제)

매개변수가 나타내는 객체와 일치하는 요소를 검색하여 해당 요소의 인덱스 값을 반환합니다.

일치하는 요소가 발견되면 반환은 0부터 시작하고, 일치하는 요소가 발견되지 않으면 -1이 반환됩니다.

객체와 일치하는 모든 요소를 ​​검색하고 해당 요소가 있으면 0부터 시작하여 해당 요소의 인덱스를 반환합니다.

객체를 찾을 수 없으면 -1을 반환합니다.

반환값

번호

매개변수

제목

(요소) :

을 검색할 개체 예

ID 값이 foobar인 요소의 인덱스 값을 반환합니다.

HTML 코드:

jQuery 코드:

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

결과:

5