《날카로운 jQuery》 요점 귀납 (二)jQuery의DOM 조작 (상)

《날카로운 jQuery》 요점 귀납 (二)jQuery의DOM 조작 (상)
 
1 요소 노드 찾기
    var $x = $("selector").text()
2 속성 노드 찾기
    var $x = $("selector").attr("property")
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
   
     >
   
     

   
     var
   
      $one_li 
   
     =
   
      $(
   
     "
   
     ul li:eq(1)
   
     "
   
     ); 
   
     //
   
       <ul>    2 <li>    
   
     

   
     var
   
      $two_li 
   
     =
   
      $(
   
     "
   
     ul li:eq(2)
   
     "
   
     ); 
   
     //
   
       <ul>    3 <li>    
   
     

   
     $two_li.insertBefore($one_li); 
   
     //
   
         
   
     

   
     </
   
     script
   
     >
  
    

 
6 노드 삭제
6.1 remove() 방법
$("selector").remove()remove() 방법은selector의 모든 후대 노드를 삭제하고 요소는remove() 방법으로 삭제한 후에도 계속 사용할 수 있습니다.또한remove() 방법도 매개 변수를 전달할 수 있습니다
$("ul li") 와 같은 요소를 선택적으로 삭제합니다.remove("li[title!=xxx]");
6.2 empty() 방법
$("selector").empty () selector의 모든 하위 노드 비우기
7 복제 노드
$("selector").clone ()은 $(this)와 같습니다.clone().appendTo("ul").복사된 새 요소가 원소가 가지고 있는 행동을 가지도록 하려면 파라미터true를 전달해야 합니다.$와 같습니다.clone(true)
8 노드 교체
$("selector").replaceWith () 는 일치하는 모든 요소를 지정한 HTML 또는 DOM 요소 $("selector") 로 바꿉니다.replaceAll()은.replaceWith() 연산자 좌우 교환
9 패키지 노드
$("selector").wap () 는 일치하는 모든 요소를 $("selector") 로 단독으로 감싸줍니다.lrapall () 는 일치하는 모든 요소를 하나의 요소로 $("selector") 를 감싸줍니다.wrapInner () 는 일치하는 요소의 하위 내용 (텍스트 노드 포함) 을 다른 구조화된 표시로 감싸기
10 속성 작업
$("selector").attr () 가져오기 (하나의property 매개 변수) 와 요소 속성 설정 (두 개의 매개 변수,property와value), 예를 들어 $("p").attr("title","your title").하면, 만약, 만약...
$("p"형식과 같은 여러 속성을 설정합니다.attr({"title": "your title", "name": "test"})$("selector").removeAttr() 요소 속성 삭제
11 스타일 작업
$("selector").attr() 대체 스타일
$("selector").addClass() 추가 스타일
$("selector").removeClass() 스타일 제거
$("selector").toggle () 비헤이비어 반복 전환 예:

  
    

   
     
   
     <
   
     script
   
     >
   
     
$x.toggle(
   
     function
   
     (){

   
     //
   
     code1 
   
     

   
     },
   
     function
   
     (){

   
     //
   
     code2
   
     

   
     })

   
     </
   
     script
   
     >
  
    

 
코드 1과 코드 2를 번갈아 실행합니다
 
$("selector").toggleClass () 는 $("p") 와 같은 스타일의 반복 전환을 제어합니다.toggleClass("anotherClass")
$("selector").hasClass("anotherClass")selector에 anotherClass가 있는지 판단