选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器。因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。jQuery选择器完全继承了CSS的风格。利用jQuery选择器,可以非常便捷的找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器是否支持这一选择器。

jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面通过表格进行一一介绍。

1.基本选择器

选择器 描 述 返 回 示 例
#id 匹配给定的id 单个元素 $(“header”)
.class 匹配给定的类名 集合元素 $(“.test”)
E 匹配给定的标签名 集合元素 $(“div”)
* 匹配所有元素 集合元素 $(“*’)
E, .class, E… 匹配给定的集合 集合元素 $(“span, .tiPS”)

2.层次选择器

选择器 描 述 返 回 示 例
$(“ancestor descendant”) 匹配ancestor里的所有
descendant(后代)元素
集合元素 $(“body div”)
$(“parent>child”) 匹配parent下的所有
child(子)元素
集合元素 $(“div>span”)
$(“prev+next”) 匹配紧接在prev后的
next元素
集合元素 $(“.error+span”)
$(“prev~siblings”) 匹配prev后的所有
siblings元素
集合元素 $(“span~a”)

3.过滤选择器

3.1 基本过滤选择器

选择器 描 述 返 回 示 例
:first 匹配第一个元素 单个元素 $(“div:first”)
:last 匹配最后一个元素 单个元素 $(“span:last”)
:even 匹配索引是偶数的元素
索引从0开始
集合元素 $(“li:even”)
: odd 匹配索引是奇数的元素
索引从0开始
集合元素 $(“li:odd”)
:eq(index) 匹配索引等于index的元
素(索引从0开始)
单个元素 $(“input:eq(2)”)
:gt(index) 匹配索引大于index的元
素(索引从0开始)
集合元素 $(“input:gt(1)”)
:lt(index) 匹配索引小于index的元
素(索引从0开始)
集合元素 $(“input:lt(5)”)
:header 匹配所有h1,h2…等
标题元素
集合元素 $(“:header”)
:animated 匹配所有正在执行
动画的元素
集合元素 $(“div:animated”)

3.2 内容过滤选择器

选择器 描 述 返 回 示 例
:contains(text) 匹配含有文本内容text
的元素
集合元素 $(“p:contains(今天)”)
:empty 匹配不含子元素或
文本元素的空元素
集合元素 $(“p:empty”)
:has(selector) 匹配包含selector元素
的元素
集合元素 $(“div:has(span)”)
:parent 匹配含有子元素或文本
的元素
集合元素 $(“div:parent”)

3.3 可见性过滤选择器

选择器 描 述 返 回 示 例
:hidden 匹配所有不可见
的元素
集合元素 $(“:hidden”)
:visible 匹配所有可见元素 集合元素 $(“:visible”)

3.4 属性过滤选择器

选择器 描 述 返 回 示 例
[attr] 匹配拥有此属性
的元素
集合元素 $(“img[alt]“)
[attr=value] 匹配属性值为value
的元素
集合元素 $(“a[title=test]“)
[attr!=value] 匹配属性值不等于
value的元素
集合元素 $(“a[title!=test]“)
[attr^=value] 匹配属性值以value
开头的元素
集合元素 $(“img[alt^=welcome]“)
[attr$=value] 匹配属性值以value
结尾的元素
集合元素 $(“img[alt$=last]“)
[attr*=vlaue] 匹配属性值中含有
value的元素
集合元素 $(“div[title*=test]“)
[attr1][attr2]… 通过多个属性
进行匹配
集合元素 $(“div[id][title*=test]“)

3.5 子元素过滤选择器

选择器 描 述 返 回 示 例
:nth-child 匹配每个父元素下的
第index个子元素
索引从1开始
集合元素 $(“div:nth-child(2)”)
:first-child 匹配每个父元素的
第一个子元素
集合元素 $(“div:first-child”)
:last-child 匹配每个父元素的
最后一个子元素
集合元素 $(“div:last-child”)
: only-child 某元素是它父元素中
的唯一的子元素
则匹配它
集合元素 $(“div:only-child”)

3.6 表单对象属性过滤选择器

