1. 什么是: jQuery
(1). 第三方开发的: 必须下载才能用
(2). 执行DOM操作的: jQuery还是执行DOM的增删改查+事件绑定操作。学习jQuery只是学习DOM的延续而已。
(3). 极简化的: jQuery对DOM操作的每一步都进行了简化。
(4). 函数库: jQuery中都是用函数来解决一切问题。
2. 为什么: 2个原因:
(1). 简单
(2). 解决了大部分浏览器兼容性问题。只要jQuery让用的，几乎都没有兼容性问题。
3. 何时: 从前很多旧的项目和框架都是用jQuery开发的！
4. 问题:
(1). 只有PC端，没有移动端。
(2). 简化的不彻底: 只对DOM操作的每一步进行了简化，但是没有减少步骤！
二. 如何使用jQuery:
1. 官网: jquery.com
2. 下载: 版本:
1.x 兼容旧浏览器
jquery-1.11.3.js
未压缩版: 带有完备的注释、代码格式，以及见名知意的变量名。——可读性好，适合学习和开发之用。——体积大，不便于快速下载运行，不适合生产环境
压缩版: 删除所有注释和代码格式，极简化了变量名。——体积小，便于快速下载运行，适合生产环境。——可读性差，不适合学习和开发之用。
2.x 不再兼容旧浏览器，但是，暂时也不兼容ES6
3.x 才开始支持ES6
3. 在页面中引入jquery: 2种:
(1). 将jquery.js文件下载到项目本地文件夹，用相对路径引入
<script src="js/jquery-1.11.3.js">
问题: 文件只保存在一个位置的服务器上。距离服务器近的用户访问当然快。但是，距离服务器很远的用户，访问就会慢。
(2). 引入CDN网络中的jquery.js文件
a. 什么是CDN网络: 内容分发网络。
b. 原理:
1). CDN网络可在全球范围共享一个文件
2). 任意地区的一个客户端想用CDN网络中的文件时，CDN网络都会从距离这个客户端网络最优的服务器下载资源给客户端。
c.如何: 官网->下载->CDN->自己想用的链接地址:
<script src="官网提供的CDN网址">
比如:微软提供的cdn网址:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.js">
示例：
| <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>jQuery/$工厂函数</h1> <button id="btn1">click me(0)</button> <script> //DOM 4步 //1. 查找触发事件的元素 //本例中: id为btn1的按钮触发事件 var btn=document.getElementById("btn1"); //2. 绑定事件处理函数 btn.οnclick=function(){ //3. 查找要修改的元素 //本例中: 就改this //4. 修改元素 //4.1 先取出当前按钮的内容中()中的数字，转为整数 var n=parseInt( this.innerHTML //click me(1123) //0123456789 -1 // |← →| .slice( 9 , -1) ); //4.2 将数字+1 n++; //4.3 再将数字拼接回原按钮的内容中 this.innerHTML=`click me(${n})`; // 格式与旧内容必须完全一致 } </script> </body> </html> 运行结果:
|
三. jQuery原理:
1. 引入jquery.js文件后，是在内存中新增了一种类型:
(1). 构造函数: 创建该类型的子对象
(2). 原型对象: 集中保管该类型所有子对象共用的方法
2. 只要想使用jQuery家简化版函数，必须先创建jQuery类型的子对象。
(1). 标准: var jq子对象=new jQuery(选择器);
(2). 简写: var jq子对象=jQuery(选择器)
(3). 更简化: var jq子对象=$(选择器) //$=jQuery
(4). 强调: 只有jq子对象才能访问jQuery原型对象中的简化版共有方法。而原生的DOM元素对象，无权使用jQuery原型对象中的简化版函数。
(5). 约定俗成: 凡是用$创建的jquery类型的子对象，命名时都要以$开头！以此和原生DOM家的元素对象区分。
3. 问题: jQuery家所有的函数几乎都是为了操作DOM元素而定义的。所以，调用jQuery函数都要操作DOM元素。可是，DOM元素从哪儿来？
解决: jQuery要求，每次创建jQuery子对象时，必须提供一个css选择器作为参数。jQuery构造函数会自动用选择器去DOM树中查找原生的DOM元素。取回来保存进新创建的jq子对象中。
4. 问题: 将来调用简化版函数时，使用jq子对象调用的。不是用原生的DOM元素调用的！简化版函数的操作，能不能作用到内部保存的原生的DOM元素上？
解决: 每当对jq子对象调用简化版函数时，简化版函数内部封装的都是原生的DOM操作。所以调简化版函数等效于调用原生的方法和属性，并最终作用到内部保存的元素对象上。
5. 问题: jQuery中事件处理函数里的this。
(1). 因为.click会被翻译为.onclick=function(){ ... }，再执行。所以.click()中的this，其实最终还是.onclick里的this。与DOM中的this完全一样！都指向正在点击的当前原生DOM元素对象本身。所以，this无权使用jQuery家简化版函数。
(2). 解决: 今后，jquery中所有事件处理函数中的this都必须用$()包裹起来，形成一个jq子对象，才能有权利使用jQuery家的简化版函数。