jQuery选择器描述

jQuery选择器是jQuery框架的基础，jQuery对事件的处理、DOM操作、CSS动态控制、Ajax通信、动画设计都是在选择器基础上进行的。jQuery 选择器采用CSS和Xpath选择符的能力，能够满足用户在DOM中快捷而轻松地获取元素或元素组。

jQuery选择器的种类

基本选择器

层级选择器

伪类选择器（简单的伪类选择器、与内容相关的伪类选择器、与元素显示状态相关的伪类选择器、匹配子元素的伪类选择器、与表单对象相关的伪类选择器、与表单属性相关的伪类选择器）

属性选择器

（1）基本选择器

基本选择器主要包括ID选择器、标签选择器、类选择器、通配选择器和组选择器 5种类型，这与CSS基本选择器类型相一致。

这里主要说一下通配选择器和组选择器

通配选择器能够匹配指定上下文中所有元素。具体用法如下：jQuery("*"); 参数* 为字符串，表示将匹配指定范围内所有的标签元素。

示例：

将匹配文档中<body>标签下包含的所有标签，然后定义所有标签包含的字体显示为红色。

$(function(){

　　$("body *").css("color","red");

})

组选择器

jQuery支持CSS的分组选择器，通过这种方式可以扩大选择器的选择范围，同时增强jQuery选择器引擎的应用能力。具体用法如下：jQuery("selector1,selector2,selectorN");

示例：

$(function(){

　　$("h2,#wrap,span.red,[title='text']").css("color","red");

})

（2）层级选择器

层级选择器就是通过DOM嵌套关系结构来实现准确匹配，如果通过DOM元素之间的层次关系来获取特定的元素，那么使用层级选择器将是最佳方式。

层级选择器主要包括 包含选择器、子选择器、相邻选择器和兄弟选择器 4种类型。

包含选择器，就是在给定的祖先元素下匹配所有的后代元素。

示例：$("form input") 可以匹配表单下所有的input元素

子选择器，就是在匹配的父元素下选择所有匹配的子元素。具体用法如下：jQuery("parent>child");

示例：$("form>input")可以匹配表单下所有的子集input元素

相邻选择器，就是在所有匹配的元素后选择同级的相邻元素。具体用法如下：jQuery("prev + next");

示例：$("label + input") 可以匹配所有跟在label后面的input元素

兄弟选择器，就是在所有匹配的元素后选择同级的所有元素。具体用法如下：jQuery("prev ~ siblings");

示例：$("form ~ siblings")可以匹配所有与表单同级结构的input 元素

（3）简单的伪类选择器

伪类可以看作是一种特殊的类选择符，是能被浏览器自动识别的特殊选择符。伪类选择器的最大语法特征就是在选择符中添加“：”标识符。

特定位置选择器：主要包括 :first 、 :last 和 :eq(index) 3种

:first  匹配找到的第1个元素。  例如：$("tr:first") 表示匹配表格的第1行

:last  匹配找到的最后一个元素。 例如： $("tr:last") 表示匹配表格的最后一行

:eq    匹配一个给定索引的元素，从0开始计数。 例如： $("tr:eq(0)")  可以匹配第1行表格行

指定范围选择器：主要包括 :even 、:odd 、:gt(index) 、 :lt(index) 4种。

:even  匹配所有索引值为偶数的元素，从0开始计数。 例如： $("tr:even")可以匹配表格的1，3，5行（即 索引值 0、2、4 ...）

:odd  匹配所有索引值为奇数的元素，从0开始计数。   例如： $("tr:odd")可以匹配表格的 2，4，6行（即 索引值 1、3、5 ...）

:gt    匹配所有大于给定索引值的元素，从0开始技术。  例如： $("tr:gt(0)") 可以匹配第2行及其后面行

:lt     匹配所有小于给定索引值的元素。      例如： $("tr:lt(5)")  可以匹配第5行以及之前的行

排除选择器  :not 选择器比较特殊，它能够在匹配元素集合中排除符合特定匹配规则的元素，也就是说它以反向方式过滤掉不需要的元素。

具体用法如下：jQuery("selector1:not(selector2)");

$("tr:not(tr:lt(3))")  匹配的数据行为 第4行和后面的所有行。

特殊选择器 :animated 和 :header 选择器是两个比较特殊的选择器，它们分别用来匹配动画元素和标题元素。

:header 匹配如  h1、h2、h3 之类的标题元素

:animated 匹配所有正在执行动画效果的元素

（4）与内容相关的伪类选择器

主要是根据元素包含内容作为筛选条件进行匹配，这类选择器主要包括4种，如下：

:contains  匹配包含给定文本的元素。  例如： $("div:contains('图片')")  匹配所有包含“图片”的div元素

:empty  匹配所有不包含子元素或者文本的空元素

:has    匹配含有选择器所匹配的元素的元素。  例如： $("div:has(p)")  匹配所有包含p元素的div元素

:parent  匹配含有子元素或者文本的元素

（5）与元素显示状态相关的伪类选择器

:hidden   匹配所有不可见元素，或者type 为hidden的元素

:visible    匹配所有的可见元素

（6）匹配子元素的伪类选择器

子元素选择器主要包括 4 种类型：

:nth-child  匹配其父元素下的第N个子或奇偶元素

:first-child 匹配第一个子元素。   （:first 选择器只匹配一个元素，而:first-child 选择符将为每个父元素匹配一个子元素）

