JQuery的常用选择器

刚开始学JQuery写的如有错误欢迎批评指正

JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作

简单介绍一下一些常用的选择器:

1.基本选择器:

  1. 标签名选择器: $("div")  匹配所有的div
  2. id选择器: $("#id")  匹配id="id"的元素
  3. 类选择器: $(".class")  匹配所有class="class"的元素
  4. 分组选择器: $("#id,.class,div") 匹配id="id"的元素、所有class="class"的元素和所有的div

2.层级选择器:

  1. $("div span")  匹配div下所有的span子元素
  2. $("div>span")  匹配div下的span元素
  3. $("div+span")  匹配div后面相邻的span元素
  4. $("div~span")  匹配div后面所有的span元素

层级函数

  1. 获取某个元素的所有兄弟元素:$("#d1").siblings("div");参数可以不写,不写代表所有的兄弟元素
  2. 获取某个元素的哥哥元素:$("#d1").prev("div");参数不写是获取相邻的上一个元素,写的话指定上一个元素类型
  3. 获取某个元素的所有哥哥元素:$("#d1").prevAll("div");
  4. 获取某个元素的弟弟元素:$("#d1").next("div");参数不写是获取相邻的下一个元素,写的话指定上一个元素类型
  5. 获取某个元素的所有弟弟元素:$("#d1").nextAll("div");

3.过滤选择器:

  1. $("div:first")  匹配第一个div
  2. $("div:last")  匹配最后一个div
  3. $("div:even")  匹配所有索引值为偶数数div(第一个div的索引值为0)
  4. $("div:odd")  匹配所有索引值为奇数div
  5. $("div:eq(n)")  匹配索引值为n的div
  6. $("div:lt(n)")  匹配索引值小于n的div
  7. $("div:gt(n)")  匹配索引值大于n的div
  8. $("div:not(.one)")  匹配类名不为"one"的div

4.内容选择器:

  1. $("div:has(p)")  匹配包含p子元素的div元素
  2. $("div:empty")  匹配空元素div(既不包含文本也不包含子元素)
  3. $("div:parent")  匹配非空div元素
  4. $("div:contains('aa')")  匹配含有文本 'aa' 的 div 元素

5.属性选择器:

  1. $("div[id]") 匹配包含id属性的 div元素
  2. $("div[id='aa']")  匹配包含属性id='aa' 的div元素
  3. $("div[id!='aa']")  匹配id属性不等于aa的div元素

6.子元素选择器:

  1. $("div:first-child")  匹配div 第一个子元素
  2. $("div:last-child")  匹配div 最后一个子元素
  3. $("div:nth-child(n)")  匹配div 第n个子元素

7.表单选择器:

  1. $(":input") 匹配所有input
  2. $(":password")  匹配所有密码框
  3. $(":radio")  匹配所有单选
  4. $(":checkbox")  匹配所有多选框
  5. $(":check")  匹配所有单选,多选,下拉选
  6. $(":input:check")  匹配所有单选,多选
  7. $(":selected")  匹配所有下拉选

JQuery的常用选择器 转的更多相关文章

  1. JQuery的常用选择器

    刚开始学JQuery写的如有错误欢迎批评指正 JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作 简单介绍一下一些常用的选择器: 1.基本选择器: 标签名选择器: $ ...

  2. jQuery介绍 常用选择器

    jquery现在三个版本, 1.x  2.x  3.x  都在用,越小的版本兼容性越好,ie8以下浏览器也支持,新功能不多.我们通常使用1.x 在html中,css放Head中,js放body尾部 j ...

  3. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  4. jQuery常用选择器总结

    jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...

  5. js和jQuery常用选择器

    笔者觉得js是前台基础中的基础,而其选择器则是js基础中的基础,因长期使用框架导致js生疏,所有查资料,回顾一下js的常用选择器: 1.document.getElementById("id ...

  6. jquery 常用选择器和方法以及遍历(超详细)

    jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...

  7. 原生js实现jquery库中选择器的功能(jquery库封装一)

    今天是2017.1.1,新的一天,新的一年,新的一年里继续夯实基础知识,在工作中多些项目,多思考,多总结,前端是不断更新,在更新的过程中也是发现乐趣和挑战自我的过程,希望年轻的我和年轻的javascr ...

  8. JQuery:JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  9. jquery】常用的jquery获取表单对象的属性与值

    [jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...

随机推荐

  1. [批处理]使用IncrediBuilder加速自动化测试过程

    背景 1.目前单机全部跑完一次测试的时间大概是5个小时 2.7个虚拟机进行分布式执行的时间大概为3.5小时(包含复制.收集日志的时间) 预期 期望通过IncrediBuilder的虚拟进程的功能在单机 ...

  2. 【SparkStreaming学习之四】 SparkStreaming+kafka管理消费offset

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  3. 《CSS世界》读书笔记(十三)

    <!-- <CSS世界>张鑫旭著 --> margin 无效情形解析 (1)display 计算值 inline 的非替换元素的垂直 margin 是无效的.对于内联替换元素, ...

  4. java线程学习之yield方法

    yield方法是暂停当前正在执行的线程对象,并执行其他线程. 这是一个静态方法,一旦执行,它会使当前线程让出CPU.让出的cpu并不代表当前线程不执行了.当前线程让出CPU后,还会CPU资源的争夺,但 ...

  5. 安卓入门——————简单记账本的开发(用sqlite存储数据)(一)

    设计思想————首先要确定有几个页面.和每个页面的大致布局 由于是入门,我也是学习了不是很长的时间,所以项目比较low.... 第一个页面,也就是打开APP的首页面: 今天这个博客,先实现添加功能!: ...

  6. Java中的String为什么是不可变的? -- String源码分析

    众所周知, 在Java中, String类是不可变的.那么到底什么是不可变的对象呢? 可以这样认为:如果一个对象,在它创建完成之后,不能再改变它的状态,那么这个对象就是不可变的.不能改变状态的意思是, ...

  7. 父级POM的表现形式

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  8. redis恢复(aof)

    ----------------redis备份恢复方法-----------------------------1.采用aof恢复方法若appendonly设置为no的情况下,在每个节点上执行bgre ...

  9. Mysql索引使用解析

    摘自:http://blog.chinaunix.net/uid-25063573-id-3032578.html Mysql索引使用解析 1.索引作用 在索引列上,除了上面提到的有序查找之外,数据库 ...

  10. 如何改变vim中的光标形状 : 在插入状态下显示为 beam?而在 其他 状态下 为 block?

    分成两种情况来说明: 如果是在 shell 即: gnome-termial终端中, 来启动或 使用 vim的话, 你是 无法 实现这种需求的: 改变vim中的光标形状 : 在插入状态下显示为 bea ...