【一些简单的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 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
随机推荐
- PHP下的浮点运算不准的解决办法
首先看一段代码: 首先看一段代码: <?php $a = 0.1; $b = 0.7; var_dump(($a + $b) == 0.8); 打印出来的值居然为 boolean false P ...
- Eclipse 的SVN 的分支
分支 概念 在版本控制过程中,使用多个分支同时推进多个不同功能开发. 不使用分支开发:人与人之间协作 使用分支开发:小组和小组之间协作 作用 多个功能开发齐头并进同时进行 任何一个分支上功能 ...
- c常用函数
一.strtol long int strtol(const char *nptr, char **endptr, int base) strtol()会将nptr指向的字符串,根据参数base,按权 ...
- 接口测试-postman,JMeter与LoadRunner比较
postman是一个谷歌出的轻量级的专门测试接口的小工具~(PS:postman包括两种:Chrome浏览器插件和postman客户端,我使用的是postman客户端)虽然不如firefox的post ...
- CF1012C Hills 题解【DP】
思路还是比较简单的 dp 吧,但是就是想不出来-甚至类似的方程都被自己推翻了 Description Welcome to Innopolis city. Throughout the whole y ...
- c# 操作excle
添加引用 Microsoft.Office.Interop.Excel; 添加命名空间 using Excel = Microsoft.Office.Interop.Excel; //创建接口变量- ...
- (转)QEMU 使用的镜像文件:qcow2 与 raw
原文:https://www.ibm.com/developerworks/cn/linux/1409_qiaoly_qemuimgages/ qcow2 的基本原理 qcow2 镜像格式是 QEMU ...
- Java Service Wrapper简介与使用(转)
本文转自https://www.cnblogs.com/zcy_soft/p/3738947.html,写的非常好,珍藏一下 1. wrapper的意思? wrapper在此处理解为“包装”. 2. ...
- AngularJS $timeout和 $interval ,定时器手机验证码倒计时
$interval是 window.setInterval的Angular包装形式.$interval指每次延迟时间后执行响应的函数(也可以说:每次执行函数的间隔时间).$interval多数用于计时 ...
- echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件
1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...