JQuery干货篇之操控DOM

var divElem=document.createElement("div");    //创建一个div元素
 divElem.classList.add("dcell");       //为div添加class=dcell
var imgElem=document.createElement("img");
imgElem.src="lily.png";
divElem.appendChild(imgElem);   //在新创建的元素后面插入img
var newElem=$(divElem);
newElem.each(function (index,elem) {
    console.log(elem.tagName+"    "+elem.className);
});

//这里使用append元素创建了一个div元素，在末尾插入元素成为div的子元素
//
    var orchildElems = $("<div class='dcell'></div>").append("<img src='orchid.png'/>")
        .append("<label for='orchild'>Orchild:</label>")
        .append("<input name='orchild' value='0' required>");
    var newElems = $("<div class='dcell'></div>").append("<img src='lily.png'/>")
        .append("<label for='lily'>Lily:</label>")
        .append("<input name='lily' value='0' required>")
        .css("border", 'thick double red');
        
    $("div.drow").append(orchildElems);   //在末尾插入数据，这里的参数是jquery对象
    
    
    $("div.drow").append(function(index,elem){
    
    if(elem.id=='row1')
        return orchildElems;
    
    else if(this.id='row2')
        return newElems;
    })
    
    
    $("div.drow").last().append(orchildElem,newElems);   //在其中添加两个参数，插入的先后按照参数的先后位置，当然其中的参数个数没有限制

  var orchildElems = $("<div class='dcell'></div>").append("<img src='orchid.png'/>")
    .append("<label for='orchild'>Orchild:</label>")
    .append("<input name='orchild' value='0' required>");
$("div.dcell").prepend(orchildElems);    //将orchildElems插入到div.dcell的最前面，作为他的子元素
$("div.dcell").prepend("<img src='lily.png'>"); //将参数html的内容插入到前面，作为子元素
$("div.drow").append(function (index) {     //参数是函数，index是索引，返回的内容就是要插入到前面的内容
     if (this.id == 'row1')
         return orchildElem;                //返回的对象可以是jquery对象，也可以是html标签，如：return "<img src='lily.png'>
     else if (this.id = 'row2')
         return newElems;
 });

$("<img src='lily.png'>").appendTo($("img").last().parent());   //将图片插入到最后一个dcell中，这里参数是目标位置，开头调用的时想要插入的内容
$("img:first").clone().appendTo($("img").last().parent()); //选择第一个图片插入到最后一个dcell中，这里必须用clone，否则就会将这张图片移到目标位置
 $($("div.dcell").html()).appendTo($("img").last().parent());   //这里的.html()是获取html文本内容

      var orchildElems = $("<div class='dcell'></div>").append("<img src='orchid.png'/>")
        .append("<label for='orchild'>Orchild:</label>")
        .append("<input name='orchild' value='0' required>");     //创建一个dcell内容
        
    
        $("div.dcell").after(orchildElems);   //插入元素作为兄弟元素，在当前元素的后面
        
        
        $("#row1 div.dcell").after(function (index, html) {    //index表示索引，html表示原来的html文本，指的是没有插入之前的html
        console.log(html);
        if (index == 0)return orchildElem;        //返回的可以是jquery对象，html文本
        else if (index == 1)
            return newElems;
    });
});

   div=$("<div></div>").css("border",'thick double red');
    $("div.drow").wrap(div);     //在drow外层添加了一个div将作为父元素，可以看到现在的源代码变成了<div style...><div class='drow'>...</div></div>
    
    
    $(".drow").wrap(function (index) {   //index是索引
    //if($(this).has("img[src*=astor]").length>0)
    if(index==0)
        return div;      //只在第一个drow中添加父元素div
    else 
        return $("<div></div>").css("border",'thick double blue');
})

$("div.dcell").css("border",'thick double red');
  $("div.dcell").children("img").first().unwrap();   //这里将第一个img元素的父级元素删除，并且保留了其中的子元素
  
  $("div.dcell").children("img").unwrap(":first");   //这里使用参数来筛选要删除父级元素的当前元素，这里选择第一个元素

var div = $("<div></div>").css("border", 'thick double red');
$("div.drow").wrapAll(div);    //这里的div成为了他共有的父级元素，原来的父级元素变成了祖先元素了
$("img").wrapAll(div);  //这里的img没有共同的父元素，那么就会强制的将所有的元素拉在一起为他们设置一个父级元素

var div = $("<div></div>").css("border", 'thick double red');
$(".dcell").wrapInner(div);    //这里的dcell元素将会变成祖先元素，而div将会变成内部后代元素新的父级元素

var newElems = $("<div class='dcell'></div>").append("<img src='lily.png'>")
 .append("<label for='lily'>Lily</label>").append("<input name='lily' value='0' required>").css("border", 'thick   double blue');
$(".dcell:first").replaceWith(newElems);  //用newElems替换第一个dcell
$("div.drow img").replaceWith(function () {
    if (this.src.indexOf("rose") > -1)
        return $("<img src='lily.png'>").css("border",'thick double red'); //返回的时替换的内容，可以是jquery或者html
    else if (this.src.indexOf("peony") > -1)
        return newElems;
    else return $(this.clone()).css("border",'thick double blue');
})

$("div.dcell").remove(":has(img[src*=rose])");  //删除
img$("div.dcell:first()").remove();    //不带参数

$("div.dcell").detach();
$("div.dcell").detach(":has(img[src*=rose])");