【一些简单的jQuery选择器】
学习【js DOM 编程艺术】,最后面有许多jQuery的选择器,每个都动手敲了一遍。
jQuery 提供了高级选择器的方法。
js获取元素的三个基本方法分别是通过标签名,类名和id,即(getElementsByTagName, getElementsByClassName和getElementById)。那么jQuery是如何获取呢?
通过标签获取:$('tag')
通过类名获取:$('.className')
通过id获取:$('#id') 除了上面个三个最基本最简单的,还有下面几个css选择器:
$('*') 选择所有元素
$('tagA tagB') 选择作为tagA后代的tagB元素
$('tagA, tagB, tagC') 选择所有tagA元素,tagB元素和tagC元素
$('tag#id') 选择ID为id的tag元素
$('tag.className') 选择类名为className的tag元素 jQuery支持下列css2.1属性选择器:
$('tag[attr]') 选择所有带有attr属性的tag元素
$('tag[attr*=value]') 选择所有attr属性值中包含字符串value的tag元素 $('tag[attr=value]') 选择所有attr属性值等于value的tag元素
$('tag[attr!=value]') 选择所有attr属性值不等于value的tag元素 $('tag[attr^=value]') 选择所有attr属性值以value开头的tag元素
$('tag[attr$=value]') 选择所有attr属性值以value结尾的tag元素 $('tag[attr~=value]') 选择所有attr属性值 为空格分割的多个字符串且其中一个字符串等于value 的tag元素
$('tag[attr|=value]') 选择所有attr属性值 为连字符分割的字符串切该字符串以value开头的tag元素 子选择器,同辈选择器:
$('tagA > tagB') 选择作为tagA元素子元素的所有tagB元素
$('tagA + tagB') 选择紧邻tagA元素且位于其后的tagB元素
$('tagA ~ tagB') 选择作为tagA同辈元素且位于其后的所有tagB元素 伪类,伪元素选择器:
$('tag:root') 选择作为文档根元素的tag元素
$('tag:nth-child(n)') 选择作为其父元素正数第n个元素的所有tag元素
$('tag:nth-last-child(n)') 选择作为其父元素倒数 第n个元素的所有tag元素
$('tag:nth-of-type(n)') 选择几个同辈tag元素中的正数第n个
$('tag:nth-last-f-type(n)') 选择几个同辈tag元素中的倒数第n个
$('tag:first-child') 选择作为其父元素第一个子元素的tag元素
$('tag:last-child') 选择作为其父元素第一个子元素的tag元素
$('tag:first-of-type') 选择作为同辈tag元素中的第一个
$('tag:last-of-type') 选择作为同辈tag元素中的最后一个
$('tag:only-child') 选择作为其父元素唯一子元素的tag元素
$('tag:only-of-type') 选择作为同辈元素中唯一一个标签为tag的元素
$('tag:empty') 选择所有没有子元素的tag元素
$('tag:enabled') 选择界面元素中所有已经启用的tag元素
$('tag:disabled') 选择界面元素中所有已经禁用的tag元素
$('tag:checked') 选择界面元素中所有已经被选中的tag元素(如:复选框,单选按钮)
$('tag:not(s)') 选择与选择器s不匹配的所有tag元素 其他专有选择器:
$('tag:even') 选择匹配元素集 中偶数序号的元素(适合突出显示表格行)
$('tag:odd') 选择匹配元素集 中奇数序号的元素
$('tag:eq(0)'), $('tag: nth(0)') 选择匹配元素 集中的第一个元素,如页面的第一个段落
$('tag:gt(n)') 选择匹配元素集 中索引值大于n的所有元素
$('tag:lt(n)') 选择匹配元素集 中索引值小于n的所有元素
$('tag:first') 选择匹配元素集 中的第一个元素, 等价于eq(0)
$('tag:last') 选择匹配元素集 中的最后一个元素
$('tag:parent') 选择匹配元素集 中包含子元素(文本节点也算)的所有元素
$('tag:contains('test')') 选择匹配元素集 中包含指定文本的所有元素
$('tag:visible') 选择匹配元素集 中所有可见的元素(包括display属性为block和inline,visibility属性为visible以及type属性不是hidden的表单元素)
$('tag:hidden') 选择匹配元素集 中所有隐藏的元素(包括display属性为none, visibility属性为hidden以及type属性为hidden的表单元素) 一些专门为表单设计的表达式,用于快速访问表单元素:
:input 选择表单中的所有元素
:text 选择所有文本字段
:password 选择所有密码字段
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:submit 选择所有提交按钮
:image 选择所有表单图像
:reset 选择所有重置按钮
:button 选择所有其他按钮
【一些简单的jQuery选择器】的更多相关文章
- 简单的jquery选择器的实现
function getByClass(oParent,oClass){ if(document.getElementsByClassName){ return document ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器续1
在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...
- 二、jquery选择器
在jquery库中,可以通过选择器实现DOM元素快捷选择这一重要的核心功能. 1.选择器的优势 (1)代码更简单 由于在jquery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简 ...
- jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
随机推荐
- C#-集合及特殊集合——★★哈希表集合★★
集合的基本信息: System.Collections命名空间包含接口和类,这些接口和类定义各种对象(如列表.队列.位组数.哈希表和字典)的集合. System.Collections.Generic ...
- 10. JavaScript学习笔记——JSON
10. JSON ///[JSON是一种数据格式,不是JS 独有的] ///[JSON语法] /* 1.数据书写格式:"name":value,JSON要求给属性名加上[双引号], ...
- (转)史上最全的MSSQL复习笔记
1.什么是SQL语句 sql语言:结构化的查询语言.(Structured Query Language),是关系数据库管理系统的标准语言. 它是一种解释语言:写一句执行一句,不需要整体编译执行.语法 ...
- JavaScript定时器与执行机制
JavaScript动画中是必须使用到定时器的,这里做一个总结. var label = 'someLable'; console.time(label); console.timeEnd(label ...
- Android的网络编程
1.3主要接口 Android平台有三种网络接口可以使用,他们分别是:java.net.*(标准Java接口).Org.apache接口和Android.net.*(Android网络接口).下面分别 ...
- 解析XML:DOM,SAX,PULL
Android解析XML有三种方式:DOM(document object model).SAX(simple api XML).PULL 1.DOM DOM解析XML文件时,会将XML文件的所有内容 ...
- rails 中 create, new, build, save 的用法以及误区汇总 (转)
自己很初级,初级的不能再初级,所以初次接触rails的时候,对于里面的create,new,build等方法不是很了解,用的很混乱,导致经常出现不必要的bug,很苦恼,决定,总结一下,结合网上已有资源 ...
- 数据库索引--------B/B+树、聚集、非聚集、符合索引
摘录自博客:http://www.cnblogs.com/morvenhuang/archive/2009/03/30/1425534.html 一.引言 对数据库索引的关注从未淡出我的们的讨论,那么 ...
- 【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要 ...
- rust by example 2
本来这篇准备明天在写的,但正好今天的Release没出问题,就接着写吧 rust里的原生类型: 有符号整数: i8, i16, i32, i64和isize(指针大小) 无符号整数:u8, u16, ...