jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html
选择器是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基础之选择器的更多相关文章
- jQuery基础---常规选择器
内容摘要: 1.简单选择器 2.进阶选择器 3.高级选择器 发文不易,转载请注明出处! jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名. ...
- jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
- jQuery基础,选择器
jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Less, ...
- webform(九)——JQuery基础(选择器、事件、DOM操作)
JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选 ...
- Webform——JQuery基础(选择器、事件、DOM操作)
一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选择:用空格隔开 代码用法展示: ...
- JQuery基础(选择器、事件、DOM操作)
一.选择器 1.基本选择器 ①id选择器 ②class选择器 ③标签名选择 ④并列选择 ⑤后代选择 代码用法展示: <title></tit ...
- (转)jQuery基础之选择器
原文地址: http://www.cnblogs.com/webmoon/p/3169360.html 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器 ...
- jQuery基础——选择器、效果
一.使用JS的痛处 在学习和使用js的过程中发现了js的一些痛处: 1.书写繁琐,代码量大. 2.代码复杂. 3.动画效果很难实现.使用定时器,要小心各种定时器的清除.各种操作和处理事件不好实现. 4 ...
- jQuery基础(2)-- jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作.jQuery 选择器基于元素的 id.类.类型.属性.属性值等"查找"(或选择)HTML 元素. 它基于已经存在的 ...
随机推荐
- int main(int argc,char* argv[])详解
argc是命令行总的参数个数 argv[]是argc个参数,其中第0个参数是程序的全名,以后的参数命令行后面跟的用户输入的参数, 比如: int main(int argc, ...
- 大漠绑定测试工具-VB6
获取更新开始|版本:3.1652版 2016年12月27日|更新内容:1.取消自动更新错误的提示.\n\n友情提示:如网盘失效,请加QQ群(568073679)下载最新版|下载地址:http://ww ...
- Xamarin For Android 遇到错误java.exe exited with code 1. (msb6006)
今天用Xamarin编译一个android工程遇到这样一个问题:java.exe exited with code 1. (msb6006),项目代码没有问题.于是各种谷歌 ,在http://foru ...
- MySqlHelper
package utils; import java.io.IOException; import java.sql.CallableStatement; import java.sql.Connec ...
- Ip地址查询
$url = 'http://ip.taobao.com/service/getIpInfo.php?ip=115.239.211.112'; $info = file_get_contents($u ...
- jquery选择器使用说明
在jquery中选择器是一个非常重要的东西,几乎做什么都离不开它,下面我总结了jquery几种选择器的用法.以方便后面直接可以用到!! 层次选择器: 1.find()://找到该元素的子元素以及孙子元 ...
- "i++"和"++i"浅析
public class a{ public static void main(String[] args){ int k =100; k++;//k+=,k ...
- thinkphp3.2.3批量执行sql语句(带事务)
/** * 事务封装方法 * @access public 将此方法放入框架model.class.php中 * @param array $sqls 要执行的sql数组或语句 * @param ar ...
- SQL Server 2012安装后找不到服务器名称的解决办法!!!
网上说使用localhost即可,确实没错,但是有的仍旧会报出无法找到错误,我在无法通过的时候又重新安装了SQLServer,这次选中全部默认安装,之前使用的是选择安装,然后发现多了几个配置,其中有一 ...
- java 获取本地电脑的分辨率代码
1.代码: java.awt.Toolkit tk=java.awt.Toolkit.getDefaultToolkit(); java.awt.Dimension screenSize= ...