:last-child 匹配最后一个子元素。   （:last 只匹配一个元素，而:last-child 选择符将为每个父元素匹配一个子元素）

:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配；如果父元素中含有其他元素，那将不会被匹配。

使用表达式的方式：

:nth-child(even)  //匹配偶数位元素

:nth-child(odd)   //匹配奇数位元素

:nth-child(3n)     //匹配第3个及其后面间隔3的每个元素

:nth-child(2)       //匹配第2个元素

:nth-child(3n+1) //匹配第一个及其后面间隔3的每个元素

:nth-child(3n+2) //匹配第二个及其后面间隔3的每个元素

（7）与表单对象相关的伪类选择器

:input  匹配所有input、textarea、select和button元素

:text    匹配所有的单行文本框

:password 匹配所有密码框

:radio   匹配所有单选按钮

:checkbox  匹配所有复选框

:submit   匹配所有提交按钮

:image   匹配所有图像域

:reset     匹配所有重置按钮

:button   匹配所有按钮

:file        匹配所有文件域

:hidden  匹配不可见元素或者type为hidden的元素

（8）与表单属性相关的伪类选择器

:enabled   匹配所有可用元素

:disabled   匹配所有不可用元素

:checked   匹配所有选中的被选中元素(复选框、单选按钮等，不包括 select 中的option)

:selected   匹配所有选中的option 元素

（9）属性选择器

就是根据元素的属性及其值作为过滤条件，来匹配对应的DOM元素。

[attribute]

[attribute=value] 匹配属性等于特定值的元素

例如：   $("input[name='text']") 表示查找所有name属性值是text的input 元素

[attribute!=value]匹配属性不是特定值的元素

例如：   $("input[name!='text']") 表示查找所有name属性值不是text的input 元素

[attribute^=value] 匹配给定的属性是以某些值开始的元素

例如：   $("input[name^='text']") 表示所有name属性值以text开头的input元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

例如：   $("input[name$='text']") 表示所有name属性值以text结束的input 元素

[attribute*=value] 匹配给定的属性是以包含某些值的元素

例如：   $("input[name*='text']") 表示所有name属性值包含text字符串的input 元素

jQuery 选择器应用优化

（1）多用ID选择器

（2）少直接使用Class 选择器

（3）多用父子关系，少用嵌套关系

（4）缓存jQuery对象

完

Jquery 之 使用选择器的更多相关文章

  1. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  2. jQuery 简单过滤选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...

  3. JQuery：JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  4. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  5. jQuery基础知识--选择器与效果

    $(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...

  6. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  7. JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  8. jQuery中的选择器<思维导图>

    选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...

  9. jQuery中的选择器《思维导图》

    学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...

  10. jQuery简单过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <!--jQuery选择器详解 根据所获 ...

随机推荐

  1. 算法课堂笔记13—Online Algorithm

    今天的算法课是学习离线算法,在计算机科学中,一个在线算法是指它可以以序列化的方式一个个的处理输入,也就是说在开始时并不需要已经知道所有的输入.相对的,对于一个离线算法,在开始时就需要知道问题的所有输入 ...

  2. eclipse真机调试显示Target unknown的解决方法

    eclipse的android模拟器调试是个硬伤,非常非常卡,严重影响工作效率.个人推荐使用第三方模拟器Genymotion,不了解的可以搜索下安装.你会发现它真心好用,但需要官网注册的. 各种调试完 ...

  3. C语言基础--for循环

    for循环格式: for (初始化表达式;条件表达式;循环后增量表达式) { 语句; ... } 条件表达式: 和while, dowhile一样, 只有条件满足才会执行循环体 初始化表达式: 在整个 ...

  4. 超链接<a></a>

    1.<a href="#" target="_self原窗口-默/_blank新窗口/_top/_parent"></a> 绝对路径:f ...

  5. powershell玩转sqlite数据库

    脚本经常需要处理文本,有时候是行列整齐文本.那么powershell脚本处理行列文本有几种方法呢?一种是excel,另外的一些是?access?sqlite? sqlite是一个很小巧的,很方便嵌入到 ...

  6. windows 7 下找不到 Chart控件问题

    1.网上下载 Microsoft Chart Control, version 6.0 插件 2.注册.由于windows 7 的权限问题注册会失败,因为注册控件需要管理员的权限,在开始菜单的附件下面 ...

  7. 【matlab】用matlab 保存带标记图像、图片的方法总结

    最近看了一些用matlab对图形图片进行保存的帖子和资源,关于图像保存的方法给大家分享一下这些方法是大家所使用方法的一个总结. 如今常用的方法有三种printf,imwrite,saveas下面分别介 ...

  8. 团队开发——冲刺1.b

    冲刺阶段一(第二天) 1.昨天做了什么? 在了解C#的基础上,深入熟悉Windows窗体应用程序,熟练掌握基本功能 2.今天准备做什么? 在C#的Windows窗体应用程序中,设计简单的游戏开始主界面 ...

  9. 2、JS中的表达式和运算符

    一.表达式 1.原始表达式:2.14,“test”,true/false,null……复合表达式:10*20…… 2.数组.对象的初始化表达式:new Array(1,2),[1,undefined, ...

  10. C# 计算时间差 用timespan函数

    TimeSpan 结构  表示一个时间间隔. 命名空间:System 程序集:mscorlib(在 mscorlib.dll 中) 1.DateTime值类型代表了一个从公元0001年1月1日0点0分 ...