【jQuery】(3)---Jquery操作Dom

2年前 (2022) 程序员胖胖胖虎阿

118 0 0

1 内部插入节点

 1 <body>
 2         <ul id="city">
 3             <li id="bj" name="beijing" >北京</li>
 4             <li id="tj" name="tianjin"> 天津</li>
 5              <li id="cq" name="chongqing">重庆</li>
 6         </ul>
 7     
 8         <ul id="love">
 9             <li id="fk" name="fankong" >反恐</li>
10             <li id="xj" name="xingji">星际</li>
11         </ul>
12            
13     <script type="text/javascript">
14       // $("#city").append($("#fk"));    //将防恐标签位置移到了重庆下面    append向每个匹配的元素的内部的结尾处追加内容
15       // $("#fk").appendTo($("#city"));  //效果和上面一样                appendTo将每个匹配的元素追加到指定的元素中的内部结尾处
16       // $("#city").prepend($("#fk"));   //将将防恐标签位置移到了北京上面   prepend向每个匹配的元素的内部的开始处插入内容
17       // $("#fk").prependTo($("#city")); //效果和上面一样                prependTo将每个匹配的元素插入到指定的元素内部的开始处   
18     </script>  
19   </body>

2.创建节点和删除节点

 1    <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
 2   <body>
 3         <ul id="city">
 4             <li id="bj" name="beijing" >北京</li>
 5             <li id="tj" name="tianjin"> 天津</li>
 6              <li id="cq" name="chongqing">重庆</li>
 7         </ul>
 8             
 9         <script type="text/javascript">  
10           var $hz=$("<li></li>");     //创建<li></li>          $("<li></li>")代表创建元素
11             $hz.attr("id","hz");      //添加属性<li id="hz" name="hangzhou"></li> attr代表添加元素
12             $hz.attr("name","hangzhou");
13             $hz.text("杭州");          //添加文本       text代表添加文本
14             $("#city").append($hz);   //把节点挂载到父节点下即可  
15     
16          //移除节点信息
17          var $cq=$("#cq").remove();  //可以获得移除节点 的元素  remove()代表删除节点
18          //移除属性信息
19          alert($cq.attr("name"));    //移除属性信息        attr（"name"）,如果只有一个属性就代表通过name值得到属性名，这里得到chongqing
20          $("#city").empty();         ////清空节点
21         </script>    
22   </body>

3.复制节点

 1  <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
 2   <body>
 3   <button>保存</button>
 4    <p>段落</p> 
 5    <script type="text/javascript">
 6     $("button").click(function(){
 7        alert("点击按钮");
 8      });
 9        //克隆节点，不克隆事件
10       $("button").clone().appendTo($("p"));     //相当于把第三行的button按钮复制到了p标签的后面 
11        //克隆节点，克隆事件
12        $("button").clone(true).appendTo($("p")); //clone(true)里面添加true代表也克隆事件，因为上面有两个button按钮，所以两个都会被复制
13      </script>
14   </body>

4.替换节点

 1   <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>  
 2   <body>
 3 <p>段落</p>
 4 <button>登陆</button>
 5  <script type="text/javascript">
 6  //replaceWith和replaceAll的功能完全相反，
 7  // $("p").replaceWith("<button>登陆</button>");  //把p标签换成button按钮
 8  // $("p").replaceAll("<button>登陆</button>");   //按照道理是把button标签变成p标签，但没有实现功能
 9  </script>
10   </body>