【前端学习】【jQuery选择器】
jQuery选择器
jQuery选择器
本文内容引自于单东林《锋利的jQuery》,未经原作者准许,禁止以商业目的转载发布!
选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM(Document Object Model)和Ajax(Asynchronous JavaScript and XML)操作都依赖于选择器。
1 优势
1.1 简洁的写法
$()
被jQuery作为选择器函数来使用。例如,$("#ID")
用来代替document.getElementById()
。
1.2 支持CSS1到CSS3选择器
支持从CSS1~3的部分选择器,同时它也有少量独有的选择器。使用CSS选择器时,开发人员需要考虑主流浏览器是否支持某些选择器。而在jQuery中,开发人员则可以放心地使用jQuery选择器而无需考虑浏览器是否支持这些选择器。
1.3 完善的处理机制
使用jQuery获取网页中不存在的元素也不会报错,例如:
<div>test</div>
<script type="text/javascript">
$('#tt').css("color", "red") // 这里无需判断$('#tt')是否存在
</script>
有了这个预防措施,即使以后因为某种原因删除网页上某个以前使用过的元素,也不用担心这个网页的JavaScript代码会报错。
2 CSS选择器和jQuery选择器
2.1 基本选择器
CSS | jQuery | 功能 |
---|---|---|
#id | $(“#test”) | 选取id为test的元素 |
.class | $(“.test”) | 选取所有class为test的元素 |
element | $(“p”) | 选取所有的<p> 元素 |
* | $(“*”) | 选取所有的元素 |
selector1,selector2,…selectorN | $(“div,span,p.myClass”) | 选取所有<div> ,<span> 和拥有class为myClass的<p> 标签的一组元素 |
2.2 层次选择器
CSS | jQuery | 功能 |
---|---|---|
E F | $(“div span”) | 选取<div> 里所有的<span> 元素 |
E>F | $(“div>span”) | 选取<div> 元素下元素名是<span> 的子元素 |
E+F | $(“.one+div”) | 选取class为one的下一个<div> 同辈元素 |
E~F | $(“#two~div”) | 选取id为two的元素后面的所有<div> 同辈元素 |
2.3 过滤选择器
2.3.1 基本过滤选择器
CSS | jQuery | 功能 |
---|---|---|
:first | $(“div:first”) | |
:last | $(“div:last”) | |
:not(selector) | $(“input:not(.myClass)”) | |
:even | $(“input:even”) | |
:odd | $(“input:odd”) | |
:eq(index) :gt(index) :lt(index) | $(“input:eq(1)”) | |
:header | $(“:header”) | 选取所有的标题元素 |
:animated | $(“div:animated”) | 选取当前正在执行动画的所有元素 |
:focus | $(“:focus”) | 选取当前获取焦点的元素 |
2.3.2 内容过滤选择器
CSS | jQuery |
---|---|
:contains(text) | $(“div:contains(“text”)”) |
:empty | $(“div:empty”) |
:has(selector) | $(“div:has(p)”) |
:parent | $(“div:parent”) |
2.3.3 可见性过滤选择器
CSS | jQuery |
---|---|
:hidden | $(“:hidden”) |
:visible | $(“div:visible”) |
2.3.4 属性过滤选择器
CSS | jQuery |
---|---|
[attribute] | $(“div[id]”) |
[attribute=value] | $(“div[title=test]”) |
[attribute!=value] | $(“div[title!=test]”) |
[attribute^=value] $ * | ~ |
$(“div[^=test]”) |
[attr1][attr2][attrN] | $(“div[id][title$=’test’”]) |
2.3.5 子元素过滤选择器
CSS | jQuery |
---|---|
:nth-child(n) | 同上 |
:first-child | |
:last-child | |
:only-child |
2.3.6 表单对象属性过滤选择器
CSS | jQuery |
---|---|
:enabled | 同上 |
:disabled | |
:checked | |
:selected |
2.4 表单选择器
CSS | jQuery |
---|---|
:input | |
:text | |
:password | |
:radio | |
:checkbox | |
:submit | |
:image | |
:reset | |
:button | |
:file | |
:hidden |
【前端学习】【jQuery选择器】的更多相关文章
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- 【前端】jQuery选择器$()的实现原理
今天三七互娱技术面试的时候面试官问了我这个问题,当时一脸懵逼,于是好好总结一下. 当我们使用jquery选择器的时候,$(s).回默认去执行jquery内部封装好的一个init的构造函数每次申明一个j ...
- 前端学习☞jquery
一 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 j ...
- 深入学习jQuery选择器系列第七篇——表单选择器
× 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...
- 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器
× 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...
- 前端学习——JQuery Ajax使用经验
0.前言 在项目推进过程中常常使用Ajax,通过Jquery提供的函数能够很方便的使用Ajax,可是在实际使用中也遇到一些问题,比如怎样防止浏览器使用缓存,怎样使用同步方式等.通过博文整理总结 ...
- 前端学习-jQuery
老师博客:https://www.cnblogs.com/yuanchenqi/articles/6070667.html day43,day44 jquery 中文文档:http://jquery. ...
随机推荐
- iOS开发——打包ipa
首先,保证设备证书和配置文件的正确,Xcode上登陆好自己公司的账号Apple ID 1.选中运行模拟器的位置为硬件设备 2.点击导航栏上的[Product]——[Archive]后编译后弹出如下界面 ...
- CoreAnimation 核心动画二 锚点
锚点: anchorPoint 以锚点为中心 执行动画 (与 渔夫固定船的点时一致的) anchorPoint 默认是 0.5,0.5 (注意: 锚点 是一个比例) anchorPoint ...
- (转)使用Visual Studio 2015开发Android 程序
环境配置: 操作系统:win 7 64位 IDE:Visual Studio 2015 SDK:installer_r24.3.3-windows 安装前提: 编辑hosts文件(在附件可下载)因为安 ...
- OpenCV基本架构[OpenCV 笔记0]
最近正在系统学习OpenCV,将不定期发布笔记,主要按照毛星云的<OpenCV3编程入门>的顺序学习,会参考官方教程和文档.学习工具是Xcode+CMake,会对书中一部分内容更正,并加入 ...
- TCL_事务控制语言
TCL transaction 事务 -- DML 定义为把一连串的操作作为单个逻辑工作单元处理 ----- 例如:银行转账 ...
- 在Mac OS X中使用VIM开发STM32(4)
本文原创于http://www.cnblogs.com/humaoxiao,非法转载者请自重! 在上三篇文章中,我们基本搭建好了开发STM32的IDE环境,当然vim.ctags.tagl ...
- IE=edge,chrome=1的META信息详解
这几天在玩 HTML5 ★ Boilerplate,注意到meta信息中有这么一句: 复制代码 代码如下: <meta http-equiv="X-UA-Compatible" ...
- [译]GC专家系列1: 理解Java垃圾回收
原文链接:http://www.cubrid.org/blog/dev-platform/understanding-java-garbage-collection/ 了解Java的垃圾回收(GC)原 ...
- Ajax的理解
初学JS,一直认为Ajax是个很高级的.不可亵玩的东西.这两天怀着忐忑的心情接触了一下它, 感觉它并没有想象中的那么难理解. 其实,Ajax就是浏览器端向服务器请求资源的一个对象(方法). 就跟打电话 ...
- 选中excel中的对象
2007在查找和选择中点击“选择对象”,然后再全选全个sheet(ctrl+a)就可以看到了. 2010 “选择对象”在 开始——查找和选择——选择对象