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学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
- jquery学习笔记(三):事件和应用
内容来自[汇智网]jquery学习课程 3.1 页面加载事件 在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...
- jQuery学习笔记(2)-选择器的使用
一.选择器是什么 有了jQuery的选择器,我们几乎可以获取页面上任意一个或一组对象 二.Dom对象和jQuery包装集 1.Dom对象 JavaScript中获取Dom对象的方式 <div i ...
- JQuery学习笔记之选择器
JQuery与DOM对象 <div id="test1" class="test2"></div> DOM对象获取方式: var dom ...
- jQuery学习笔记三
使用fadeIn()js解释器会将所选元素的CSS opacity属性从0改为100,fadeTo()会动画显示所选元素,将它为改为某个特定的透明度百分比,使用fadeOut()js解释器会将所选元素 ...
- 初步学习jquery学习笔记(三)
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
随机推荐
- mysql执行计划
烂sql不仅直接影响sql的响应时间,更影响db的性能,导致其它正常的sql响应时间变长.如何写好sql,学会看执行计划至关重要.下面我简单讲讲mysql的执行计划,只列出了一些常见的情况, ...
- ASP.NET MVC 拓展ViewResult实现word文档下载
最近项目中有同事用到word文档导出功能,遇到了一些导出失败问题,帮其看了下解决问题的同事,看了下之前的代码发现几个问题: 代码编写不规范,word导出功能未收口 重复代码导出都是 实现逻辑比较复 ...
- 烂泥:学习Nagios(二):Nagios配置
本文由秀依林枫提供友情赞助,首发于烂泥行天下 nagios安装完毕后,我们现在就来配置nagios.有关nagios的安装,可以参考<烂泥:学习Nagios(一):Nagios安装>这篇文 ...
- Mac下开启FTPserver
开启命令 sudo -s launchctl load -w /System/Library/LaunchDaemons/ftp.plist 关闭命令 sudo -s launchctl unlo ...
- DNS 原理入门
导读 DNS 是互联网核心协议之一.不管是上网浏览,还是编程开发,都需要了解一点它的知识.本文详细介绍DNS的原理,以及如何运用工具软件观察它的运作.我的目标是,读完此文后,你就能完全理解DNS. 一 ...
- gvim的菜单乱码解决方法
gvim的菜单乱码解决方法: (乱码是由于系统内码不兼容导致,系统内码包括gb2312 gb18030 utf-8 utf-16[unicode]等) 生成文件 ~/.gvimrc 并添加如下语句:s ...
- 在JazzyViewPager中调用其它layout布局xml并使用
开源地址:https://github.com/jfeinstein10/JazzyViewPager 发现网上的例子使用的是直接创建的一个TextView来做的.但是实际上使用,不可能只有这一个控件 ...
- IO - 同步,异步,阻塞,非阻塞 (亡羊补牢篇)
IO - 同步,异步,阻塞,非阻塞 (亡羊补牢篇) 当你发现自己最受欢迎的一篇blog其实大错特错时,这绝对不是一件让人愉悦的事. <IO - 同步,异步,阻塞,非阻塞 >是我在开始学习e ...
- MMORPG大型游戏设计与开发(客户端架构 part10 of vegine)
界面是游戏中必不可少的一部分,就算你进入游戏没有看到什么UI窗口,你也不必着急,因为多多少少都会有隐藏着的界面等你去体验.一个好的UI大部分应该归功于设计的人与提供美术支持的人员,因为他们是直接设计U ...
- OpenStack Networking overview
原文地址:http://docs.openstack.org/newton/install-guide-ubuntu/neutron-concepts.html Networking service ...