一、层次选择器
1.后代选择器 $("#parent div"); 选择id为parent的元素的所有div元素
2.子代选择器 $("#parent>div"); 选择id为parent的直接div子元素
3.相邻选择器 $(".blue+img"); 选择css类为blue的下一个img元素
4.同辈选择器 $(".blue ~ img"); 选择css类为blue的之后的img元素
我们进行测试
ok接下来我们进行控制台验证
二、表单选择器
1.表单选择器 :input 选择所有的input元素 $(":input");
2.文本框选择器 :text 查看所有的文本框 $(":text")
3.密码框选择器 :password 查找所有的密码框 $(":password")
4.单选按钮选择器 :radio 查找所有的单选框 $(":radio")
5.复选框按钮选择器 :checkbox 查找所有的复选框 $(":checkbox")
6.图像选择器 :image查看所有的图像域 $(":image")
7.重置按钮选择器 :reset 查看所有的重置按钮 $(":reset")
8.按钮选择器 :button 查看所有的按钮 $(":button")
9.文本域选择器 :file 查看所有文件 $(":file")
10.提交按钮选择器 :submit 查找所有提交按钮(":submit");
我们进行测试
打开控制台查看
可以看到元素被获取到了;
三、过滤选择器
1.:eq(index) 匹配指定下标的元素,下标从0开始
2.:even 匹配所有的偶数下标元素
3.:odd 匹配所有的奇数下标的元素
4.:gt(index) 匹配大于指定下标的元素
:even 匹配所有的偶数下标元素
![](https://i-blog.csdnimg.cn/direct/01d78010f3d54dd3baae61f8d4880886.png)
![](https://i-blog.csdnimg.cn/direct/f6ade99dfd0b463bae8065191cc5fb31.png)
:odd 匹配所有的奇数下标的元素
![](https://i-blog.csdnimg.cn/direct/76931e240b4244d0a18c8b05b7a00d75.png)
![](https://i-blog.csdnimg.cn/direct/c3eb747522ae492da5c1b5f62d563e2c.png)
:eq(index) 匹配指定下标的元素,下标从0开始
:gt(index) 匹配大于指定下标的元素
四、属性选择器
1.$(‘[属性名]’) 选择所有设置过指定属性名的元素
2.$('[属性名=属性值]') 选择所有设置过指定属性名称等于指定属性值的元素;
ok,我们控制台输出进行验证