jQuery-01-jQuery选择器及元素操作

 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>
jQuery-01-jQuery选择器及元素操作

猜你喜欢
