JQueryにおけるDOMノードの動作

JqueryにおけるDOMノードの動作
既存のオブジェクトappend(追加するオブジェクト)
最後のサブエレメントとして追加
追加するオブジェクトappendTo(既存のオブジェクト)
prepend()/prependTo()
最初のサブエレメントとして追加
既存の要素before(追加する要素)/after()
オブジェクトの前/後に新しい要素を追加し、カンマ分割で複数の要素を追加できます.
追加する要素InsertBefore(既存の要素)/insertAfter()
 
.empty()
要素のすべてのサブノードを削除
.remove(“selector”)
エレメント全体を削除し、フィルタパラメータを追加できます.
.detach()
ノードを削除し、戻りオブジェクトに保存した後、追加を再度呼び出すことができます.
.clone()
ノード構造をクローンし、パラメータtrueを選択すると同時にノードのイベントをクローンします.
old.replaceWith(new) new.replaceAll(old)
新しいエレメントを古いエレメントで置き換える
.wrap(parent)
各要素を親要素にラップ
.unwrap()
外層ラップの除去
.wrapAll()
すべての要素を親要素にラップ
.wrapInner()
各エレメントの内部にサブエレメントをラップ

                    //  DOM    2 div  
		    var pdiv = document.createElement('div')
		    var cdiv = document.createElement("div");
		    // 2 div       
		    pdiv.setAttribute('class', 'right')
		    cdiv.className = 'child'
		    cdiv.innerHTML = "    DIV    ";
		    // cdiv           pdiv 
		    pdiv.appendChild(cdiv)		   	
		    //     body
                    var body = document.querySelector('body');
		    body.appendChild(pdiv)

//  JQuery  html   
var div = $("
    DIV    
");
$('body').append(div);
   
//     class=test1 div  
$(".test1").empty()
//  p   class test3   
$("p").remove(".test3");
//  detach       ，              
var p = $("p").detach()

//   p      div  
$('p').wrapAll('
')
//  p     
$('p').unwrap();
//  div        
$('div').wrapInner('')

JQuery结点访问

.children()	选中直接子节点，括号内可填选择器
.parent()	选中直接父节点，括号内可填选择器
.parents（）	选中所有的祖先节点
.closest(selector)	向上查找最近的满足条件的祖辈元素
.find(selector)	选中所有满足条件的后代元素
.next()	选中紧邻下一个同辈节点，可选填选择器
.prev()	选中紧邻前一个同辈节点，括号内可选填
.siblings()	选中所有同辈元素，括号内参数可选
.add()	添加新的元素加入到选中集合
.each(function(index,element){this})	对每个进行函数操作，提供三个参数

注：选择器返回多个结果的可以通过括号内的选择器进行筛选，例如$('.item-2').next(':first')，选中多个类名为item-2的下一个节点，但:first只筛选了第一个。若括号内不填选择器，则默认选中所有的结果。

//  class=div          ，    
$('.div').children(':last').css('border', '3px solid blue')
//  class=item-2          ，    
$('.item-2').siblings(':last').css('border', '2px solid blue')

例2、eachの使用: