JQuery 常见DOM操作练习2

1.插入元素节点size()方法<!--html{cursor:help; font-size:12px;font-family:Arial, Helvetica, sans-serif;}div{border:1px solid #003a75;background-color:#FFFF00;margin

潇潇雨歇_

725人浏览 · 2016-11-06 12:38:01

潇潇雨歇_ · 2016-11-06 12:38:01 发布

1.插入元素节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>size()方法</title>
<style type="text/css">
<!--
 html{
     cursor:help; font-size:12px;
     font-family:Arial, Helvetica, sans-serif; 
 }
 div{
     border:1px solid #003a75;
     background-color:#FFFF00;
     margin:5px;
     padding:20px;
     text-align:center;
     height:20px;
     width:20px;
     float:left 
 }
 -->
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
  /*document.onclick=function(){
    var i=$("div").size()+1;
    var div=document.createElement("div");
    div.innerHTML=i;
    $("body")[0].appendChild(div) ;//将jquery对象转换成DOM对象
    $("span")[0].innerHTML=i;
  }*/
  
  $(function(){
     $(document).click(function(){
         var i=$("div").size()+1;
         var div=$("<div>"+i+"</div>");
        // $('body').append(div);
        // div.appendTo($("body"));//插入元素的方法
        // $('body').prepend(div);
        //$("body").after(div);//插入div
        //div.insertAfter($("body"));//在body之后插入兄弟节点
         //$("body").before(div);
         div.insertBefore($("body"));
         $('span').html(i);
     }); 
  });
      
      
</script>
</head>
<body>
   <p>页面中一共有<span>0</span>个div块。点击鼠标添加div:</p>
   <p>我是段落</p>
</body>
</html>

2.删除元素节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>remove(),detach(),empty()方法</title>
<style type="text/css">
<!--
 p{
     font-size:14px;
     margin:0px;
     padding:5px;
 }
 -->
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
  $(function(){
     $("p").click(function(){
        alert("hello p"); 
     });
     $("input").click(function(){
        //var $removed=$("p").remove(); 删除p元素
        //var $removed=$("p").detach(); //删除p元素，但会绑定它的事件
        $("p").empty();//p元素仍保留，但清空了p元素的后代节点
        //$("h2").after($removed);
     });
  });
      
      
</script>
</head>
<body>
   <p>从前有一只大恐龙...</p>
   <input type="button" value="点击我"/>
   <h2>在树林里面跑啊跑...</h2>
</body>
</html>

截图：

3.复制元素节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复制和替换元素</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
  $(function(){
      //复制第一张图片
    $("img:eq(0)").click(function(){
        //$(this).clone(true).appendTo($('body'));
        //$("img:eq(1)").replaceWith("<a href='#'>我是超链接</a>");//将第一张图片替换成超链接
        $("<a href='#'>我是超链接</a>").replaceAll($('img:eq(1)'));//将第一张图片替换成超链接
    });
  });
      
      
</script>
</head>
<body>
  <img src="jia.jpg" width="100px" height="100px"/><img src="jia.jpg" width="100px" height="100px"/>
</body>
</html>

截图：