jQuery--选择器总结
传统选择器:
$('#test') id选择器
$('.test') class选择器
$('p') 标签选择器
$('*') 通配符选择器
$('div,span,.myclass') 多个元素选择器
层次选择器:
$('div span') 选取div 里所有的span 元素
$('div>span') 选取div元素下的子span
$('div+span') 选择div后紧接着的span元素
$('div~span') 选择div 后面所有的span兄弟元素
过滤选择器:
$('div:first') 第一个div元素
$('div:last') 最后一个div元素
$('input:not(.myclass)') 选取class 不是myclass 的input元素
$('input:even') 选取索引为偶数的input元素
$('input:odd') 选取索引为奇数的input元素
$('input:eq(1)') 选取索引为1的input元素
$('input:gt(1)') 选取索引大于1的input元素
$('input:lt(1)') 选取索引小于1的input元素
$(':header') 选取网页中所有的标题元素
$('div:animated') 选取正在执行动画的div元素
内容过滤选择器:
$('div:contains("test")') 选择所有含有文字 test 的div元素
$('div:empty') 选择不包含子元素的 div空元素
$('div:has(p)') 选择含有 p标签的div元素
$('div:parent')选择含有子元素的div元素
可见性过滤选择器:
$('input:hidden') 选择所有隐藏的input
$('div:visible') 选择所有可见的div元素
属性过滤器:
$('div[id]') 选择拥有属性id 的选择器
$('div[id=test]') 选择属性id 为test 的div选择器
$('div[id!=test]') 选择属性id 不为test 的div选择器
$('div[id^=test]') 选择属性id 值以test开头 的div选择器
$('div[id$=test]') 选择属性id 值以test结尾 的div选择器
$('div[id*=test]') 选择属性id 值包含test 的div选择器
$('div[id][title$="test"]') 选择有属性id 并且title属性以test 结尾的div
子元素过滤选择器:
$('div:nth-child(1)') 选取每个父元素第index 的元素
$('ul li:first-child') 选取每个ul 中第一个li元素
$('ul li:last-child') 选取每个ul 中最后一个li元素
$(ul li:only-child) 选取是唯一子元素的li元素
$(div:nth-child(even)) 选择偶数的div元素
$(div:nth-child(odd)) 选择基数的div元素
$(div:nth-child(3n)) 选择3的倍数的div元素
表单对象属性过滤器:
$('#form1 :enabled') 选取id为form1 的表单内所有可用元素(注意:这里是有空格的)
$('#form1 :disabled') 选取id为form1 的表单内所有不可用元素(注意:这里是有空格的)
$('input:checked') 选取所有被选中的input 元素
$('select :selected') 选取所有被选中的下拉列表
jQuery--选择器总结的更多相关文章
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- jQuery的案例及必知重要的jQuery选择器
Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...
- 深入学习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]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- 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对 ...
随机推荐
- Spring-cloud & Netflix 源码解析:Eureka 服务注册发现接口 ****
http://www.idouba.net/spring-cloud-source-eureka-client-api/?utm_source=tuicool&utm_medium=refer ...
- 03.JavaScript 面向对象精要--理解对象
JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...
- 百度app测试服务
https://cloud.baidu.com/product/mat.html?t=cp:ct|pp:fcforbce242jrcs|cn:fcforbce242|pu:newAATJRKWS002 ...
- java 计算 1到10 的 阶层的和(采用递归的方法)
package hibernate; public class t { public static void main(String[] args) { System.out.println(jiec ...
- 编写我的第一个CGI代码——python学习
在编程学习网站学习Python语言,学习到cgi编程章节遇到了一些小问题,课程介绍的为linux环境的Apache配置方法,具体如下: [linux环境配置方法:] 在进行CGI编程前,确保您的Web ...
- 4.AE中的缩放,书签
1.书签 private void textBox1_TextChanged(object sender, EventArgs e) { if (txtBookmark.Text == "& ...
- (49) odoo context操作
* context 这是一个上下文,运用很灵活 * 得到整个context V7 context=dict(context or {}) 这个版本是明传 V8 self.context_ ...
- SQLPlus 在连接时通常有四种方式
1. sqlplus / as sysdba 操作系统认证,不需要数据库服务器启动listener,也不需要数据库服务器处于可用状态.比如我们想要启动数据库就可以用这种方式进入 sqlpl ...
- Java注解入门
注解的分类 按运行机制分: 源码注解:只在源码中存在,编译后不存在 编译时注解:源码和编译后的class文件都存在(如@Override,@Deprecated,@SuppressWarnin ...
- cookie多次点赞效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...