jQuery 레슨 2: 패킷 요소 Code_jquery 조작

예:

코드 복사 코드는 다음과 같습니다.

head>

$는 p 요소에 대한 래핑 요소를 생성합니다. 이 래핑 요소는 위에서 언급한 선택기를 사용하여 선택한 요소와 동일합니다. jQuery의 일부 메서드를 호출하고 마지막으로appendTo(나중에 설명)를 사용하여 요소를 div로 이동할 수도 있습니다. 최종 결과는 다음과 같습니다.

다음은 포장 세트에서 작동하는 기능을 소개합니다.

1.html(),html(text). 첫 번째 함수는 패키징 세트

의 첫 번째

요소 내부에 있는 html을 반환하고, 두 번째 함수는 패키징 세트의 모든 를 반환합니다. 내부 HTML은 텍스트로 설정됩니다. 2.size(). 래핑된 세트에 포함된 요소를 반환합니다.

3.get(),get(n). 첫 번째 함수는 래핑된 컬렉션의 HTML 요소를 자바스크립트 배열로 반환하고, 두 번째 요소는 n번째 HTML 요소를 반환합니다.

4.index(elem). 패키징 세트에서 전달된 HTML 요소 elem의 위치를 ​​반환합니다. 패키징 세트에 없으면 -1을 반환합니다.

5.add(s),add(elem),add(array) 추가 기능은 패키징 세트에 요소를 추가하는 데 사용됩니다. 선택기인 경우 선택한 모든 요소가 HTML 조각인 경우 이 조각을 기반으로 HTML 요소가 생성되고 이 요소가 HTML 요소이거나 HTML 요소의 배열인 경우 추가됩니다. 곧장.

6. not(expression),filter(expression) 이 두 함수는 포장 세트의 요소를 필터링하는 데 사용됩니다. 표현식은 문자열(선택기), html 요소 또는 요소 배열일 수 있습니다. not 함수는 선택기와 일치하거나 배열에 포함된 요소를 제거합니다. 반면에 필터는 선택기와 일치하는 요소 또는 배열에 포함된 요소를 남깁니다.

7.slice(begin,end) 이 함수는 새 포장 세트를 반환하며, 그 내용은 원래 포장 세트의 처음부터 끝까지의 요소입니다. end를 생략하면 최대 길이가 표시됩니다.

먼저 몇 가지 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

$(function() {
var ul = $('ul:first');
$('p span').html(ul.children ().size());
var content = ul.contents()
alert(content.size())

children() 반환된 래핑된 세트 수는 6이며, 이는 마지막 중첩된

그러나 content()에서 반환된 래퍼 세트의 수는 13개입니다. 내용을 보려면 디버거를 사용하십시오.

디버거와 하위 항목의 차이점은 단지 빈 줄인 텍스트 노드를 포함하여 많은 수의 텍스트 노드가 포함되어 있다는 것입니다.

next 및 nextAll 메소드를 다시 살펴보세요. 여전히 위의 HTML 코드를 사용하고 있으며 js 단계는 다음과 같습니다.


코드 복사 코드는 다음과 같습니다.
$(function() {
$('span:last').html($('ul').next() .html());
$('p:last').html($('ul').nextAll().size())
}); am a lonely p. 다음은 모두 총 4가지 요소입니다. 따라서 결과는 다음과 같습니다.



다른 기능도 유사하게 사용되므로 예제는 생략하겠습니다.
10.find
find 메소드와 필터 메소드는 패키지 세트의 요소를 필터링하기 위해 선택기를 전달하기도 합니다. 그러나 find는 포장 세트에 있는 요소의 하위 요소를 필터링하고, filter는 포장 세트에 있는 요소를 필터링합니다. 아래에 예가 나와 있습니다.
11 clone
clone 메서드는 포장 세트의 복사본을 반환합니다.
예:


코드 복사 코드는 다음과 같습니다.








안녕하세요 jQuery.




이것은 흥미로운 예입니다. 첫 번째 줄은 첫 번째 p를 필터링하여 빨간색으로 설정한 다음 마지막 div로 이동합니다. 두 번째 줄은 패키징 세트에 포함된 p를 필터링하여 녹색으로 설정하고 마지막 div로 이동합니다. 이때 이 문장에서 필터링된 ps가 두 개 있는데 하나는 Inner P이고 다른 하나는 첫 번째 div에서 I am a lonely p로 문장을 이동한 다음 이 두 요소를 마지막 div에 추가합니다. InnerP 자체가 이 div에 있으므로 이동이 없는 것과 같습니다. 마지막으로 마지막 p를 복사하여 빨간색으로 설정하고 본문 끝에 추가합니다. 따라서 최종 페이지와 색상은 다음과 같습니다.

마지막으로 체인의 관리가 소개됩니다. 소위 체인화는 위의 예에도 반영됩니다. 즉, jQuery 메소드가 호출될 때마다 패키징 세트를 반환합니다. 이 패키징 세트는 체인을 형성하는 다음 메소드의 호출자 역할을 합니다. 이 프로세스 중에 새로운 패키징 세트가 생성될 수 있습니다(예: clone() 메서드 호출). 체인에서 end 메소드가 호출되면 이전 패키징 세트가 반환되고 andSelf 메소드가 호출되면 현재 패키징 세트와 이전 패키징 세트가 하나의 패키징 세트로 결합되어 반환됩니다. 상상할 수 있듯이 jQuery는 이러한 연결된 래퍼 세트를 내부적으로 스택에 저장합니다. 다음의 간단한 예는 위의 원칙을 보여줍니다.


코드 복사 코드는 다음과 같습니다.

;html xmlns= "http://www.w3.org/1999/xhtml">

text/javascript" src="jquery-1.3.2.js">

>


div1 p1


div1 p2


div1 p3
div>



div2 p1


div2 p3
>



div3 p1


div3 p2


div3 p3