jQuery中的DOM操作

Bertha 。 2023-08-17 17:19 128阅读 0赞

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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      }

一般来说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获取样式和设置样式

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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  
    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>

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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   });

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

$(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);
                } 
          })
      });

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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   });

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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   });

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

$(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
          });   
      });

9遍历DOM树

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

$(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 );
         }

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

$(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>元素的唯一同辈元素
      });

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

$(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");
          }

10CSS-DOM综合运用

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!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>
     
     <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>

转载于:https://www.cnblogs.com/s-z-y/p/4348671.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20230808/d0affb565bd24fc1916a8493a7363e81.png