1. 基本选择器
 基本选择器是JQuery最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用)。所谓的网页中id只能使用一次的意思是说,一个网页中的id是不可以重复的,也就是具有唯一性。

1、#id
用法: $("#myDiv");    返回值  单个元素的组成的集合
说明: 这个就是直接选择html中的id="myDiv"
2、Element
用法: $("div")     返回值  集合元素
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如div,
input, a等等.
3、class
用法: $(".myClass")      返回值  集合元素
说明: 这个标签是直接选择html代码中class="myClass"的元素或元素组(因为在同一html页面中
class是可以存在多个同样值的)
4、*
用法: $("*")      返回值  集合元素
说明: 匹配所有元素,多用于结合上下文来搜索
5、selector1, selector2, selectorN
用法: $("div,span,p.myClass")    返回值  集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合
并到一个结果内。其中p.myClass是表示匹配元素
p class="myClass"

2. 层级选择器
 只有这个方法返回的是JQuery对象才能进行链式操作。如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器。

1 、ancestor descendant
用法: $("form input") ;   返回值  集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要和"arent > child"区分开。
祖先元素中查找,包含子元素和子元素的子元素。2、parent > child用法: $("form > input") ;    返回值  集合元素
说明: 在给定的父元素下匹配所有子元素。注意:要区分好后代元素与子元素
父元素中查找,只包含子元素,不包含子元素的子元素。3、prev + next
用法: $("label + input") ;   返回值  集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素4、prev ~ siblings
用法: $("form ~ input") ;    返回值  集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且JQuery的siblings方法匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意:  ("prev ~ div") 选择器只能选择 "# prev"元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

3. 过滤选择器
  找到一堆页面元素,我们可以对这些元素加过滤条件,找到我们想要的这些元素,然后进行过滤。通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头。
  按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器。

<1>基础过滤选择器

1、:first用法: $("tr:first") ;   返回值  单个元素的组成的集合
说明: 匹配找到的第一个元素2、:last用法: $("tr:last")   返回值  集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应.3、:not(selector)用法: $("input:not(:checked)")   返回值  集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的
type=”checkbox”).4、:even用法: $("tr:even")   返回值  集合元素
说明: 匹配所有索引值为偶数的元素,从0开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.5、:odd用法: $("tr:odd") 返回值  集合元素
说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数6、:eq(index)用法: $("tr:eq(0)")    返回值  集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数7、:gt(index)用法: $("tr:gt(0)")    返回值  集合元素
说明: 匹配所有大于给定索引值的元素8、:lt(index)用法: $("tr:lt(2)")    返回值  集合元素
说明: 匹配所有小于给定索引值的元素9、:header(固定写法)用法: $(":header").css("background", "#EEE")    返回值  集合元素
说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素10、:animated(固定写法)   返回值  集合元素
说明: 匹配所有正在执行动画效果的元素 

<2>内容过滤选择器
 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上。

1、:contains(text)用法: $("div:contains('John')")    返回值  集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用,当我们要选择的不是dom标签元素时,它就派上
了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的。2、:empty用法: $("td:empty")   返回值  集合元素
说明: 匹配所有不包含子元素或者文本的空元素。3、:has(selector)
用法:  $("div:has('.mini')")返回值  集合元素
说明: 匹配含有选择器所匹配的元素的元素。4、:parent用法: $("td:parent")   返回值  集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是":parent”,可不是".parent”!感觉与上面讲的”:empty”形成反义词。

<3>属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

1、[attribute]用法: $("div[id]") ;  返回值  集合元素
说明: 匹配包含给定属性的元素。例子中是选取了所有带”id”属性的div标签。2、[attribute=value]用法: $("input[name='newsletter']").attr("checked", true);    返回值  集合元素
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素。3、[attribute!=value]$("div[title!='test']").css("background","yellow");用法: $(”input[name!='newsletter']“).attr("checked", true);   返回值  集合元素说明: 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
此选择器等价于:not此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])。之前看到的:not 派上了用场。4、[attribute^=value]用法: $(”input[name^=‘news’]“)  返回值  集合元素
说明: 匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号。5、[attribute$=value]用法: $("input[name$='letter']")  返回值  集合元素
说明: 匹配给定的属性是以某些值结尾的元素。6、[attribute*=value]用法: $("input[name*='man']")   返回值  集合元素
说明: 匹配给定的属性是以包含某些值的元素。7、[attributeFilter1][attributeFilter2][attributeFilterN]用法: $("input[id][name$='man']")  返回值  集合元素
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常
用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素。

<4>子元素过滤选择器

1、:nth-child(index/even/odd/equation)$("div[class=one] :nth-child(2)").css("background","yellow");用法: $("ul li:nth-child(2)")   返回值  集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的
eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始。2、:first-child$("div[class=one] :first-child")用法: $("ul li:first-child")    返回值  集合元素
说明: 匹配第一个子元素。':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素。这里需要特别点的记忆下区别。3、:last-child用法: $("ul li:last-child")      返回值  集合元素
说明: 匹配最后一个子元素.':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素。4、: only-child用法: $("ul li:only-child")   返回值  集合元素 说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配。如果父元素中含有其他元素,那将不会被匹配。意思就是:只有一个子元素的才会被匹配!

<5>表单对象属性过滤选择器
 此选择器主要对所选择的表单元素进行过滤。

