<날카로운 jQuery> 복습 회고 - jQuery 선택기 & DOM 조작

2567 단어
1년 만에 다시 한 번'날카로운 제이큐리'를 돌이켜보면 이 책은 많은 방법이 여전히 고전적이다. 그러나 현재 각종 MVX 프레임워크가 비교적 핫하기 때문에 평소에 많이 쓰지 않아도 잊어버릴 수 있다. 이를 블로그 형식으로 기록해 나중에 복습하고 보기 편리하다.
1. jQuery 객체와 Dom 객체 상호 전환
   jQuery=>Dom       ([index]  get(index))
   var  $btn = $("#btn");  //jQuery  
   var btn1 = $btn[0]    //Dom  
   var btn2 = $btn.get(0)   //Dom  
Dom   => jQuery  
  > var btn3 = document.getElementById("btn");   //Dom  
  > var $btn4 = $(btn3);   //jQuery  

2. jQuery 선택기의 완벽한 처리 메커니즘
eg: id “tt”   (     )         
    > var tt = document.getElementById("tt");
      tt.style.color="red";  //      tt   
           :
     if(document.getElementById("tt")){
         document.getElementById("tt").style.color="red";
      }
     jQuery    :
    $("#tt").css("color","red");
       :jQuery        ,            ,        :
      if($('#tt')){
          //do something
      }
              :
        if($('#tt').length>0){
          //do something
      }
         
       if($('#tt')[0]){
          //do something
      }

3. 필터
3.1 기본 필터
    > :not(select)            
      :even(index)              (   0  )
      :odd(index)               (   0  )
      :gt(index)             index   (   0  )
      :lt(index)             index   (   0  )
      :header                h1-h6

3.2 하위 요소 필터 선택기
    > :nth-child(index/even/odd/2n/3n+2)         index         ,index 1  
      :first-child      
      :last-child  
      :only-child  

3.3 양식 객체 속성 필터
    > :input   //    input  textarea  button  select  
    > :text    //         
    > :password   //  
    > :checkbox   //   
    > :radio   //   
    > :submit   //    
    > :reset    //    
    > :image   //  
    > :button   //    
    > :file     //   
    > :hidden   //    

4.jQuery Dom 작업
4.1 detach () 방법 detach () 방법은remove () 와 같이dom에서 일치하는 요소를 제거하지만 jQuery에서 삭제하지 않습니다.detach는 요소가 연결된 이벤트, 데이터 등을 보류하고 다시 사용합니다
4.2 clone () 방법 clone () 클론 Dom 구조 clone (true) 클론 Dom 구조 및 요소에 바인딩된 이벤트
4.3 wrap () wrapAll () wrapInner () wrap () 는 일치하는 모든 요소를 분리하여 싸고, wrapAll은 일치하는 모든 요소를 일회용으로 싸고, wrapInner는 요소를 내부에 싸고, 일치하는 요소는 바깥쪽에 싸운다
4.4 CSS-Dom에서 자주 사용하는 포지셔닝 방법offset () 상대적 창의 편이position () 가장 가까운 절대 또는 상대적 위치를 가진 부모 요소의 편이량scrollTop () scrollLeft () 스크롤 바가 굴러간 거리

좋은 웹페이지 즐겨찾기