JQ选择器

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") 筛选所被选中的单选或筛选元素

猜你喜欢

转载自www.cnblogs.com/max-hou/p/9126098.html