选择器 描 述 返 回 示 例
:enabled 匹配所有可用元素 集合元素 $(“form :enabled”)
:disabled 匹配所有不可用
的元素
集合元素 $(“form :disabled”)
:checked 匹配所有被选中的元素
(含单选框,复选框)
集合元素 $(“input:checked”)
:selected 匹配所有被选中的
选项元素
集合元素 $(“select :selected”)

4.表单选择器

选择器 描 述 返 回 示 例
:input 匹配所有input, textarea,
select, button元素
集合元素 $(“input”)
:text 匹配所有文本框 集合元素 $(“:text”)
:password 匹配所有密码框 集合元素 $(“:password”)
:radio 匹配所有单选框 集合元素 $(“:radio”)
:checkbox 匹配所有所有多选框 集合元素 $(“:checkbox”)
:submit 匹配所有提交按钮 集合元素 $(“:submit”)
:image 匹配所有图像按钮 集合元素 $(“:image”)
:reset 匹配所有重置按钮 集合元素 $(“:reset”)
:button 匹配所有按钮 集合元素 $(“:button”)
:file 匹配所有上传域 集合元素 $(“:file”)

jQuery选择器介绍:基本选择器、层次选择器、过滤选择器、表单选择器的更多相关文章

  1. JQ表单选择器和CSS3表单选择器

    JQ表单选择器和CSS3表单选择器 JQ表单选择器 为了使用户能够更加灵活地操作表单,jQuery中加入了表单选择器,利用这个选择器能极其方便的获取到表单的某个或者某类型的元素.表单选择器的介绍如图: ...

  2. JQuery -- 介绍,选择器及其示例, 基本选择器,层次选择器,过滤选择器,表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

  3. Jquery选择器分类:基本选择器,层次选择器,过滤选择器,表单选择器。

    基本选择器 说明:通过元素id.class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test& ...

  4. jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

  5. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

  6. 009 jquery过滤选择器-----------(表单对象属性过滤选择器 与 表单选择器)

    1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  8. 深入学习jQuery选择器系列第七篇——表单选择器

    × 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...

  9. 三、jQuery--jQuery基础--jQuery基础课程--第4章 jQuery表单选择器

    1.:input表单选择器 如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea ...

随机推荐

  1. Qt修改xml文件

    <taskpackage styleId="styles/2dc70235-e48b-4e11-b074-3c3f773ae1f3" id="3333" ...

  2. nyoj 1058部分和问题(DFS)

    部分和问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 给定整数a1.a2........an,判断是否可以从中选出若干数,使它们的和恰好为K.   输入 首先, ...

  3. C#正则表达式编程(三):Match类和Group类用法

    前面两篇讲述了正则表达式的基础和一些简单的例子,这篇将稍微深入一点探讨一下正则表达式分组,在.NET中正则表达式分组是用Match类来代表的.首先先看一段代码: /// <summary> ...

  4. Android中序列化对象到XMl 和 XML反序列化为对象

    package com.example.xmloperation; import java.io.File; import java.io.FileOutputStream; import java. ...

  5. Redis配置文件之————redis.conf配置及说明

    基本设置 1. 备释当配置中需要配置内存大小时,可以使用 1k, 5GB, 4M 等类似的格式,其转换方式如下(不区分大小写):1k =< 1000 bytes1kb =< 1024 by ...

  6. ABAP 没有地方输入\H 进入DEBUG 怎么办?

    把如下代码保存,命名debug.txt  ,把这个文件拖拉到要调试的窗口. [FUNCTION]Command=/HTitle=Barry TestType=SystemCommand

  7. Mysql ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA

    ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declar ...

  8. WDS 的两种实现方式

    转自:http://blog.chinaunix.net/uid-26527046-id-3627627.html WDS 的两种实现方式 WDS(Wireless Distribution Syst ...

  9. Android 代码混淆 防止反编译

    为了防止代码被反编译,因此需要加入混淆.混淆也可以通过第三方进行apk混淆,也可以用android中的proguard进行混淆. 混淆步骤: 1.配置混淆文件,名字可以随意,在这里使用proguard ...

  10. extern 关键字

    1 http://baike.baidu.com/view/963932.htm?fr=ala0_1_1 extern可置于变量或者函数前,以表示变量或者函数的定义在别的文件中,提示编译器遇到此变量和 ...