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($("div").attr("data-x"));//獲取屬性 undefined $("div").removeAttr("data-y title");//洗掉多個屬性 console.log($("div").attr("title"));//獲取屬性 undefined </script> </body> </html>
添加樣式 addClass
<!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"> <style> .pink{color:pink;} .big{font-size:30px;} </style> </head> <body> <div>我是div</div> <script src="zepto.min.js"></script> <script> $("div").addClass("pink");//添加單個樣式 $("div").addClass("pink big");//快速添加多個樣式 $("div").addClass("pink").addClass("big");//鏈式操作添加多個樣式 </script> </body> </html>
洗掉樣式 removeClass
不加引數會洗掉所有樣式
<!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"> <style> .pink{color:pink;} .big{font-size:30px;} </style> </head> <body> <div>我是div</div> <script src="zepto.min.js"></script> <script> $("div").addClass("pink big");//快速添加多個樣式 $("div").removeClass("big");//洗掉樣式 $("div").removeClass();//洗掉所有樣式 </script> </body> </html>
切換樣式
toggle show和hide的切換（顯示隱藏）
toggleClass
<!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"> <style> .pink{color:pink;} .big{font-size:30px;} </style> </head> <body> <div>我是div</div> <button id="btn">顯示隱藏</button> <button id="btn2">切換樣式</button> <script src="zepto.min.js"></script> <script> $("#btn").click(function(){ $("div").toggle();//顯示隱藏切換 }) $("#btn2").click(function(){ $("div").toggleClass("pink");//樣式添加洗掉 }) </script> </body> </html>
判斷是否含有某個樣式 hasClass
<!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"> <style> .pink{color:pink;} .big{font-size:30px;} </style> </head> <body> <div class="pink">我是div</div> <script src="zepto.min.js"></script> <script> console.log($("div").hasClass("pink")); console.log($("div").hasClass("pink big")); </script> </body> </html>
zepto遍歷節點
next 緊挨著的下一個兄弟元素
<!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"> <style> .pink{color:pink;} .big{font-size:30px;} </style> </head> <body> <div id="one">我是one</div> <p id="p">我是p</p> <div id="div">我是div</div> <script src="zepto.min.js"></script> <script> $("#one").next().html("我是two");//找下一個兄弟元素 $("#one").next("div").html("我是two");//找下一個兄弟元素，且是div </script> </body> </html>
prev
<!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"> <style> .pink{color:pink;} .big{font-size:30px;} </style> </head> <body> <p id="p1">我是p1</p> <div id="one">我是one</div> <p id="p2">我是p2</p> <script src="zepto.min.js"></script> <script> $("#one").prev().html("我是one的前一個元素");//找上一個兄弟元素 $("#one").prev("p").html("我是one的前一個元素，并且是p");//找上一個兄弟元素，且是p </script> </body> </html>
siblings 獲取前面后面的所有兄弟元素
<!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"> <style> .pink{color:pink;} .big{font-size:30px;} </style> </head> <body> <p id="p1">我是p1</p> <div id="one">我是one</div> <p id="p2">我是p2</p> <script src="zepto.min.js"></script> <script> $("#one").siblings().html("我是one的兄弟元素"); </script> </body> </html>
parent 直接父元素
parents 父元素、祖父元素等
<!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"> <style> .pink{color:pink;} .big{font-size:30px;} </style> </head> <body> <div id="p1"> <div id="p2"> <div id="p3"> <div id="c">我是child</div> </div> </div> </div> <script src="zepto.min.js"></script> <script> console.log($("#c").parent());//X [div#p3, selector: Array(1)] console.log($("#c").parents());//X(5) [div#p3, div#p2, div#p1, body, html, selector: Array(5)] </script> </body> </html>
zepto中css-DOM操作
樣式有多個單詞，可以使用連字符，也可以使用駝峰法
css width height
<!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"> <style> .pink{color:pink;} .big{font-size:30px;} .bgBlue{background-color:lightblue;} </style> </head> <body> <div class="div">div</div> <script src="zepto.min.js"></script> <script> $(".div").css("color","pink");//修改單個樣式 $(".div").css("background-color","lightblue");//連字符 $(".div").css("backgroundColor","lightblue");//駝峰法 $(".div").css({ "color":"pink", "backgroundColor":"lightblue", "font-size":"30px" });//修改多個樣式 $(".div").width(100);//修改寬度 $(".div").height(100);//修改高度 </script> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/4024.html
標籤：jQuery
上一篇：zepto選擇器
下一篇：zepto中的事件