一、jQuery的产生
- 它的作者是 John Resig ,于2006年创建的一个开源项目
- jQuery 是一个 JavaScript 库，它通过封装原生的 JavaScript 函数得到一整套定义好的方法
- jQuery 已经集成了 JavaScript 、 CSS 、 DOM 和 Ajax 于一体的强大功能 。
二、jQuery的功能和优势
-
像 CSS 那样访问和操作 DOM
-
修改 CSS 控制页面外观
-
简化 JavaScript 代码操作
-
事件处理更加容易
-
各种动画效果使用方便
-
让 Ajax 技术更加完美
-
基于 jQuery 大量插件
-
自行扩展功能插件
三、jQuery历史
-
从 2005 年 8 月开始,进入公共开发阶段,随之而来的新框架于 2006 年 1 月 14 正式以 jQuery 的名称发布。
时间 版本 更新 2006 年 8 月 jQuery 1.0 第一个稳定版本，具有对 CSS 选择符、事件处理和 Ajax 交互的支持 2007 年 1 月 jQuery 1.1 极大的简化 API。合并了许多较少使用的方法 2007 年 7 月 jQuery 1.1.3 优化了 jQuery 选择符引擎执行的速度 2007 年 9 月 jQuery 1.2 去掉了 XPath 选择器,新增了命名空间事件 时间 版本 更新 2009 年 1 月 jQuery 1.3 使用了全新的选择符引擎 Sizzle,性能进一步提升 2010 年 1 月 jQuery 1.4 进行了一次大规模更新,提供了 DOM 操作,增加了很 多新的方法或是增强了原有的方法 2010 年 2 月 jQuery 1.4.2 添加了.delegate()和.undelegate()两个新方法,提升 了灵活性和浏览器一致性,对事件系统进行了升级 2011 年 1 月 jQuery 1.5 重写了 AJAX 组件,增强了扩展性和性能 2011 年 5 月 jQuery 1.6 重写了 Attribute 组件,引入了新对象和方法 时间 版本 更新 2011 年 11 月 jQuery 1.7 引入了.on()和.off()简介的 API 解决事件绑定及委托容 易混淆的问题 2012 年 3 月 jQuery 1.7.2 进行一些优化和升级 2012 年 7 月 jQuery 1.8 重写了选择符引擎,修复了一些问题 2013 年 1 月 jQuery 1.9 CSS 的多属性设置,增强了 CSS3 2013 年 5月 jQuery 1.10 一增加了一些功能 -
2013 年 4 月发布了 jQuery 2.0,5 月发布了 jQuery 2.0.2,一个重大更新版本,不在支持 IE6/7/8,体积更小,速度更快
- jQuery3版本的改动：
- 移除旧的IE工作区
- jQuery 3.0运行在Strict Mode下
- 引进for...of循环
- 动画方面采用新的API
- 延迟对象现在与JS Promises兼容
- 。。。
四、jQuery和其他类库
•YUI:一套完备的、扩展性良好的富交互网页工具集
•Prototype:是最早成型的 JavaScript 库之一,对JavaScript 内置对象做了大量的扩展
•Dojo:提供其他库没有的功能。离线存储、图标组件等等
•Mootools:轻量的模块化和面向对象的 JavaScript 框架
•ExtJs：主要创建前端用户界面
五、jQuery的使用
5.1 jQuery 下载
5.2 jQuery的使用
六、jQuery对象模型
6.1 jQuery执行时机
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页全部加载完毕(包括 图片等),然后再执行包裹代码 | 只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码 |
| 执行次数 | 只能执行一次,如果第二次,那么 第一次的执行会被覆盖 | 可以执行多次,第N次都不会被上 一次覆盖 |
| 简写方案 | 无 | $(function () { }); |
6.2 代码风格
- jQuery 程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“$”来起始的。
- jQuery类库定义了一个全局函数：
jQuery()。该函数使用频繁，因此在类库中还给它定义了一个快捷别名：$。这是jQuery在全局命名空间中定义的唯一两个变量。
-
css() 这个功能函数返回的对象其实也就是 jQuery 对象， jQuery 的代码模式是采用的连缀方式,可以不停的连续调用功能函数
6.3 jQuery对象和JS对象
6.3.1 什么是JS对象
DOM对象，即是我们用传统的方法(javascript)获得的对象。
6.3.2 什么是jQuery对象
jQuery对象即是用jQuery类库的选择器获得的对象，jQuery对象就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法
6.3.3 jQuery对象和DOM对象的互相转换
- jquery对象和dom对象是不一样的！比如jquery对象不能使用dom的方法，dom对象不能使用jquery方法，
- jquery对象转换成 dom对象：即[index]和get(index)。jquery对象就是一个类数组对象
- dom对象转换成jquery对象：对于一个dom对象，只需要用
$()把dom对象包装起来，就可以获得一个jquery对象了，方法为$(dom对象);
七、jQuery类数组操作
7.1 什么是类数组
-
只包含使用从零开始，且自然递增的整数做键名，并且定义了length表示元素个数的对象，我们就认为他是类数组对象。
7.2 类数组操作
-
children() ：返回原始包装集元素的所有不同子元素所组成的新包装集,如果指定了参数，那么该参数也是筛选表达式
-
parent() ：返回原始包装集所有元素的唯一直接父元素的新包装集；如果指定了参数，那么该参数也是筛选表达式
-
siblings() ：返回原始包装集元素中的所有兄弟元素所组成的新包装集；如果指定了参数，那么该参数也是筛选表达式
-
find(String) ：返回原始包装集里与传入的选择器表达式相匹配的所有元素的新包装集，并且原始包装集中的元素的后代也会被传入新的包装集
-
对于类数组的常用方法还有很多，比如 prev()、 end()、 next()等等。
7.3 jQuery选择器
jQuery 选择器是 jQuery 库中非常重要的部分之一。它支持网页开发者所熟知的CSS 语法，快速轻松地对页面进行设置
7.4 jQuery 基础选择器
-
简化代码的编写
-
隐式迭代
选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取 id 为 test 的元素 .class 根据给定的类名匹配元素 集合元素 $(".test")选取所有 class 为 test 的元素 element 根据给定的元素名匹配元素 集合元素 $("p")选取所有的 元素
* 匹配所有元素 集合元素 $("*")选取所有的元素 selector1,selector2, ...,selectorN 将每一个选择器匹配到的元 素合并后一起返回 集合元素 $("div,span,.myClass")选取所有 ，和拥有class为myClass 的标签的一组元素
7.5 jQuery 层次选择器
如果想通过 DOM 元素之间的层次关系来获取特定的元素，例如后代元素，子元素，相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| $("ancestor descendant") | 选取 ancestor 元素里所有descendant (后代)元素 | 集合元素 | $(“div span”)选取 里的所 有的 元素 |
| $("parent>child") | 选取 parent 元素下的child (子)元素 | 集合元素 | $(“div>span”)选取 元素下 元素名是 的子元素 |
| $("prev+next") | 选取紧接在 prev 元素后的 next 元素 | 集合元素 | $(“.one+div”)选取 class 为 one 的下一个 、 兄弟元素 |
| $("prev~siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 | $(“#two~div”)选取 id 为 two 的元素后面所有 兄弟元素 |
7.6 过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :first | 选取第1个元素 | 单个元素 | $(“div:first”)选取所有 <div> 元素 中第一个 <div> 元素 |
| :last | 选取最后1个元素 | 单个元素 | $(“div:last”)选取所有 <div> 元素 中最后一个 <div> 元素 |
| :not(selector) | 去除所有与给定选择器 匹配的元素 | 集合元素 | $(“input:not(.myClass)”)选取 class 不是 myClass 的 <input> 元素 |
| :even | 选取索引(从0开始)是偶数的所有元素 | 集合元素 | $("input:even")选取索引是偶数的 <input>元素 |
| :odd | 选取索引(从0开始)是奇数的所有元素 | 集合元素 | $(“input:odd”)选取索引是奇数的 <input> 元素 |
| :eq(index) | 选取索引(从0开始)等于 index 的元素 | 单个元素 | $(“input:eq(1)”)选取索引等于1的 <input> 元素 |
| :gt(index) | 选取索引(从0开始)大于 index的元素 | 集合元素 | $(“input:gt(1)”)选取索引大于1的 <input> 元素 |
| :lt(index) | 选取索引(从0开始)小于 index的元素 | 集合元素 | $(“input:lt(1)”)选取索引小于1的 <input> 元素 |
| :header | 选取所有的标题元素，即<h1>到<h6> |
集合元素 | $(":header")选取页面中所有的标题元素 |
| :contains(text) | 选取含有文本内容为 text 的元素 | 集合元素 | $("div:contains('test')")选取含有文本内容为 test 的<div>元素 |
| :empty | 选取不包含子元素或文本的空元素 | 集合元素 | $(“div:empty”)选取不包含子元素或文本的空 <div> 元素 |
| :has(selector) | 选取含有给定选择器 匹配的元素的元素 | 集合元素 | $(“div:has(.myClass)”)选取含有 class 为 myClass 的元素的 <div> 元素 |
| :parent | 选取含有子元素或文本的元素 | 集合元素 | $(“div:parent”)选取含有子元素或文本的 <div> 元素 |
| :first-child | 选取第1个子元素 | 集合元素 | $(“div :first-child”)选取每个 <div>下第一个子元素 |
| :last-child | 选取最后1个子元素 | 集合元素 | $(“div :last-child”)选取每个 <div> 下最后一个子元素 |
| :only-child | 选取只有唯一子元素的元素的子元素 | 集合元素 | $(“div :only-child”)选择只有一个子元素的 <div> 元素 |
| :nth-child(index/ even/odd/equation) | 选取每个父元素下的第index(索引值为奇数/ 索引值为偶数/索引值等于某个表达式)个子元素，index 从1开始 | 集合元素 | $(“div:nth-child(1)”)选取每个div 中第一个子元素 |
7.7 属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $(“div[id]”)选取拥有属性 id 的元素 |
| [attribute=value] | 选取属性的值为value的元素 | 集合元素 | $(“div[title=test]”)选取属性 title 为 test 的<div>元素 |
| [attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 | $(“div[title!=test]”)选取属性 title 不等于 test 的<div>元素 |
| [attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | $(“div[title^=test]”)选取属性 title 以 test 开始的<div>元素 |
| [attribute$=value] | 选取属性的值以 value结束的元素 | 集合元素 | $(“div[title$=test]”)选取属性 title 以 test 结束的 <div> 元素 |
| [attribute*=value] | 选取属性的值含有 value 的元素 | 集合元素 | $(“div[title*=test]”)选取属性 title 含有 test 的 <div> 元素 |
| [selector1][selector2]...[selectorN] | 选取匹配以上所有属性 选择器的元素 | 集合元素 | $(“div[id][title*=test]”)选取拥有属性 id ，且属性 title 含有 test 的<div> 元素 |
7.8 jQuery 表单选择器
- 表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :enabled | 选取所有可用元素 | 集合元素 | $(“input:enabled")选取页面内所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $(“input:disabled")选取页面内所有不可用元素 |
| :checked | 选取所有被选中的元素(单选框、复选框) | 集合元素 | $(“input:checked”)选取所有被选中的 <input> 元素 |
| :selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("select option:selected")选取所有被选中的选项元素 |
| :input | 选取所有的 <input>、 <textarea>、 <select>和 <button>元素 |
集合元素 | $(":input")选取所有的<input>、<textarea>、<select>和<button>元素 |
| :text | 选取所有的单行文本框 | 集合元素 | $(":text")选取所有的单行文本框 |
| :password | 选取所有的密码框 | 集合元素 | $(":password")选取所有的密码框 |
| :radio | 选取所有的单选框 | 集合元素 | $(":radio")选取所有的单选框 |
| :checkbox | 选取所有的多选框 | 集合元素 | $(":checkbox")选取所有的多选框 |
| :submit | 选取所有的提交按钮 | 集合元素 | $(":submit")选取所有的提交按钮 |