jQuery를 사용하여 페이지를 처리하는 사용 예 elements_jquery

이 기사의 예에서는 jQuery를 사용하여 페이지 요소를 처리하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

페이지 요소의 경우 DOM 프로그래밍에서 다양한 쿼리 및 수정 방법을 통해 관리할 수 있는데 이는 매우 번거로운 작업입니다. jQuery는 페이지 요소를 조작하기 위한 전체 메소드 세트를 제공합니다. 요소의 내용, 복사, 이동 및 교체를 포함합니다. 다음은 일반적으로 사용되는 몇 가지 사항입니다.

1. 콘텐츠를 직접 받아 편집합니다.

jQuery에서는 주로 html()과 text()라는 두 가지 메소드를 통해 페이지의 내용을 얻고 편집합니다. 그 중 html()은 노드의 innerHTML 속성을 가져오는 것과 동일합니다. html(text) 매개변수를 추가하면 innerHtml이 요소의 일반 텍스트를 가져오는 데 사용되며 text(content)는 일반 텍스트를 설정합니다. 텍스트.

이 두 가지 방법은 때때로 함께 사용됩니다. text()는 페이지의 태그를 필터링하는 데 사용되는 반면 html(text)는 노드에서 innerHtml을 설정하는 데 사용됩니다. 예:

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

$(function() {
var sString = $("p:first").text(); //일반 텍스트 가져오기
$("p:last").html(sString);
});

text() 메서드를 사용하여 첫 번째 P의 텍스트를 가져온 다음 html() 메서드를 사용하여 이를 마지막

에 할당합니다.

text() 및 html() 메소드의 독창적인 사용.

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

텍스트단락보기예

마우스 클릭 한 번, 두 번 클릭, 세 번 클릭하면 코드를 획득하고 전송할 수 있습니다.

2. 요소 이동 및 복사

일반적인 DOM에서는 요소 뒤에 요소를 추가하려는 경우 일반적으로 상위 요소의 appendChild() 또는 insertBefore() 메서드를 사용하여 노드의 위치를 ​​반복적으로 찾아야 합니다. 매우 번거로운 작업입니다. jQuery는 요소에 새 하위 요소를 직접 추가할 수 있는 Append() 메서드를 제공합니다.

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

1122...

3344...

html 코드를 직접 추가하는 것 외에도, 추가() 메소드를 사용하여
과 같은 고정 노드를 추가할 수도 있습니다.

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

$("p").append($("a") );

이 상황은 약간 다릅니다. 추가된

가 유일한 요소인 경우 $("a")는 해당 요소의 모든 하위 요소 뒤로 이동되고 대상

요소가 여러 개인 경우 $("a")는 복사 형식으로 각 P에 하위 요소를 추가하지만 자체는 변경되지 않습니다. 예: 요소를 복사하고 이동하려면 add() 메서드를 사용하세요.

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

링크 1
링크 2

텍스트 1

텍스트 2

위 코드는 Append() 호출에 대해 두 개의 하이퍼링크 를 설정합니다. 첫 번째 하이퍼링크의 경우 두 개의

요소가 있는 대상 $("p")를 추가합니다.

첫 번째 하이퍼링크는 복사하면 추가되고, 두 번째 하이퍼링크는 이동하면 추가되는 것을 볼 수 있습니다.

또한 위에서 볼 수 있듯이, 자신만의 스타일을 유지한 채, Append() 뒤의 태그가 대상

의 스타일에 적용됩니다. 이는 Append()가

의 하위 태그로 를 추가하여

의 모든 하위 태그(텍스트) 노드 뒤에 를 배치하기 때문입니다.

append() 메서드 외에도 jQuery는 지정된 대상의 하위 요소에 대상 요소를 추가하는 데 사용되는appendTo(target) 메서드도 제공합니다. 사용법과 결과는 add()와 완전히 유사합니다.

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

$(function() {
$("img:eq(0)").appendTo($("p")) //여러 대상 추가

$("img:eq(1)").appendTo($("p:eq(0)"))) //추가된 대상은 고유합니다

});

첫 번째 사진은 P 태그 3개에 동료가 추가했고, 두 번째 사진은 P 요소 1개에 추가한 것을 실행 결과에서 보면 첫 번째 사진이 3개에 추가된 것을 알 수 있습니다. P 요소는 의 형태로, 두 번째 사진은 모바일 방식으로 추가됩니다.

append() 및appendTo() 메소드에 대응하여 JQ는 prepend() 및 prependTo() 메소드도 제공하여 대상의 모든 하위 요소 앞에 요소를 추가하고 추가 항목 복사 및 이동도 수행합니다. 원칙적으로.

위의 네 가지 메서드 외에도 Jq는 자식 요소 대신 노드 바로 앞이나 뒤에 요소를 추가하는 데 사용되는 before(), insertBefore(), after() 및 insertAfter()도 제공합니다. 삽입.

Before()는 insertBefore()와 완전히 동일하며, after()와 insertAfter()도 완전히 동일합니다. 여기서는 after()를 예로 들어 보겠습니다.

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

링크 1
링크 2

콘텐츠 1

콘텐츠 2

위 코드를 실행해 본 결과 after() 메소드 역시 단일 대상을 이동하고 여러 대상을 복사하는 원리를 따르며 더 이상 하위 요소로 추가되지 않는 것을 확인할 수 있습니다. 대신 대상 요소 바로 뒤에 있는 형제 요소입니다.

3. 요소를 삭제합니다.

DOM 프로그래밍에서는 요소를 삭제하기 위해 상위 요소의 RemoveChild() 메서드를 사용하는 경우가 많은데, jQuery에서는 해당 요소를 직접 삭제할 수 있는 Remove() 메서드를 제공합니다.

예를 들어 $("p").remove()는 전체 페이지의 모든 p 요소 태그를 삭제합니다.

remove()는 매개변수도 허용합니다.

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

링크 1
링크 2

콘텐츠 1

콘텐츠 2

위 코드에서 제거()는 필터 선택기를 사용하며 텍스트 내용에 1이 포함된 P 요소가 삭제됩니다.

remove()는 매개변수를 받을 수 있지만 일반적으로 선택기 단계에서 삭제할 객체를 결정한 다음, Remove()를 사용하여 한꺼번에 삭제하는 것이 좋습니다. ("p:contains('1')").remove(); 효과는 완전히 동일하며, 효과는 다른 코드의 스타일과도 일치합니다.

DOM에서는 요소의 모든 하위 요소를 삭제하려는 경우 hasChildNodes()와 함께 for 루프를 사용하여 판단하고, RemoveChildNode()를 사용하여 하나씩 삭제하는 경우가 많습니다. ) 모든 하위 요소를 직접 삭제하는 방법입니다.

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

링크 1
링크 2

콘텐츠 1

콘텐츠 2

4. 요소 복제.

두 번째 섹션에서는 요소의 복사 및 이동에 대해 언급하지만 이는 대상 개체 수에 따라 다릅니다. 개발자는 대상 개체가 하나만 있어도 복사 작업을 계속 수행할 수 있기를 바랍니다.

jQuery는 이 작업을 수행하기 위해 clone() 메서드를 제공합니다.

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

이전 섹션의appendTo() 메서드로 얻은 결과도 완성되었습니다.

또한 clone() 함수는 부울 값 개체를 매개 변수로 허용합니다. 매개 변수가 true인 경우 복제본 자체 외에도 전달되는 시간 메서드도 함께 복사됩니다.

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

위 코드는 버튼 클릭 시 버튼 자체를 복제하는 동시에 클릭 이벤트도 복제하는 기능을 갖고 있습니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.