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文本的操 ...
随机推荐
- coursera机器学习笔记-多元线性回归,normal equation
#对coursera上Andrew Ng老师开的机器学习课程的笔记和心得: #注:此笔记是我自己认为本节课里比较重要.难理解或容易忘记的内容并做了些补充,并非是课堂详细笔记和要点: #标记为<补 ...
- 【函数】Oracle函数系列(2)--数学函数及日期函数
[函数]Oracle函数系列(2)--数学函数及日期函数 1 BLOG文档结构图 2 前言部分 2.1 导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不 ...
- MySQL创建和操作数据库表demo
[1]建立员工档案表要求字段:员工员工编号,员工姓名,性别,工资,email,入职时间,部门. [2]合理选择数据类型及字段修饰符,要求有NOT NULL,auto_increment, primar ...
- 工作中常用的Linux命令:crontab命令
本文链接:http://www.cnblogs.com/MartinChentf/p/6060252.html (转载请注明出处) crontab是一个用来设置.删除或显示供守护进程cron执行的定时 ...
- python enumerate函数用法
enumerate函数用于遍历序列中的元素以及它们的下标 i = 0 seq = ['one', 'two', 'three'] for element in seq: print i, seq[i] ...
- Linux aclocal
一.简介 二.安装 三.常用指令 1)安装m4 aclocal -I m4 2)查看aclocal的路径 aclocal --print-ac-dir 四.常见问题 1) LIBTOOL is und ...
- NoSql之旅--Cassandra的Cql简介(二)
安装完Cassandra后我们就开始体验一下这个数据库的查询吧,传统的关系数据库使用的sql进行查询,而Cassandra使用的cql. cql语法还是很多的,这里不一一详细阐述了,也没这个必要,具体 ...
- [转] cordova-plugin-x-toast
本文转自:https://www.npmjs.com/package/cordova-plugin-x-toast cordova plugin add https://github.com/Eddy ...
- 第一篇使用Markdown的文章
一级标题 1 计算机 |计算机|科学| Foo 这段文字需要被强调 this is H1 ========== this is H2 ---------- 这是H1 这是H2 这是H3 这是H6 断好 ...
- POJ3636Nested Dolls[DP LIS]
Nested Dolls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8323 Accepted: 2262 Desc ...