jQuery的选择器小总结
这一节详细的总结jQuery选择器。
一、基础选择器
$('#info'); // 选择id为info的元素,id为document中是唯一的,因此可以通过该选择器获取唯一的指定元素 $('.infoClass'); // 选择class为infoClass的所有元素 $('div'); // 选择标签名为div的所有的元素 $('*'); // 选择所有标签元素
二、基本过滤器
基本选择器获取的元素集合,通过过滤器的筛选,使选择更加精确。
$('.infoClass:first'); // 选择class为infoClass的所有元素集合,并筛选集合中的第一个元素 $('.infoClass:last'); // 选择class为infoClass的所有元素集合,并筛选集合中的最后一个元素 $('.infoClass:odd'); // 选择class为infoClass的所有元素集合,并筛选集合中索引为奇数的元素,如1,3,5 $('.infoClass:even'); // 选择class为infoClass的所有元素集合,并筛选集合中索引为偶数的元素,如0,2,4 $('.infoClass:eq(2)'); // 选择class为infoClass的所有元素集合,并筛选集合中索引为2的元素 $('.infoClass.lt(2)'); // 选择class为infoClass的所有元素集合,并筛选集合中索引小于2的元素集合 $('.infoClass.gt(2)'); // 选择class为infoClass的所有元素集合,并筛选集合中索引大于2的元素集合
三、内容过滤器
jQery准备了内容过滤器用于对选择的元素集合内容进行过滤。
统一名称:
- 空元素:不包含任何后代元素或文本内容的元素,如<div></div>
- 非空元素:包含后代元素或者包含文本内容的元素
$('div:contains("info")'); // 选择标签为div的所有元素集合,并筛选集合中文本内容包含info字段的元素 $('div:empty'); // 选择标签为div的所有元素集合,并筛选集合中所有空元素 $('div:parent'); // 选择标签为div的所有元素集合,并筛选集合中所有非空元素 $('div:has(p)'); // 选择标签为div的所有元素集合,并筛选集合中后代元素含有p标签的元素
四、可视化过滤器
对于元素是否可见,jQuery也进行了处理。
$('div:visible'); // 选择标签为div的所有元素集合,并筛选集合中可见的元素 $('div:hidden'); // 选择标签为div的所有元素集合,并筛选集合中不可见的元素
五、属性过滤器
不同元素之间,拥有不同的属性参数,jQuery允许通过参数进行过滤。
$('input[placeholder]'); // 选择所有标签为input的元素集合,并筛选包含placeholder属性的元素 $('input[placeholder="info"]'); // 选择所有标签为input的元素集合,并筛选placeholder属性值为info的元素 $('input[placeholder^="info"]'); // 选择所有标签为input的元素集合,并筛选placeholder属性值以info开头的元素 $('input[placeholder$="tion"]'); // 选择所有标签为input的元素集合,并筛选placeholder属性值以tion结尾的元素 $('input[placeholder*="mat"]'); // 选择所有标签为input的元素集合,并筛选placeholder属性值中包含字段mat的元素 $('input[id][placeholder*="mat"]'); // 选择所有标签为input的元素集合,并筛选包含id属性并且placeholder属性值中包含字段mat的元素
六、子元素过滤器
这个比较容易混淆,进行对比总结。
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
$('ul li:first-child').css('background-color', 'red'); // 选择每一个ul标签下的li元素集合中的第一个
$('ul li:first').css('background-color', 'red'); // 选择所有ul标签下的li元素集合中的第一个
$('ul li:last-child'); // 选择每一个ul标签下的li元素集合中的最后一个
七、关系选择器
- 同级元素:即当前元素处于同一层级。
- 父级元素:即当前元素的直属上层元素。
- 祖先元素:即当前元素的所有上层元素。
- 子级元素:即当前元素的直属子层元素。
- 后代元素:即当前元素的所有子层元素。
$('form input'); // 选择所有标签为form的元素中,后代元素标签为input的元素 $('form>input'); // 选择所有标签为form的元素中,子级元素标签为input的元素 $('label+input'); // 选择所有标签为label的同级元素中,标签为input的元素集合中的第一个 $('label~input'); // 选择所有标签为label的同级元素中,标签为input的元素集合
八、表单选择器
方便表单元素的选择。
$(':input'); // 选择所有表单输入元素,包括input,textarea,select $(':text'); // 选择所有的type为text的input元素 $(':password'); // 选择所有的type为password的input元素 $(':radio'); // 选择所有的type为radio的input元素 $(':checkbox'); // 选择所有的type为checkbox的input元素 $(':submit'); // 选择所有的type为submit的input元素 $(':image'); // 选择所有的type为image的input元素 $(':reset'); // 选择所有的type为reset的input元素 $(':button'); // 选择所有的type为button的input元素 $(':file'); // 选择所有的type为file的input元素 $(':hidden'); // 选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤器
$(':enabled'); // 选择所有的可操作的表单元素
$(':disabled'); // 选择所有的不可操作的表单元素
$(':checked'); // 选择所有的被checked的表单元素
$('select option:selected'); // 选择所有的select 的子元素中被selected的元素
九、对比总结
为了方便记忆,将功能相关的选择器进行总结:
1. $('#id')与$('.calss')
$('#id'); // 根据id选择元素
$('.class'); // 根据class选择元素
2.$('div:first')与$('div:last')
$('div:first'); // 选择div元素集合中的第一个
$('div:last'); // 选择div元素集合中的最后一个
3.$('div:odd')与$('div:even')
$('div:odd'); // 选择div元素集合中的奇数个元素
$('div:even'); // 选择div元素集合中的偶数个元素
4.$('div:gt(i)')与$('div:lt(i)')
$('div:gt(i)'); // 选择div元素集合中索引大于i的元素
$('div:lt(i)'); // 选择div元素集合中索引小于i的元素
5.$('div:empty')与$('div:parent')
$('div:empty'); // 选择div元素集合中空元素
$('div:parent'); // 选择div元素集合中非空元素
6.$('div:visible')与$('div:hidden')
$('div:visible'); // 选择div元素集合中可见元素
$('div:hidden'); // 选择div元素集合中隐藏元素
7.$('ul li:first')与$('ul li:first-child')
$('ul li:first'); // 选择所有ul后代元素li元素集合中的第一个 $('ul li:first-child'); // 选择每个ul后代元素li元素集合中的第一个
8.$(':disable')与$(':enable')
$(':disable'); // 选择所有可以操作的表单元素
$(':enable'); // 选择所有不可以操作的表单元素
jQuery的选择器小总结的更多相关文章
- jQuery提供的小方法
jQuery提供的小方法: 1.选择器 + 事件 + 函数 = 复杂的交互 2.循环处理与选择器匹配的各个元素:each() $("#").each(function(){ ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
- jQuery基础——选择器、效果
一.使用JS的痛处 在学习和使用js的过程中发现了js的一些痛处: 1.书写繁琐,代码量大. 2.代码复杂. 3.动画效果很难实现.使用定时器,要小心各种定时器的清除.各种操作和处理事件不好实现. 4 ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- jquery 常用选择器和方法以及遍历(超详细)
jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- HTML 学习笔记 JQuery(选择器)
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
- 用jquery实现抽奖小程序
用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...
随机推荐
- 优秀的web前端工程师要具备什么
优秀的前端工程师需要具备良好的沟通能力,因为你的工作与很多人的工作息息相关.在任何情况下,前端工程师至少都要满足下列四类客户的需求. 产品经理--这些是负责策划应用程序的一群人.他们能够想象出怎样通过 ...
- 错误Mybatis 元素类型为 "resultMap" 的内容必须匹配 "(constructor?,id*,result*,association*,collection*,discriminat
今天算是见识了什么事顺序的重要性. 在使用mybatis时由于联合了其他的表,用到了resultMap,之后外加association这一项.可是在替换对应字段的位置上加上association总是报 ...
- MNIST手写数字数据库
手写数字库很容易建立,但是总会很浪费时间.Google实验室的Corinna Cortes和纽约大学柯朗研究所的Yann LeCun建有一个手写数字数据库,训练库有60,000张手写数字图像,测试库有 ...
- 利用Selenium自动化web测试
简介: Selenium 是一个没有正式指导手册的开源项目,这让测试人员的问题调查很费时间.本文为基于 Selenium 1.0(发布于 2009 年 6 月)的测试期间的常见问题提供最佳实践. 简介 ...
- 多校6-Key Set 2015-08-09 20:35 2人阅读 评论(0) 收藏
Key Set Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total Sub ...
- php编译器
WordPress http://pan.baidu.com/s/1eQnOnv0 epp3: http://pan.baidu.com/s/1pJKFOD1 配合xampp: http://pan. ...
- 新建一个DataTable(只针对一列)
/// <summary> /// 新建一个DataTable(只针对一列) /// </summary> /// <param name="dataStr&q ...
- 第十四章:高级I/O
14.1:引言 本章内容包括非阻塞I/O.记录锁.系统V流机制.I/O多路转接(select和poll函数).readv和writev函数以及存储映射I/O(mmap),这些都称为高级I/O. 14. ...
- 基于@AspectJ和schema的aop(三)---切点函数详解
切点函数是AspectJ表达式语言的核心, 也是使用@AspectJ进行切面定义的难点.本小节我们通过具体的实例对切点函数进行深入学习. 1.@annotation() @annotation()表示 ...
- java properties读取与设值
import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream; ...