jQuery选择器分类(学习笔记)

1.基础选择器

(1)ID选择器

每个HTML元素都有一个id,可以根据id选取对应的HTML元素。
ID选择器#id就是利用HTML元素的id属性值来筛选匹配的元素并以jQuery包装集的形式返回给对象
ID选择器的使用方法如下:
 $("#id");

(2)元素选择器

元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名,也就是说元素选择器是根据元素的标记名选择的。元素选择器的使用方法如下:

   $("element");

(3)通配符选择器

通配符,就是指符号“”,它代表着页面上的每一个元素,也是说如果使用$(“")将取得页面上所有的DOM元素集合的jQuery包装集。

2.层次选择器

jQuery层次选择器是通过DOM对象的层次关系来获取特定的元素,
如同辈元素、后代元素、子元素和相邻元素等层次选择器的用法与基础选择器相似,
也是使用$()函数来实现,返回结果均为jQuery对象数组。

(1) (祖先 后代)(ancestor descendant)选择器

ancestor descendant选择器的使用方法如下:

   $("ancestor descendant");

参数说明:

 ancestor是指任何有效的选择器。

 descendant是用以匹配元素的选择器,并且它是ancestor所指定元素的后代元素。

例如:

   要匹配div元素下的全部img元素,可以使用下面的jQuery代码:$("div img");

(2) (父>子)(parent>child)选择器

parent > child选择器的使用方法如下:

   $("parent> child");

参数说明:

 parent是指任何有效的选择器。

 child是用以匹配元素的选择器,并且它是parent元素的子元素。

例如:

   要匹配表单中所有的子元素input,可以使用下面的jQuery代码:$("form > input");

(3) (前+后)(prev+next)选择器

prev + next选择器的使用方法如下:

   $("prev+ next");

参数说明:

 prev是指任何有效的选择器。

 next是一个有效选择器并紧接着prev选择器。

例如:

   要匹配<div>标记后的<img>标记,可以使用下面的jQuery代码:$("div + img");

(4) (前~兄弟)(prev~siblings)选择器

prev ~ siblings选择器的使用方法如下:

   $("prev~ siblings");

参数说明:

 prev是指任何有效的选择器。

 siblings是一个有效选择器并紧接着prev选择器。

例如:

   要匹配div元素的同辈元素ul,可以使用下面的jQuery代码:$("div~ ul");

3. 过滤选择器

(1)简单过滤器

以冒号开头,通常用于实现简单过滤效果的过滤器。

在这里插入图片描述

(2)内容过滤器

指根据元素的文字内容或所包含的子元素的特征进行过滤的选择器。

在这里插入图片描述

(3)可见性过滤器

元素的可见状态有两种,分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。因此,可见性过滤器也有两种,一种是匹配所有可见元素的:visible过滤器,另一种是匹配所有不可见元素的:hidden过滤器。
在应用:hidden过滤器时,display属性是none以及input元素的type属性为hidden的元素都会被匹配到。在这里插入图片描述

(4)子元素过滤器

子元素过滤器可以轻松地选取所有父元素中的指定元素,进行处理。

在这里插入图片描述

(5)表单对象的属性过滤器

指通过表单对象的属性特征进行筛选的选择器,包括:checked过滤器、:disabled过器、:enabled过滤器和:selected过滤器4种。
在这里插入图片描述

4. 属性选择器

根据元素的属性来筛选元素的选择器。[ ]

在这里插入图片描述

5. 表单选择器

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值