1、:enabled用法: $("input:enabled")    返回值  集合元素
说明: 匹配所有可用元素。意思是查找所有input中不带有disabled="disabled"的input。不为
disabled,当然就为enabled。2、:disabled用法: $("input:disabled")    返回值  集合元素
说明: 匹配所有不可用元素。与上面的enable是相对应的。3、:checked用法: $("input:checked")   返回值  集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)。这话说起来有些绕口。4、:selected用法: $(”select option:selected”)   返回值  集合元素
说明: 匹配所有选中的option元素.$("select>option:selected")

<6>表单选择器

1、:input用法: $(":input") ;   返回值  集合元素
说明:匹配所有 input, textarea, select 和 button 元素。2、:text用法: $(":text") ;  返回值  集合元素
说明: 匹配所有的单行文本框。3、:password用法: $(":password") ; 返回值  集合元素
说明: 匹配所有密码框。4、:radio用法: $(":radio") ; 返回值  集合元素
说明: 匹配所有单选按钮。5、:checkbox用法: $(":checkbox") ; 返回值  集合元素
说明: 匹配所有复选框。6、:submit用法: $(":submit") ;   返回值  集合元素
说明: 匹配所有提交按钮.7、:image用法: $(":image")   返回值  集合元素
说明: 匹配所有图像域。8、:reset用法: $(":reset") ;  返回值  集合元素
说明: 匹配所有重置按钮。9、:button用法: $(":button") ;  返回值  集合元素
说明: 匹配所有按钮.这个包括直接写的元素button。10、:file用法: $(":file") ;  返回值  集合元素
说明: 匹配所有文件域。11、:hidden用法: $("input:hidden") ; 返回值  集合元素
说明: 匹配所有不可见元素,或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配。

转载于:https://www.cnblogs.com/wangdh666/p/10785906.html

13.jQuery选择器相关推荐

  1. 13 -3 jquery选择器和 jquery动画

    一 选择器: 1 基本选择器 例子: 1 <!--id 类 标签--> 2 <!DOCTYPE html> 3 <html lang="en"> ...

  2. [翻译]帮助文档-jQuery 选择器

    jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言.如果你了解CSS(绝大部分WEB开发者都用到的),那 ...

  3. 使用HTML5的自定义数据属性的jQuery选择器

    本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...

  4. 精通jQuery选择器使用 转一篇

    精通jQuery选择器使用 转一篇 jQuery 具有一个相当强大的选择器引擎,提供了完整的选择器语法,允许我们选择几乎所有的元素组合.jQuery 的选择器语法主要是基于 CSS3 和 XPath ...

  5. jQuery选择器引擎和Sizzle介绍

    jQuery选择器引擎和Sizzle介绍 首先介绍一下什么是Sizzle: Sizzle是一个纯javascript CSS选择器引擎.jquery1.3开始使用sizzle,Sizzle一反传统采取 ...

  6. 【引用】jQuery 选择器

    jQuery 选择器 基本选择器 1.#myid 返回: <jQuery对象> :匹配一个id为myid的元素. 2.element 返回: <jQuery对象> 数组:匹配所 ...

  7. jQuery: 选择器(DOM,name,属性,元素)

    出处:http://www.cnblogs.com/starof/p/5411457.html 大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html ...

  8. jQuery用正则查找元素:jQuery选择器使用

    jQuery选择器如何使用大家可以参考这个API说明,但还有几种特殊的选择器用法,比如用正则匹配和查找: $("a[id^=abc]") 选择a元素,id以abc开头 $(&quo ...

  9. jquery选择器从认识到使用初级篇

    1.   .class 选择器 ---一种通过元素类别属性查找元素 调用格式:  $(".class") ----其中参数表示元素的css类别名称(类选择器) <input ...

最新文章

  1. MacBook如何用Parallels Desktop安装windows7/8
  2. python入门指南许半仙txt-影帝的脑子坏了 第23章
  3. Python——基础篇
  4. 诸暨机器人餐厅价格_现场 | 一家尝出“锅气”的餐厅 探店机器人餐厅
  5. 编写Maven插件的提示
  6. docker 安装及打springboot jar打镜像
  7. OS复习——设备管理习题
  8. ucenter 显示通信成功的条件
  9. 后台开发:核心技术与应用实践3.3.2 vector的查增删
  10. manjaro设置java_manjaro 深度学习编程环境搭建
  11. [Ext JS] Sencha Cmd命令参考之一
  12. Java代码实现—寻找素数
  13. 数学差考研考计算机专业,2021考研数学基础差,这4大方法让你快速上手_计算机专业考研...
  14. CSC公派访问学者申请条件是什么?
  15. 汕尾话专用专注微信聊天表情GIF图片
  16. 香橙派装php_【香橙派】安装宝塔面板 orange pi
  17. 可怜的码农们该如何赚钱?
  18. nodejs mysql knex_使用knex创建postgresql表knex迁移
  19. 人机交互-7-交互需求定义
  20. 基于python 的 ansys 二次开发-----借助pyansys安装包。

热门文章

  1. 《转》atomic assign retain
  2. C#3.0 为我们带来什么(5) —— 匿名类型
  3. 公安部全面查找改革开放以来失踪被拐儿童 失踪被拐儿童父母和疑似被拐人员快去采集DNA
  4. Qt Creator中常用快捷键和小技巧
  5. MATLAB中的fft后为何要用fftshift?
  6. for vue 一行2列_vue常见面试题汇总
  7. css层叠上下文详解,CSS定位(层叠上下文)
  8. 012_日期内建函数
  9. 082_Timing事件
  10. 游戏对象的移动旋转缩放