一、选择器
1、基础选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“#id”); | 获取指定ID的元素 |
| 类选择器 | $(“.class”); | 获取同一类class的元素 |
| 标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $(“div.redClass”); |
获取class为redClass的div元素 |
2.层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”); | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
知识铺垫：
jQuery设置样式
$(‘div‘).css(‘属性‘,‘值‘)此处属性可为background等。
隐式迭代：
jQuery会将匹配到的所有元素内部进行遍历循环，因此如果想给四个盒子上色，只需要$(‘div‘).css(‘background‘,‘pink‘)就能给多个div盒子上色
3.筛选选择器
| 语法 | 用法 | 描述 |
| :first | $("li:first") | 获取第一个li元素 |
| :last | $("li:last") | 获取最后一个li元素 |
| :eq(index) | $("li:eq(2)") | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 |
| :odd | $("li:odd") | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $("li:even") | 获取到的li元素中，选择索引号为偶数的元素 |
筛选方法
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”)，子类选择器 |
| find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器（儿子孙子） |
| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找父亲（直系） |
| eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
| next() | $(“li”).next() | 找下一个兄弟 |
| nextAll([expr]) | 当前元素后所有同辈元素（不包括当前） | |
| prev() | $(“li”).prev() | 找上一次兄弟 |
| prevAll() | 当前元素前所有同辈元素（不包括当前） | |
| hasClass | 判断是否有类名 |
其中eq，选择器时，若想使用变量做索引号格式为：
var index=2;
$("ur li:eq("+index+")")
作为方法时可直接替换数字：
$("ul li").eq(index)
4.排他思想
此处利用siblings()方法
1 <body> 2 <button>快速</button> 3 <button>快速</button> 4 <button>快速</button> 5 <button>快速</button> 6 <button>快速</button> 7 8 <script> 9 $(function () { 10 //1.隐式迭代，给所有按钮绑定点击事件 11 $("button").click(function () { 12 //2. 当前的元素变化背景颜色 13 $(this).css("background", "pink") 14 //3.其余的兄弟去掉背景颜色 15 $(this).siblings("button").css("background", "") 16 }) 17 }) 18 </script> 19 </body>
优化：链式编程——节省代码量，看起来更优雅
$(this).css("color","red").siblings().css("color","blue")
5.案例
淘宝服饰精品案例
css样式和图片需自行添加
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script src="jquery.min.js"></script> 9 <script> 10 $(function () { 11 //1.鼠标经过左侧的小li 12 $("#left li").mouseover(function () { 13 //2.得到当前li索引号 14 var index = $(this).index(); 15 // console.log(index); 16 //3.让右侧的盒子相应索引号的图片显示出来，其余隐藏 17 $("#content div").eq(index).show(); 18 $("#content div").eq(index).siblings().hide(); 19 20 }) 21 22 }) 23 </script> 24 </head> 25 26 <body> 27 <div class="wrapper"> 28 <ul id="left"> 29 <li><a href="#">女靴</a></li> 30 <li><a href="#">雪地靴</a></li> 31 <li><a href="#">冬裙</a></li> 32 <li><a href="#">呢大衣</a></li> 33 <li><a href="#">毛衣</a></li> 34 <li><a href="#">棉裤</a></li> 35 <li><