DOM包裹wrap()方法

JsAaron · JsAaron · commit 7655755a81f8 · 2016-02-21T00:13:24.000+08:00
diff --git a/慕课网教程案例/jQuery入门教程/jQuery的节点操作/DOM包裹wrap()方法.html b/慕课网教程案例/jQuery入门教程/jQuery的节点操作/DOM包裹wrap()方法.html
@@ -4,18 +4,11 @@
 <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <title></title>
-    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
+    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
     <style>
-    .left,
-    .right {
-        width: 250px;
-        height: 120px;
-    }
-    
     .left div,
     .right div {
         width: 100px;
-        height: 120px;
         padding: 5px;
         margin: 5px;
         float: left;
@@ -26,15 +19,22 @@
     .right div {
         background: yellow;
     }
+    
+    p {
+        background-color: red;
+    }
+    
+    a {
+        background-color: blue;
+    }
     </style>
 </head>
 
-
 <body>
     <h2>DOM包裹wrap()方法</h2>
     <div class="left">
-        <div class="aaron1">点击,通过wrap方法给p元素增加父容器div</div>
-        <div class="aaron2">点击,通过wrap的回调方法给a元素增加父容器div</div>
+        <button class="aaron1">点击,通过wrap方法给p元素增加父容器div</button>
+        <button class="aaron2">点击,通过wrap的回调方法给a元素增加父容器div</div>
     </div>
     <div class="right">
         <p>p元素</p>
diff --git a/慕课网教程案例/jQuery入门教程/jQuery的节点操作/DOM拷贝clone().html b/慕课网教程案例/jQuery入门教程/jQuery的节点操作/DOM拷贝clone().html
@@ -4,7 +4,7 @@
 <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <title></title>
-    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
+    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
     <style>
     .left,
     .right {
@@ -29,7 +29,7 @@
     <h2>通过clone克隆元素</h2>
     <div class="left">
         <div class="aaron1">点击,clone浅拷贝</div>
-        <div class="aaron2">点击,clone深拷贝</div>
+        <div class="aaron2">点击,clone深拷贝,可以继续出发事件</div>
     </div>
     <script type="text/javascript">
     	//只克隆节点
@@ -43,7 +43,8 @@ <h2>通过clone克隆元素</h2>
     	//克隆节点
     	//克隆事件
 	    $(".aaron2").on('click', function() {
-	        $(".left").append($(this).clone(true).css('color','blue'))
+            console.log(1)
+	        $(".left").append( $(this).clone(true).css('color','blue') )
 	    })
     </script>
 </body>
diff --git a/慕课网教程案例/jQuery入门教程/jQuery的节点操作/DOM替换replaceWith()和replaceAll().html b/慕课网教程案例/jQuery入门教程/jQuery的节点操作/DOM替换replaceWith()和replaceAll().html
@@ -6,23 +6,7 @@
     <title></title>
     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
     <style>
-    .left,
-    .right {
-        width: 300px;
-        height: 120px;
-    }
-    
-    .left div,
-    .right div {
-        width: 100px;
-        height: 120px;
-        padding: 5px;
-        margin: 5px;
-        float: left;
-        border: 1px solid #ccc;
-        background: #bbffaa;
-    }
-    
+
     .right div {
         background: yellow;
     }
@@ -32,8 +16,8 @@
 <body>
     <h2>replaceWith()和replaceAll()</h2>
     <div class="left">
-        <div class="aaron1">点击,通过replaceWith替换内容</div>
-        <div class="aaron2">点击,通过rreplaceAll替换内容</div>
+        <button class="bt1">点击,通过replaceWith替换内容</button>
+        <button class="bt2">点击,通过rreplaceAll替换内容</button>
     </div>
     <div class="right">
         <div>
@@ -50,7 +34,7 @@ <h2>replaceWith()和replaceAll()</h2>
     <script type="text/javascript">
     //只克隆节点
     //不克隆事件
-    $(".aaron1").on('click', function() {
+    $(".bt1").on('click', function() {
         //找到内容为第二段的p元素
         //通过replaceWith删除并替换这个节点
         $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
@@ -59,7 +43,7 @@ <h2>replaceWith()和replaceAll()</h2>
     <script type="text/javascript">
     //找到内容为第六段的p元素
     //通过replaceAll删除并替换这个节点
-    $(".aaron2").on('click', function() {
+    $(".bt2").on('click', function() {
         $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
     })
     </script>
