2019-06-03
1.基本选择器
| 选择器 |
示例 |
说明 |
| * |
$("*") |
通配符选择器，所有元素 |
| # |
$("#first") |
id选择器，id="first"的元素 |
| . |
$(".cls1") |
class选择器，所有class="cls1"的元素 |
| 标签名 |
$("div") |
元素选择器，所有<div>元素 如$("body")表示选择body元素 |
| 选择器1选择器2 |
$("div.cls1") |
复合选择器，所有class为cls1的div元素 |
| 选择器1,选择器2 |
$("td,th") |
联合选择器，所有<td>和<th>元素 |
2.层次选择器
| 选择器 |
示例 |
说明 |
| 选择器1 选择器2 |
$("#first div") |
派生选择器，id="first"元素下的所有div后代元素 |
| 选择器1>选择器2 |
$("#first>div") |
子元素选择器，id="first"元素下的所有div子元素 |
| 选择器1+选择器2 |
$("#first+div") |
兄弟选择器，紧接在id="first"元素之后的div元素 |
| 选择器1~选择器2 |
$("#first~div") |
在id="first"元素之后的所有div元素 |
3.简单过滤选择器
过滤选择器根据过滤规则进行元素匹配，书写时以冒号（:）开头。
| 选择器 |
功能 |
返回值 |
| :first |
获取第一个元素 |
单个元素 |
| :last |
获取最后一个元素 |
单个元素 |
| :not(select) |
获取除select之外的元素 |
元素集合 |
| :even |
获取所有索引值为偶数的元素 |
元素集合 |
| :odd |
获取所有索引值为奇数的元素 |
元素集合 |
| :eq(i) |
获取所有索引值为i的元素 |
单个元素 |
| :gt(i) |
获取所有索引值大于i的元素 |
元素集合 |
| :lt(i) |
获取所有索引值小于i的元素 |
元素集合 |
| :beader |
获取所有标题类型的元素 |
元素集合 |
4.内容过滤选择器
根据元素中的文字内容或所包含的子元素特征获取元素。
| 选择器 |
功能 |
返回值 |
| :contains |
获取包含给定文本的元素 |
元素集合 |
| :empty |
获取不包含子元素或文本为空的元素 |
元素集合 |
| :has(select) |
获取含有选择器所匹配元素的元素 |
元素集合 |
| :parent |
获取含有子元素或文本的元素 |
元素集合 |
5.可见性过滤选择器
根据是否可见的特征获取元素
| 选择器 |
功能 |
返回值 |
| :hidden |
获取所有隐藏元素 |
元素集合 |
| : visible |
获取所有可见元素 |
元素集合 |
6.属性过滤选择器
根据某个属性的特征获取元素，以"["号开始、"] "号结束。
| 选择器 |
功能 |
返回值 |
| [attribute] |
获取包含给定属性的元素 |
元素集合 |
| [attribute=value] |
获取属性值等于给定值的元素 |
元素集合 |
| [attribute!=value] |
获取属性值不等于给定值的元素 |
元素集合 |
| [attribute^=value] |
获取给定属性是以某些值开始的元素 |
元素集合 |
| [attribute$=value] |
获取给定属性是以某些值结束的元素 |
元素集合 |
| [attribute*=value] |
获取给定属性是包含某些值的元素 |
元素集合 |
| [selector1] [selector2] [selector3] |
获取满足多个条件的复合属性的元素 |
元素集合 |
7.子元素过滤选择器
获取父元素中指定的子元素。
| 选择器 |
功能 |
返回值 |
| :nth-child(eq|even|odd|index) |
获取父元素下特定位置的元素，索引从1开始 |
元素集合 |
| :first-child |
获取第一个子元素 |
元素集合 |
| :last-child |
获取最后一个元素 |
元素集合 |
| :only-child |
获取仅有一个的子元素 |
元素集合 |
8.表单对象属性过滤选择器
| 选择器 |
示例 |
说明 |
| :enabled |
$(":enabled") |
所有可用的 input 元素 |
| :disabled |
$(":disabled") |
所有禁用的 input 元素 |
| :selected |
$("option元素集合:selected") |
匹配所有选中的option元素 |
| :checked |
$("复选框或单选框集合:checked") |
匹配所有选中的复选框、单选按钮元素 |
<p>请选择你的血型</p>
<input type="radio" name="bloods" value="A"/>A型
<input type="radio" name="bloods" value="B"/>B型
<input type="radio" name="bloods" value="AB"/>AB型
<input type="radio" name="bloods" value="O"/>O型
<input type="button" value="确定" id="btn1"/>
$(function(){
$("#btn1").click(function(){
if(!($("input[name=bloods]").is(":checked"))){
alert("请至少选择一项!");
}
});
})
//is函数用于判断当前匹配的元素集合中的元素，是否为一个指定的选择器，DOM元素，或者jQuery对象，
//如果这些元素至少一个匹配给定的参数，则返回true。
9.表单选择器
| 选择器 |
示例 |
说明 |
| :input |
$(":input") |
所有 <input> 元素 |
| :text |
$(":text") |
所有 type="text" 的 <input> 元素 |
| :password |
$(":password") |
所有 type="password" 的 <input> 元素 |
| :radio |
$(":radio") |
所有 type="radio" 的 <input> 元素 |
| :checkbox |
$(":checkbox") |
所有 type="checkbox" 的 <input> 元素 |
| :submit |
$(":submit") |
所有 type="submit" 的 <input> 元素 |
| :reset |
$(":reset") |
所有 type="reset" 的 <input> 元素 |
| :button |
$(":button") |
所有 type="button" 的 <input> 元素 |
| :image |
$(":image") |
所有 type="image" 的 <input> 元素 |
| :file |
$(":file") |
所有 type="file" 的 <input> 元素 |
| :hidden |
$(“:hidden”) |
所有type=“hidden”和所有不可见元素 |
总结
- 多用ID选择器
- 配合使用class选择器
- 尽量使用复合选择器，如$("div.style1")
- 多用父子关系，少用嵌套关系，如使用parent>child代替parent child
- 缓存jQuery对象
