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() 메서드를 사용하여 이를 마지막 <p>에 할당합니다.

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

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

<script type="text/javascript">
$(함수() {
$("p").click(function() {
var sHtmlStr = $(this).html(); //innerHTML 가져오기
$(this).text(sHtmlStr); //코드를 일반 텍스트로 전달
});
});

<p><b>텍스트</b>단락<em>보기</em>예</p>

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

2. 요소 이동 및 복사

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

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

<script type="text/javascript">
$(함수() {
//HTML 코드를 직접 추가
$("p:last").append("<b>직접 추가</b>");
});

<p>11<em title="거대하고 거대한">22</em>...</p>
<p>33<em title="running">44</em>...</p>

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

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

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

이 상황은 약간 다릅니다. 추가된 <p>가 유일한 요소인 경우 $("a")는 해당 요소의 모든 하위 요소 뒤로 이동되고 대상 <p> 요소가 여러 개인 경우 $("a")는 복사 형식으로 각 P에 하위 요소를 추가하지만 자체는 변경되지 않습니다. 예: 요소를 복사하고 이동하려면 add() 메서드를 사용하세요.

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

<script type="text/javascript">
$(함수() {
$("p").append($("a:eq(0)"))) //여러 대상 추가<p>
$("p:eq(1)").append($("a:eq(1)"))) //추가된 대상은 고유합니다<p>

})

<a href="#">링크 1</a>
<a href="#">링크 2</a>
<p>텍스트 1</p>
<p>텍스트 2</p>

위 코드는 Append() 호출에 대해 두 개의 하이퍼링크 <a>를 설정합니다. 첫 번째 하이퍼링크의 경우 두 개의 <p> 요소가 있는 대상 $("p")를 추가합니다.

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

또한 위에서 볼 수 있듯이, 자신만의 스타일을 유지한 채, Append() 뒤의 <a> 태그가 대상 <p>의 스타일에 적용됩니다. 이는 Append()가 <p>의 하위 태그로 <a>를 추가하여 <p>의 모든 하위 태그(텍스트) 노드 뒤에 <a>를 배치하기 때문입니다.

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

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

$(function() {
$("img:eq(0)").appendTo($("p")) //여러 대상 추가<p>
$("img:eq(1)").appendTo($("p:eq(0)"))) //추가된 대상은 고유합니다<p>
});
<img src="08.jpg"> <img src="09.jpg">
<시간>
<p><img src="10.jpg"></p>
<p><img src="10.jpg"></p>
<p><img src="10.jpg"></p>

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

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

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

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

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

<script type="text/javascript">
$(함수() {
$("p").after($("a:eq(0)"))) //여러 대상 추가<p>
$("p:eq(1)").after($("a:eq(1)"))) //추가된 대상은 고유합니다<p>

});

<a href="#">링크 1</a>
<a href="#">링크 2</a>
<p>콘텐츠 1</p>
<p>콘텐츠 2</p>

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

3. 요소를 삭제합니다.

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

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

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

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

<script type="text/javascript">
$(함수() {
$("p").remove(":contains('1')");
//$("p:contains('1')").remove();
});

<a href="#">링크 1</a>
<a href="#">링크 2</a>
<p>콘텐츠 1</p>
<p>콘텐츠 2</p>

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

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

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

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

<script type="text/javascript">
$(함수() {
$("p").empty(); //p의 모든 하위 요소 삭제
});

<a href="#">링크 1</a>
<a href="#">링크 2</a>
<p>콘텐츠 1</p>
<p>콘텐츠 2</p>

4. 요소 복제.

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

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

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

<script type="text/javascript">
$(함수() {
$("img:eq(0)").clone().appendTo($("p"));
$("img:eq(1)").clone().appendTo($("p:eq(0)"));

});

<img src="08.jpg"> <img src="09.jpg">
<시간>
<p><img src="10.jpg"></p>
<p><img src="10.jpg"></p>
<p><img src="10.jpg"></p>

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

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

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

<script type="text/javascript">
$(함수() {
$("입력[유형=버튼]").click(function() {
//자신을 복제하고 클릭 동작을 복제합니다
$(this).clone(true).insertAfter(this);
});
});

<input type="button" value="Clone Me">

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

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