jQuery学习笔记（DOM操作）

DOM操作的分类

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

1. DOM Core

DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以处理任何一种使用标记语言编写出来的文档，例如XML。

JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。

2. HTML-DOM

它提供了一些简明的记号来描述各种HTML元素。如：document.forms、element.src。它只能用来处理Web文档。

3. CSS-DOM

它是针对CSS的操作。在JavaScript中CSS-DOM技术的主要作用是获取和设置style对象的各种属性。如：element.style.colr = "red";

jQuery中的DOM操作

1. 查找元素节点，查找属性节点

    // 查找节点
    var $para = $("p");            // 获取<p>节点
    var $li = $("ul li:eq(1)");   // 获取第二个<li>元素节点
    
    // 查找属性
    var p_txt = $para.attr("title"); // 输出<p>元素节点属性title
    var ul_txt =  $li.attr("title");    // 获取<ul>里的第二个<li>元素节点的属性title
    var li_txt =  $li.text();       // 输出第二个<li>元素节点的text

2. 创建节点

创建元素节点

     var $li_1 = $("<li></li>");    //  创建第一个<li>元素
     var $li_2 = $("<li></li>");    //  创建第二个<li>元素

     var $parent = $("ul");        // 获取<ul>节点。<li>的父节点

     $parent.append($li_1);        // 添加到<ul>节点中，使之能在网页中显示
     $parent.append($li_2);        // 可以采取链式写法：$parent.append($li_1).append($li_2);

创建文本节点

    var $li_1 = $("<li>香蕉</li>");    //  创建一个<li>元素，包括元素节点和文本节点
    var $li_2 = $("<li>雪梨</li>");    //  创建一个<li>元素，包括元素节点和文本节点

    var $parent = $("ul");        // 获取<ul>节点。<li>的父节点

    $("ul").append($li_1);        // 添加到<ul>节点中，使之能在网页中显示
    $("ul").append($li_2);        // 添加到<ul>节点中，使之能在网页中显示

创建属性节点

    var $li_1 = $("<li title='香蕉'>香蕉</li>");    //创建一个<li>元素
    var $li_2 = $("<li title='雪梨'>雪梨</li>");     //创建一个<li>元素

    
    var $parent = $("ul");        // 获取<ul>节点。<li>的父节点

    
    $parent.append($li_1);        // 添加到<ul>节点中，使之能在网页中显示
    $parent.append($li_2);        // 等价于：$parent.append($li_1).append($li_2);

3. 插入节点

普通插入

    var $li_1 = $("<li title='香蕉'>香蕉</li>");    //  创建第一个<li>元素
    var $li_2 = $("<li title='雪梨'>雪梨</li>");    //  创建第二个<li>元素
    var $li_3 = $("<li title='其它'>其它</li>");    //  创建第三个<li>元素

    var $parent = $("ul");                  // 获取<ul>节点，即<li>的父节点
    var $two_li = $("ul li:eq(1)");         // 获取<ul>节点中第二个<li>元素节点
   
    $parent.append($li_1);                  // append方法将创建的第一个<li>元素添加到父元素的最后面
    $parent.prepend($li_2);                 // prepend方法将创建的第二个<li>元素添加到父元素里的最前面
    $li_3.insertAfter($two_li);             // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后

移动节点

    var $one_li = $("ul li:eq(1)");             //  获取<ul>节点中第二个<li>元素节点
    var $two_li = $("ul li:eq(2)");             //  获取<ul>节点中第三个<li>元素节点
    $two_li.insertBefore($one_li);    //移动节点

4. 删除节点

remove()方法

     $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。

     var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
     $li.appendTo("ul");                        // 把刚才删除的又重新添加到<ul>元素里
     //所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它

      $("ul li").remove("li[title!=菠萝]");  //把<li>元素中属性title不等于"菠萝"的<li>元素删除 

detach()方法

      var $li = $("ul li:eq(1)").detach(); // 获取第二个<li>元素节点后，将它从网页中删除。
      $li.appendTo("ul");    // 重新追加此元素，它之前绑定的事件还在；如果用remove()方法，之前的方法不复存在。

