一、选择器

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