jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器。下边就来分别总结一下。

1, 基本选择器?

基本选择器就是jQuery中最常用的选择器,也是最简单的选择器,它通过元素标签名,元素Id,Class来查找DOM元素。基本选择器共有五种,总结如下:

选择器

返回

示例

元素标签选择器

集合元素

$(“p”)选取所有的<p>元素。

Id选择器

单个元素

$(“#test”)选取Id为test的元素。

Class选择器

集合元素

$(“.test”)选取所有class为test的元素

通配符选择器

集合元素

$(“*”)选取所有的元素。

群组选择器

集合元素

$(“div,span,p.myclass”)选取所有<div>,<span>,和拥有class为myclass的<p>标签的一组元素。

2, 层次选择器?

适合于通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相 邻元素和兄弟元素。

选择器

返回

示例

后代元素选择器

集合元素

$(“div span”)选取<div>里的所有的<span>元素。

子元素选择器

集合元素

$(“div>span”)选取<div>元素下元素名是<span>的子元素。

相邻元素选择器

集合元素

$(“.one+div”)选取class为one的下一个<div>兄弟元素。

兄弟元素选择器

集合元素

$(“#two~div”)选取Id为two的元素后面的所有<div>兄弟元素。

注意:$(“prev~siblings”)选择器与siblings()方法的区别。

$(“#prev~div”)选择的是”#prev”元素后面的所有的同辈的div元素。而siblings()方法与 前后位置无关,只要是同辈节点就都能匹配。

3, 过滤选择器?

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS    中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过 滤和表单 对象属性过滤选择器共六种选择器。

这边只总结基本过滤器,其它过滤器在实际的开发过程中需要的时候再查看就可以了。

选择器

返回

示例

:first

单个元素

$(“div:first”)选取所有<div>元素中第1个<div>元素。

:last

单个元素

$(“div:last”)选取所有<div>元素中最后1个<div>元素。

not(selector)

集合元素

$(“input:not(.myClass)”)选取class不是myClass的<input>元素。

:even

集合元素

$(“input:even”)选取索引是偶数的<input>元素。

:odd

集合元素

$(“input:odd”)选取索引是奇数的<input>元素。

:eq(index)

单个元素

$(“input:eq(1)”)选取索引等于1的<input>元素。

:gt(index)

集合元素

$(“input:gt(1)”)选取索引大于1的<input>元素。

:lt(index)

集合元素

$(“input:lt(1)”)选取索引小于1的<input>元素。(不包括1)

:header

集合元素

$(“:header”)选取网页中所有的<h1>,<h2>,<h3>...

:animated

集合元素

$(“div: animated”)选取正在执行动画的<div>元素。

4, 表单选择器?

利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素。

选择器

返回

示例

:input

集合元素

$(“:input”)选取所有<input>,<textarea>,<select>和<button>元素。

:text

集合元素

$(“:text”)选取所有的单行文本框。

:password

集合元素

$(“: password”)选取所有的密码框。

:radio

集合元素

$(“: radio”)选取所有的单选框。

:checkbox

集合元素

$(“:checkbox”)选取所有的复选框。

:submit

集合元素

$(“: submit”)选取所有的提交按钮。

:image

集合元素

$(“: image”)选取所有的图像按钮。

:reset

集合元素

$(“: reset”)选取所有的重置按钮。

:button

集合元素

$(“: button”)选取所有的按钮。

:file

集合元素

$(“: file”)选取所有的上传域。

:hidden

集合元素

$(“: hidden”)选取所有不可见元素。

  以上就是jQuery选择器的总结,希望大家都能理解并熟练运用它们,谢谢!

jquery选择器总结 转自(永远的麦子)的更多相关文章

  1. 【jQuery基础学习】01 jQuery选择器

    关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选 ...

  2. jquery jquery选择器总结 转自(永远的麦子)

    jQuery选择器总结 阅读目录 1, 基本选择器? 2, 层次选择器? 3, 过滤选择器? 4, 表单选择器? jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器.下 ...

  3. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  4. 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...

  5. jQuery-认识JQuery,jQuery选择器

    认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...

  6. jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  7. jQuery选择器和选取方法

        我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮 ...

  8. jQuery 选择器和JavaScript 选择器的技巧与异常原因

    jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器 ...

  9. 第二章(jQuery选择器)

    2.1jQuery选择器是什么 1.CSS选择器 选择器 示例 选择器 示例 标签选择器 a{ } p{ } ul{ } ID选择器 #ID{ } 类选择器 .class{ } 群组选择器 td,p, ...

随机推荐

  1. Badboy录制脚本参数化

    Jmeter录制脚本多采用Badboy工具 简单参数修改 第一步,先录制场景: a.开始录制,打开浏览器www.sogou.com b.在输入框中输入文字“Badboy" c.回车,关闭录制 ...

  2. unity5.0新功能-布料、动画系统

    原作者:只待苍霞 这一章讲一下布料系统, 这次的布料系统有很大的改良.Unity4中, 需要对SkinnedMeshRenderer使用SkinnedCloth, 或者对Cloth Renderer使 ...

  3. c#自制视屏监控

    项目需要开发一个监控程序,主要是监控其它电脑的操作情况. 先说下原理吧,首先我们列出做远程监控的基本步骤,远端电脑的ip,捕捉屏幕的方法,传输,接收并显示. 突然不知道怎么写下去了....... 程序 ...

  4. php+MySQL+Ajax

    点赞功能原理.     图片. 1.connect.php文件 <?php $host="localhost"; $db_user="root"; $db ...

  5. 转 夕甲甲:孔乙己之 C++ 版

    欧欧匹代码的格局,是和别的编程模式不同的:首先要有一个构造函数:基类里只定义了函数的形式,可以随时通过派生增加不同的实现.那些程序员们,每每学会了继承和多态,便可以接一个项目,——这是十年前的事,现在 ...

  6. excel将单元格格式由数字转为文本

    由于python读取excel数据时,整数总会变成浮点数,例如1会变成1.0,这时可以通过将excel里面的数字转化为文本,再读取出来就不会变成浮点数了.还有一种情况是excel里面的数字是由公式计算 ...

  7. Struts——(四)异常处理机制

    在通常的情况下,我们得到异常以后,需要将页面导航到一个错误提示的页面,提示错误信息.利用Stuts我们可以采用两种方式处理异常: 1.编程式异常处理 即我们在Action中调用业务逻辑层对象的方法时, ...

  8. Android调试小技巧(LogCat不输出、Log自动清空、install时timeout)

    问题:有时候明明连接了设备,而LogCat却没有输出 解决方法:在device界面点一下对应设备,使其处于选中状态(它适用于查看手机文件不显示的情况) 问题:前面记录的Log看着看着突然被清空了 解决 ...

  9. PHP读取CSV数据写入数据库

    /*读取csv文件*/ public function testCsv(){ $fileName = "tel.csv"; $fp=fopen($fileName,"r& ...

  10. python学习之——调用adb命令完成移动端界面测试

    实现原理 Hierarchy Viewer:获得当前手机实时的UI信息,方便用于手机的自动化测试: python中的subprocess.Popen():调用系统命令: uiautomator工具:获 ...