第二章 jQuery选择器

一、jQuery选择器的优势

  1. 写法简洁 $("div")
  2. 支持css2和css3选择器(对于css3选择器支持这一项,我认为应该是jQuery首先创造并使用这些选择器而后css3将其引入自己的规范)
  3. 完善的处理机制 $(".demo")获取的永远是对象,即时网页没有这个元素。

由于这种机制,使用jQuery检查某个元素在网页中是否存在时不能使用:

if($(".demo")){
// do something
}

而是应该根据获取到的长度来判断:

if($(".demo").length>0){
// do something
}

或者是转为DOM判断。

二、jQuery选择器

  • 基本选择器

最常用的选择器,通过元素id、class和标签名等查找DOM元素。

 
选择器 描述 返回 示例
#id 通过id匹配 单个元素 $("#id")
.class 通过类名匹配 集合元素 $(".class")
element 通过元素名匹配 集合元素 $("element")
* 匹配所有元素 集合元素 $("*")
selector1,selector2,……,selectorN 群组选择器 集合元素 $("div,span,p")
  • 层次选择器

通过DOM元素之间的层次关系获取特定元素例如:后代元素、子元素、相邻元素和同辈元素等。

 
选择器 描述 返回 示例
$("ancestor descendant") 选ancestor元素里面所有的descendant 集合元素 $("div span")
$("parent>child") 选parent元素下的子元素 集合元素 $("div>span")
$("prev+next") 选取紧接在prev后的next元素 集合元素 $("p+div")
$("prev~siblings") 选取prev元素之后的所有siblings元素 集合元素 $("div~div")

对于$("prev+next")选择器一般用next()方法代替,对于$("prev~siblings")一般用nextAll()方法代替。

  • 过滤选择器

通过特定的过滤规则筛选所需的DOM元素,选择器已:开头(与css伪类选择器相似)。按照过滤原则可分为:

  1. 基本过滤选择器
 
 选择器  描述  返回  示例
 :first  获取第一个元素  单个元素  $("div:first")
 :last  获取最后一个元素  单个元素  $("div:last")
 :not(selector)  去掉selector以外的元素  集合元素  $("div:not(.demo)")
 :even  选取索引是偶数的元素,索引从0开始  集合元素  $("input:even")
 :odd  选取索引是奇数的元素,索引从0开始  集合元素  $("input:odd")
 :eq(index)  选取所有等于index的元素(index从0开始)  单个元素  $("div:eq(0)")
 :gt(index)  选取所有大于index的元素(index从0开始)  集合元素  $("div:gt(0)")
 :lt(index)  选取所有小于index的元素(index从0开始)  集合元素  $("div:lt(0)")
 :header

选取所有标题元素例如:h1,h2等

 集合元素  $(":header")
 :animated  选取正在动画的元素  集合元素  $("div:animated")
 :focus  选取获得焦点的元素  集合元素  $(":focus")

在使用:even、:odd、:eq()、:gt()、:lt()等选择器是一定要注意下标问题

