1删除元素remove，empty
remove() 和 empty()的区别
remove：包括选中的元素包括其子元素，
empty：清除其子元素。
2.css属性
多属性使用{}括起来。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-css</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $("button").click(function () { 10 $("#div1").css({"background":"blue","border":"solid wheat"}) //多属性 11 $("#div2").css({"background":"purple","border":"solid red"}) 12 }) 13 }) 14 </script> 15 </head> 16 <body> 17 <button>提交</button> 18 <div id="div1">div1</div> 19 <div id="div2">div2</div> 20 </body> 21 </html>
$即将进入JQ的遍历。
1.parent 被选元素的直接父元素。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-遍历</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $("#span").parent().css({"color":"red","border":"solid red"}) 10 }) 11 12 </script> 13 </head> 14 <body> 15 <!--灰色标注为初始颜色--> 16 <div id="div" style="border: grey solid"> 17 div元素 18 <ul id="ul" style="border: grey solid"> 19 ul元素 20 <li id="li" style="border: grey solid"> 21 li元素 22 <br><span id="span" style="border: grey solid" > 23 sp元素 24 </span> 25 </li> 26 </ul> 27 28 </div> 29 </body> 30 </html>
2.parents 选元素的所有祖先元素
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-遍历</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $("#span").parents().css({"color":"red","border":"solid red"}) 10 }) 11 12 </script> 13 </head> 14 <body> 15 <!--灰色标注为初始颜色--> 16 <div id="div" style="border: grey solid"> 17 div元素 18 <ul id="ul" style="border: grey solid"> 19 ul元素 20 <li id="li" style="border: grey solid"> 21 li元素 22 <br><span id="span" style="border: grey solid"> 23 sp元素 24 </span> 25 </li> 26 </ul> 27 28 </div> 29 </body> 30 </html>
3.返回介于两个给定元素之间的所有祖先元素。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-遍历</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $("#span").parentsUntil("#div").css({"color":"red","border":"solid red"}) 10 }) 11 12 </script> 13 </head> 14 <body> 15 <!--灰色标注为初始颜色--> 16 <div id="div" style="border: grey solid"> 17 div元素 18 <ul id="ul" style="border: grey solid"> 19 ul元素 20 <li id="li" style="border: grey solid"> 21 li元素 22 <br><span id="span" style="border: grey solid"> 23 sp元素 24 </span> 25 </li> 26 </ul> 27 28 </div> 29 </body> 30 </html>