「鋭いjQuery」復習回顧-jQueryセレクタ&DOM操作

2441 ワード

1年ぶりに「鋭いjQuery」という本を振り返るには多くの方法が古典的だが、現在は各種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()スクロールバーが転がる距離