empty()方法

     $("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容

5. 复制节点

         $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素

         $(this).clone(true).appendTo("ul"); // 注意参数true
         //可以复制自己，并且他的副本也有同样功能。 

6. 替换节点

     $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); 
     // 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 

如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

7. 包裹节点

      $("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来，结果：
      // <b><strong>test1</b></strong>
      // <b><strong>text2</b></strong>

      $("strong").wrapAll("<b></b>"); // 结果：<b><strong>test1</strong><strong>text2</strong>

      $("strong").wrapInner("<b></b>"); // 在标记里包裹，结果：<strong><b>test</b></strong>

8. 属性操作

      //设置<p>元素的属性'title'
      $("input:eq(0)").click(function(){
            $("p").attr("title","选择你最喜欢的水果.");
      });
      //获取<p>元素的属性'title'
      $("input:eq(1)").click(function(){
            alert( $("p").attr("title") );
      });
      //删除<p>元素的属性'title'
      $("input:eq(2)").click(function(){
            $("p").removeAttr("title");
      });   

9. 样式操作

      //获取样式
      $("input:eq(0)").click(function(){
            alert( $("p").attr("class") );
      });
      //设置样式
      $("input:eq(1)").click(function(){
            $("p").attr("class","high");
      });
      //追加样式
      $("input:eq(2)").click(function(){
            $("p").addClass("another");
      });    
      //删除全部样式
      $("input:eq(3)").click(function(){
            $("p").removeClass();
      });  
       //删除指定样式
      $("input:eq(4)").click(function(){
            $("p").removeClass("high");
      });   
      //重复切换样式
      $("input:eq(5)").click(function(){
            $("p").toggleClass("another");
      });  
      //判断元素是否含有某样式
      $("input:eq(6)").click(function(){
            alert( $("p").hasClass("another") )
            alert( $("p").is(".another") )
      });  

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

html()方法，类似于JavaScript中的innerHTML属性。

text()方法，类似于JavaScript中的innerText属性。

val()方法，类似于JavaScript中的value属性。

11. 遍历节点

children()方法

     var $ul = $("ul").children();
     for(var i=0;i< $ul.length;i++){
         alert( $ul[i].innerHTML );
     }

next()方法

prev()方法

sibling()方法 

     var $p1 = $("p").next();
     alert( $p1.html() );  //  紧邻<p>元素后的同辈元素
     var $ul = $("ul").prev();
     alert( $ul.html() );  //  紧邻<ul>元素前的同辈元素
     var $p2 = $("p").siblings();
     alert( $p2.html() );  //  紧邻<p>元素的唯一同辈元素

closeset()方法

        $(e.target).closest("li").css("color","red");

parent()、parents()、closeset()方法区别

• $(".item-1").parent().css(...)，parent()方法从指定类型的直接父节点开始查找，返回一个元素节点。
• $(".item-1").parents('ul').css(...)，parents()方法查找同parents()方法类似，不同在于它查找多个父节点。
• $(".item-a").closeset('ul').css(...)，closeset()方法从包含自身节点开始查找，同parents()方法类似，但它只返回匹配的第一个节点。

12. CSS-DOM操作

    //获取<p>元素的color
    alert(  $("p").css("color") );
    //设置<p>元素的color
    $("p").css("color","red");
    
    //设置<p>元素的fontSize和backgroundColor
    $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"});
    
    //获取<p>元素的高度
    alert( $("p").height());
    //获取<p>元素的宽度
    alert( $("p").width());
    //设置<p>元素的高度
    $("p").height("100px");
    //设置<p>元素的宽度
    $("p").width("400px");
    
    // offset()方法，获取当前元素在当前视窗的相对偏移
    var offset = $("p").offset();
    var left = offset.left;
    var top =  offset.top;
    alert("left:"+left+";top:"+top);
    
    // 其它还有position()方法，scrollTop()方法与scrollLeft()方法