【锋利的jQuery】学习笔记02
第二章 jQuery选择器
一、jQuery选择器的优势
- 写法简洁 $("div")
- 支持css2和css3选择器(对于css3选择器支持这一项,我认为应该是jQuery首先创造并使用这些选择器而后css3将其引入自己的规范)
- 完善的处理机制 $(".demo")获取的永远是对象,即时网页没有这个元素。
由于这种机制,使用jQuery检查某个元素在网页中是否存在时不能使用:
if($(".demo")){
// do something
}
而是应该根据获取到的长度来判断:
if($(".demo").length>0){
// do something
}
或者是转为DOM判断。
二、jQuery选择器
- 基本选择器
最常用的选择器,通过元素id、class和标签名等查找DOM元素。
选择器 | 描述 | 返回 | 示例 |
#id | 通过id匹配 | 单个元素 | $("#id") |
.class | 通过类名匹配 | 集合元素 | $(".class") |
element | 通过元素名匹配 | 集合元素 | $("element") |
* | 匹配所有元素 | 集合元素 | $("*") |
selector1,selector2,……,selectorN | 群组选择器 | 集合元素 | $("div,span,p") |
- 层次选择器
通过DOM元素之间的层次关系获取特定元素例如:后代元素、子元素、相邻元素和同辈元素等。
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选ancestor元素里面所有的descendant | 集合元素 | $("div span") |
$("parent>child") | 选parent元素下的子元素 | 集合元素 | $("div>span") |
$("prev+next") | 选取紧接在prev后的next元素 | 集合元素 | $("p+div") |
$("prev~siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 | $("div~div") |
对于$("prev+next")选择器一般用next()方法代替,对于$("prev~siblings")一般用nextAll()方法代替。
- 过滤选择器
通过特定的过滤规则筛选所需的DOM元素,选择器已:开头(与css伪类选择器相似)。按照过滤原则可分为:
- 基本过滤选择器
选择器 | 描述 | 返回 | 示例 |
:first | 获取第一个元素 | 单个元素 | $("div:first") |
:last | 获取最后一个元素 | 单个元素 | $("div:last") |
:not(selector) | 去掉selector以外的元素 | 集合元素 | $("div:not(.demo)") |
:even | 选取索引是偶数的元素,索引从0开始 | 集合元素 | $("input:even") |
:odd | 选取索引是奇数的元素,索引从0开始 | 集合元素 | $("input:odd") |
:eq(index) | 选取所有等于index的元素(index从0开始) | 单个元素 | $("div:eq(0)") |
:gt(index) | 选取所有大于index的元素(index从0开始) | 集合元素 | $("div:gt(0)") |
:lt(index) | 选取所有小于index的元素(index从0开始) | 集合元素 | $("div:lt(0)") |
:header |
选取所有标题元素例如:h1,h2等 |
集合元素 | $(":header") |
:animated | 选取正在动画的元素 | 集合元素 | $("div:animated") |
:focus | 选取获得焦点的元素 | 集合元素 | $(":focus") |
在使用:even、:odd、:eq()、:gt()、:lt()等选择器是一定要注意下标问题
2.内容过滤选择器 过滤规则主要是它包含的子元素和文本
选择器 | 描述 | 返回 | 示例 |
:contains(text) | 包含文本为text的元素 | 集合元素 | $("div:contains('text')") |
:empty | 选取没有文本或子元素的空元素 | 集合元素 | $("div:empty“) |
:has(selector) | 选取含有se;ector的元素 | 集合元素 | $("div:has(p)") |
:parent | 选取含有文本或子元素的元素 | 集合元素 | $("div:parent") |
3.可见性过滤选择器 根据元素的可见和不可见状态选择相应元素
选择器 | 描述 | 返回 | 示例 |
:hidden | 选取不可见元素 | 集合元素 | $(":hidden") |
:visible | 选取可见元素 | 集合元素 | $(":visible") |
对于:hidden选择器,不仅可以选择display:none的元素,也可以选择visibility:hidden和文本隐藏域等元素。
4.属性过滤选择器 根据元素属性获取相应元素
选择器 | 描述 | 返回 | 示例 |
[attribute] | 选取有此属性的元素 | 集合元素 | $("div[id]") |
[attribute=value] | 选取属性值为value的元素 | 集合元素 | $("div[id=test]") |
[attribute!=value] | 选取属性值不为value的元素 | 集合元素 | $("div[id!=test]") |
[attribute^=value] | 选取属性值以value开头的元素 | 集合元素 | $("div[id^=test]") |
[attribute$=value] | 选取属性值以value结束的元素 | 集合元素 | $("div[id$=test]") |
[attribute*=value] | 选取属性值含有value的元素 | 集合元素 | $("div[id*=test]") |
[attribute|=value] |
选取属性值为等于value或者以value为前缀的元素 |
集合元素 | $("div[id|=test]") |
[attribute~=value] | 选取属性值空格分隔的值中有value的元素 | 集合元素 | $("div[id~=test]") |
[attribute1][attribute2][attributeN] | 选取有给定的多个属性的元素 | 集合元素 | $("div[id=test][class]") |
5. 子元素过滤选择器
选择器 | 描述 | 返回 | 示例 |
:nth-child() | 选取每个父元素下的给定条件的元素(index从1开始) | 集合元素 | $("div:nth-child") |
:first-child | 选取每个父元素的第一个元素 | 集合元素 | $("div:first-child") |
:last:child | 选取每个父元素的最后一个元素 | 集合元素 | $("div:last-child") |
:only:child | 选取只有一个子元素的父元素 | 集合元素 | $("div:only-child") |
eq(index)只匹配一个元素,而nth-child将为每一个符合条件的父元素匹配子元素。同时nth-child()的index从1开始,eq()从0开始。同理,:first和:first-child、:last和last:child也类似。
6.表单对象属性过滤选择器
选择器 | 描述 | 返回 | 示例 |
:enabled | 选取可用元素 | 集合元素 | $("#form1:enabled") |
:disabled | 选取不刻意元素 | 集合元素 | $("#form1:disabled") |
:checked | 选取被选中元素(单选框、复选框) | 集合元素 | $("input:checked") |
:selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("input: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") |
:hidden | 选取不可见元素 | 集合元素 | $(":hidden") |
三、jQuery选择器注意事项
- 选择器含有”.“,”#“,”(“或”]“等特殊字符时使用转义符转义。
- jQuery在1.3.1版本后放弃之前的属性前加@。
- 选择器对空格敏感。
【锋利的jQuery】学习笔记02的更多相关文章
- 锋利的JQuery 学习笔记
第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);} ...
- 锋利的jquery学习笔记
1.$("#tt")获取的永远都是一个jquery对象,所以要判断页面上是否存在某个对象不能像js中 if($("#tt")){ } 而是通过: ){ } ps ...
- JQuery 学习笔记--02
JS 中的 window.onload() 方法与 Jquery 中的 $(document).read(function( ){ }) 的区别 : 加载时机不一样, window.onload() ...
- 锋利的jQuery学习笔记之jQuery选择器
在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- 软件测试之loadrunner学习笔记-02集合点
loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
随机推荐
- 12.URL重写
为什么要URL重写?1.有利于SEO(搜索引擎优化),带参数的RUL权重较低.2.地址看起来更正规,推广uid. 如我们一般在访问网页是会带参数,http://aaa.com/view.htm?id= ...
- PAIP.提升效率----论项目知识库的建设。。
PAIP.提升效率----论项目知识库的建设.. 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net ...
- bzoj1858
比较烦的线段树 首先询问3很弱智不说, 询问4以前做过类似的,好像是USACO月赛hotel那题类似,维护lmax,rmax,max三个域就可以了 操作0,操作1也很简单,仔细考虑一下就知道也是可以l ...
- 将eclipse新建项目的默认编码GBK改为UTF-8
在eclipse下: 新建项目默认编码设置:Window->Preferences->General->Workspace->Text file encoding 将其改为UF ...
- 【转】linux设备驱动之MMC SD卡——核心层简单分析
原文网址:http://blog.chinaunix.net/uid-28685940-id-3889878.html /*************************************** ...
- 【性能测试】【Jmeter】学习(3)——查看测试结果
监听器——聚合报告 聚合报告添加步骤:(右键点击每一个操作步骤--->“添 加”---->“监听器”---->“聚合报告”) Label:每个 JMeter 的 element(例如 ...
- MySQL 数据库 引擎
MySQL数 据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引 擎:ISAM.MYISAM和HEAP.另外两种类型I ...
- ReadingNotes@02-12-2013
ReadingNotes@02-12-2013 */--> pre { background-color: #2f4f4f;line-height: 1.6; FONT: 10.5pt Cons ...
- Yii 生成表单下拉选框及查询下拉选框
CHtml类参考: http://www.yiichina.com/api/CHtml#activeDropDownList-detail activeDropDownList() 方法 public ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...