jQuery_jquery의 날카로운 jQuery DOM 조작

1 요소 노드 찾기

var $x = $("selector").text()

2 속성 노드 찾기

var $x = $("selector").attr("속성")

3 노드 생성

var $x = $("html")

4 노드 삽입

$("selector").append()
일치하는 각 요소에 콘텐츠 추가
$("selector").appendTo()
왼쪽과 오른쪽을 바꾸는 .append() 연산자와 동일

$("selector").prepend()
일치하는 각 요소 안에 콘텐츠를 추가합니다.
$("selector").prependTo()
왼쪽과 오른쪽을 바꾸는 .prepend() 연산자와 동일

$("selector").after()
일치하는 각 요소 뒤에 콘텐츠 삽입
$("selector").insertAfter
왼쪽과 오른쪽을 바꾸는 .after() 연산자

$("selector").before()
일치하는 각 요소 앞에 콘텐츠 삽입
$("selector").insertBefore()
왼쪽과 오른쪽을 바꾸는 .before() 연산자와 동일

모바일 노드 5개

이 책의 P70 예시:

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

<script> <BR>var $one_li = $("ul li:eq(1)") //<ul> 노드에서 두 번째 <li> ("ul li :eq(2)"); //<ul> 노드에서 세 번째 <BR>$two_li.insertBefore($one_li) //노드 이동<BR> </script>



6 노드 삭제

6.1 제거() 메소드

$("selector").remove()
제거() 메서드는 선택기의 모든 하위 노드를 삭제합니다. 제거() 메서드를 사용하여 요소를 삭제한 후 다음을 수행할 수 있습니다. 아직 사용할 수 있습니다. 또한, 제거() 메소드는 매개변수를 전달할 수도 있습니다

$("ul li").remove("li[title!=xxx]");

와 같은 요소를 선택적으로 삭제하려면

6.2 비어있는() 메소드

$("selector").empty()
선택기의 모든 하위 노드 지우기

7 복사 노드

$("selector").clone()
예: $(this).clone().appendTo("ul"). 복사된 새 요소가 원본 요소의 동작을 갖도록 하려면 매개변수를 true로 전달해야 합니다. 예: $("selector").clone(true)

8 노드 교체

$("selector").replaceWith()
일치하는 모든 요소를 ​​지정된 HTML 또는 DOM 요소로 교체
$("selector").replaceAll ()
은 왼쪽과 오른쪽을 바꾸는 .replaceWith() 연산자와 동일합니다

9개 패키지 노드

$("selector").wrap()
일치하는 모든 요소를 ​​개별적으로 래핑
$("selector").wrapAll()
래핑 하나의 요소가 있는 모든 일치 요소
$("selector").wrapInner()
태그로 래핑된 각 일치 요소(텍스트 노드 포함)의 하위 콘텐츠에 대해 다른 구조화된 요소를 사용합니다.

10가지 속성 연산

$("selector").attr()
$("p")와 같은 요소 속성(두 개의 매개변수, 속성 및 값)을 가져오고 설정합니다(속성 매개변수 1개). attr("제목","당신의 직함").

을 동시에 설정한 경우

$("p").attr({"title" : "your title" , "name" : "test"})
$("selector") 형식으로 여러 속성을 설정합니다. .removeAttr()
요소 속성 삭제

11가지 스타일 작업

$("selector").attr()
교체 스타일

$("selector").addClass()
스타일 추가

$("selector").removeClass()
스타일 제거

$("selector").toggle()
동작 반복 전환
예:

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

<script> <BR>$x.toggle(function(){ <BR>//code1 <BR>},function( ){ <BR>//code2 <BR>}) <BR></script>

code1과 code2를 교대로 실행

$("selector").toggleClass()
$("p").toggleClass("anotherClass")와 같은 반복적인 스타일 전환 제어

$("selector").hasClass("anotherClass")
선택기에 anotherClass가 포함되어 있는지 확인