码迷,mamicode.com
首页 > Web开发 > 详细

Jquery所有Dom操作汇总

时间:2019-05-11 14:50:04      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:list   remove   document   app   aaaaa   方法   节点   htm   dom   

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Document</title>

   <script type="text/javascript" src="jquery.1.11.1.min.js"></script>

</head>

<body>

 

      //Jquery的dom操作

   append()  在容器插入标签(插入到最后)

   appendTo() 把标签插入到容器(插入到最后)

   prepend() 在容器插入标签(插入到最前)

   prependTo()  把标签插入到容器(插入到最前)

   after()       在某个标签后插入标签

   inserAfter()  把某个标签插入到标签后

   before()      在某个标签前插入标签

   insertBefore() 把某个标签插入到标签前

   empty()        清空内部子节点

   remove()       移除节点自身,不保存事件和属性

   detach()       移除节点自身,保存事件和属性

   clone()        克隆节点  (true)克隆事件

   replaceWith() *  将标签替换为其他标签

   replaceAll() *    用标签替换标签

   wrap() *          用标签包裹标签

   unwrap() *        去除容器

   wrapall() *       用标签包裹标签

   wrapinner() *

 

 //html

   <ul class="list">

      <li>li1</li>

      <li>li2</li>

      <li>li3</li>

   </ul>

   <div id="box">hhhhhh</div>

   <div id="box1">aaaaaa</div>

 

   <div class="box2"><span>inner</span></div>

   <div class="a1">a1</div>

   <div class="a2">a2</div>

   <script type="text/javascript">

      //举例

      var    $oDiv4 = $("<li>li4</li>");      //创建子元素节点

      $(".list").append($oDiv4);        //为类名为.list的父元素添加子元素

  

      var $oDiv5 = $("<li>li5</li>");

      $oDiv5.appendTo($(".list"));         //标签添加到类名为list后面,默认在最后面

     

      var $oDiv6 = $("<li>li6</li>");  

      $(".list").prepend($oDiv6);       //添加到最前面,即父元素下的第一个标签

     

      var $oDiv7 = $("<li>li7</li>")   

      $oDiv5.after($oDiv7);                //在li5后面加个li7

     

      $("#box").empty();             //清空内部子节点   

      $("#box1").remove();           //id为box1的标签从网页中移除

     

      var $box2 =  $(".box2").clone(true);  //克隆,

      $oDiv7.append($box2);             //然后添加到li7后面

       

      $(".box2").replaceWith("替换原来内容");   //替换原来内容,其实用html()方法也可以实现 

   </script>

</body>

</html>

Jquery所有Dom操作汇总

标签:list   remove   document   app   aaaaa   方法   节点   htm   dom   

原文地址:https://www.cnblogs.com/binghuaZhang/p/10848600.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!