jQuery-01-jQuery選擇器及元素操做

時間 2019-11-10
原文原文鏈接
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
 7     </head>
 8     <body>
 9         <script type="text/javascript">
10             //檢測jQuery文件是否引入成功
11             console.log($);
12             
13             //基礎選擇器
14 //            經過id來獲取元素 document.getElementById();
15 //            $('#logo').css('border','solid 2px red');
16 //            經過標籤名來獲取元素
17 //            $('div').css('background-color','red');
18 //            經過class類名來獲取元素
19 //            $('.logo').css('background-color','red');
20 //            逗號 並列獲取
21 //            $('#item','#item1').css('background-color','red');
22 //            空格 層級獲取
23 //            $('#item1 #item1').css('background-color','red');
24           
25             //過濾獲取
26 //          獲取第一個元素
27 //          $('li:first').css('background-color','#369');
28 //          獲取最後一個元素
29 //          $('li:last').css('background-color','369');
30 //          獲取指定索引的元素,索引從0開始
31 //          $('li:eq(7)').css('background-color','#369');
32 //          $('li').eq(7).css('background-color','#369');
33 //           獲取包含指定文本的元素
34 //          $('li:contains(國)').css('background-color','#369');
35 //          經過包含指定屬性來獲取元素,經過屬性來獲取
36 //          $('li[name=y]').css('background-color','#369');
37 
38             //父子關係獲取
39             //獲取全部的子元素
40 //          $('#images').children().css('background-color','#369');
41             //獲取第一個子元素
42 //          $('ul li:first-child').css('background-color','#369');
43             //獲取最後一個子元素
44 //          $('ul li:last-child').css('background-color','#369');
45             //獲取指定索引的子元素  索引從1開始
46 //          $('ul li:nth-child(3)').css('background-color','#369');
47             //獲取元素上一個同級元素
48 //          $('#f').prev().css('background-color','#369');
49             // 獲取元素下一個同級元素
50 //          $('#f').next().css('background-color','#369');
51             //獲取全部同輩元素(同輩元素不包含本身)
52 //          $('#f').siblings().css('background-color','#369');
53             
54             //獲取父級元素
55 //          $('#f').parent().css({background-color:'#369',width:'20px'，border:'1px solid red'});//多種樣式同時獲取和修改
56             //獲取先輩級元素
57 //          $('#f').find('#all').css('background-color','#369');
58             //在父級元素中查找指定的子元素
59 //          $('#f').find('.w').css('background-color','#369');
60 
61 
62 //          經過jQuery來給元素添加class屬性
63 //          $('div').addClass('.item1 .item2').css('background-color','#369');
64 //          經過jQuery刪除class屬性 注意:若是不指定要刪除的類名 name就刪除全部類的屬性
65 //          $('div').removeClass('div');
66 //          移除多個樣式
67 //          $('div').removeClass('div div2');
68 //          重複切換anotherClass的樣式
69             
70             
71 //          文本操做
72 //          html()取出或設置html內容
73             //取出html內容
74 //          var $htm = $('#div1').html();
75             //設置html內容
76 //          $('#div').html('<span>添加文字</span>');
77             
78 //          attr()取出或設置某個屬性的值
79             //取出圖片的地址
80 //          var Src = $('#img1').attr('src');
81             //設置圖片的地址和alt屬性
82 //          $('#img1').attr({src:'test.jpg',alt:'Test Image'});
83             //用戶設置class屬性
84 //          $('#img1').attr('class','all');
85             //也能夠自定義 屬性
86 //          $('#abc').attr('love','iloveyou');
87          
88 //         removeattr()刪除屬性
89 //         $('#abc').removeAttr('class');
90            // ...
91             
92         </script>
93     </body>
94 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。