jQuery中的9个选择器

选择器是 jQuery 最基础的东西,本文中列举的选择器基本上囊括了所有的 jQuery 选择器,也许各位通过这篇文章能够加深对 jQuery 选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 jQuery 代码的效率。本文配合截图、代码和简单的概括对所有 jQuery 选择器进行 了介绍,也列举出了一些需要注意和区分的地方。

1、基本选择器(重点)

  • #id:根据元素的 id 属性来获取元素
  • element:根据元素的名称来获取元素
  • selector1,selector2:同时获取多个元素
  • .class:根据元素的 class 属性来获取元素

2、层级选择器(重点)

  • ancetor descendant :选取祖先元素下的所有后代元素(多级)
  • parent >  child :选择父元素下的所有子元素(一级)
  • prev +  next :选取当前元素紧邻的下一个同级元素
  • prev~  siblings :选取当前元素后面的所有同级元素

3、简单选择器

  • :first :获取第一个元素
  • :last :获取最后一个元素
  • :even 偶数,获取偶数行数据
  • :odd  奇数,获取奇数行数据
  • :eq(index) :获取索引等于 index 的元素,index 默认从 0 开始
  • :gt(index) 大于,获取索引大于 index 的元素
  • :lt(index) 小于,获取索引小于 index 的元素
  • :not(selector):获取除指定选择器以外的其他元素

4、内容选择器

  • :contains(text):获取内容包含 text 文本的元素
  • :empty:获取内容为空的元素
  • :has(selector) :获取内容包含指定选择器的元素
  • :parent :获取内容不为空的元素(特殊)

5、可见性选择器

  • :hidden:获取所有隐藏元素
  • :visible:获取所有可见元素

6、属性选择器

  • [attribute]:获取具有指定属性的元素
  • [attribute=value]:获取属性值等于 value 的元素
  • [attribute!=value] :获取属性值不等于 value 的元素
  • [attribute^=value] :获取属性值以 value 开始的元素
  • [attribute$=value] :获取属性值以 value 结尾的元素
  • [attribute*=value] :获取属性值包含 value 的元素
  • [attribute1][attribute2]…[attributeN] :获取同时拥有多个属性的元素

7、子元素选择器

  • :nth-child(index/even/odd) 从 1 算起,匹配子元素等于 index/even/odd 的元素
  • :first-child :获取第一个子元素
  • :last-child :获取最后一个子元素
  • :only-child :如果当前元素是唯一的子元素,则匹配

8、表单选择器

  • :input :选取页面中的所有表单元素,包含 select 以及 textarea 元素
  • :text :选取页面中的所有文本框
  • :password:选取所有的密码框
  • :radio :选取所有的单选按钮
  • :checkbox:选取所有的复选框
  • :submit :获取 submit 提交按钮
  • :reset:获取 reset 重置按钮
  • :image:获取 type=’image’的图像域
  • :button:获取 button 按钮
  • :file:获取 type=’file’的文件域
  • :hidden:获取隐藏表单

9、表单对象属性选择器

  • :enabled:获取所有可用表单元素
  • :disabled:获取所有不可用表单元素
  • :checked:获取所有选中的表单元素,主要针对 radio 以及 checkbox
  • :selected:所有所有选中的表单元素,主要针对 select

沈唁志|一个PHPer的成长之路! 原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:jQuery中的9个选择器

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

CSS 弹性布局 flex 属性详解

定义了当flex容器有多余空间时,item是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同item的放大比例,如

8930
来自专栏十月梦想

Vue动画之列表过渡

        首先我们定义一个列表循环的元素放在transition-group中

30820
来自专栏小程序的道路

小程序事件

当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数,跳转到demo页面。然后在对应的js中写出事件的具体实现方法

21160
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例之自动切换轮播图片

        2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

15640
来自专栏cnblogs

Bootstrap源码分析之transition、affix

一、Transition(过滤) 作为一个基础支持的组件,被其他组件多次引用。实现根据浏览器支持transition的能力,然后绑定动画的结束事件; 首先:创建...

21770
来自专栏编程坑太多

事件对象的使用、属性和方法

12930
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例手动切换轮播图片

        2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

13120
来自专栏菜鸟计划

javascript 事件基础

一:事件流       事件流描述的是从页面中接收事件的顺序。 ? ?  事件冒泡 <div id="one"> <div id="tw...

37250
来自专栏前端说吧

JS-DOM对象知识点汇总(慕课)

30470
来自专栏小狼的世界

jQuery的animate函数

jQuery提供了一个animate函数,可以通过改变CSS属性来实现一些动画效果。

12230

扫码关注云+社区

领取腾讯云代金券