JQuery of DOM

#### 1.      

$body = $('body');              //  body
$('
')                //  div    

2.创建文本节点

与创建元素节点一样,可以直接把文本内容一并写上

$('
          
')      //            

$('
        //       id     

例:点击body 创建带有class 和 id 的div

$body = $('body');
$body.click(function(){
  var div = $('
  
');
  $body.append(div);
})

 1:
 class   test       p  
$('.test').after('
    
    
   
    
   
   
    
    insertBefore 
                        
    
    
    insertAfter 
                        
    
   
  
 
 1:
 p    class  test     
$('
 
 
3.  DOM  
 
 
1.wrap( )
 
 
 
  
wrap(wrappingElement)    wrap(funciton)
 
 
 
 
 
  
                 HTML  
 
 
 
 
 1:    
p  1
p  2

$('p').wrap('
')              //   p          div   


    
p  1


    
p  2

 
 
 2:    
p  
        
$('p').wrap(function(){             // p         div   ,    
    return '
';
})              


    
p  
                  //    

 
 
2. wrapAll( )
 
 
 
  
wrapAll(wrappingElement)    wrapAll(funciton)
 
 
 
 
 
  
         ,             HTML  
 
  
     p           ,      p                P      
 
 
 
 
p  1
p  2

$('p').wrapAll('
')           p              


 
p  1
 
p  2

 
 
3.wrapInner( )
 
 
 
  
wrapInner(wrappingElement)    wrapInner(funciton)
 
  
                   
 
 
 
 
 1:
p  
p  

$('div').wrapInner('')


    
p  


    
p  

  
  :ラップレイヤーを  するには、3 の  DOMラップunwrap()を  してください.
4.$()コレクションオブジェクトに  を  
1. add( ) 
$()の は、このアセンブリオブジェクトが  していることを  します. でこのアセンブリに しい  を  する  がある  は、どのように  しますか?
jQueryは、  する  セットに  を  する しいjQueryオブジェクトを  するためのaddメソッドを  します.
 1:
  $('li')               p  

    
list item 1
    
list item 3

  p  
$('li').add('p');
  
   :  ノードの  
1. empty( ) 
  した  のすべてのサブノードが  されました
サブエレメント(および の  エレメント)を  するだけでなく、エレメント のテキストも  します.
 1:
   
//  empty() 
$('.father').empty()
//  :
 
 
3. detach( )
 
 
     ，          。          。  append  ，          。       。
  
 1:
$('p').on('click',funciton(e){
    alert(e.target.innerHTML);      //      p     ;
})

$('button:first').on('click',function(){
  if(!$('p').lenght) return;        //                  
  //  detach      
  //       ，              
  //          
  p = $('p').datech();
})
$('button:last').on('click',function(){
  $('body').append(p);                      // p   body ,         .
})
  
4.DOMパッケージの  
.unwrap( ) 
  はwrap とは である.  するエレメントセットの エレメントを  し、  する  は、  (および  エレメント)を の  に  します.
 1:

    
p  


$('p').unwrap();            //  p  ,   unwrap()   ,     div

p  
  
   :  ノードの  
1. replaceWith(newContent) 
セット の  するすべての  を  した  で き え、  された  のセットを します.
target.replaceWith(newContent); 
 1:

    
   
    
   
    
   


$("p:eq(1)").replaceWith('2  の  を  ')   //    p    
  
2.replaceAll(target); 
replaceWith()  と ていますが、ターゲットとソースは です.
newContent.replaceAll(target); 
 1 :
$('2  の  を  ').replaceAll("p:eq(1)");
  
   :    
1. .children( ) 
jQueryはアセンブリオブジェクトであるため、childrenはアセンブリ の   に  するすべての 1レベルのサブ  (つまり    のみ)である.
 1:
$("#right-well").children().css("color","orange");      //  id right-well       
  
 2:
class  father 3 div 

    
p  


    
p  


    
p  
    span  

$('father').children().css('color','red')               //   p    span           
  
children(.selected) では  も  です
  2 ,       children()     

$('father').children(':last').css('color','red')        //                  ,   span     
  
2. .find( ) 
find()は、アセンブリ の   に  するすべての    (すなわち、すべての  、   )です.
パラメータ:  .target.find(「*」)のすべての    
​ target.find(「HTMLラベル 」)target のすべてのHTMLラベル の  
​ target.find(「HTMLラベル :selected」)target のすべてのHTMLラベル のselectedに  する  ;
 :

$('.father').find(*);                   class  father            
$('.father').find('li')                 class  father        li  
$('.father').find('li:last')            class  father          li  
  
3. .each( ) 
.each()メソッドは、jQueryオブジェクトのセット の DOM  を  するforループの   です.
コールバック  が  されるたびに、  のサイクル がパラメータとして されます(0からカウント)
  :
each   for        
each         ，    2      ，     ,        index,element,    
each      this       dom  
  
 1:                   .father    li  ,          
$('.father').children('li').each(function(index,element){   //    .father    li     
  $(this).on('mouseover',function(){                        //   li  mouseover  
    $(this).css('background','red');
  });
  $(this).on('mouseout',function(){                         //   li  mouseout  
    $(this).css('background','');
  });
});
  
 2:                        li      
$('.father').children('li').each(function(index,element){   //    .father    li     
  $(this).on('mouseover',function(){                        //   li  mouseover  
   if(index%2){                                             //  index 0  ,  index      li               
      $(this).css('background','red');
   }
  });
});  
  
3.   の  
メソッド 
パラメータ
    
ターゲットを  
 り 
parent( ) 
オプションselected
   
   
ゼロまたは1つ  の  を むjqueryオブジェクト
parents( ) 
オプションselected
   からドキュメントルート  へ
すべての 、  の  
ゼロまたは1つ  の  を むjqueryオブジェクト
closest( ) 
オプションselected
  されたターゲット
すべての 、  の  
ゼロまたは1つの  を むjqueryオブジェクト、
1.parent( ) 
エレメントの エレメント
パラメータ、target.parent()はtargetセット のすべての  の   に  します.
​ target.parent(「selected」)はtargetセット のすべての  に  し、selectedの  を たす   です.
 $("#target1").parent().css("background-color","red");              //  id target1    
  
 $(".target1").parent(":last").css("background-color","red");       //    class  target1             
  
2.parents( ) 
.parents()メソッド、  するのはすべての  の  の  で、モードを して から へ、body html documentを む
3.closest( ) 
    から、DOMツリー で    に   に  し、  に  した    を します.
() にパラメータがない  はdocument(ドキュメント  )を します.
 ： div   ，       li  ，      
$("div").closet("li')
  
4.    の  
1.next( ) 
  する  セットの   が  する の    を む  セットを  します.
$('li.test').next().css('border','1px solid red');      //  class  test li        
  
2.prev( ) 
  する  セットの   が  する の  の  を む  セットを  します.
3.siblings( ) 
  するエレメントセット の エレメントの   エレメントを むエレメントセットを  します.
$("button:first").click(function() {
    $('li.item-2').siblings().css('border','1px solid red');            //  class  item-2        ,          
})