说明:文本也算元素
1.id选择器:
语法一:$(id名称) 语法二:$("#id名称")
2.元素名称选择器:
单个元素:$("元素名称") 多个元素:$("元素名称,元素名称")
3.样式选择器:
$(".样式名称")
4.元素选择通配符:*
如果直接使用*则意味着整个html页面的所有元素都会被选中,用法:$("*")
5.层次选择器:表格里面的选择器都是要写成: $("选择器"),如祖先后代:$("h1 div")
NO. | 选择器 | 描述 | 返回类型 |
1 | 祖先 后代 | 根据一个元素可以获得指定的所有子元素,不管中间跨过多少代都能找到,可以使用find()函数代替 | 元素集合 |
2 | 父辈>子辈 | 根据一个元素找到指定的子元素,只有一代的差别,可以使用children()函数代替 | 元素集合 |
3 | 元素+相邻元素 | 找到指定元素与其平级的元素,只是向下的一个相邻的指定元素,可以使用next()代替 | 单个元素 |
4 | 元素~相邻元素 | 找到指定元素与其平级的向下的所有指定元素元素,可以使用nextAll()函数代替 | 元素集合 |
6.索引选择器:下面给出的这些索引标记都是针对一组元素的形式出现的,所以如果要想使用,
则首先一定要进行元素的选择,例如:$("ul>li:first")就表示选择了ul标签下的一代子标签中的第一个li标签
NO. | 选择器 | 描述 | 返回类型 |
1 | :first | 取得返回所有元素第一个索引元素,可以使用first()代替 | 单个元素 |
2 | :last | 取得返回所有元素最后一个索引元素,可以使用last()代替 | 单个元素 |
3 | :not(元素) | 排除指定索引之外的所有元素 | 元素集合 |
4 | :even | 取得所有元素索引为偶数的元素,索引值从0开始 | 元素集合 |
5 | :odd | 取得所有元素索引为奇数数的元素,索引值从0开始 | 元素集合 |
6 | :eq | 取得指定索引编号的元素 | 单个元素 |
7 | :gt | 取得大于指定索引编号的元素 | 元素集合 |
8 | :lt | 取得小于指定索引编号的元素 | 元素集合 |
9 | :head | 选择所有<hx>元素 | 元素集合 |
7.内容选择器:使用之前一定要先进行元素的选择
NO. | 选择器 | 描述 | 返回类型 |
1 | :contains(内容) | 返回包含有指定文本内容的所有元素,判断的是是否存在并不要求完全相等 | 元素集合 |
2 | :empty | 返回所有不包含子元素或文本的所有元素信息,jquery中<元素></元素>才是空元素;而<元素/>不属于空元素 | 元素集合 |
3 | :parent | 返回所有包含子元素的指定元素 | 元素集合 |
4 | :has(选择器) | 获取包含有指定子选择器所匹配的所有元素 | 元素集合 |
5 | 父元素选择器 | 使用parent()函数完成 | 单个元素 |
例子 | 意思 |
$("ul *:contains('Hello')") | 选择ul元素下所有内容存在Hello的元素 |
$("ul li:empty") | 选择的是ul元素下不包含子元素或文本的所有li元素 |
$("div:parent") | 选择的是包含子元素的所有div元素 |
$("body:has(span)") | 先找到body元素下的所有元素,再筛选包含span元素的元素 |
$("span").parent() | 首先定位要找的元素再找其父元素 |
8.可见性选择器:使用之前一定要先进行元素的选择,例如:$("div:hidden"),选择的是所有隐蔽的div元素
NO. | 选择器 | 描述 | 返回类型 |
1 | :hidden | 取得所有隐蔽的元素 | 元素集合 |
2 | :visible | 取得所有可见的元素 | 元素集合 |
9.属性选择器
NO. | 选择器 | 描述 | 返回类型 | 例子 | 意思 |
1 | [属性名称] | 取得包含有指定属性名称的所有元素 | 元素集合 | $("[id]") | 选择所有具有id属性的所有元素 |
2 | [属性=内容] | 取得具有指定属性且属性内容等于指定内容的所有元素 | 元素集合 | $("[id='info-01']") | 选择所有具有id属性且id属性内容等于info-01的元素 |
3 | [属性!=内容] | 取得不包含有指定属性内容的所有元素 | 元素集合 | ||
4 | [属性^=内容] | 取得以指定内容开头的所有元素 | 元素集合 | $("[id^='info']") | 选择所有具有id属性且id属性内容以info开头的所有元素 |
5 | [属性$=内容] | 取得以指定内容结尾的所有元素 | 元素集合 | ||
6 | [属性*=内容] | 取得包含有指定内容的所有元素,不论是开头,结尾,还是中间都可以 | 元素集合 | ||
7 | [属性选择器][属性选择器][属性选择器] | 表示同时具备有这些属性的元素 | 元素集合 |
$("div[id]") 先查找div元素再判断是否具有id属性
10.表格列选择器
NO. | 选择器 | 描述 | 返回类型 | 例子 | 意思 |
1 | :nth-child(eq|even|odd|index) | 选择指定列中的所有元素,可以使用列的索引,全部偶数索引,全部奇数索引来完成,这个列的索引是从1开始的 | 元素集合 | $("#dept-table td:nth-child(1)") | 选择表格的第一列 |
2 | :first-child | 取得表格行的首列 | 元素集合 | $("#dept-table td:first-child") | 选择表格的首列 |
3 | :last-child | 取得表格行的尾列 | 元素集合 | $("#dept-table td:last-child") | 选择表格的尾列 |
4 | :only-child | 取得只有一个子元素的父元素 | 元素集合 |
11.表单元素选择器
NO. | 选择器 | 描述 | 返回类型 | 例子 | 意思 |
1 | :input | 取得所有的输入组件对象。例如:text,radio | 元素集合 | ||
2 | :text | 取得所有的文本输入框元素 | 元素集合 | $(":text").val("好好学习,天天向上") | 将所有文本输入框的文字都变成“好好学习,天天向上” |
3 | :password | 取得所有的密码输入组件 | 元素集合 | ||
4 | :radio | 取得所有的单选钮 | 元素集合 | ||
5 | :checkbox | 取得所有的复选框 | 元素集合 | ||
6 | :button | 取得所有的按钮 | 元素集合 | ||
7 | :submit | 取得所有的提交按钮 | 元素集合 | ||
8 | :reset | 取得所有的重置按钮 | 元素集合 | ||
9 | :file | 取得所有的上传组件 | 元素集合 | ||
10 | :image | 取得图片按钮 | 元素集合 | ||
11 | :hidden | 取得所有隐藏域 | 元素集合 |