jQuery的选择器相比JavaScript更简单明了。
$()查找元素
$()是jQuery的元素选择器,各种DOM是这样选择的:
选择器语法 |
说明 |
$(*) |
选择所有元素 |
$(element) |
按元素名称选择 |
$(id) |
按id选择元素 |
$(.class) |
按类选择元素 |
基本选择器
选择器示例 |
说明 |
ancestor descendant |
一个元素是另一个元素的后代,如li a |
parent > child |
一个元素是另一个元素的直接子节点 |
previous + next |
相邻的兄弟选择器,只会选中紧跟在前一个元素之后的那一个元素 |
previous ~ siblings |
兄弟选择器会选中前一个元素的所有兄弟元素 |
基本筛选器
筛选示例 |
说明 |
$('li:first') |
选取第一个元素 |
$('li:last') |
选取最后一个元素 |
$("tr:even") |
选取索引为偶数的元素,从 0 开始 |
$("tr:odd") |
选取索引为奇数的元素,从 0 开始 |
$("tr:eq(1)") |
选取给定索引值的元素 |
$("tr:gt(0)") |
选取大于给定索引值的元素 |
$("tr:lt(2)") |
选取小于给定索引值的元素 |
$(":focus") |
当前获取焦点的元素 |
$(":animated") |
正在执行动画效果的元素 |
内容选择器
筛选示例 |
说明 |
$("div:contains('nick')") |
选取包含nick文本的元素 |
$("td:empty") |
选取不包含子元素或者文本的空元素 |
$("div:has(p)") |
选取含有选择器所匹配的元素 |
$("td:parent") |
选取含有子元素或者文本的元素 |
可见性选择器
筛选示例 |
说明 |
$("div:hidden") |
筛选所有隐藏的元素 |
$("td:empty") |
筛选所有可见的元素 |
子节点选择器
筛选示例 |
说明 |
$("ul:nth-child(2)") |
选取当前选中元素的指定子节点,参数中的值是从1开始索引的 |
$("ul:first-child") |
选取当前选中元素的第一个子节点 |
$("ul:last-child") |
选取当前选中元素的最后一个子节点 |
$("ul:only-child") |
选取当前是父元素的唯一子节点时选中 |
属性筛选器
筛选示例 |
说明 |
$("[href]") |
筛选指定属性的元素 |
$("[href='https://www.0735it.net']") |
筛选指定属性,并指定属性值的元素 |
$("[href!='#index']") |
筛选指定属性,并属性值不为指定值的元素 |
$("[href^='#']") |
筛选以特定值开头的元素 |
$("[href*='#']") |
筛选包含特定值的元素 |
$("[href|='#']") |
筛选属性值等于特定字符串,或以特定字符串做为前缀,后加一个连字符(-)的元素 |
$('input[name~="man"]') |
筛选属性值以空格分隔的多个值中的一个 |
$('input[id][name$="man"]') |
多个属性筛选器同时使用 |
表单筛选器
筛选示例 |
说明 |
$("input") |
筛选所有的input元素 |
$("input:text") |
筛选所有文本类型的input元素 |
$("input:password") |
筛选所有密码类型的input元素 |
$("input:radio") |
筛选所有单选类型的input元素 |
$("input:checkbox") |
筛选所有复选类型的input元素 |
$("input:submit") |
筛选所有的提交按钮 |
$("input:image") |
筛选所有的图片 |
$("input:reset") |
筛选所有的重置按钮 |
$("input:button") |
筛选所有的按钮 |
$("input:file") |
筛选所有的文件上传域 |
$("input:selected") |
筛选所有的提交按钮 |
$("input:enabled") |
筛选所有可用的元素 |
$("input:disabled") |
筛选所有禁用的元素 |
$("input:checked") |
筛选所被选中的单选或筛选元素 |