Jquery remove() empty() css()

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>

 

posted @ 2019-01-26 20:33  CLLOVER  阅读(629)  评论(0)  编辑  收藏  举报