选择器：筛选具有相似特征的元素(标签)
1. 基本选择器
1. 标签选择器（元素选择器）
语法： $("html标签名") 获得所有匹配标签名称的元素
案例： $("div") 选择元素名为<div>的所有元素
2. id选择器
语法： $("#id的属性值") 获得与指定id属性值匹配的元素
案例： $("#one") 选择 id 为 one 的元素
3. 类选择器
语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
案例： $(".mini") 选择class 为 mini 的所有元素
4. 并集选择器：
语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
案例： $("span,#two") 选择所有的 <span> 元素和 id 为 two 的元素
2. 层级选择器
1. 后代选择器
语法： $("A B ") 选择A元素内部的所有B元素
案例： $("body div") 选择<body> 内所有 <div>元素,支持多级
2. 子选择器
语法： $("A > B") 选择A元素内部的所有B子元素
案例： $("body > div") 选择<body> 内子 <div>,不支持多级
3. 相邻元素选择器
语法： $("A + B")
案例： $("#one+div") 选择 id 为 one 的下一个 div 元素
4. 兄弟元素选择器
语法： $("A ~ B") 匹配 A 元素之后的所有 B 元素
案例： $("#two~div") 选择 id 为 two 的元素后面的所有 div 兄弟元素
3. 属性选择器
[attribute] 匹配包含给定属性的元素。
$("div[title]") 含有属性title 的div元素
[attribute=value] 匹配给定的属性是某个特定值的元素
$("div[title='test']") 属性title值等于test的div元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
$("div[title!='test']") 属性title值不等于test的div元素(没有属性title的也将被选中)
[attribute^=value] 匹配给定的属性是以某些值开始的元素
$("div[title^='te']") 属性title值 以te开始 的div元素
$(":text[name^=tel]") 选中name以tel开头的输入框
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
$("div[title$='est']") 属性title值 以est结束 的div元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
$("div[title*='es']") 属性title值 含有es的div元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用
$("div[id][title*='es']") 选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
4. 基本过滤器
1. 首元素选择器
语法： :first 获得选择的元素中的第一个元素
案例： $("div:first") 第一个 div 元素
2. 尾元素选择器
语法： :last 获得选择的元素中的最后一个元素
案例： $("div:last") 最后一个 div 元素
3. 非元素选择器
语法： :not(selector) 不包括指定内容的元素
案例： $("div:not(.one)") class不为 one 的所有 div 元素
$("tr:not(:first)") 选tr元素，但排除第一个
4. 偶数选择器
语法： :even 偶数，从 0 开始计数
案例： $("div:even") 索引值为偶数的 div 元素
5. 奇数选择器
语法： :odd 奇数，从 0 开始计数
案例： $("div:odd") 索引值为奇数的 div 元素
6. 等于索引选择器
语法： :eq(index) 指定索引元素
案例： $("div:eq(3)") 索引值为等于 3 的 div 元素
7. 大于索引选择器
语法： :gt(index) 大于指定索引元素
案例： $("div:gt(3)") 索引值为大于 3 的 div 元素
8. 小于索引选择器
语法： :lt(index) 小于指定索引元素
案例： $("div:lt(3)") 索引值为小于 3 的 div 元素
9. 标题选择器
语法： :header 获得标题（h1~h6）元素，固定写法
案例： $(":header") 所有的标题元素
10. 动画选择器
语法： :animated 匹配所有正在执行动画效果的元素
案例： $(":animated")
5. 内容过滤器
:contains(text) 匹配包含给定文本的元素
$("div:contains('di')") 选择 含有文本 'di' 的 div 元素
:empty 匹配所有不包含子元素或者文本的空元素
$("div:empty") 选择不包含子元素(或者文本元素) 的 div 空元素
:parent 匹配含有子元素或者文本的元素
$("div:parent") 选择含有子元素(或者文本元素)的div元素
:has(selector) 匹配含有选择器所匹配的元素的元素
$("div:has(.mini)") 选择含有 class 为 mini 元素的 div 元素
6. 表单过滤器:
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有 文本输入框
:password 匹配所有的密码输入框
:radio 匹配所有的单选框
:checkbox 匹配所有的复选框
:submit 匹配所有提交按钮
:image 匹配所有 img 标签
:reset 匹配所有重置按钮
:button 匹配所有 input type=button <button>按钮
:file 匹配所有 input type=file 文件上传
:hidden 匹配所有不可见元素 display:none 或 input type=hidden
7. 表单对象属性过滤器
1. 可用元素选择器
语法： :enabled 获得可用元素
案例： $("input[type='text']:enabled") | $(":text:enabled") 表单内 可用的input
2. 不可用元素选择器
语法： :disabled 获得不可用元素
案例： $(":text:disabled") 表单内 不可用input
3. 选中选择器
语法： :checked 获得单选/复选框选中的元素
案例： $("input[type='checkbox']:checked").length | $(":checkbox:checked").length
获取多选框选中的个数 利用 jQuery 对象的 length 属性获取复选框选中的个数
==================================================================
// 获取全部选中的复选框标签对象
var $checkboies = $(":checkbox:checked");
// 老式遍历
// for (var i = 0; i < $checkboies.length; i++){
// alert( $checkboies[i].value );
// }
// each方法是jQuery对象提供用来遍历元素的方法
// 在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象
$checkboies.each(function () {
alert( this.value );
});
4. 选中选择器
语法： :selected 获得下拉框选中的元素
案例：
<select id="test" name="">
<option value="1">text1</option>
<option value="2">text2</option>
</select>
获取选中的option标签对象
var options = $("select option:selected");
options.val() 拿到选中项的 value 值 (1)
options.text() 拿到选中项的 文本值 (text1)
8. jQuery 元素筛选
eq() 获取给定索引的元素 功能跟 :eq() 一样
first() 获取第一个元素 功能跟 :first 一样
last() 获取最后一个元素 功能跟 :last 一样
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true
has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样
not(exp) 删除匹配选择器的元素 功能跟 :not 一样
children(exp) 返回匹配给定选择器的子元素 功能跟 parent>child 一样
find(exp) 返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样
next() 返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样
nextAll() 返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样
nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
parent() 返回父元素
prev(exp) 返回当前元素的上一个兄弟元素
prevAll() 返回当前元素前面所有的兄弟元素
prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
siblings(exp) 返回所有兄弟元素
$(this).siblings("li") 获取当前 li 元素所有兄弟元素
add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中
1615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
