JQ选择器

Posted 2020-11-10 麦克斯-侯的博客

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