博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery选择器
阅读量:7071 次
发布时间:2019-06-28

本文共 1588 字,大约阅读时间需要 5 分钟。

jQuery的选择器可参考css进行理解

1.基本选择器,根据id、class和标签名

$('*'):对所有内容生效

$('#id'):根据id进行选择

$('.class'):根据class进行选择

$('tagName'):根据html标签进行选择

$('.class,tagName,...'):同时选取多个,用逗号隔开

2.层级选择器

$('选择器1 选择器2'):选择器1的所有下属选择器2

$('选择器1>选择器2'):选择器1的直接下属选择器2

$('选择器1+选择器2'):选择器1后面的相邻兄弟选择器2

$('选择器1~选择器2'):选择器1后面的所有兄弟选择器2

3.过滤筛选器,以列表为例

$('li:first'):列表标签的第一个标签,也可写为$('li').first()

$('li:last'):列表标签的最后一个标签,也可写为$('li').last()

$('li:eq(n)'):列表标签的索引为n标签,索引从0开始,也可写为$('li').eq(n)

$('li:even'):列表标签的索引值为偶数的标签,即奇数行

$('li:odd'):列表标签的索引值为奇数的标签,即偶数行

$('li').hasclass('test'):列表标签是否具有值为test的class

4.属性选择器,通过[属性名='属性值']

$("[属性名]"):选择具有该属性的元素

$("[属性名='属性值']"):选择具有该属性并且属性为指定值的元素

$("[属性名1='属性值1'][属性名2='属性值2']"):选择同时满足属性1和属性2的元素

5.表单选择器,只适用于input标签

$("[type='text']"):选择input类型为text的标签,实际是通过属性进行选择的,其他的还有$("[type='checkbox']")、$("[type='radio']")、$("[type='submit']")等

针对表单选择器,可直接简写为$(":text")、$(":checkbox")、$(":radio")、$(":submit")等

6.查找筛选器,以下举例说明

第一组:

$('.outer').children('p'):class为outer的直接下属子元素p

$('.outer').find('p'):class为outer的所有下属子元素p,同时寻找多个$('.outer').find('p,input')

第二组:

$('li').eq(2).next():索引下标为2的下一个li标签

$('li').eq(2).nextAll():索引下标为2的后续所有li标签

$('li').eq(2).nextUntil('#end'):索引下标为2之后、id为end之前(不包括)的所有li标签

第三组:

$('li').eq(2).prev():索引下标为2的上一个li标签

$('li').eq(2).prevAll():索引下标为2的前面所有li标签

$('li').eq(2).prevUntil('#end'):索引下标为2之前、id为end之后(不包括)的所有li标签

第四组:

$('#test').parent():id为test的直接父标签

$('#test').parents():id为test的所有父标签,会一直寻找到html文档的最外层html标签,不常用

$('#test').parentUntil('#end'):id为test的父标签,一致寻找到id为end(不包括)的父标签截止

 第五组,最常用

$('.outer').siblings():寻找outer的所有兄弟元素

 

转载于:https://www.cnblogs.com/Forever77/p/10332712.html

你可能感兴趣的文章
struct和typedef struct
查看>>
Notification启动Activity, 恢复任务栈
查看>>
使用Python进行并发编程
查看>>
自动机器学习简述(AutoML)
查看>>
iPhone X适配
查看>>
虚拟化笔记
查看>>
[vim]-vim基础
查看>>
JAVA 8入门(一)Lambda表达式
查看>>
resin集成eclipse开发
查看>>
将Excel文件中的数据导入到mysql【Excel中拼sql】
查看>>
H5移动端知识点
查看>>
【js与jquery】网站更换皮肤功能
查看>>
Ubuntu ssh连接root验证错误
查看>>
Android WebView 详解(持续更新)
查看>>
ElasticSearch动态添加节点及相关配置项
查看>>
Android studio 使用心得(十)---android studio 多渠道打包(三)
查看>>
数据库选型的一些看法
查看>>
PHP接口&抽象类验证笔记
查看>>
Spark Streaming源码解读之No Receivers
查看>>
使用背景图的div宽高自适应
查看>>