二、jquery选择器
在jquery库中,可以通过选择器实现DOM元素快捷选择这一重要的核心功能。
1.选择器的优势
(1)代码更简单
由于在jquery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简单轻松,简单几行代码就可以实现较为复杂的功能。
(2)完善的检测机制
在传统的javascript代码中,给页面中某元素设置事务时必须先找到元素,然后赋予相应的属性或时间;如果该元素在页面中不存在或被前面代码所删除,那么浏览器将提示运行出出错信息,影响后续代码的执行。因此,在javascript代码中,为了避免显示这样的出错信息,先要检测钙元素是否存在,然后在运行其属性货时间代码,从而导致代码冗余,影响执行效率。
在jquery选择器定位页面元素时,无需考虑所定位页面元素是否存在,即使该页面不存在也元素,浏览器也不会提示出错信息,极大地方便了代码的执行效率。
2.jquery选择器的类型
根据所获取页面中元素的不同,可以将jquery选择器分为四大类型:基本选择器、层次选择器、过滤选择器、表单选择器。其中在过滤选择器中又可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。
其分类结构如图所示:

(1)基本选择器
基本选择器是jquery中使用最平凡的选择器,它由元素ID、Class、元素名、多个选择符组成,通过今本选择器可以实现大多数页面元素的查找,如表所示:
| 选择器 | 功能描述 | 返回值 |
| #id | 根据给定的ID 匹配一个元素 | 单个元素 |
| element | 根据给定元素名匹配所有元素 | 元素集合 |
| .class | 根据给定类型匹配元素 | 元素集合 |
| * | 匹配所有元素 | 元素集合 |
| selsctor1,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素集合 |
(2)层次选择器
层次选择器通过DOM元素件的层次关系获取元素,其主要的层次关系包括后代、自带、相邻、兄弟关系,通过其中某类关系可以方便快捷地定位元素,其详细说明如表所示:
| 选择器 | 功能描述 | 返回值 |
| ancestors descendant | 根据祖先元素匹配所有的后代元素 | 元素集合 |
| parent>child | 根据父元素匹配所有的子元素 | 元素集合 |
| prev + next | 匹配所有进阶在prev元素后的响铃元素 | 元素集合 |
| prev ~ silings | 匹配prev元素之后的所有兄弟元素 | 元素集合 |
ancestor descendant 与 parent > child 所选择的元素集合是不同的,前者的层次关系是祖先与后代,而后者的是父子关系;另外,prev + next可以使用.next()代替,而prev ~ siblings可以使用nextAll()代替。
(3)过滤选择器
简单过滤选择器
过滤选择器根据某类过滤规则进行匹配,书写是都以冒号( :)开头;简单过滤选择器是过滤选择器中使用最广泛的一种,其详细说明如表所示:
| 选择器 | 功能描述 | 返回值 |
| first() 或 :first | 获取第一个元素 | 单个元素 |
| last() 或 :last | 获取最后元素 | 单个元素 |
| :not(selector) | 获取除给定元素外的所有元素 | 元素集合 |
| :even | 获取除所有索引值为偶数的元素,索引号从0开始 | 元素集合 |
| :odd | 获取除所有索引值为奇数的元素,索引号从0开始 | 元素集合 |
| :eq(index) | 获取制定索引值的元素,索引号从0开始 | 单个元素 |
| :gt(index) | 获取所有大于索引值的元素,索引号从0开始 | 元素集合 |
| :lt(index) | 获取制所有小于引值的元素,索引号从0开始 | 元素集合 |
| :header | 获取所有标题类型的元素,如h1、h2··· | 元素集合 |
| :animated | 获取正在执行动画效果的元素 | 元素集合 |
内容过滤选择器
内容选择器根据元素中的文字内容或者所包含的子元素特征获取元素,其文字内容可以模糊或决定匹配进行元素定位,其详细说明如表所示
内容过滤选择器语法
| 选择器 | 功能描述 | 返回值 |
| :contains(text) | 获取包含给定文本的元素 | 元素集合 |
| :enpty | 获取所有不包含子元素或者文本的空元素 | 元素集合 |
| :has(selector) | 获取含有选择器所匹配的元素 | 元素集合 |
| :parent | 获取含有子元素或者文本的元素 | 元素集合 |
可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征获取元素,其详细说明如表所示:
| 选择器 | 功能描述 | 返回值 |
| :hidden | 获取所有不可见元素 | 元素集合 |
| :visible | 获取所有可可见元素 | 元素集合 |
属性过滤选择器
属性过滤选择器根据元素的某个熟属性获取元素,如ID好或匹配属性值的内容,并以“[”号开始、以“]”号结束。其详细说明如表所示:
| 选择器 | 功能描述 | 返回值 |
| [attrbute] | 获取包含给定属性的元素 | 元素集合 |
| [attribute=value] | 获取等于给定元素是某个特定值的元素 | 元素集合 |
| [attribute!=value] | 获取不等于给定元素是某个特定值的严肃 | 元素集合 |
| [attribute] | 获取给定属性是以某些值开始的元素 | 元素集合 |
| [attribute$==value] | 获取给定属性是以某些值结束的元素 | 元素集合 |
| [attribute*=value] | 获取给定的属性是以包含某些值的元素 | 元素集合 |
| [selector1][selector2][selector3] | 获取满足多个条件的复合属性的元素 | 元素集合 |
子元素过滤选择器
在页面开发过程中,常常遇到突出制定某行的需求。为了实现这一功能,jquery中可以通过子元素过滤器选择器轻松获取所有父元素中制定的某个元素。其详细说明如表所示:
| 选择器 | 功能描述 | 返回值 |
| :nth-child(eq|even|odd|index) | 获取每个父元素下的特定位置元素,索引号从1开始 | 元素集合 |
| :first-child | 获取每个父元素下的第一个子元素 | 元素集合 |
| :last-child | 获取每个父元素下的最后一个子元素 | 元素集合 |
| :only-child | 获取每个父元素下的仅有一个子元素 | 元素集合 |
表单对象属性过滤选择器
表单对象属性过滤选择器通过表单中的某对象属性特征获取该元素,如enabled、disabled、checked、selected属性。详细说明如表所示:
| 选择器 | 功能描述 | 返回值 |
| :enabled | 获取表单中所有属性为可用的元素 | 元素集合 |
| :disabled | 获取表单中所有属性为不可用的元素 | 元素集合 |
| :checked | 获取表单中所有被选中的元素 | 元素集合 |
| :selected | 获取表单中所有被选中的option元素 | 元素集合 |
(4)表单选择器
无论是提交还是传递数据,表单在页面中的作用是显而易见的。通过表单进行数据的提交或处理,在前端页面开发中占据重要地位。因此,为了能更加方便地、高效地、使用表单,在jquery选择器中引入表单选择器,该选择器转为表单量身打造,通过他可以在页面中快速定位某些单对象。其详细说明如表所示
| 选择器 | 功能描述 | 返回值 |
| :input | 获取所有 input、textarea、aelect | 元素集合 |
| :text | 获取所有单行文本框 | 元素集合 |
| :password | 获取所有密码狂 | 元素集合 |
| :radio | 获取所有复选框 | 元素集合 |
| :checkbox | 获取所有复选框 | 元素集合 |
| :submit | 获取所有提交按钮 | 元素集合 |
| :image | 获取所有图像域 | 元素集合 |
| :reset | 获取所有重置按钮 | 元素集合 |
| :botton | 获取所有按钮 | 元素集合 |
| :file | 获取所有文件域 | 元素集合 |
二、jquery选择器的更多相关文章
- jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- jQuery学习之二 jQuery选择器
一.jQuery选择器是什么1.CSS选择器2.jQuery选择器 二.jQuery选择器的优势1.简洁的写法2.支持从CSS1到CSS3选择器3.完善的处理机制 传统js选择器假如要操作的元素不存 ...
- js jquery 选择器总结
js jquery 选择器总结 一.原始JS选择器. id选择器:document.getElementById("test"); name选择器:document.getElem ...
- 我人生中的jQuery选择器
Jquery选择器 一.Jquery选择器简介 JavaScript只是一种运行于客户端,可以被客户端浏览器解析的一段代码.它和java没有任何关系.JavaScript简称JS.jQuery是对JS ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery简介以及jQuery选择器
一 简介 1 定义:jQuery库是JavaScript的封装库 2 优点: 1) : 代码开源 2) : 选择器强大 3) : 完善的Ajax 4) : 浏览器兼容性高 5) : 文档完善(帮助文档 ...
- JQuery选择器(转载)
原文:https://blog.csdn.net/colorapp/article/details/44279645 一. jQuery选择器是什么1. CSS选择器要是某个样式应用于特定的HTML元 ...
- jQuery(二):jQuery选择器
jQuery选择器类似于CSS选择器,用来选取网页中的元素.例如: $("h3").css("background-color","red" ...
- jQuery选择器与过滤器(二)
一.jQuery选择器1.基本选择器:所有选择器 *标签选择器 标签名ID选择器 #ID类选择器 .className组合选择器 selector1,selector2 ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...
随机推荐
- 深入浅出iOS事件机制
原文地址: http://zhoon.github.io/ios/2015/04/12/ios-event.html 本文章将讲解有关iOS事件的传递机制,如有错误或者不同的见解,欢迎留言指出. iO ...
- 【Maven】Eclipse安装Maven插件后导致Eclipse启动出错
本文纯属复制粘贴:具体请参照原文: Eclipse安装Maven插件后,Eclipse启动问题:Maven Integration for Eclipse JDK Warning. 解决方法: 1. ...
- 十六天 css汇总、js汇总、dom汇总
1.css补充之 后台管理界面 顶部导航栏.左边菜单栏.右边内容栏固定在屏幕相应位置 会有上下左右滚动条,设定窗口最小值,使页面不乱.注意overflow:auto要与position:absol ...
- cf595d
题意:给出一个轮子,上面有一个随着它转动的传感器在圆周上,给出一个指定距离m,和轮子向前行进的速度v以及轮子的半径r.问让传感器通过该距离最少需要多少时间. 分析:首先我们列出传感器行进距离与时间的轮 ...
- 错误:The method replace(int, Fragment) in the type FragmentTransaction is not applicable for the arguments (int, MyFragment)
Fragment newfragment =new MyFragment();fragmentTransaction.replace(R.layout.activity_main,newfragmen ...
- ubuntu下安装mcrypt
sudo apt-get install libmcrypt4 php5-mcrypt 一句命令搞定
- iOS中滤镜处理及相关内存泄漏问题的解决
最近工作之余在做一个美图秀秀的仿品 做到滤镜这块的时候 自己就参考了网上几位博主(名字忘了记,非常抱歉)的博客,但是发现跟着他们的demo做的滤镜处理,都会有很严重的内存泄漏,于是就自己按照大体的思 ...
- ios升级<注:来着微信平台>
<来着微信平台> http://mp.weixin.qq.com/s?__biz=MjM5NTIyNTUyMQ==&mid=2709545194&idx=1&sn ...
- 激活webstorm2016如何激活webstorm2016永久激活webstorm2016
没有那么麻烦,我这个方法是简单粗暴: 1.搜webstrom2016,最新的是2016.3 2.官方下载 3.断网,改本地时间,你打算用多久,就把本地时间往未来调多久 4.安装webstorm 5.一 ...
- (转)Nginx SSL+tomcat集群,request.getScheme() 取到https正确的协议
转自http://www.cnblogs.com/interdrp/p/4881785.html 最近在做一个项目, 架构上使用了 Nginx +tomcat 集群, 且nginx下配置了SSL,to ...