选择器
jQuery的选择器相比javaScript更简单明了。
$()是jQuery的元素选择器,各种DOM是这选择的:
$()查找元素
选择器语法 | 说明 |
$(*) | 选择所有元素 |
$(element) | 按元素名称选择 |
$(id) | 按id选择元素 |
$(.class) | 按类选元素 |
基本选择器
选择器示例 | 说明 |
ancestor descendant | 一个元素是另一个元的后代,如li a |
parent>chiild | 一个元素是另一个元素的子节点 |
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]") | 筛选指定属性的元素 |
$(“[hret='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") | 筛选所被选中的单选或筛选元素 |