zepto中的DOM操作 插入操作 append appendTo 插在最後一個子元素後面 prepend prependTo 插在第一個子元素前面 after insertAfter 插在該元素後面，作為兄弟元素 before insertbefore 插在該元素後面，作為兄弟元素 <!DOCTY ...
zepto中的DOM操作
插入操作
append appendTo 插在最後一個子元素後面
prepend prependTo 插在第一個子元素前面
after insertAfter 插在該元素後面，作為兄弟元素
before insertbefore 插在該元素後面，作為兄弟元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <div id="parent"> <div id="child1">child1</div> </div> <script src="zepto.min.js"></script> <script> var child2=$("<div id='child2'>child2<div>"); $("#parent").append(child2); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <div id="parent"> <div id="child1">child1</div> </div> <script src="zepto.min.js"></script> <script> var child2=$("<div id='child2'>child2<div>"); child2.appendTo($("#parent")); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <div id="parent"> <div id="child1">child1</div> </div> <script src="zepto.min.js"></script> <script> var child2=$("<div id='child2'>child2<div>"); $("#parent").prepend(child2); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <div id="parent"> <div id="child1">child1</div> </div> <script src="zepto.min.js"></script> <script> var child2=$("<div id='child2'>child2<div>"); child2.prependTo($("#parent")); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <div id="parent"> <div id="child1">child1</div> </div> <script src="zepto.min.js"></script> <script> var child2=$("<div id='child2'>child2<div>"); $("#parent").after(child2); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <div id="parent"> <div id="child1">child1</div> </div> <script src="zepto.min.js"></script> <script> var child2=$("<div id='child2'>child2<div>"); child2.insertAfter($("#parent")); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <div id="parent"> <div id="child1">child1</div> </div> <script src="zepto.min.js"></script> <script> var child2=$("<div id='child2'>child2<div>"); $("#parent").before(child2); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <div id="parent"> <div id="child1">child1</div> </div> <script src="zepto.min.js"></script> <script> var child2=$("<div id='child2'>child2<div>"); child2.insertBefore($("#parent")); </script> </body> </html>
刪除 remove/empty
remove 刪除元素及其子元素
empty 清空元素的內容，該元素本身不刪除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <ul> <li> <a href="#">鏈接</a> </li> </ul> <script src="zepto.min.js"></script> <script> $("li").remove(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <ul> <li> <a href="#">鏈接</a> </li> </ul> <script src="zepto.min.js"></script> <script> $("li").empty(); </script> </body> </html>
複製節點
clone 複製節點，但如果原來的綁定過事件，複製出來的元素不會綁定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <ul> <li> <span>刪除</span> </li> </ul> <script src="zepto.min.js"></script> <script> $("ul li").click(function(){ $(this).clone().appendTo($("ul")); }) </script> </body> </html>
替換節點 replaceEWith
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <p>我是p元素</p> <script src="zepto.min.js"></script> <script> $("p").replaceWith("<span>我被替換啦</span>"); </script> </body> </html>
包裹節點 wrap wrapAll
wrap 每個p元素外面都包裹一個div
wrapAll 所有p元素外面統一裹一個div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <p>我是p元素1</p> <p>我是p元素2</p> <p>我是p元素3</p> <p>我是p元素4</p> <script src="zepto.min.js"></script> <script> $("p").wrap("<div></div>"); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <p>我是p元素1</p> <p>我是p元素2</p> <p>我是p元素3</p> <p>我是p元素4</p> <script src="zepto.min.js"></script> <script> $("p").wrapAll("<div id='parent'></div>"); </script> </body> </html>
zepto的屬性與樣式操作
屬性操作 attr removeAttr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <body> <div>我是div</div> <script src="zepto.min.js"></script> <script> console.log($("div").attr("title"));//獲取屬性 undefined $("div").attr("title","title1");//設置單個屬性 console.log($("div").attr("title"));//獲取屬性 title1 $("div").attr({"data-x":"dataX","data-y":"dataY"});//設置多個屬性 console.log($("div").attr("data-x"));//獲取屬性 dataX $("div").removeAttr("data-x");//刪除單個屬性 console.log($
