jQuery学习笔记(一)jQuery选择器
目录
第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习。
最近一段时间开始学习jQuery,通过写一个jQuery学习笔记的专题,对jQuery的知识做一个总结,并给出部分Demo来练习,使其能够掌握jQuery的基本技能。
今天所写的内容是关于jQuery选择器。
在学习jQuery选择器之前,有必要先了解一下css选择器,首先要明确一个新手容易混淆的概念:css选择器与jQuery选择器是两个不同的概念,正如DOM对象与jQuery对象(jQuery对象是通过jQuery包装DOM对象后所产生的的对象,无法使用DOM对象的任何方法)也是两个不同的概念。常用的css选择器有标签选择器、ID选择器、类选择器、群组选择器、后代选择器、通配选择器等。
jQuery选择器完全继承了CSS的风格,可以方便快捷的找出特定的DOM元素,然后为其添加行为。jQuery选择器与css选择器最大的不同就在于jQuery选择器是找到元素后为其添加行为,而css选择器则是找到元素后为其添加样式,但是jQuery选择器也可以操作css样式,并且更加灵活。这样一个HTML页由三部分构成,HTML中的标签负责网页的内容,css负责样式,jQuery(更确切的说应该是Javascript)负责其行为。
一. 下面谈谈关于jQuery选择器的优点
1.简洁的写法
在JS中,我们最常写的一个函数就是document.getElementById(),通过ID获取元素,而在jQuery中只需$("#Id")即可完成这一工作。
2.支持css1到css3的选择器
3.完善处理机制
即使是用jQuery选择器获取页面上不存在的元素也不会报错,这一点不同于js.
二.jQuery选择器中各类选择器
jQuery的选择器大体分为四大类:基本选择器、层次选择器、过滤选择器、表单选择器。作为初学者而言,恐怕一时难以掌握如此之多的选择器,个人认为,掌握基本选择器以及会一些过滤选择器即可胜任大部分我们需要的操作。何况很多选择器与CSS如此相像!下面就分别来介绍这四大类选择器,其中过滤选择器还细分了6类,都用了表格的方式,这样即使到了以后项目中需要的时候也可以直接查阅这些表格。
1.基本选择器(可以完成绝大多数的工作)
具体介绍及用法见表1。
表1 基本选择器
选择器 | 描述 | 返回 | 示例 |
#id |
根据给定的id匹配一个元素 |
单个元素 | $("#test")选取id为test的元素 |
.class |
根据给定的类名匹配元素 |
集合元素 | $(".test")选取所有class为test的元素 |
element |
根据给定的元素名匹配元素 |
集合元素 | $("p")选取所有的<p>元素 |
* |
匹配所有元素 |
集合元素 | $(*)选取所有元素 |
selector1,selector2, ...,selectorN |
将每一个选择器匹配到的元素 合并后一起返回 |
集合元素 |
$("div,span,p.myClass")选取所有<div> <span>和拥有myClass的<p>标签的一组 元素 |
2.层次选择器
即通过DOM元素之间的层次关系来获取指定的元素,具体介绍及用法见表2
表2 层次选择器
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") |
选取ancestor里的所有descendan 元素 |
集合元素 |
$("div span')选取<div>里的 所有<span>元素 |
$("parent>child") | 选取parent元素下的child元素 | 集合元素 | $("div>span")选取<div>里的所有<span>子元素 |
$("prev+next") | 选取紧接在prev元素后的next元素 | 单个元素 | $(".one+div")选取class为one的下个<div>同辈元素 |
$("prev~siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 |
$("#two~div")选取id为two的元素后面 所有<div>同辈元素 |
注意$("ancestor descendant")与$("parent>child")的区别:$("ancestor descendant")选取的是所有的后代元素,而$("parent>child")选取的只是其 parent 元素下的子元素(child元素)。
3.过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,选择器都以(:)开头。
过滤选择器可以分为:基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、和表单对象属性过滤选择器。
3.1基本过滤选择器
具体用法见表3
表3 基本过滤选择器
选择器 | 描述 | 返回 | 示例 |
:first | 选取第一个元素 | 单个元素 | $("div first")选取所有<div>元素中的第一个<div>元素 |
:last | 选取最后一个元素 | 单个元素 | $("div:last")选取所有<div>元素里的最后一个<div>元素 |
:not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 |
$("input :not(.myClass)")选取class不是myClass的 <input>元素 |
:even |
选取索引是偶数的所有元素, 索引下标从0开始 |
集合元素 | $("input :even")选取索引是偶数的<input>元素 |
:odd |
选取索引是奇数的所有元素, 索引下标从0开始 |
集合元素 | $(“input :odd”)选取索引是奇数的<input>元素 |
:eq(index) | 选取索引等于index的元素 | 单个元素 | $("input:eq(0)")选取索引为0<input>元素 |
:gt(indext) | 选取索引大于index的元素 | 集合元素 | $("input:gt(1)")选取索引大于1的<input>元素 |
:lt(index) | 选取索引小于index的元素 | 集合元素 | $("input:lt(1)")选取索引小于1的<input>元素 |
:header | 选取所有的标题元素 | 集合元素 | $(":header")选取所有的<h1><h2><h3>... |
:animated | 选取当前正在执行动画的所有元素 | 集合元素 | $("div:animated")选取正在执行动画的<div>元素 |
:focus | 选取当前获取焦点的元素 | 集合元素 | $(":focus")选取当前获得焦点的元素 |
3.2内容过滤选择器
具体用法见表4
表4 内容过滤选择器
选择器 | 描述 | 返回 | 示例 |
:contains(text) | 选取文本内容为“text”的元素 | 集合元素 | $("div:contains('我')")选取含有文本“我”的<div>元素 |
:empty | 选取不包含子元素或者文本的空元素 | 集合元素 | $("div:empty")选取不包含子元素的<div>空元素 |
:has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有<p>元素的<div>元素 |
:parent | 选取含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取拥有子元素或者文本的<div>元素 |
3.3可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见的状态来选择相应的元素。具体见表5.
表5 可见性过滤选择器
选择器 | 描述 | 返回 | 示例 |
:hidden | 选取所有不可见的元素 | 集合元素 | $("input:hidden")选取所有不可见的<input> |
:visible | 选取所有可见的元素 | 集合元素 | $("div:visible")选取所有可见的<div>元素 |
3.4属性过滤选择器
属性选择器的过滤规则是通过元素的属性来获取相应的元素,属性都用包含在[]中,并没有冒号。具体见表6.
表6 属性过滤选择器
选择器 | 描述 | 返回 | 示例 |
[attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有属性为id的<div>元素 |
[attribute=value] | 选取属性值为value的元素 | 集合元素 | $("div[title=test]")选取属性title为“test”的<div>元素 |
[attribute!=value] | 选取属性值不为value的元素 | 集合元素 |
$("div[title!=test]")选取属性title不为“test”的<div>元素,没有属性titl e的<div>元素也为被选取 |
[attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | $("div[title^=test]")选取属性title以“test”开始的<div>元素 |
[attribute$=value] | 选取属性的值以values结尾的元素 | 集合元素 | $("div[title$=test]")选取属性title以“value”结束的<div>元素 |
[attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $("div[title*=test]")选取属性title中含有“title"的<div>元素 |
[attribute|=value] |
选取属性等于给定字符串或以该字符为 前缀(该字符串后跟一个连字符"-")的元素 |
集合元素 |
$("div[title|='en']")选取属性title为"en"或者以“en”开头字符串的<div> 元素 |
[attribute~=value] |
选取属性用空格分隔的值中包含一个给定值 的元素 |
集合元素 |
$("div[title~='uk']")选取属性title用空格分隔值中包含“uk”的<div> 元素 |
[attribute1][attribute] ...[attributeN] |
一个复合属性选择器,没选择一次,缩小一 次范围 |
集合元素 |
$("div[id][title$=test]")选取拥有属性id并且属性title以test结尾的 <div>元素 |
3.5 子元素过滤选择器
在用子元素过滤选择器时要弄清父元素与子元素的关系。具体用法见表7
表7 子元素过滤选择器
选择器 | 描返 | 返回 | 示例 |
:nth-child (index/eve/ odd/equation) |
选取每个父元素下的第index个 子元素或者奇偶元素(index从1开始) |
集合元素 |
:eq(index)只匹配一个元素,而:nth-child将为每一个 父元素匹配子元素,并且:nth-child(index)的index是从1开始, 而:eq(index)是从0开始。 |
:first-child |
选取每个父元素的第一个子元素 |
集合元素 |
:first只返回单个元素,而:first-child选择器将为每个父元素匹配 第一个子元素。 $("ul li:first-child")选取每一个ul中第一个<li>元素 |
:last-child | 选取每个父元素的最后一个子元素 | 集合元素 | $("ul li:last-chilid")选取每一个ul中的最后一个<li>元素 |
:only-child |
如果某个元素是它父元素中的唯一一个 子元素,那么它就会被匹配,如果父元 素中含有其他元素,那么将不会匹配 |
集合元素 | $("ul li:onyl-child")选取ul中是唯一子元素的<li>元素 |
3.6 表单对象属性过滤选择器
表单对象属性过滤选择器主要是针对表单元素中enabled、disabled、checked、selected等属性进行过滤。具体用法见表8
表8 表单对象属性过滤选择器
选择器 | 描述 | 返回 | 示例 |
:enabled | 选取所有可用元素 | 集合元素 | $("#form1:enabled")选取id为"form1"的表单的所有可用元素 |
:disabled | 选取所有不可用元素 | 集合元素 | $("#form2:disabled")选取id为"form2"的表单中的所有不可用的元素 |
:checked | 选取所有被选中的元素(单选框,复选框) | 集合元素 | $("input:checked")选取所有被选中的<input>元素 |
:seleted | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("select option:selected")选取所有被选中的选项元素 |
4.表单选择器
专门用于开发者获取表单中的某个或者某种类型的元素。对于用户的交互性有着很重要的影响。具体用法见表9.
表9 表单选择器
选择器 | 描述 | 返回 | 示例 |
:input |
选取所有<input>、<textarea>、<select> 和<button>元素 |
集合元素 |
$(":input")选取所有<input>、<textarea>、 <select>和<button>元素 |
:text |
选取所有的单行文本框 |
集合元素 |
$(":text")选取所有的单行文本框 |
:password |
选取所有的密码框 |
集合元素 |
$(":password")选取所有的密码框 |
:radio |
选取所有的单选框 |
集合元素 |
$(":radio")选取所有的单选框 |
:checkbox |
选取所有的多选框 |
集合元素 |
$(":checkbox")选取所有的多选框 |
:submit |
选取所有的提交按钮 |
集合元素 |
$(":submit")选取所有的提交按钮 |
:image |
选取所有的图相按钮 |
集合元素 |
$(":image")选取所有的图相按钮 |
:reset |
选取所有的重置按妞 |
集合元素 |
$(":reset")选取所有的重置按钮 |
:button |
选取所有的按钮 |
集合元素 |
$(":button")选取所有的按钮 |
:file |
选取所有的上传域 |
集合元素 |
$(":file")选取所有的上传域 |
:hidden |
选取所有的不可见元素 |
集合元素 |
$(":hidden")选取所有的不可见元素 |
小结
此次学习笔记主要写了关于jQuery选择器,jQuery选择器是jQuery的基础,只有将jQuery选择器熟练掌握,才能掌握jQuery中DOM操作、以及对表单、表格的操作、在Ajax的应用等等。好了,也对于jQuery选择器总结的差不多了。从中午开始,写到晚上,感觉写博客果然也是一种总结提高的好方法,对之前很多陌生的jQuery选择器重新认识了一遍。
jQuery学习笔记(一)jQuery选择器的更多相关文章
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- jquery学习笔记(一):选择器
内容来自[汇智网]jquery学习课程 1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根 ...
- 锋利的jQuery学习笔记之jQuery选择器
在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- jQuery学习笔记之jQuery.fn.init()的参数分析
这篇文章主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下 从return new jQuery.fn.init( selector, context, rootjQuer ...
- jQuery学习笔记(jquery.ui插件)
官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...
- jQuery学习笔记(jquery.simplemodal插件)
官网地址:http://www.ericmmartin.com/ SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架.Simpl ...
- jQuery学习笔记(jquery.form插件)
官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...
随机推荐
- 使用js实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- css控制文字大小及颜色、字体
字体:font-style:italic:斜体 font-weight:bold:加粗 font-size:30px:大小 line-height:30 ...
- jNotify:操作结果信息提示条
我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息.jNotify是一款基于jQuery的信息提示插件,它支持操作成功.操作失败和操作提醒 ...
- php登陆与注册
登陆页面 <body><h1>登录页面</h1><form action="./dengluchuli.php" method=" ...
- Ubuntu下安装Numpy, SciPy and Matplotlib
Python开发环境包含科学计算,需要安装NumPy, SciPy, Matplotlib.其中Matplotlib依赖于Python和NumPy.我们先安装NumPY和SciPy. Matplot ...
- Socket与Http通信
HTTP(超文本传输协议): HTTP是应用层协议,主要用于解决数据包装的问题. HTTP协议是建立在TCP协议之上的一种应用. HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应,在 ...
- [原创]java WEB学习笔记105:Spring学习---AOP介绍,相关概念,使用AOP,利用 方法签名 编写 AspectJ 切入点表达式
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- nodejs require//////////z
背景 这篇文基本都是反对的,反对的很有道理,不是说我这篇文章的内容错误,因为这篇文章是我在健身房学习node的时候写的,这些知识都很粗糙,后来发现官方的稳定更详细:地址:http://nodejs.o ...
- 使用Docker构建redis集群--最靠谱的版本
1集群结构说明 集群中有三个主节点,三个从节点,一共六个结点.因此要构建六个redis的docker容器.在宿主机中将这六个独立的redis结点关联成一个redis集群.需要用到官方提供的ruby脚本 ...
- 【004: gcc 和 clang 的简单比较】