JQuery第二篇 选择器

一、层次选择器

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 匹配所有的偶数下标元素


 

:odd 匹配所有的奇数下标的元素


 

:eq(index) 匹配指定下标的元素，下标从0开始

:gt(index) 匹配大于指定下标的元素

四、属性选择器

1.$(‘[属性名]’) 选择所有设置过指定属性名的元素

2.$('[属性名=属性值]') 选择所有设置过指定属性名称等于指定属性值的元素；

ok,我们控制台输出进行验证