jQuery中DOM操作

1.DOM操作的分类

DOM操作一般分为3个方面，即DOM Core、HTML-DOM和CSS-DOM。

2.查找节点

2.1查找元素节点

获取元素节点并打印它的文本内容

    var $li = $("ul li:eq(1)");
    var li_next = $li.text();
    alert(li_next);

2.2查找属性节点

获取属性节点并打印它的文本内容

    var li_next = $("p").attr("title");
    alert(li_next);

3. 创建节点

3.1 创建元素节点

jQuery的工厂函数$()

    var $li_1 = $("<li></li>");
    $("ul").append($li_1);

3.2创建文本节点

    var $li_1 = $("<li>香蕉</li>");
    $("ul").append($li_1);

3.3 创建属性节点

    var $li_1 = $("<li title = 'banana'>香蕉</li>");
    $("ul").append($li_1);

4. 插入节点

方法	描述
append()	向每个匹配元素内部追加内容
appendTo()	将所有匹配元素追加到指定的元素中。$("A").appendTo(B)将追加到B中，与append()相反
prepend()	向每个匹配元素内部前置内容
prependTo()	将所有匹配元素前置匹配元素内部，与prependTo()相反
after()	在指定元素之后插入内容
insertAfter()	将所有匹配元素插入到指定元素后,与after()相反
befor()	在指定元素之前插入内容
insertBefor()	在所有匹配内容之前插入指定元素

5. 删除节点

5.1 remove()

当某个节点用remove()删除后，该节点的所有后代节点将同时删除，返回值是一个指向被删除的节点的引用，可以在以后再使用这些元素。

     var $li = $("ul li:eq(1)").remove();
     $("ul").append($li);

5.2 detach()

从DOM中删除所有匹配的元素，但是不会把匹配元素从jQuery对象中删除，可以在将来使用，但是与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

    $("ul li").click(function(){
        alert($(this).html());
    })
    
     var $li = $("ul li:eq(1)").remove();//删除元素
     $("ul").append($li); //重新追加此元素，它之前绑定的事件还在，若使用remove()，它之前绑定的事件将会失效

5.3 empty()

empty()方法不是删除节点，而是清空节点，清空元素中所有后代节点。

     var $li = $("ul li:eq(1)").empty();//注意是元素里

6 复制节点

    $(this).clone(true).appendTo(body);

在clone()中传递参数true，表示复制元素的同事复制元素中所绑定的事件。

7 替换节点

replaceWith()将所有匹配元素都替换成指定的Html或DOM元素。
replaceALL()与replaceWith()作用相同，只是顺序颠倒。

    $("p").replaceWith("<strong>内容</strong>");
    $("<strong>内容</strong>").replaceAll("p");//二者效果相同

注意：如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换元素一起消失。

8 包裹节点

wrap()将所有的元素进行单独的包裹
wrapAll()将所有匹配的元素用一个元素包裹
wrapInner()将每一个匹配的元素的子内容用其他结构化的标记包裹起来。

    $("strong").wrap("b");
    $("strong").wrapAll("b");
    $("strong").wrapInner("b");

效果如下：

    <!--wrap()-->
    <b><strong>水果</strong></b> 
    <b><strong>香蕉</strong></b> 
    
    <!--wrapAll()-->
    <b>
      <strong>水果</strong> 
      <strong>香蕉</strong>
    </b> 
    
    <!--wrapInner()-->
    <strong><b>水果</b></strong>

9 属性操作

9.1 获取设置属性

获取属性和设置属性都是用的同一函数，类似于getter和setter,包括html()、text()、val()、css()、height()等。

    $("strong").attr("title");//获取属性title
    $("strong").attr("title","St");//设置属性title为St

9.2 删除属性

    $("strong").removeAttr("title");//删除属性title

10 样式操作

10.1 获取样式和设置样式

    $("p").attr("class");//获取元素p的class
    $("strong").removeAttr("title");//删除属性title

10.2 追加样式

    $("strong").addClass("title");//删除属性title

10.3移除样式

    $("p").removeClass();   //移除p中所有样式
    $("p").removeClass("high");//移除单个样式
    $("p").removeClass("high another");//移除多个样式，中间用空格隔开

10.4切换样式

    $("p").toggle(function(){
         //显示元素 代码 1
    },function(){
        //显示元素 代码 2
    });   

toggle()方法是指交替执行代码1和代码2，另外jQuery还提供了一个toggleClass()方法控制样式上的重复切换，如果类名存在则删除，类名不存在则添加。

    $("p").toggleClass("another"); // 重复切换类名 "another"

10.5判断是否含有某个样式

   $("p").hasClass("another"); // 若含有类another则返回true，否则返回false
   $("p").is("another"); // 在jQuery内部实际调用的是，is()方法

11.设置和获取HTML、文本和值

11.1 html()方法

类似于JavaScript中的innerHTML属性，用了获取或设置某个元素的HTML内容。可以用于xhtml文档，但是不能用于xml文档。

   $("p").html();         //获取p中的html代码
   $("p").html("<strong>水果</strong>"); //设置p中的html代码

11.2 text()方法

类似于JavaScript中的innerText属性，用了获取或设置某个元素中的文本内容。

   $("p").text();      //获取p中的文本元素
   $("p").text("水果"); //设置p中的文本元素

11.3 val()方法

类似于JavaScript中的value属性，用了获取或设置某个元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。

   $("#login").val();      //获取p中的文本元素
   $("#login").val("admin"); //设置p中的文本元素

12 遍历节点

12.1 children()方法

该方法用于取得匹配元素的子元素集合。

    var $body = $("body").children();
    alert($body.length); //输出body元素下的元素个数

children()方法只考虑子元素而不考虑其他后代元素。

12.2 next()方法

用于取得匹配元素后面紧邻的同辈元素

    var $body = $("p").next(); //取得紧邻p后的同辈元素

12.3 prev()方法

用于取得匹配元素前面紧邻的同辈元素

    var $body = $("p").prev(); 

12.4 siblings()方法

用于取得匹配元素前后所有同辈元素

    var $body = $("p").siblings(); 

12.5 closest()方法

用于取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配直接返回元素本身，若不匹配则向上查找父元素，逐级向上知道找到匹配选择器的元素，如果什么都没找到，则返回空的jQuery对象。

    $(document).bind("click",function(e){
        $(e.target).closest("li").css("color","red");
    })