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','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>