在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选择器的更多相关文章

  1. jQuery基础学习(二)—jQuery选择器

    一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 ...

  2. jQuery学习之二 jQuery选择器

    一.jQuery选择器是什么1.CSS选择器2.jQuery选择器 二.jQuery选择器的优势1.简洁的写法2.支持从CSS1到CSS3选择器3.完善的处理机制  传统js选择器假如要操作的元素不存 ...

  3. js jquery 选择器总结

    js jquery 选择器总结 一.原始JS选择器. id选择器:document.getElementById("test"); name选择器:document.getElem ...

  4. 我人生中的jQuery选择器

    Jquery选择器 一.Jquery选择器简介 JavaScript只是一种运行于客户端,可以被客户端浏览器解析的一段代码.它和java没有任何关系.JavaScript简称JS.jQuery是对JS ...

  5. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  6. jQuery简介以及jQuery选择器

    一 简介 1 定义:jQuery库是JavaScript的封装库 2 优点: 1) : 代码开源 2) : 选择器强大 3) : 完善的Ajax 4) : 浏览器兼容性高 5) : 文档完善(帮助文档 ...

  7. JQuery选择器(转载)

    原文:https://blog.csdn.net/colorapp/article/details/44279645 一. jQuery选择器是什么1. CSS选择器要是某个样式应用于特定的HTML元 ...

  8. jQuery(二):jQuery选择器

    jQuery选择器类似于CSS选择器,用来选取网页中的元素.例如: $("h3").css("background-color","red" ...

  9. jQuery选择器与过滤器(二)

    一.jQuery选择器1.基本选择器:所有选择器    *标签选择器    标签名ID选择器    #ID类选择器    .className组合选择器    selector1,selector2 ...

  10. jQuery-1.9.1源码分析系列(二)jQuery选择器

    1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...

随机推荐

  1. PHP判断文件夹是否存在和创建文件夹的方法(递归创建多级目录)

    在开始之前,我先说明一下,可能许多朋友与我一样认为只要给一个路径,mkdir就可以创建文件夹,其实不是那样,单个的MKDIR只能创建一级目录,对于多级的就不行了,那如何用mkdir来创建呢?先我抄一段 ...

  2. javascript基础03

    javascript基础03 1. 算术运算符 后增量/后减量运算符 ++ ,-- 比较运算符 ( >, <, >=, <=, ==, !=,===,!== ) 逻辑运算符( ...

  3. 最简单的js确认框!

    随便举个栗子~ function bremove() { if (ids == "") {//触发函数,如果值是空弹框 alert("您还没有选择任何数据.") ...

  4. 当你在浏览器地址栏输入一个URL后回车,将会发生的事情?

    原文:http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/ 作为一个软件开发者,你一定会对网络应用如何工作有 ...

  5. 无法启动"D\projects\hello\Debug\hello.exe" 系统找不到指定的文件。[LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏]

    这两天安装Visual Studio遇到这样的一个问题,用自己的电脑和公司的电脑都出现同样的问题.两台电脑都是新系统,按理来说是没有问题的.但是一出现问题,对于我这个小白来说,还是耗费了挺多精力都无果 ...

  6. .NET LINQ 数据分区

    数据分区      LINQ 中的分区指的是在不重新排列元素的情况下,将输入序列划分为两部分,然后返回其中一个部分的操作.      下图显示对一个字符序列执行三个不同的分区操作的结果. 第一个操作返 ...

  7. 基于STM32和W5500的Modbus TCP通讯

    在最近的一个项目中需要实现Modbus TCP通讯,而选用的硬件平台则是STM32F103和W5500,软件平台则选用IAR EWAR6.4来实现. 1.移植千的准备工作 为了实现Modbus TCP ...

  8. Git学习总结

    master主分支合并dev分支,代码 :git merge dev ,跳出如下界面.输入:wq,(:wq命令是LINUX命令,强制写入文件并结束),可以强制合并.但为什么会跳出该界面,我也没搞清楚. ...

  9. October 20th Week 43rd Thursday, 2016

    Now, it's clear. OPPO R9s 这一刻 更清晰. I want a new mobile phone, because the one I am using is broken. ...

  10. libcpmt.lib 与 msvcprt.lib

    https://msdn.microsoft.com/en-us/library/2kzt1wy3(VS.80).aspx