jQuery.选择器

本文详细介绍了jQuery中的选择器使用方法,包括基本选择器、筛选器、内容选择器、可见性选择器、子节点选择器及属性筛选器等,帮助读者快速掌握jQuery选择器的运用。

选择器


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

 

 

转载于:https://www.cnblogs.com/H97042/p/9347280.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值