JQuery的常用选择器 转
JQuery的常用选择器
刚开始学JQuery写的如有错误欢迎批评指正
JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作
简单介绍一下一些常用的选择器:
1.基本选择器:
- 标签名选择器: $("div") 匹配所有的div
- id选择器: $("#id") 匹配id="id"的元素
- 类选择器: $(".class") 匹配所有class="class"的元素
- 分组选择器: $("#id,.class,div") 匹配id="id"的元素、所有class="class"的元素和所有的div
2.层级选择器:
- $("div span") 匹配div下所有的span子元素
- $("div>span") 匹配div下的span元素
- $("div+span") 匹配div后面相邻的span元素
- $("div~span") 匹配div后面所有的span元素
层级函数
- 获取某个元素的所有兄弟元素:$("#d1").siblings("div");参数可以不写,不写代表所有的兄弟元素
- 获取某个元素的哥哥元素:$("#d1").prev("div");参数不写是获取相邻的上一个元素,写的话指定上一个元素类型
- 获取某个元素的所有哥哥元素:$("#d1").prevAll("div");
- 获取某个元素的弟弟元素:$("#d1").next("div");参数不写是获取相邻的下一个元素,写的话指定上一个元素类型
- 获取某个元素的所有弟弟元素:$("#d1").nextAll("div");
3.过滤选择器:
- $("div:first") 匹配第一个div
- $("div:last") 匹配最后一个div
- $("div:even") 匹配所有索引值为偶数数div(第一个div的索引值为0)
- $("div:odd") 匹配所有索引值为奇数div
- $("div:eq(n)") 匹配索引值为n的div
- $("div:lt(n)") 匹配索引值小于n的div
- $("div:gt(n)") 匹配索引值大于n的div
- $("div:not(.one)") 匹配类名不为"one"的div
4.内容选择器:
- $("div:has(p)") 匹配包含p子元素的div元素
- $("div:empty") 匹配空元素div(既不包含文本也不包含子元素)
- $("div:parent") 匹配非空div元素
- $("div:contains('aa')") 匹配含有文本 'aa' 的 div 元素
5.属性选择器:
- $("div[id]") 匹配包含id属性的 div元素
- $("div[id='aa']") 匹配包含属性id='aa' 的div元素
- $("div[id!='aa']") 匹配id属性不等于aa的div元素
6.子元素选择器:
- $("div:first-child") 匹配div 第一个子元素
- $("div:last-child") 匹配div 最后一个子元素
- $("div:nth-child(n)") 匹配div 第n个子元素
7.表单选择器:
- $(":input") 匹配所有input
- $(":password") 匹配所有密码框
- $(":radio") 匹配所有单选
- $(":checkbox") 匹配所有多选框
- $(":check") 匹配所有单选,多选,下拉选
- $(":input:check") 匹配所有单选,多选
- $(":selected") 匹配所有下拉选
JQuery的常用选择器 转的更多相关文章
- JQuery的常用选择器
刚开始学JQuery写的如有错误欢迎批评指正 JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作 简单介绍一下一些常用的选择器: 1.基本选择器: 标签名选择器: $ ...
- jQuery介绍 常用选择器
jquery现在三个版本, 1.x 2.x 3.x 都在用,越小的版本兼容性越好,ie8以下浏览器也支持,新功能不多.我们通常使用1.x 在html中,css放Head中,js放body尾部 j ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- jQuery常用选择器总结
jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...
- js和jQuery常用选择器
笔者觉得js是前台基础中的基础,而其选择器则是js基础中的基础,因长期使用框架导致js生疏,所有查资料,回顾一下js的常用选择器: 1.document.getElementById("id ...
- jquery 常用选择器和方法以及遍历(超详细)
jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...
- 原生js实现jquery库中选择器的功能(jquery库封装一)
今天是2017.1.1,新的一天,新的一年,新的一年里继续夯实基础知识,在工作中多些项目,多思考,多总结,前端是不断更新,在更新的过程中也是发现乐趣和挑战自我的过程,希望年轻的我和年轻的javascr ...
- JQuery:JQuery语法、选择器、事件处理
JQuery语法: 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
- jquery】常用的jquery获取表单对象的属性与值
[jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...
随机推荐
- [批处理]使用IncrediBuilder加速自动化测试过程
背景 1.目前单机全部跑完一次测试的时间大概是5个小时 2.7个虚拟机进行分布式执行的时间大概为3.5小时(包含复制.收集日志的时间) 预期 期望通过IncrediBuilder的虚拟进程的功能在单机 ...
- 【SparkStreaming学习之四】 SparkStreaming+kafka管理消费offset
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...
- 《CSS世界》读书笔记(十三)
<!-- <CSS世界>张鑫旭著 --> margin 无效情形解析 (1)display 计算值 inline 的非替换元素的垂直 margin 是无效的.对于内联替换元素, ...
- java线程学习之yield方法
yield方法是暂停当前正在执行的线程对象,并执行其他线程. 这是一个静态方法,一旦执行,它会使当前线程让出CPU.让出的cpu并不代表当前线程不执行了.当前线程让出CPU后,还会CPU资源的争夺,但 ...
- 安卓入门——————简单记账本的开发(用sqlite存储数据)(一)
设计思想————首先要确定有几个页面.和每个页面的大致布局 由于是入门,我也是学习了不是很长的时间,所以项目比较low.... 第一个页面,也就是打开APP的首页面: 今天这个博客,先实现添加功能!: ...
- Java中的String为什么是不可变的? -- String源码分析
众所周知, 在Java中, String类是不可变的.那么到底什么是不可变的对象呢? 可以这样认为:如果一个对象,在它创建完成之后,不能再改变它的状态,那么这个对象就是不可变的.不能改变状态的意思是, ...
- 父级POM的表现形式
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...
- redis恢复(aof)
----------------redis备份恢复方法-----------------------------1.采用aof恢复方法若appendonly设置为no的情况下,在每个节点上执行bgre ...
- Mysql索引使用解析
摘自:http://blog.chinaunix.net/uid-25063573-id-3032578.html Mysql索引使用解析 1.索引作用 在索引列上,除了上面提到的有序查找之外,数据库 ...
- 如何改变vim中的光标形状 : 在插入状态下显示为 beam?而在 其他 状态下 为 block?
分成两种情况来说明: 如果是在 shell 即: gnome-termial终端中, 来启动或 使用 vim的话, 你是 无法 实现这种需求的: 改变vim中的光标形状 : 在插入状态下显示为 bea ...