jQuery中的DOM操作

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

ContractedBlock.gif ExpandedBlockStart.gif

  1. 1 $(function(){
  2.  2      var $body = $("body").children();
  3.  3      var $p = $("p").children();
  4.  4      var $ul = $("ul").children();
  5.  5      alert( $body.length );  // <body>元素下有2个子元素
  6.  6      alert( $p.length );     // <p>元素下有0个子元素
  7.  7      alert( $ul.length );    // <p>元素下有3个子元素
  8.  8      for(var i=0;i< $ul.length;i++){
  9.  9          alert( $ul[i].innerHTML );
  10. 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. 1 var $para=$("p");
  2. 2 var p_txt=$para.attr("title");//获取<p>元素属性title
  3. 3 alert(p_txt);

2创建节点

第一步要创建新元素

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

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

3删除节点

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

4复制节点

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

5替换节点

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

6包裹节点

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

7获取样式和设置样式

ContractedBlock.gif ExpandedBlockStart.gif

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

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

ContractedBlock.gif ExpandedBlockStart.gif

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

ContractedBlock.gif ExpandedBlockStart.gif

  1. $(function(){
  2.       $("#address").focus(function(){         // 地址框获得鼠标焦点
  3.             var txt_value =  $(this).val();   // 得到当前文本框的值
  4.             if(txt_value==this.defaultValue){  
  5.                 $(this).val("");              // 如果符合条件，则清空文本框内容
  6.             } 
  7.       });
  8.       $("#address").blur(function(){          // 地址框失去鼠标焦点
  9.               var txt_value =  $(this).val();   // 得到当前文本框的值
  10.             if(txt_value==""){
  11.                 $(this).val(this.defaultValue);// 如果符合条件，则设置内容
  12.             } 
  13.       })
  15.       $("#password").focus(function(){
  16.             var txt_value =  $(this).val();
  17.             if(txt_value==this.defaultValue){
  18.                 $(this).val("");
  19.             } 
  20.       });
  21.       $("#password").blur(function(){
  22.               var txt_value =  $(this).val();
  23.             if(txt_value==""){
  24.                 $(this).val(this.defaultValue);
  25.             } 
  26.       })
  27.   });

ContractedBlock.gif ExpandedBlockStart.gif

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

ContractedBlock.gif ExpandedBlockStart.gif

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

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

9遍历DOM树

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

ContractedBlock.gif ExpandedBlockStart.gif

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

ContractedBlock.gif ExpandedBlockStart.gif

  1. $(function(){
  2.     $(document).bind("click", function (e) {
  3.         $(e.target).closest("li").css("color","red");
  4.     })
  5.   });
  8.  $(function(){
  9.       //parent
  10.       $("input:eq(0)").click(function(){
  11.             resetStyle();
  12.             $('.item-1').parent().css('background-color', 'red');
  13.       });
  14.       //parents
  15.       $("input:eq(1)").click(function(){
  16.             resetStyle();
  17.             $('.item-1').parents('ul').css('background-color', 'red');
  18.       });
  19.       //closest
  20.       $("input:eq(2)").click(function(){
  21.             resetStyle();
  22.             $('.item-1').closest('ul').css('background-color', 'red');
  23.       });
  25.       function resetStyle(){
  26.           $("*").removeAttr("style");
  27.       }

10CSS-DOM综合运用

ContractedBlock.gif ExpandedBlockStart.gif

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>3-12-1</title>
  7. <style type="text/css">
  8. .test{
  9.  font-weight:bold;
  10.  color : red;
  11. }
  12. .add{
  13.  font-style:italic;
  14. }
  15. </style>
  16.  <!--   引入jQuery -->
  17.  <script src="../../scripts/jquery.js" type="text/javascript"></script>
  18.  <script type="text/javascript">
  19.  //<![CDATA[
  20.   $(function(){
  21.       //获取<p>元素的color
  22.       $("input:eq(0)").click(function(){
  23.             alert(  $("p").css("color") );
  24.       });
  25.       //设置<p>元素的color
  26.       $("input:eq(1)").click(function(){
  27.              $("p").css("color","red")
  28.       });
  29.       //设置<p>元素的fontSize和backgroundColor
  30.       $("input:eq(2)").click(function(){
  31.              $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})
  32.       });    
  33.       //获取<p>元素的高度
  34.       $("input:eq(3)").click(function(){
  35.               alert( $("p").height() );
  36.       });  
  37.       //获取<p>元素的宽度
  38.       $("input:eq(4)").click(function(){
  39.               alert( $("p").width() );
  40.       });   
  42.         //获取<p>元素的高度
  43.       $("input:eq(5)").click(function(){
  44.               $("p").height("100px");
  45.       });  
  46.       //获取<p>元素的宽度
  47.       $("input:eq(6)").click(function(){
  48.               $("p").width("400px");
  49.       }); 
  50.       //获取<p>元素的的左边距和上边距
  51.       $("input:eq(7)").click(function(){
  52.               var offset = $("p").offset();
  53.               var left = offset.left;
  54.               var top =  offset.top;
  55.               alert("left:"+left+";top:"+top);
  56.       });  
  57.   });
  58.   //]]>
  59.   </script>
  60. </head>
  61. <body>
  62.     <input type="button" value="获取p元素的color"/>
  63.     <input type="button" value="设置p元素的color"/>
  64.     <input type="button" value="设置p元素的fontSize和backgroundColor"/>
  65.     <input type="button" value="获取p元素的高度"/>
  66.     <input type="button" value="获取p元素的宽度"/>
  67.     <input type="button" value="设置p元素的高度"/>
  68.     <input type="button" value="设置p元素的宽度"/>
  69.     <input type="button" value="获取p元素的的左边距和上边距"/>
  72.     <p title="选择你最喜欢的水果."><strong>你最喜欢的水果是?</strong></p>
  73.     <ul>
  74.       <li title='苹果'>苹果</li>
  75.       <li title='橘子'>橘子</li>
  76.       <li title='菠萝'>菠萝</li>
  77.     </ul>
  78. </body>
  79. </html>

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

发表评论

表情：
评论列表 （有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JQuery的Dom操作

    [JQuery的Dom操作][JQuery_Dom]    小编最近参与了一个网站项目的开发，所以遇到了大量的js操作。让小编大为挠头。JQuery这东西，我貌似曾经熟练过一

    我就是我我就是我/ 0 赞/ 327 阅读

    相关 jquery 操作DOM

    操作属性 -------------------- 通过attr可以获取标签的属性值， 还可以设置属性值， 和css()类似. 测试代码如下 <div c

    亦凉亦凉/ 0 赞/ 401 阅读