wrap / unwrap / wrapAll / wrapInner

remove / detach

测试文件见前篇文章中的测试页面代码。点击此处可直接进入

wrap

在元素（标签）外包装一个或多个元素（标签），函数参数接受元素集合，也接受返回标签的回调函数作为参数。如通过在所在标签<span></span> 标签外包装<strong></strong>标签、给所有的段落包装<strong></strong>标签，使得文字变粗，或者给所选元素集合包装一个<div> 。

在使用的时候注意标签的嵌套是否合法，如给所有的段落外增加<strong></strong>就属于嵌套不合法。

$("span").wrap("");
//$("span").wrap(""); $("span").wrap(""); //像上面这样写也可以 //类为foo的span包装标签，其他span标签包装标签 $("span").wrap(function() { return $(this).is(".foo") ? "" : ""; }); 

unwrap

删除包住所选元素的元素，不接受参数，如要删除包住<span>元素的元素。

$("span").unwrap();

wrapAll

wrapAll将所选的元素集合都用一个元素包装，如将所有的段落用一个<div>包住，需要注意的是wrapAll是会移动元素的，在<span>元素集合上使用wrapAll，使用<strong>包住该元素集合。

var div = $("<div>", { "css" : {"background" : "yellow"} }); $("p").wrapAll(div); //注意元素的移动 $("span").wrapAll("");</div>

wrapInner

包裹元素内容，可以用标签包住元素内的所有内容，如将所有的段落文字变成粗体。

$("p").wrapInner("");

remove & detach

remove和detach用于删除DOM中的元素，其区别是remove直接删除选中的元素，detach除了删除选中的元素外，还保存了删除元素的数据。

学习jQuery使用的测试页面代码如下，后续的继续学习中如无变化则以该文档为测试练习文档,练习时jQuery的版本为1.11.1，其所在路径与测试页面相同，该系列文档为《深入PHP与jQuery开发》的阅读笔记及总结。

    
    
    
      
    
    
      
Hello World!
      
Another paragraph, but this one has a class.
      
This is a span inside a paragraph.
      
Paragraph with an id. 
         And this sentence is in a span.
      

      



          
Sign Up Form
          Name
          
          Password
          

          
            
            I'm on my computer
          
          
            
            I'm on a shared computer
          

          
          
            
            Keep me signed in on this computer
          


      
      
    
     

append() / appendTo()

作用：在目标元素内之后添加元素
区别：由目标元素调用 / 由新建元素调用
示例：

    //append()
    var para = $("
", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    });
    $("body").append(para);

    //appendTo()
    $("

", {
       "text" : "I'm a new paragraph!",
       "css"  : {"background" : "yellow"}
    }).appendTo("body");

prepend() / prependTo()

作用： 在目标元素内之前添加元素
区别： 由目标元素调用 / 由新建元素调用
示例：

    //prepend()
    var para = $("
", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    });
    $("body").prepend(para);

    //prependTo()
    $("

", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    }).prependTo("body");

after() / insertAfter()

作用： 在目标元素外之后添加元素
区别： 由目标元素调用 / 由新建元素调用
示例：

    //after()
    var para = $("
", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    });
    $("p.foo").after(para);

    //insertAfter()
    $("

", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    }).insertAfter("p.foo");

before() / insertBefore()

作用： 在目标元素外之前添加元素
区别： 有目标元素调用 / 由新建元素调用
示例：

    //before()
    var para = $("
", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    });
    $("p.foo").before(para);

    //insertBefore()
    $("

", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    }).insertBefore("p.foo");