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> <br><br><br><span style="COLOR: #ff0000"><span style="FONT-SIZE: medium"><br><font color="#ff0000" size="3">6 노드 삭제</font></span></span> <p>6.1 제거() 메소드</p> <p><b>$("selector").remove()</b><br> 제거() 메서드는 선택기의 모든 하위 노드를 삭제합니다. 제거() 메서드를 사용하여 요소를 삭제한 후 다음을 수행할 수 있습니다. 아직 사용할 수 있습니다. 또한, 제거() 메소드는 매개변수를 전달할 수도 있습니다 </p> <p> $("ul li").remove("li[title!=xxx]");</p>와 같은 요소를 선택적으로 삭제하려면 <p>6.2 비어있는() 메소드</p> <p><b>$("selector").empty()</b><br> 선택기의 모든 하위 노드 지우기</p> <p><span style="COLOR: #ff0000"><span style="FONT-SIZE: medium"><font color="#ff0000" size="3">7 복사 노드</font></span></span></p> <p><b>$("selector").clone()</b><br> 예: $(this).clone().appendTo("ul"). 복사된 새 요소가 원본 요소의 동작을 갖도록 하려면 매개변수를 true로 전달해야 합니다. 예: $("selector").clone(true)</p> <p><span style="COLOR: #ff0000"><span style="FONT-SIZE: medium"><font color="#ff0000" size="3">8 노드 교체</font></span></span></p> <p><b>$("selector").replaceWith()</b><br> 일치하는 모든 요소를 ​​지정된 HTML 또는 DOM 요소로 교체 <br><b>$("selector").replaceAll ()</b><br>은 왼쪽과 오른쪽을 바꾸는 .replaceWith() 연산자와 동일합니다 </p> <p><span style="FONT-SIZE: medium"><span style="COLOR: #ff0000"><font size="3">9개 패키지 노드</font></span></span></p> <p><b>$("selector").wrap()</b><br> 일치하는 모든 요소를 ​​개별적으로 래핑 <br><b>$("selector").wrapAll()</b><br> 래핑 하나의 요소가 있는 모든 일치 요소 <br><b>$("selector").wrapInner()</b><br> 태그로 래핑된 각 일치 요소(텍스트 노드 포함)의 하위 콘텐츠에 대해 다른 구조화된 요소를 사용합니다. </p> <p><span style="COLOR: #ff0000"><span style="FONT-SIZE: medium"><font color="#ff0000" size="3">10가지 속성 연산</font></span></span></p> <p><b>$("selector").attr()</b><br> $("p")와 같은 요소 속성(두 개의 매개변수, 속성 및 값)을 가져오고 설정합니다(속성 매개변수 1개). attr("제목","당신의 직함"). </p>을 동시에 설정한 경우 <p>$("p").attr({"title" : "your title" , "name" : "test"})<br><b>$("selector") 형식으로 여러 속성을 설정합니다. .removeAttr()</b><br> 요소 속성 삭제</p> <p><span style="COLOR: #ff0000"><span style="FONT-SIZE: medium"><font color="#ff0000" size="3">11가지 스타일 작업</font></span></span></p> <p><b>$("selector").attr()</b><br> 교체 스타일</p> <p><b>$("selector").addClass()</b><br> 스타일 추가</p> <p><b>$("selector").removeClass()</b><br> 스타일 제거</p> <p><b>$("selector").toggle()</b><br> 동작 반복 전환<br>예:<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="66808" class="copybut" id="copybut66808" onclick="doCopy('code66808')"><u>코드 복사</u> </a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code66808"> <br><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가 포함되어 있는지 확인