专栏首页前端知识分享第71天:jQuery基本选择器(二)

第71天:jQuery基本选择器(二)

jQuery选择器

一、内容过滤选择器

选择器

描 述

返 回

示 例

:contains(text)

匹配含有文本内容text的元素

集合元素

$(“p:contains(今天)”)

:empty

匹配不含子元素或文本元素的空元素

集合元素

$(“p:empty”)

:has(selector)

匹配包含selector元素的元素

集合元素

$(“div:has(span)”)

:parent

匹配含有子元素或文本的元素

集合元素

$(“div:parent”)

二、可见性过滤选择器

选择器

描 述

返 回

示 例

:hidden

匹配所有不可见的元素

集合元素

$(“:hidden”)

:visible

匹配所有可见元素

集合元素

$(“:visible”)

三、属性过滤选择器

选择器

描 述

返 回

示 例

[attr]

匹配拥有此属性的元素

集合元素

$(“img[alt]“)

[attr=value]

匹配属性值为value的元素

集合元素

$(“a[title=test]“)

[attr!=value]

匹配属性值不等于value的元素

集合元素

$(“a[title!=test]“)

[attr^=value]

匹配属性值以value开头的元素

集合元素

$(“img[alt^=welcome]“)

[attr$=value]

匹配属性值以value结尾的元素

集合元素

$(“img[alt$=last]“)

[attr*=vlaue]

匹配属性值中含有value的元素

集合元素

$(“div[title*=test]“)

[attr1][attr2]…

通过多个属性进行匹配

集合元素

$(“div[id][title*=test]“)

四、子元素过滤选择器

选择器

描 述

返 回

示 例

:nth-child

匹配每个父元素下的第index个子元素索引从1开始

集合元素

$(“div:nth-child(2)”)

:first-child

匹配每个父元素的第一个子元素

集合元素

$(“div:first-child”)

:last-child

匹配每个父元素的最后一个子元素

集合元素

$(“div:last-child”)

: only-child

某元素是它父元素中的唯一的子元素则匹配它

集合元素

$(“div:only-child”)

五、表单对象属性过滤选择器

选择器

描 述

返 回

示 例

:enabled

匹配所有可用元素

集合元素

$(“form :enabled”)

:disabled

匹配所有不可用的元素

集合元素

$(“form :disabled”)

:checked

匹配所有被选中的元素(含单选框,复选框)

集合元素

$(“input:checked”)

:selected

匹配所有被选中的选项元素

集合元素

$(“select :selected”)

六、表单选择器

选择器

描 述

返 回

示 例

:input

匹配所有input, textarea,select, button元素

集合元素

$(“input”)

:text

匹配所有文本框

集合元素

$(“:text”)

:password

匹配所有密码框

集合元素

$(“:password”)

:radio

匹配所有单选框

集合元素

$(“:radio”)

:checkbox

匹配所有多选框

集合元素

$(“:checkbox”)

:submit

匹配所有提交按钮

集合元素

$(“:submit”)

:image

匹配所有图像按钮

集合元素

$(“:image”)

:reset

匹配所有重置按钮

集合元素

$(“:reset”)

:button

匹配所有按钮

集合元素

$(“:button”)

:file

匹配所有上传域

集合元素

$(“:file”)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第213天:12个HTML和CSS必须知道的重点难点问题

    这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?这个还是容易被忽视的,浮...

    半指温柔乐
  • 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

    除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。

    半指温柔乐
  • 第20天:京东nav、footer部分制作

    cursor:pointer; 鼠标变成小手 cursor:default;小白 cursor:move;移动 cursor:text;文本输入

    半指温柔乐
  • 前端面试题-伪类和伪元素

    CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个...

    前端博客 : alili.tech
  • jquery教程之查找筛选函数

    三、children 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

    老雷PHP全栈开发
  • 数据结构 - 顺序表

    在程序中,经常需要将一组(通常是同为某个类型的)数据元素作为整体管理和使用,需要创建这种元素组,用变量记录它们,传进传出函数等。一组数据中包含的元素个数可能发生...

    忆想不到的晖
  • CSS一个div内两个子元素的高度自适应

    3-1-2019更新:使用flex布局,align-items:flex-start即可。

    gojam
  • jQuery 常用方法

    jQuery 是一个快速、简洁的 JavaScript 框架,封装 JavaScript 常用的功能代码,提供一种简便的 JavaScript 设计模式,优化 ...

    Nian糕
  • JDK1.9-数据结构

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java
  • java常用的几种数据结构,堆栈,队列,数组,链表,哈希表

    先进后出(即,存进去的元素,要在后它后面的元素依次取出后,才能取出该元素)。例如,子弹压进弹夹,先压进去的子弹在下面,后压进去的子弹在上面,当开枪时,先弹出上面...

    IT云清

扫码关注云+社区

领取腾讯云代金券