jQuery选择器
jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器
其中过滤选择器又分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器
基本选择器
基本选择器由元素ID,class,元素名,多个选择符组成,可以完成大多数页面元素的查找
<script type="text/javascript">
var div = $("div");
//通过元素名选择页面的div元素对象
var wra = $("#wrapper");
//通过ID选择对应的ID为wrapper的元素
var box = $(".box");
//通过类名选择对应的class为box的元素
var boxs = $("#wrapper .box");
//多个选择符组成
</script>
<div id="wrapper">
<div class="box">
</div>
</div>
层次选择器
通过DOM元素间的层次关系获取元素,主要的层次关系包括:后代、父子、相邻、兄弟关系
<script type="text/javascript">
var ap = $("div p");
// 选择div元素后面的所以后代p元素
var p = $(".box>p");
// 选择.box的子元素p
var next = $(".box>p").next();
// 选择.box的子元素p的下一个元素
var nextall = $(".box>p").nextAll();
// 选择.box的子元素p的后面的所有元素
var li = $(".ts").siblings();
// 选择ul下面的不含.ts样式的li元素
</script>
<div id="wrapper">
<div class="box">
<p class="t">
选择器测试
</p>
<p>
选择器测试
</p>
<p>
选择器测试
</p>
<ul>
<li class="ts">
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
<div class="p">
<p>
今天心情不错
</p>
</div>
</div>
</div>
简单过滤选择器
过滤选择器根据某过滤规则进行元素的匹配,书写时都已 “:” 开头
-
first()或:first ------选择第一个元素 ------返回单个元素
-
last()或:last ------选择最后一个元素 ------返回单个元素
-
not(selector) ------选择除了给定选择器外的所有元素 ------返回元素集合
-
even ------选择所有索引值为偶数的元素,索引号从0开始 ------返回元素集合
-
odd ------选择所有索引值为奇数的元素,索引号从0开始 ------返回元素集合
-
eq(index) ------选择指定索引值的元素,索引号从0开始 ------返回单个元素
-
gt(index) ------选择所有大于给定索引值的元素,索引号从0开始 ------返回元素集合
-
lt(index) ------选择所有小于给定索引值的元素,索引号从0开始 ------返回元素集合
-
header ------选择所有标题类型的元素,如h1,h2.... ------返回元素集合
-
animated ------选择所有正在执行动画的元素 ------返回元素集合
内容过滤选择器
根据元素中的文字内容或包含的子元素特征获取元素
-
contains(text) ------选择包含给定文本的元素 ------返回元素集合
-
empty ------获取所有不包含子元素或者空文本的元素 ------返回元素集合
-
has(selector) ------获取所有选择器所匹配的元素的元素 ------返回元素集合
-
parent ------获取含有子元素或包含文本的元素 ------返回元素集合
可见性过滤选择器
-
hidden ------获取所有不可见的元素 ------返回元素集合
-
visible ------获取所有可见的元素 ------返回元素集合
属性过滤选择器
-
[arrtibute] ------获取包含给定属性的元素 ------返回元素集合
-
[arrtibute=value] ------获取等于给定的属性是某各特定值的元素 ------返回元素集合
-
[arrtibute!=value] ------获取不等于给定的属性是某各特定值的元素 ------返回元素集合
-
[arrtibute^=value] ------获取给定的属性是某些值开始的元素 ------返回元素集合
-
[arrtibute$=value] ------获取给定的属性是某些值结尾的元素 ------返回元素集合
-
[arrtibute*=value] ------获取给定的属性是包含某些值的元素 ------返回元素集合
-
[selector1][selector2][selectorn] ------获取满足多个条件的复合属性的元素 ------返回元素集合
子元素过滤选择器
-
nth-child(eq/even/odd/index) ------获取每个父元素下的特定位置元素,索引从0开始 ------返回元素集合
-
first-child ------获取每个父元素下的第一个子元素 ------返回元素集合
-
last-child ------获取每个父元素下的最后一个子元素 ------返回元素集合
-
only-child ------获取每个父元素下的仅有一个子元素 ------返回元素集合
表单对象属性过滤选择器
-
enabled ------获取表单中所有属性为可用的元素 ------返回元素集合
-
disabled ------获取表单中所有属性为不可用的元素 ------返回元素集合
-
checked ------获取表单中所有被选中的元素 ------返回元素集合
-
selected ------获取表单中所有被选中option的元素 ------返回元素集合
表单选择器
-
input ------获取所有input、textarea、select ------返回元素集合
-
text ------获取所有单行文本框 ------返回元素集合
-
password ------获取所有密码框 ------返回元素集合
-
radio ------获取所有单选按钮 ------返回元素集合
-
checkbox ------获取所有复选框 ------返回元素集合
-
submit ------获取所有提交按钮 ------返回元素集合
-
image ------获取所有图象域 ------返回元素集合
-
reset ------获取所有重置按钮 ------返回元素集合
-
botton ------获取所有按钮 ------返回元素集合
-
file ------获取所有文件域 ------返回元素集合