jQuery中的DOM操作

浏览数：24 / 时间：2015年06月09日

 1 $(function(){
 2      var $body = $("body").children();
 3      var $p = $("p").children();
 4      var $ul = $("ul").children();
 5      alert( $body.length );  // <body>元素下有2个子元素
 6      alert( $p.length );     // <p>元素下有0个子元素
 7      alert( $ul.length );    // <p>元素下有3个子元素
 8      for(var i=0;i< $ul.length;i++){
 9          alert( $ul[i].innerHTML );
10      }

View Code

一般来说DOM操作可以分为DOM Core,HTML-DOM,CSS-DOM.

jQuery中的DOM操作：

1查找节点

使用jQuery在文档树上查找节点非常容易，我们可以通过就jQuery选择器来完成~

1.1查找元素节点

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

2 var li_txt=$li.text();

3 alert(li_txt);

1.2查找属性节点

1 var $para=$("p");
2 var p_txt=$para.attr("title");//火气<p>元素属性title
3 alert(p_txt);

2创建节点

第一步要创建新元素

第二步要添加到要创建的位置

1 var $li=$("<li></li>>");
2 $("ul").append($li);//元素节点
3 
4 var $li=$("<li>苹果</li>>");
5 $("ul").append($li);//文本节点
6 
7 var $li=$("<li title=‘苹果‘>苹果</li>>");
8 $("ul").append($li);//属性节点

3删除节点

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

$("ul li:eq(1)").remove();
$li.appendTo("ul");//先删除再移动到指定位置
/*detach和remove一样，但是detach不会把元素从jQuery对象中删除，
可以再次利用（所有绑定的事件附加的数据都会被保留下来）*/

$("ul li:eq(1)").empty()//仅仅是清空，节点位置等会被保留。

4复制节点

1 $("ul li").click(function(){
2     $(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中
3 })
4 $(this).clone(true).appendTo("body");//参数true表示复制元素的同时复制元素中所绑定的事件

5替换节点

1 $("p").replaceWith("<strong>新的标题</strong>>")；//The first way
2 $("<strong>新的标题</strong>>").replaceAll("p");//The second way

6包裹节点

1 $("strong").wrap("<b></b>>");//wrap
2 //会得到如下结果
3 <b><strong>元素strong的内容</strong></b>
4 //wrapAll()会将所有元素包裹在一个元素中
5 /*wrapInner(),顾名思义将匹配元素的子内容（包括文本节点）用其他结构化的标记包裹起来*/

7获取样式和设置样式

 1 <style type="text/css">
 2 .high{
 3  font-weight:bold;   /* 粗体字 */
 4  color : red;        /* 字体颜色设置红色*/
 5 }
 6 .another{
 7  font-style:italic;
 8  color:blue;
 9 }
10 </style>
11  <!--   引入jQuery -->
12  <script src="../../scripts/jquery.js" type="text/javascript"></script>
13  <script type="text/javascript">
14  //<![CDATA[
15   $(function(){
16       //获取样式
17       $("input:eq(0)").click(function(){
18             alert( $("p").attr("class") );
19       });
20       //设置样式
21       $("input:eq(1)").click(function(){
22             $("p").attr("class","high");
23       });
24       //追加样式
25       $("input:eq(2)").click(function(){
26             $("p").addClass("another");
27       });    
28       //删除全部样式
29       $("input:eq(3)").click(function(){
30             $("p").removeClass();
31       });  
32        //删除指定样式
33       $("input:eq(4)").click(function(){
34             $("p").removeClass("high");
35       });   
36       //重复切换样式
37       $("input:eq(5)").click(function(){
38             $("p").toggleClass("another");
39       });  
40       //判断元素是否含有某样式
41       $("input:eq(6)").click(function(){
42             alert( $("p").hasClass("another") )
43             alert( $("p").is(".another") )
44       });  
45   });
46   //]]>
47   </script>
48 </head>
49 <body>
50     <input type="button" value="输出class类"/>
51     <input type="button" value="设置class类"/>
52     <input type="button" value="追加class类"/>
53     <input type="button" value="删除全部class类"/>
54     <input type="button" value="删除指定class类"/>
55     <input type="button" value="重复切换class类"/>
56     <input type="button" value="判断元素是否含有某个class类"/>
57 
58     <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
59     <ul>
60       <li title=‘苹果‘>苹果</li>
61       <li title=‘橘子‘>橘子</li>
62       <li title=‘菠萝‘>菠萝</li>
63     </ul>
64 </body>
65 </html>

View Code

8设置和获取HTML，文本和值

 1  $(function(){
 2       //获取<p>元素的HTML代码
 3       $("input:eq(0)").click(function(){
 4             alert(  $("p").html() );
 5       });
 6       //获取<p>元素的文本
 7       $("input:eq(1)").click(function(){
 8             alert(  $("p").text() );
 9       });
10       //设置<p>元素的HTML代码
11       $("input:eq(2)").click(function(){
12              $("p").html("<strong>你最喜欢的水果是?</strong>");
13       });    
14        //设置<p>元素的文本
15       $("input:eq(3)").click(function(){
16              $("p").text("你最喜欢的水果是?");
17       });  
18       //设置<p>元素的文本
19       $("input:eq(4)").click(function(){
20              $("p").text("<strong>你最喜欢的水果是?</strong>");
21       });  
22       //获取按钮的value值
23       $("input:eq(5)").click(function(){
24              alert( $(this).val() );
25       });   
26       //设置按钮的value值
27       $("input:eq(6)").click(function(){
28             $(this).val("我被点击了!");
29       });  
30   });

View Code

  $(function(){
      $("#address").focus(function(){         // 地址框获得鼠标焦点
            var txt_value =  $(this).val();   // 得到当前文本框的值
            if(txt_value==this.defaultValue){  
                $(this).val("");              // 如果符合条件，则清空文本框内容
            } 
      });
      $("#address").blur(function(){          // 地址框失去鼠标焦点
              var txt_value =  $(this).val();   // 得到当前文本框的值
            if(txt_value==""){
                $(this).val(this.defaultValue);// 如果符合条件，则设置内容
            } 
      })

      $("#password").focus(function(){
            var txt_value =  $(this).val();
            if(txt_value==this.defaultValue){
                $(this).val("");
            } 
      });
      $("#password").blur(function(){
              var txt_value =  $(this).val();
            if(txt_value==""){
                $(this).val(this.defaultValue);
            } 
      })
  });

View Code

 1 $(function(){
 2       //设置单选下拉框选中
 3       $("input:eq(0)").click(function(){
 4             $("#single").val("选择2号");
 5       });
 6       //设置多选下拉框选中
 7       $("input:eq(1)").click(function(){
 8             $("#multiple").val(["选择2号", "选择3号"]);
 9       });
10       //设置单选框和多选框选中
11       $("input:eq(2)").click(function(){
12              $(":checkbox").val(["check2","check3"]);
13             $(":radio").val(["radio2"]);
14       });    
15 
16   });

View Code

 1 $(function(){
 2       //设置单选下拉框选中
 3       $("input:eq(0)").click(function(){
 4             $("#single option").removeAttr("selected");  //移除属性selected
 5             $("#single option:eq(1)").attr("selected",true); //设置属性selected
 6       });
 7       //设置多选下拉框选中
 8       $("input:eq(1)").click(function(){
 9             $("#multiple option").removeAttr("selected");  //移除属性selected
10             $("#multiple option:eq(2)").attr("selected",true);//设置属性selected
11             $("#multiple option:eq(3)").attr("selected",true);//设置属性selected
12       });
13       //设置单选框和多选框选中
14       $("input:eq(2)").click(function(){
15             $(":checkbox").removeAttr("checked"); //移除属性checked
16             $(":radio").removeAttr("checked"); //移除属性checked
17             $("[value=check2]:checkbox").attr("checked",true);//设置属性checked
18             $("[value=check3]:checkbox").attr("checked",true);//设置属性checked
19             $("[value=radio2]:radio").attr("checked",true);//设置属性checked
20       });   
21   });

View Code

$(function(){
      //设置单选下拉框选中
      $("input:eq(0)").click(function(){
            $("#single option").removeAttr("selected");  //移除属性selected
            $("#single option:eq(1)").attr("selected",true); //设置属性selected
      });
      //设置多选下拉框选中
      $("input:eq(1)").click(function(){
            $("#multiple option").removeAttr("selected");  //移除属性selected
            $("#multiple option:eq(2)").attr("selected",true);//设置属性selected
            $("#multiple option:eq(3)").attr("selected",true);//设置属性selected
      });
      //设置单选框和多选框选中
      $("input:eq(2)").click(function(){
            $(":checkbox").removeAttr("checked"); //移除属性checked
            $(":radio").removeAttr("checked"); //移除属性checked
            $("[value=check2]:checkbox").attr("checked",true);//设置属性checked
            $("[value=check3]:checkbox").attr("checked",true);//设置属性checked
            $("[value=radio2]:radio").attr("checked",true);//设置属性checked
      });   
  });

View Code

9遍历DOM树

$(function(){
     var $body = $("body").children();
     var $p = $("p").children();
     var $ul = $("ul").children();
     alert( $body.length );  // <body>元素下有2个子元素
     alert( $p.length );     // <p>元素下有0个子元素
     alert( $ul.length );    // <p>元素下有3个子元素
     for(var i=0;i< $ul.length;i++){
         alert( $ul[i].innerHTML );
     }

View Code

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

View Code

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


 $(function(){
      //parent
      $("input:eq(0)").click(function(){
            resetStyle();
            $(‘.item-1‘).parent().css(‘background-color‘, ‘red‘);
      });
      //parents
      $("input:eq(1)").click(function(){
            resetStyle();
            $(‘.item-1‘).parents(‘ul‘).css(‘background-color‘, ‘red‘);
      });
      //closest
      $("input:eq(2)").click(function(){
            resetStyle();
            $(‘.item-1‘).closest(‘ul‘).css(‘background-color‘, ‘red‘);
      });

      function resetStyle(){
          $("*").removeAttr("style");
      }

View Code

10CSS-DOM综合运用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-12-1</title>
<style type="text/css">
.test{
 font-weight:bold;
 color : red;
}
.add{
 font-style:italic;
}
</style>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      //获取<p>元素的color
      $("input:eq(0)").click(function(){
            alert(  $("p").css("color") );
      });
      //设置<p>元素的color
      $("input:eq(1)").click(function(){
             $("p").css("color","red")
      });
      //设置<p>元素的fontSize和backgroundColor
      $("input:eq(2)").click(function(){
             $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})
      });    
      //获取<p>元素的高度
      $("input:eq(3)").click(function(){
              alert( $("p").height() );
      });  
      //获取<p>元素的宽度
      $("input:eq(4)").click(function(){
              alert( $("p").width() );
      });   

        //获取<p>元素的高度
      $("input:eq(5)").click(function(){
              $("p").height("100px");
      });  
      //获取<p>元素的宽度
      $("input:eq(6)").click(function(){
              $("p").width("400px");
      }); 
      //获取<p>元素的的左边距和上边距
      $("input:eq(7)").click(function(){
              var offset = $("p").offset();
              var left = offset.left;
              var top =  offset.top;
              alert("left:"+left+";top:"+top);
      });  
  });
  //]]>
  </script>
</head>
<body>
    <input type="button" value="获取p元素的color"/>
    <input type="button" value="设置p元素的color"/>
    <input type="button" value="设置p元素的fontSize和backgroundColor"/>
    <input type="button" value="获取p元素的高度"/>
    <input type="button" value="获取p元素的宽度"/>
    <input type="button" value="设置p元素的高度"/>
    <input type="button" value="设置p元素的宽度"/>
    <input type="button" value="获取p元素的的左边距和上边距"/>


    <p title="选择你最喜欢的水果."><strong>你最喜欢的水果是?</strong></p>
    <ul>
      <li title=‘苹果‘>苹果</li>
      <li title=‘橘子‘>橘子</li>
      <li title=‘菠萝‘>菠萝</li>
    </ul>
</body>
</html>