2.内容过滤选择器  过滤规则主要是它包含的子元素和文本

 
选择器 描述 返回 示例
:contains(text) 包含文本为text的元素 集合元素 $("div:contains('text')")
:empty 选取没有文本或子元素的空元素 集合元素 $("div:empty“)
:has(selector) 选取含有se;ector的元素 集合元素 $("div:has(p)")
:parent 选取含有文本或子元素的元素 集合元素 $("div:parent")

3.可见性过滤选择器  根据元素的可见和不可见状态选择相应元素

选择器 描述 返回 示例
:hidden 选取不可见元素 集合元素 $(":hidden")
:visible 选取可见元素 集合元素 $(":visible")

对于:hidden选择器,不仅可以选择display:none的元素,也可以选择visibility:hidden和文本隐藏域等元素。

4.属性过滤选择器  根据元素属性获取相应元素

 
选择器 描述 返回 示例
[attribute]  选取有此属性的元素 集合元素 $("div[id]")
[attribute=value]  选取属性值为value的元素 集合元素 $("div[id=test]")
[attribute!=value]  选取属性值不为value的元素 集合元素 $("div[id!=test]")
[attribute^=value]  选取属性值以value开头的元素 集合元素 $("div[id^=test]")
[attribute$=value]  选取属性值以value结束的元素 集合元素 $("div[id$=test]")
[attribute*=value]  选取属性值含有value的元素 集合元素 $("div[id*=test]")
[attribute|=value]

选取属性值为等于value或者以value为前缀的元素

集合元素 $("div[id|=test]")
[attribute~=value]  选取属性值空格分隔的值中有value的元素 集合元素 $("div[id~=test]")
[attribute1][attribute2][attributeN]  选取有给定的多个属性的元素 集合元素  $("div[id=test][class]")

5. 子元素过滤选择器

选择器 描述 返回 示例
:nth-child() 选取每个父元素下的给定条件的元素(index从1开始) 集合元素 $("div:nth-child")
:first-child 选取每个父元素的第一个元素 集合元素 $("div:first-child")
:last:child 选取每个父元素的最后一个元素 集合元素 $("div:last-child")
:only:child 选取只有一个子元素的父元素 集合元素 $("div:only-child")

eq(index)只匹配一个元素,而nth-child将为每一个符合条件的父元素匹配子元素。同时nth-child()的index从1开始,eq()从0开始。同理,:first和:first-child、:last和last:child也类似。

6.表单对象属性过滤选择器

选择器 描述 返回 示例
:enabled 选取可用元素 集合元素 $("#form1:enabled")
:disabled 选取不刻意元素 集合元素 $("#form1:disabled")
:checked 选取被选中元素(单选框、复选框) 集合元素 $("input:checked")
:selected 选取所有被选中的选项元素(下拉列表) 集合元素 $("input:selected")
  • 表单选择器
选择器 描述 返回 示例
:input

选取所有input、textarea、select、button元素

集合元素 $("input")
:text 选取单行文本框 集合元素 $(":text")
:password 选取密码框 集合元素 $(":password")
:radio 选取单选按钮 集合元素 $(":radio")
:checkbox 选取复选框 集合元素 $(":checkbox")
:submit 选取提交按钮 集合元素 $(":submit")
:image 选取图片按钮 集合元素 $(":image")
:reset 选取复位按钮 集合元素 $(":reset")
:button 选取按钮 集合元素 $(":button")
:file 选取上传域 集合元素 $("file")
:hidden 选取不可见元素 集合元素 $(":hidden")

三、jQuery选择器注意事项

  1. 选择器含有”.“,”#“,”(“或”]“等特殊字符时使用转义符转义。
  2. jQuery在1.3.1版本后放弃之前的属性前加@。
  3. 选择器对空格敏感。

【锋利的jQuery】学习笔记02的更多相关文章

  1. 锋利的JQuery 学习笔记

    第一章                认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);} ...

  2. 锋利的jquery学习笔记

    1.$("#tt")获取的永远都是一个jquery对象,所以要判断页面上是否存在某个对象不能像js中 if($("#tt")){ } 而是通过: ){ } ps ...

  3. JQuery 学习笔记--02

    JS 中的 window.onload() 方法与 Jquery 中的 $(document).read(function( ){  }) 的区别 : 加载时机不一样, window.onload() ...

  4. 锋利的jQuery学习笔记之jQuery选择器

    在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...

  5. jQuery 学习笔记:jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

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

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

  7. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  8. 软件测试之loadrunner学习笔记-02集合点

    loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...

  9. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  10. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

随机推荐

  1. 12.URL重写

    为什么要URL重写?1.有利于SEO(搜索引擎优化),带参数的RUL权重较低.2.地址看起来更正规,推广uid. 如我们一般在访问网页是会带参数,http://aaa.com/view.htm?id= ...

  2. PAIP.提升效率----论项目知识库的建设。。

    PAIP.提升效率----论项目知识库的建设.. 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net ...

  3. bzoj1858

    比较烦的线段树 首先询问3很弱智不说, 询问4以前做过类似的,好像是USACO月赛hotel那题类似,维护lmax,rmax,max三个域就可以了 操作0,操作1也很简单,仔细考虑一下就知道也是可以l ...

  4. 将eclipse新建项目的默认编码GBK改为UTF-8

    在eclipse下: 新建项目默认编码设置:Window->Preferences->General->Workspace->Text file encoding 将其改为UF ...

  5. 【转】linux设备驱动之MMC SD卡——核心层简单分析

    原文网址:http://blog.chinaunix.net/uid-28685940-id-3889878.html /*************************************** ...

  6. 【性能测试】【Jmeter】学习(3)——查看测试结果

    监听器——聚合报告 聚合报告添加步骤:(右键点击每一个操作步骤--->“添 加”---->“监听器”---->“聚合报告”) Label:每个 JMeter 的 element(例如 ...

  7. MySQL 数据库 引擎

    MySQL数 据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引 擎:ISAM.MYISAM和HEAP.另外两种类型I ...

  8. ReadingNotes@02-12-2013

    ReadingNotes@02-12-2013 */--> pre { background-color: #2f4f4f;line-height: 1.6; FONT: 10.5pt Cons ...

  9. Yii 生成表单下拉选框及查询下拉选框

    CHtml类参考: http://www.yiichina.com/api/CHtml#activeDropDownList-detail activeDropDownList() 方法 public ...

  10. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...