一. 什么是jQuery：
1. 什么是:
(1). 第三方开发的: 必须先下载(下载地址:jQuery.com但是慢 可以搜国内版本)，才能用！ 不是原生的:官方定义自带的 ,不是自定义的:自定义函数等..
(2). 执行DOM操作的: jQuery还是DOM5件事，学习jQuery还是在学DOM
(3). 极简化的: jQuery是对DOM操作的简化。
(4). 函数库: 只存放函数的地方。jQuery中使用函数来解决一切问题！不再有属性。
2. 为什么:
(1). 简单
(2). 解决了大部分浏览器兼容性问题。只要jq让用的，几乎都没有兼容性问题。
3. 何时: 以前几乎所有的项目和框架底层都是用jq开发的！
4. 问题:
(1). 简化不够彻底: jq只是对DOM中每一步的代码进行了简化，但是并没有减少开发步骤！依然存在着大量重复的操作。
(2). 只有PC端，没有移动端！
5. 将来: jq会逐渐被框架代替！
二. 如何使用jQuery
1. 下载及版本介绍:
(1). 官网: jquery.com
(2). 版本:
1.x 支持旧浏览器，不支持ES6
未压缩版: 包含完整的注释和代码结果，包含见名知意的变量名
——可读性好，便于开发和学习之用
——体积大，不便于快速下载运行，不适合项目上线后生产环境之用。
本次博客介绍，我选择jquery-1.11.3.js
压缩版: 去掉了所有注释和代码结构，极简化了变量名
——体积小，便于快速下载运行，适合项目上线后生产环境之用
——可读性差，不便于开发和学习之用
2.x 不再支持旧浏览器，不支持ES6
3.x 不再支持旧浏览器，支持ES6
2. 引入方式:
(1). 传统: 先将js文件下载到项目本地的某个文件夹中，然后用相对路劲引入网页:
<script src="js/jquery-1.11.3.js">
问题: 如果把js文件下载到项目本地，则将来上线后，js文件只能保存在一个地点。如果全球用户都要访问这个js文件，距离很远的用户，访问就会很慢！
(2). CDN网络:
a. 什么是: 遍布全球的智能的内容分发网络
b. 原理:
1). 只要在CDN网络中任意一台服务器放入一个文件，CDN网络会自动将这个文件同步到全球各地的服务器。
2). 当用户想访问CDN网络中的某一个文件时，CDN网络会自动判断用户所在位置距离那台服务器网络最优，就从哪台服务器就近下载文件给用户。
c. 好处: 全球各地的用户，访问文件时，下载速度几乎没有差别！
e.在我们项目中，无需将jquery下载到项目本地，而是在网页中直接:
<script src="http://jq官网提供的CDN网址">
比如:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.js">
3. 示例: jquery程序: (介绍来通过这段代码展开对jQuery的介绍)
首先是dom版本
1 <!DOCTYPE html>
2 <html>
3
4 <head lang="en">
5 <meta charset="UTF-8">
6 <title></title>
7 </head>
8
9 <body>
10 <h1>jQuery/$工厂函数</h1>
11 <button id="btn1">click me(0)</button>
12 <script>
13 //DOM 4步
14 //1. 查找触发事件的元素
15 //本例中: 查找id为btn1的按钮
16 var btn1 = document.getElementById("btn1")
17 //2. 绑定事件处理函数
18 btn1.onclick = function () {
19 //3. 查找要修改的元素
20 //本例中: 就是要修改自己this，所以不用找
21 //4. 修改元素
22 //4.1 先取出当前按钮的内容中()中的数字，转为整数
23 var n = parseInt(
24 this.innerHTML
25 //"click me(1000)"
26 // 0123456789 ↑
27 // -1
28 // .slice(9, -1)
29 // "1000"
30 .slice(9, -1));
31 //4.2 将数字+1
32 n++;
33 //4.3 再将数字拼接回原按钮的内容中
34 this.innerHTML = `click me(${n})`;
35 }
36 </script>
37 </script>
38 </body>
39
40 </html>
然后是对应的jQuery版本
1 <!DOCTYPE html>
2 <html>
3
4 <head lang="en">
5 <meta charset="UTF-8">
6 <title></title>
7 </head>
8
9 <body>
10 <h1>jQuery/$工厂函数</h1>
11 <button id="btn1">click me(0)</button>
12 <script src="js/jquery-1.11.3.js"></script>
13 <script>
14 //DOM 4步
15 //1. 查找触发事件的元素
16 //本例中: 查找id为btn1的按钮
17 //底层的jQuery代码是jQuery为一个构造函数function jQuery(){} 所以每次调用实际上等价于 new jQuery() 底层将 new jQuery()作为构造函数的 return 的内容 所以可以直接调用jQuery()然而简化不仅仅如此 底层还将jQuery赋值给$ 所以直接$()也能起到一样的效果
18 var $btn1=jQuery("#btn1");
19 // var $btn1 = $("#btn1");
20 //2. 绑定事件处理函数
21 $btn1.click(function () {
22 //相当于.onclick=function(){
23 //3. 查找要修改的元素
24 //本例中: 就是要修改自己this，所以不用找
25 //因为this是DOM家的关键字，this->当前点击的DOM元素对象。this无法直接使用jq家简化版函数
26 //所以this在使用之前也要包裹一下！
27 var $this = jQuery(this);
28 // var $this = $(this);
29 //4. 修改元素
30 //4.1 先取出当前按钮的内容中()中的数字，转为整数
31 var n = parseInt(
32 $this.html() //相当于.innerHTML
33 //"click me(1000)"
34 // 0123456789 ↑
35 // -1
36 // .slice(9, -1)
37 // "1000"
38 .slice(9, -1) );
39 //4.2 将数字+1
40 n++;
41 //4.3 再将数字拼接回原按钮的内容中
42 $this.html(`click me(${n})`);
43 })
44 </script>
45 </script>
46 </body>
47
48 </html>
三. jQuery原理
1. 当引入jquery.js时，其实是在内存中引入了一种新的类型jQuery: 2部分
(1). 构造函数: 创建该类型的子对象
(2). 原型对象: 保存所有子对象共用的方法，jq原型对象中保存着所有执行DOM操作的简化版函数。
2. 只要想使用jQuery原型对象中的简化版函数，都必须先创建jQuery类型的子对象:
(1). 本来: var jq子对象=new jQuery();
(2). 问题: 因为将来的jq简化版函数都是要对DOM元素执行操作，所以，在创建jq子对象时，都要先将一个要操作的DOM元素包裹进来！
(3). 解决: 2种:
a. 用选择器临时查找要操作的DOM元素, 将找到的DOM元素包裹进新创建的jq对象中:
var jq子对象=new jQuery("CSS选择器")
b. 如果已经获得了一个DOM元素(比如:this)，不用查找！还可以直接将DOM元素对象包裹进new jQuery()中
var jq子对象=new jQuery(DOM元素对象)
(4). 问题: 因为只有jQuery家的子对象，才能使用jQuery家的简化版函数。而原生的DOM元素是无法使用jq家的简化版函数的！如何区分jQuery家子对象和原生DOM元素对象？
(5). 解决: 只要使用jquery，都有一个约定俗成的规定：只要是jquery的子对象，都要以$开头命名！
(6). 问题: 每操作一个DOM元素，都要反复new jQuery()，繁琐！
(7). 解决: 2步:
a. 将new放入了jQuery的构造函数中，从此不用new，只用jQuery，就相当于调用new jQuery，也能创建子对象。
b. $=jQuery。结果：今后，使用$，就相当于使用jQuery，内部执行的就是new jQuery。
c. 所以，今后创建jQuery对象都用:
var $jq对象=$("css选择器"或DOM元素对象)
(8). $的本质: new jQuery()
3. 当对整个jq子对象调用jq家简化版函数时
(1). 底层都会自动将jQuery家简化版函数翻译为原生的DOM函数，作用于jq子对象中包裹的DOM元素身上！
比如: $btn1.click(function(){ ... }) 自动翻译为 btn1.οnclick=function(){ ... }
$btn1.html() 自动翻译为 btn1.innerHTML
(2). 所以，调用jQuery简化版函数，底层就相当于调用了对应的DOM原生函数！功能和原理是完全一样的！
4. jQuery简化版API: 3大特点:
(1). 一个函数两用:
a. jq中凡是和获取和修改相关的函数，都一个函数两用: 通过重载实现
b. 如果调用函数时，没有给新的实参值，默认执行获取现有旧值的操作
c. 如果调用函数时，给了新值，则自动切换为修改操作！
(2). 自带遍历: 如果想多找到的多个元素都执行一个DOM操作，不用自己写for循环。其实，只要对整个jQuery子对象调用一次简化版函数，底层就会自动遍历找到的所有DOM元素，自动为每个DOM元素都调用一次对应的DOM原生函数。
(3链式操作:如$(元素).css('color','red').prev().css('font-size','32px')
在jQuery中点·后的操作会返回点前的对象,通过返回值可以在后面继续操作与之相关的元素
(即是:
绝大部分本没有返回值的函数，都返回正在操作的.前的jq对象本身。
如果后续操作依然是针对.前的jq对象的，就可以连续用.调用下一个函数。
)
(4). 示例: 为三个按钮绑定单击事件:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <h1>jQueryAPI特点</h1>
9 <button id="btn1">click me(0)</button>
10 <button id="btn2">click me(0)</button>
11 <button id="btn3">click me(0)</button>
12 <script src="js/jquery-1.11.3.js"></script>
13 <script>
14 //为三个按钮绑定单击事件，记录单击次数
15 //DOM 4步
16 //1. 查找触发事件的元素
17 //本例中: 三个按钮都能触发事件，应该找到3个按钮
18 var $btns=$("button");
19 console.log($btns);
20 //2. 绑定事件处理函数
21 $btns.click(function(){
22 // alert("疼!");
23 //因为每个按钮的单击事件和上个例子中一个按钮的单击事件执行的操作完全一样！
24 //3. 查找要修改的元素
25 //本例中: 就是要修改自己this，所以不用找
26 //因为this是DOM家的关键字，this->当前点击的DOM元素对象。this无法直接使用jq家简化版函数
27 //所以this在使用之前也要包裹一下！
28 var $this = jQuery(this);
29 // var $this = $(this);
30 //4. 修改元素
31 //4.1 先取出当前按钮的内容中()中的数字，转为整数
32 var n = parseInt(
33 $this.html() //相当于.innerHTML
34 //"click me(1000)"
35 // 0123456789 ↑
36 // -1
37 // .slice(9, -1)
38 // "1000"
39 .slice(9, -1)//复习第一阶段slice函数
40 );
41 //4.2 将数字+1
42 n++;
43 //4.3 再将数字拼接回原按钮的内容中
44 $this.html(`click me(${n})`);
45 })
46 </script>
47 </body>
48 </html>
四. 查找: jQuery支持按各种选择器查找元素。既支持CSS3自带的选择器，同时又扩展了个别仅jQuery中可用的选择器
1. 复习子元素过滤选择器: (CSS3中的)
(1). 什么是: 按元素在其所在的父元素内的相对位置查找元素
(2). 包括:
a. :first-child: 选择作为其所在的父元素下第一个孩子的元素
b. :last-child: 选择作为其所在的父元素下最后一个孩子的元素
c. :nth-child(i): 选择作为其所在的父元素下第i个孩子的元素
强调: css中i从1开始！
d. :only-child: 选择作为其所在的父元素下唯一一个子元素的元素
(3). 示例: 使用子元素过滤选择要求的元素并修改样式:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 </head>
7 <body>
8 <h3>子元素过滤选择器.</h3>
9 <ul>
10 <li>child1-basic0</li>
11 <li>child2-basic1</li>
12 <li>child3-basic2</li>
13 </ul>
14 <ul>
15 <li>child1-basic3</li>
16 <li>child2-basic4</li>
17 <li>child3-basic5</li>
18 </ul>
19 <ul>
20 <li>child1-basic6</li>
21 </ul>
22 <script src="js/jquery-1.11.3.js"></script>
23 <script>
24 //查找每个ul中第一个li，让其字体颜色变为红色
25 $("ul>li:first-child").css("color","red");
26 // ↓ ↓ ↓
27 // .style.color="red";
28 //查找每个ul中最后一个li
29 $("ul>li:last-child")
30 .css("border","1px solid green");
31 //查找每个ul中处于偶数位置的
32 $("ul>li:nth-child(2n)")
33 .css("background-color","yellow");
34 //查找每个ul中第2个li
35 $("ul>li:nth-child(2)")
36 .css("box-shadow","0 0 5px blue")
37 //查找作为ul下唯一子元素的li
38 $("ul>li:only-child")
39 .css("padding","10px")
40 </script>
41 </body>
42 </html>
2. 基本过滤选择器(jquery独有，css没有)
(1). 先将所有符合要求的元素拿出来，集中放在一个集合中，按元素在集合中的大排名序号选择元素
强调: 和元素在其父元素下的相对位置无关！
(2). 包括；
a. :first或:last : 选择在查找结果集合中处于开头位置或结尾位置的一个元素。
b. :even或:odd: 选择在查找结果集合中下标处于偶数位置或奇数位置的元素。
even偶数 odd奇数
强调: 下标从0开始的！
c. :eq(i) 或 :lt(i) 或 :gt(i) : 选择在查找结果集合中下标=或<或>i位置的元素
eq->equal->等于= lt->less than->小于< gt->greater than->大于>
强调: 下标从0开始的！
(3). 示例: 使用基本过滤选择器选择元素并修改元素样式
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 </head>
7 <body>
8 <h3>基本过滤选择器.</h3>
9 <ul>
10 <li>child1-basic0</li>
11 <li>child2-basic1</li>
12 <li>child3-basic2</li>
13 </ul>
14 <ul>
15 <li>child1-basic3</li>
16 <li>child2-basic4</li>
17 <li>child3-basic5</li>
18 </ul>
19 <ul>
20 <li>child1-basic6</li>
21 </ul>
22 <script src="js/jquery-1.11.3.js"></script>
23 <script>
24 //查找第一个li
25 $("ul>li:first").css("color","red");
26 //查找最后一个li
27 $("ul>li:last").css("border","1px solid green")
28 //查找处于(正常人眼)偶数位置的li
29 $("ul>li:odd").css("background-color","yellow")
30 //查找第2个li
31 $("ul>li:eq(1)").css("box-shadow","0 0 5px blue")
32 </script>
33 </body>
34 </html>
(4). 总结: 其实，jq中基本过滤选择器中的奇偶，和css中:nth-child()中的奇偶是反着的！因为jq中的下标从0开始，而css中的下标从1开始的！
3. 内容过滤: (jq中独有，css中没有)
(1). 利用元素的内容不同来选择不同的元素
(2). 包括:
a. :contains(文本) : 选择元素的内容中包含指定"文本"的元素
b. :has(选择器) : 根据一个元素是否包含符合指定选择器要求的子元素来选择父元素
c. :parent : 选择内容不为空的元素
d. :empty : 选择内容为空的元素
(3). 示例: 使用内容过滤选择不同的元素，并修改其样式:
1 <!DOCTYPE html>
2 <html>
3
4 <head lang="en">
5 <meta charset="UTF-8">
6 <title></title>
7 <link rel="stylesheet" href="css/bootstrap.css" />
8 <style>
9 </style>
10 </head>
11
12 <body>
13 <div class="container">
14 <h1>jQuery中的选择器——内容过滤选择器</h1>
15
16 <button>提交订单</button>
17 <button>Submit注册信息</button>
18 <button>马上提交</button>
19 <button>清空重填</button>
20
21 <hr />
22 <div class="alert"></div>
23 <div class="alert">
24 <span class="close">×</span>
25 </div>
26
27 </div>
28 <script src="js/jquery-1.11.3.js"></script>
29 <script>
30 //选择包含"提交"二字的按钮，变为绿色按钮
31 $("button:contains(提交)")
32 .css("background-color","lightGreen")
33 //选中包含.close按钮的.alert元素，让它们变为红色的警告框
34 $(".alert:has(.close)")
35 .css("background-color","pink");
36 //选中不包含.close按钮的.alert元素，让它们变为绿色的警告框
37 $(".alert:not(:has(.close))")
38 .css("background-color","lightGreen");
39 //选择内容为空的.alert元素
40 $(".alert:empty")
41 .css("box-shadow","0 0 5px red");
42 //选择内容不为空的.alert元素
43 $(".alert:parent")
44 .css("box-shadow","0 0 5px green");
45 </script>
46 </body>
47
48 </html>
4. 可见性过滤: (jq中独有，css中没有)
(1). 根据元素是否可见来选择不同的元素
(2). 包括:
a. :visible : 选择可见的元素
b. :hidden : 选择不可见的元素
(3). 问题: HTML+CSS中隐藏一个元素，有4种方法:
a. display: none
b. visibility: hidden
c. opacity: 0
d. <input type="hidden">
(4). 其实:hidden，只能选择两种隐藏的元素:
display: none和<input type="hidden">
5. 表单元素过滤: (jq中独有，css中没有)
(1). :input : 可以选择所有表单元素(input、select、textarea、button)
和不带:的input相比:
不带:的input是普通的元素选择器，只能选择input元素，无法选择其他三种表单元素
(2). 为了进一步选择不同类型的input元素，jq为每种type的input都提供了一个专门的选择器与之对应！
比如: :text 专门选择<input type="text">
:password 专门选择<input type="password">
:radio 专门选择<input type="radio">
:checkbox 专门选择<input type="checkbox">
... ...
(3). 示例: 点同意，启用元素；不点同意，禁用元素
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <title>.....</title>
6 <meta charset="utf-8" />
7 <style>
8 </style>
9 </head>
10
11 <body>
12 <form>
13 用户名:<input disabled></br>
14 密码:<input type="password" disabled></br>
15 <input type="checkbox">我同意本站的使用条款<br>
16 <input type="submit" value="提交注册信息" disabled />
17 </form>
18 <script src="js/jquery-1.11.3.js"></script>
19 <script>
20 //DOM 4步
21 //1. 查找触发事件的元素
22 //本例中: 选择type为checkbox的复选框
23 var $chb=$(":checkbox");
24 //2. 绑定事件处理函数
25 $chb.click(function(){
26 //this->当前点击的checkbox元素，但是，为了继续能调用jq简化版函数
27 var $chb=$(this);
28 //3. 查找要修改的元素
29 //本例中: 点checkbox会修改除了checkbox之外的其余的所有表单元素
30 var $others=$(":input:not(:checkbox)");
31 //4. 修改元素
32 //如果当前checkbox是选中的，则其它表单元素就启用
33 //否则如果当前checkbox是未选中的，则其它表单元素就禁用
34 //DOM中:但是jq是函数库，不能用属性！
35 //所以错误！
36 // if($chb.checked==true){
37 // $others.disabled=false;//启用
38 // }else{
39 // $others.disabled=true;//禁用
40 // }
41 //jq中: 正确:
42 //因为checked和disabled属性都是bool类型的HTML标准属性，所以只能用prop()获取和修改。不能用.attr()。
43 //不能换.attr(
44 if($chb.prop("checked")==true){
45 $others.prop("disabled",false);//启用
46 }else{
47 $others.prop("disabled",true);//禁用
48 }
49 })
50 </script>
51 </body>
52
53 </html>
五. 修改：3种
凡是和修改相关的函数，都一个函数两用！
1. 获取和修改元素的内容: 3种:
(1). 获取或修改元素开始标签到结束标签之间的原始HTML内容
a. DOM中: 元素.innerHTML
b. jq中: $元素.html("新HTML内容") //一个函数两用
(2). 获取或修改元素开始标签到结束标签之间的纯文本内容
a. DOM中: 元素.textContent
b. jq中: $元素.text("新文本内容") //一个函数两用
(3). 获取或修改表单元素的值
a. DOM中: 元素.value
b. jq中: $元素.val("新的元素值") //一个函数两用
(4). 示例: 验证表单元素的内容，并提示验证是否通过
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> new document </title>
5 <meta charset="utf-8">
6 </head>
7 <body>
8 <h1>操作元素的内容和值</h1>
9 <form action="">
10 用户名:<input name="uname">
11 <span></span><br>
12 密码:<input type="password" name="upwd">
13 <span></span><br>
14 <input type="submit" value="提交注册信息">
15 </form>
16 <script src="js/jquery-1.11.3.js"></script>
17 <script>
18 //正确时，使用图片:"<img src='img/ok.png'>"
19 //姓名错误时: "<img src='img/err.png'>用户名必须介于3~9位之间!"
20 //密码错误时: "<img src='img/err.png'>密码必须介于6~8位之间!"
21 //DOM 4步
22 //1. 查找触发事件的元素
23 //本例中: 当文本框失去焦点时触发验证
24 var $txtName=$(":text");
25 //2. 绑定事件处理函数
26 //本例中: 失去焦点触发验证
27 $txtName.blur(function(){
28 //this->当前文本框，但是this指DOM元素
29 //如果想继续调用简化版函数，必须:
30 var $txt=$(this);
31 //3. 查找要修改的元素
32 //本例中:查找当前文本框相邻的下一个兄弟span
33 //DOM中: $txt.nextElementSibling
34 //jq中: 简化为
35 var $span=$txt.next();
36 //4. 修改元素
37 //4.1 先获得当前文本框的内容
38 var str=$txt.val();//因为是表单元素
39 //4.2 如果验证当前文本框的内容通过
40 if(str.length>=3&&str.length<=9){
41 //4.3 则修改span的内容为正确的提示
42 $span.html(`<img src='img/ok.png'>`);//因为不是表单元素，且内容中包含HTML标签，不是纯文本
43 }else{//4.4 否则如果验证当前文本框的内容不通过
44 //4.5 则修改span的内容为错误的提示
45 $span.html(`<img src='img/err.png'>用户名必须介于3~9位之间!`);
46 }
47 })
48 </script>
49 </body>
50 </html>
2. 获取或修改元素的属性: 3种:
(1). 字符串类型的HTML标准属性:
a. DOM中: 2种:
1). 旧核心DOM: 主要2个函数
i. 元素.getAttribute("属性名")
b. jq中: 也有2种:
1). 专门代替旧核心DOM:
$元素.attr("属性名","新属性值") //一个函数两用
2). 专门代替HTML DOM:
$元素.prop("属性名","新属性值") //一个函数两用
c. 示例: 点图片，切换下一张:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> new document </title>
5 <meta charset="utf-8">
6 </head>
7 <body>
8 <h1>操作元素的属性</h1>
9 <img src="img/1.jpg" alt="1">
10 <script src="js/jquery-1.11.3.js"></script>
11 <script>
12 //DOM 4步
13 //1. 查找触发事件的元素
14 //本例中: 只有一个图片可以点击
15 var $img=$("img");
16 //2. 绑定事件处理函数
17 $img.click(function(){
18 //3. 查找要修改的元素
19 //本例中: 点当前图片自己，修改的也是当前图片自己，所以不用找
20 var $this=$(this);
21 //4. 修改元素
22 //4.1 先获得当前正在看第几张图片，其实就是获得当前图片的alt属性值，转为整数
23 //因为alt是字符串类型的HTML标准属性，所以既可以用attr()，又可以用prop()
24 var i=parseInt(
25 $this.attr("alt")
26 // .prop("alt")
27 );
28 //4.2 如果i<4，才+1，否则i=1;
29 if(i<4){
30 i++;
31 }else{
32 i=1;
33 }
34 //4.3 再将新的序号
35 //4.3.1 拼接成图片地址设置给当前img的src属性
36 //因为src属性是字符串类型的HTML标准属性，所以既可以用.attr()，又可以用.prop()
37 // $this.attr("src",`img/${i}.jpg`);
38 // .prop(
39 //4.3.2 将新的序号保存到当前img的alt属性中
40 //因为alt也是字符串类型的HTML标准属性，所以也既可以用.attr()，又可以用.prop()
41 // $this.attr("alt",i);
42 // .prop(
43 //简写:
44 // .prop({
45 $this.attr({
46 src:`img/${i}.jpg`,
47 alt:i
48 });
49 })
50 </script>
51 </body>
52 </html>
(2). bool类型的HTML标准属性: 只要放在元素的开始标签中就起作用，不用写属性值的属性。比如: disabled, checked, selected
a. DOM中: 1种
代替了
b. jq中: 也1种
不能用属性，只能用函数
$元素.prop("属性名", true或false) //一个函数两用！ prop===>property
(貌似$元素.attr("属性名",true)) 也可以如
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 div{
10 background-color: red;
11 width: 200px;
12 height: 200px;
13 }
14 </style>
15 </head>
16 <body>
17 <div id="div">
18 <input type="checkbox" id="inp" >
19
20 </div>
21 <script src="jquery-1.11.3.js"></script>
22 <script>
23 var $div = $('#div');
24 //点击div触发多选框勾选
25 $div.click(function(){
26 $('#inp').attr('checked',true);
27 // $("#inp").prop('checked',true);
28
29 })
30 </script>
31 </body>
32 </html>
$元素.attr()可修改一切字符串类型的属性(字符串类型HTML标准属性+自定义扩展属性)
$元素.prop()可修改一切可用.访问的属性(所有HTML标准属性)
简化: 和修改相关的函数: .attr(), .prop(), .css()都可同时修改多个属性:
$元素.attr或prop或css({
属性名: "新值",
... : "..."
})
(3). 自定义扩展属性:
a. DOM中: 2种:
1). 核心DOM:
元素.getAttribute("data-属性名") 元素.setAttribute("data-属性名","属性值")
2). HTML5: 元素.dataset.属性名
b. jq中: 1种:
1). $元素.attr("data-属性名","属性值") //一个函数两用 (注意这里不能用prop 因为是自定义属性)
2). 问题: 因为jq诞生时，还没有HTML5标准，所以jq中没有东西和dataset对应。
c. 示例: 点小图片，切换大图片
1 <!DOCTYPE html>
2 <html>
3
4 <head lang="en">
5 <meta charset="UTF-8">
6 <title></title>
7 <style>
8 body {
9 text-align: center;
10 }
11 </style>
12 </head>
13
14 <body>
15
16 <img src="img/1.jpg" data-click data-target="img/1-l.jpg" class="my-small">
17 <img src="img/2.jpg" data-click data-target="img/2-l.jpg" class="my-small">
18 <img src="img/3.jpg" data-click data-target="img/3-l.jpg" class="my-small">
19 <img src="img/4.jpg" data-click data-target="img/4-l.jpg" class="my-small">
20 <hr />
21 <img src="img/1-l.jpg" class="my-big">
22
23 <script src="js/jquery-1.11.3.js"></script>
24 <script>
25 //点击小图片，下方my-big中显示大图片
26 //DOM 4步
27 //1. 查找触发事件的元素
28 //本例中:
29 //1.1 先手工为上方4个img添加自定义属性data-click
30 //1.2 再用css属性选择器查找带有data-click的元素
31 var $imgs = $("[data-click]");
32 console.log($imgs);
33 //2. 绑定事件处理函数
34 // $imgs.click(function () {
35 // 鼠标 进入
36 $imgs.mouseover(function(){
37 //this->当前点击的小img
38 //想用this继续调用简化版函数
39 var $this=$(this);
40 //3. 查找要修改的元素
41 //本例中: 修改class为my-big的大图片
42 var $big=$(".my-big");
43 //4. 修改元素
44 //4.1 先获取当前点击的小img身上自定义属性data-target中保存的对应的大图片路径
45 //因为data-target属性不是HTML标准属性，所以，只能用attr()访问
46 var src=$this.attr("data-target");
47 // 不能用.prop(
48 //4.2 再将大图片路径设置给大图片的src属性
49 //因为src属性是字符串类型的HTML标准属性，所以，可以用两种方式访问: attr()和prop()都行！
50 $big.attr("src",src);
51 // .prop(
52 })
53 </script>
54 </body>
55
56 </html>
3. 样式
(1). DOM中：
a. 修改内联样式: 元素.style.css属性="新值"
b. 获取计算后完整样式: var style=getComputedStyle(DOM元素)
(2). jq中: 获取或修改css属性统一都用:
$元素.css("css属性","新属性值") //一个函数两用
底层，还是重载。没给新值，相当于getComputedStyle()，给了新值，切换为.style
(3). 修改class
a. DOM中: 1种:
元素.className="新class"
问题: className默认只能整体替换所有class。很难只修改其中某个class
b. jq中: 4个函数
1). 添加class: $元素.addClass("class名")
2). 移除class: $元素.removeClass("class名")
3). 判断是否包含某个class: $元素.hasClass("class名")
4). 专门在有和没有一个class之间来回切换:
$元素.toggleClass("class名") //toggle:切换
原理:
if($元素.hasClass("class名")){
$元素.removeClass("class名")
}else{
$元素.addClass("class名")
}
c. 示例: 使用class实现双态按钮:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .btn {
8 padding: 5px 10px;
9 border-radius: 3px;
10 border: 1px solid #aaa;
11 outline: none;
12 }
13 .up {
14 background: #fff;
15 color: #333;
16 }
17 .down {
18 background: #ddd;
19 color: #fff;
20 }
21 </style>
22 </head>
23 <body>
24
25 <button class="btn up">双态按钮</button>
26
27 <script src="js/jquery-1.11.3.js"></script>
28 <script>
29 //双态按钮: 让按钮的class在up和down之间切换
30 //DOM 4步
31 //1. 查找触发事件的元素
32 //本例中: 就是查找一个按钮
33 var $btn=$("button");
34 //2. 绑定事件处理函数
35 $btn.click(function(){
36 //3. 查找要修改的元素
37 //本例中，其实就是修改当前按钮自己
38 var $this=$(this);
39 //4. 修改元素
40 // //如果当前按钮身上有down class
41 // if($this.hasClass("down")){
42 // //就移除掉down class
43 // $this.removeClass("down");
44 // }else{//否则如果当前按钮身上没有donw class
45 // //就添加down class
46 // $this.addClass("down");
47 // }
48 $this.toggleClass("down");
49 })
50 </script>
51 </body>
52 </html>
六按节点间关系查找: 2大类关系，6个属性
1. DOM中:
(1). 父子关系: 4个属性
a. 获得父元素: 元素.parentElement / 元素.parentNode
b. 获得所有直接子元素: 元素.children
c. 获得第一个直接子元素: 元素.firstElementChild
d. 获得最后一个直接子元素: 元素.lastElementChild
(2). 兄弟关系: 2个属性
a. 获得前一个相邻的兄弟元素: 元素.previousElementSibling
b. 获得后一个相邻的兄弟元素: 元素.nextElementSibling
2. jq中:
(1). 父子关系: 3个函数，但是更灵活更强大了！
a. 获得父元素: $元素.parent()
b. 获得所有直接子元素: $元素.children()
(1). 问题: DOM中的children，只能获得所有直接子元素，无法有选择的只获得部分想要的子元素。
(2). 解决: $元素.children("选择器")，只选择符合选择器要求的个别直接子元素
(3). 问题: children只能获得直接子元素，无法在所有后代中查找符合要求的元素。
(4). 解决: $元素.find("选择器")，不但可以查找直接子元素，而且会在所有后代中查找符合要求的元素！
c. 获得第一个直接子元素: 没有专门对应的函数，但是可以变通实现
$元素.children(":first-child") 选择直接子元素中第一个孩子
d. 获得最后一个直接子元素: 没有专门对应的函数，但是可以变通实现
$元素.children(":last-child") 选择直接子元素中最后一个孩子
(2). 兄弟关系: 5个函数
a. 获得前一个相邻的兄弟元素: $元素.prev();
b. 问题: prev()只能获得相邻的前一个元素，无法获得之前所有兄弟。
解决: jq中新增: $元素.prevAll()，专门获得当前元素之前的所有兄弟元素
c. 获得后一个相邻的兄弟元素: $元素.next();
d. 问题: next()只能获得相邻的后一个元素，无法获得之后所有兄弟。
解决: jq中新增: $元素.nextAll()，专门获得当前元素之后的所有兄弟元素
e. 问题: 前四个函数，要么只能选之前的兄弟，要么只能选之后的兄弟，无法一次性选择除自己之外的所有兄弟！
解决: $元素.siblings() 专门选择除当前元素之外的所有其余兄弟元素。不分前后。
3. 示例: 标签页
1 <!doctype html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <style>
7 .tabs {
8 list-style: none;
9 padding: 0
10 }
11
12 .tabs a {
13 text-decoration: none;
14 color: #000;
15 padding: 6px 12px;
16 display: inline-block;
17 }
18
19 .tabs>li {
20 float: left;
21 border-bottom: 1px solid #000;
22 }
23
24 .tabs>.active {
25 border: 1px solid #000;
26 border-bottom: 0;
27 }
28 </style>
29 </head>
30
31 <body>
32 <h1>使用属性选择器实现标签页头的切换</h1>
33 <ul class="tabs">
34 <li class="active">
35 <a data-toggle="tab" href="#">十元套餐</a>
36 </li>
37 <li>
38 <a data-toggle="tab" href="#">二十元套餐</a>
39 </li>
40 <li>
41 <a data-toggle="tab" href="#">三十元套餐</a>
42 </li>
43 </ul>
44 <script src="js/jquery-1.11.3.js"></script>
45 <script>
46 //DOM 4步
47 //1. 查找触发事件的元素
48 //本例中: 查找处于ul>li>a最底层的a元素们
49 var $as=$("[data-toggle=tab]");
50 //2. 绑定事件处理函数
51 $as.click(function(){
52 //this->当前点击的a
53 // var $this=$(this);
54 //3. 查找要修改的元素
55 //4. 修改元素
56 //先给当前a的父元素li添加class active
57 $(this)//当前a
58 .parent()//当前a的爹
59 .addClass("active")//return .前的parent()当前a的爹
60 //再找到当前a的父元素li的所有兄弟li，移除他们身上的class active
61 //这里刚好需要用到当前a的爹parent()作为.前的主语
62 .siblings()
63 .removeClass("active");
64 })
65 </script>
66 </body>
67
68 </html>
实例图:
七. 添加/删除/替换/克隆
1. 添加新元素:
(1). DOM中: 3步:
a. 创建新元素对象
b. 设置关键属性
c. 将新元素添加到DOM树: 3种:
1). 在父元素下所有子元素末尾追加新元素:
父元素.appendChild(新元素)
2). 插入到父元素下某个现有子元素之前:
父元素.insertBefore(新元素, 现有元素)
3). 替换父元素下一个现有子元素
父元素.replaceChild(新元素, 现有元素)
d. 如果同时添加多个新元素，可以利用文档片段。
(2). jq中: 2步:
a. 用HTML代码片段批量创建新元素:
var $新元素=$(`HTML片段`);
创建新元素
b. 将新元素添加到DOM树的指定位置上：5种，10个函数
1). 在父元素下所有子元素末尾追加新元素:
$父元素.append ($新元素) 返回 $父元素，后续可以接对父元素的操作
$新元素.appendTo ($父元素) 返回 $新元素， 后续可以接对新元素的操作
2). 在父元素下所有子元素开头追加新元素:
$父元素.prepend ($新元素) 返回 $父元素，后续可以接对父元素的操作
开头
$新元素.prependTo($父元素) 返回 $新元素， 后续可以接对新元素的操作
3). 插入到某个现有子元素之前:
$现有元素.before($新元素) 返回 $现有元素 后续可以接对现有元素的操作
$新元素.insertBefore($现有元素) 返回 $新元素 后续可以接对新元素的操作
4). 插入到某个现有子元素之后:
$现有元素.after($新元素) 返回 $现有元素 后续可以接对现有元素的操作
$新元素.insertAfter($现有元素) 返回 $新元素 后续可以接对新元素的操作
5). 替换父元素下一个现有子元素
$现有元素.replaceWith($新元素) 返回 $现有元素 后续可以接对现有元素的操作
$新元素.replaceAll($现有元素) 返回 $新元素 后续可以接对新元素的操作
如图:
c. 说明: jq的函数中已经内置了文档片段的原理！如果jq的函数发现是同时添加多个新元素，就会在底层自动使用文档片段，不需要我们手工使用了。
(3). 示例: 点按钮，向页面中添加方块:
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <title> new document </title>
6 <meta charset="utf-8">
7 <style>
8 .container {
9 border: 1px solid #aaa;
10 overflow: hidden;
11 }
12
13 .block {
14 float: left;
15 margin: 10px;
16 border: 1px solid #aaa;
17 background: #faa;
18 width: 150px;
19 height: 150px;
20 }
21
22 .block:hover {
23 box-shadow: 0 5px 6px #000;
24 }
25
26 .close {
27 float: right;
28 padding: 5px;
29 font-weight: bold;
30 opacity: .2;
31 cursor: pointer;
32 }
33
34 .close:hover {
35 opacity: .5;
36 }
37 </style>
38 </head>
39
40 <body>
41 <h1>添加/删除节点</h1>
42 <button id="add-block">添加区块</button>
43
44 <div class="container">
45 <!-- <div class="block">
46 <span class="close">×</span>
47 </div> -->
48 </div>
49
50 <script src="js/jquery-1.11.3.js"></script>
51 <script>
52 //DOM 4步
53 //1. 查找触发事件的元素
54 //本例中: 点按钮触发事件
55 $("button")
56 //2. 绑定事件处理函数
57 .click(function(){
58 //3. 查找要修改的元素
59 //本例中: 所有新创建的方块，都要放在class为container的div下
60 //4. 修改元素
61 //4.1 先用注释的div元素的HTML片段创建一个新的方块
62 $(`<div class="block">
63 <span class="close">×</span>
64 </div>`)
65 //4.2 每创建一个新方块，都设置当前方块的背景色为一个随机的颜色值
66 .css("background-color",`rgb(${
67 parseInt(Math.random()*256)
68 },${
69 parseInt(Math.random()*256)
70 },${
71 parseInt(Math.random()*256)
72 })`)//return $新方块
73 //4.3 再将新创建的元素添加到父级div container下的开头
74 // .prependTo($(".container"));
75 .prependTo(".container")
76 // 不用我们自己找，prependTo自带查找父元素的功能！只要我们提供父元素选择器即可！
77 })
78 </script>
79
80 </body>
81
82 </html>
2. 删除元素:
(1). DOM中: 父元素.removeChild(子元素)
(2). jq中: $元素.remove();
(3). 示例: 为上例中方块内的×绑定删除功能
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <title> new document </title>
6 <meta charset="utf-8">
7 <style>
8 .container {
9 border: 1px solid #aaa;
10 overflow: hidden;
11 }
12
13 .block {
14 float: left;
15 margin: 10px;
16 border: 1px solid #aaa;
17 background: #faa;
18 width: 150px;
19 height: 150px;
20 }
21
22 .block:hover {
23 box-shadow: 0 5px 6px #000;
24 }
25
26 .close {
27 float: right;
28 padding: 5px;
29 font-weight: bold;
30 opacity: .2;
31 cursor: pointer;
32 }
33
34 .close:hover {
35 opacity: .5;
36 }
37 </style>
38 </head>
39
40 <body>
41 <h1>添加/删除节点</h1>
42 <button id="add-block">添加区块</button>
43
44 <div class="container">
45 <!-- <div class="block">
46 <span class="close">×</span>
47 </div> -->
48 </div>
49
50 <script src="js/jquery-1.11.3.js"></script>
51 <script>
52 //DOM 4步
53 //1. 查找触发事件的元素
54 //本例中: 点按钮触发事件
55 $("button")
56 //2. 绑定事件处理函数
57 .click(function(){
58 //3. 查找要修改的元素
59 //本例中: 所有新创建的方块，都要放在class为container的div下
60 //4. 修改元素
61 //4.1 先用注释的div元素的HTML片段创建一个新的方块
62 $(`<div class="block">
63 <span class="close">×</span>
64 </div>`)
65 //4.2 每创建一个新方块，都设置当前方块的背景色为一个随机的颜色值
66 .css("background-color",`rgb(${
67 parseInt(Math.random()*256)
68 },${
69 parseInt(Math.random()*256)
70 },${
71 parseInt(Math.random()*256)
72 })`)//return $新方块
73 //4.3 再将新创建的元素添加到父级div container下的开头
74 // .prependTo($(".container"));
75 .prependTo(".container") //return $新方块
76 // 不用我们自己找，prependTo自带查找父元素的功能！只要我们提供父元素选择器即可！
77 //因为删除按钮×，是随新方块动态添加到页面上的
78 //所以，必须在添加完方块之后，才能为删除按钮绑定单击事件。
79 //DOM 4步
80 //1. 查找触发事件的元素
81 //本例中: 查找当前新方块下class为close的按钮
82 .children(".close")
83 //2. 绑定事件处理函数
84 .click(function(){
85 //3. 查找要修改的元素
86 //本例中: 点×要删除他爹
87 $(this).parent()
88 //4. 修改元素
89 .remove();
90 })
91 })
92 </script>
93
94 </body>
95
96 </html>
3. 克隆元素:
(1). var $新元素=$旧元素.clone();
(2). 示例: 选飞机
1 <!DOCTYPE html>
2 <html>
3
4 <head lang="en">
5 <meta charset="UTF-8">
6 <title></title>
7 <style>
8 body {
9 text-align: center;
10 }
11 </style>
12 </head>
13
14 <body>
15 <h1>替换节点</h1>
16
17 <div id="chosen">
18 <img src="img/p0.png">
19 </div>
20 <hr />
21 <div id="list">
22 //点中任意一张图片克隆一张代替上面div中的图片
23 <img src="img/p3.png">
24 <img src="img/p4.png">
25 <img src="img/p5.png">
26 </div>
27
28 <script src="js/jquery-1.11.3.js"></script>
29 <script>
30
31 //DOM 4步
32 //1. 查找触发事件的元素
33 //本例中: 因为多个平级的img都可点击，所以，应该事件委托优化，事件只绑定在共同的父元素id为list的div上一份即可——复习DOM第四天下午
34 $("#list")
35 //2. 绑定事件处理函数
36 .click(function(e){
37 //e.target代替this
38 var $tar=$(e.target);//当前点击的img
39 //只有判断当前点击的元素是img，才执行后续操作！
40 // 元素选择器
41 if($tar.is("img")){
42 //3. 查找要修改的元素
43 //本例中，点当前img，为了替换上方id为chosen下的img
44 $("#chosen>img")
45 //4. 修改元素
46 //但是，也要先把当前img复制一个副本，用副本去代替上方的img
47 .replaceWith($tar.clone());
48 }
49 })
50 </script>
51 </body>
52
53 </html>
补: 判断一个元素是否满足何种特征:
$元素.is("选择器")
如果.前的元素特征符合选择器要求，则is()返回true
如果.前的元素特征不符合选择器要求，则is()返回false
八.事件绑定
1. 事件绑定
(1). DOM中: (只考虑在js中): 2种:
a. 赋值: 元素.on事件名=function(){ ... }
b. 添加事件监听对象:
元素.addEventListener("事件名", 事件处理函数)
(2). jq中: 1种: 简写
a. 标准: $元素.on("事件名", 事件处理函数)
b. 简写: 如果要绑定的事件名属于常用事件列表中，则可以简写为:
$元素.事件名(事件处理函数)
比如: $元素.click(function(){ ... })
其实底层相当于: .addEventListener()
c. 常用事件列表:
blur 失去焦点
change 下拉列表选中项改变
click 单击
dblclick 双击
focus 获得焦点
keydown 键盘按键按下
keyup 键盘按键抬起
mousedown 鼠标按键按下
mouseenter 鼠标进入(jq)
mouseleave 鼠标移出(jq)
mousemove 鼠标移动
mouseout 鼠标移出(dom)
mouseover 鼠标进入(dom)
mouseup 鼠标按键抬起
resize 窗口大小改变
scroll 网页滚动
load 加载完成
(3). 移除事件监听:
a. DOM中: 元素.removeEventListener("事件名", 原事件处理函数)
简写
b. jq中: 元素.off("事件名", 原事件处理函数)
c. DOM和jq相同的地方: 只要移除事件监听，都要用有名称的函数！
(4). 问题:
a. DOM中，如果使用有名称的函数绑定事件，则只能绑定一次，不允许重复绑定！
b. jq中: 即使使用有名称的函数绑定事件，也能反复绑定多个，没有限制！移除时，所有同名函数一起移除！——jq成功解决了这个问题。
(5). 示例: 点按钮发射子弹，点奖励，获得跟踪导弹...
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> new document </title>
5 <meta charset="utf-8">
6 </head>
7 <body>
8 <h1>事件绑定</h1>
9 <button id="btn1">发射子弹</button>
10 <button id="btn2">获得奖励</button>
11 <button id="btn3">失去奖励</button>
12 <script src="js/jquery-1.11.3.js"></script>
13 <script>
14 //点btn1时，发射普通子弹
15 $("#btn1").click(function(){
16 console.log(`发射普通子弹...`)
17 })
18 var shoot2=function(){
19 console.log(`发射跟踪导弹=>=>=>`)
20 }
21 //点btn2时，给btn1多加一种跟踪导弹
22 $("#btn2").click(function(){
23 $("#btn1").click(shoot2);
24 })
25 //点btn3时，从btn1移除跟踪导弹
26 $("#btn3").click(function(){
27 $("#btn1").off("click",shoot2);
28 })
29 </script>
30 </body>
31 </html>
2. 事件委托: (了解)有点非主流的感觉...
(1). DOM中: 3步: 当多个子元素都需要绑定相同的事件时
a. 事件只绑定在父元素上一份即可
b. e.target代替this
c. 判断e.target是不是想要的
(2). jq中:
a. 事件也只绑定在父元素上一份即可，但是必须用on来绑定
b. 不用e.target代替this了，jq中this又重新指向了实际点击的目标元素。
c. 不用自己写if判断了，只需要将选择器交给on()，on()就会自动用选择器判断当前目标元素是否符合要求！
$元素.on("事件名", "选择器", function(){ this... ... })
判断条件
(3). 示例: 使用jQuery事件委托
1 <!DOCTYPE html>
2 <html>
3
4 <head lang="en">
5 <meta charset="UTF-8">
6 <title></title>
7 <style>
8 body {
9 text-align: center;
10 }
11 </style>
12 </head>
13
14 <body>
15 <h1>替换节点</h1>
16
17 <div id="chosen">
18 <img src="img/p0.png">
19 </div>
20 <hr />
21 <div id="list">
22 <img src="img/p3.png">
23 <img src="img/p4.png">
24 <img src="img/p5.png">
25 </div>
26
27 <script src="js/jquery-1.11.3.js"></script>
28 <script>
29 //DOM 4步
30 //1. 查找触发事件的元素
31 //本例中: 因为多个平级的img都可点击，所以，应该事件委托优化，事件只绑定在共同的父元素id为list的div上一份即可——复习DOM第四天下午
32 $("#list")
33 //2. 绑定事件处理函数
34 //必须用on(),只允许img元素触发事件
35 .on("click","img",function(){
36 //不用e.target代替this了，this指回当前点击的目标元素img了
37 // $(this)
38 //不用自己写if判断，而是将选择器交给on()，由on()自动用选择器判断当前元素是否符合要求
39 //3. 查找要修改的元素
40 //本例中，点当前img，为了替换上方id为chosen下的img
41 $("#chosen>img")
42 //4. 修改元素
43 //但是，也要先把当前img复制一个副本，用副本去代替上方的img
44 .replaceWith($(this).clone());
45 })
46 </script>
47 </body>
48
49 </html>
3. 页面加载后自动执行:
为了便于直观的看到加载的时间段不同可以用performance.now() 获取页面在不同位置 的时间戳
(1). 问题: 将来项目的js代码，都是要保存到HTML外部的独立的js文件中，再引入到网页中运行。但是，有人喜欢把js在网页开头引入，有人喜欢把js在网页结尾引入！如何保证无论别人将js文件引入到开头和结尾，都能保证js文件正常执行呢？！
(2). 解决: 其实，一个网页加载完成后，都会自动触发一个load事件。如果我们可以将事件绑定等页面初始化代码，提前保存到窗口的load事件中，那么，当网页加载完成后，就会自动执行我们的代码了！而此时，页面中的元素可以随意查找和操作了！
(3). 如何:
//当窗口中的网页内容加载完成后，自动执行！
window.οnlοad=function(){
对页面中的元素要执行的初始化代码:
比如，事件绑定、发送ajax请求首屏数据... ...
}
(4). 问题: 如果多个人的js文件中都包含window.οnlοad=function(){}，则如果多个js文件同时引入一个网页时，只有最后一个js文件中的window.οnlοad=function(){ ... }可以保留下载，覆盖之前所有window.οnlοad=function(){ ... }
(5). 解决: 把赋值方式改为添加事件监听的方式:
window.addEventListener("load",function(){ ... })
jq中可简写: $(window).load(function(){ ... })
(6). 示例: 使用load事件绑定事件处理函数
第一个js
1 //希望在所有网页内容加载完成后，自动为两个按钮绑定单击事件
2 // window.onload=function(){
3 // window.addEventListener("load",function(){
4 $(window).load(function(){
5 $("#btn1").click(function(){
6 alert("btn1 疼!")
7 });
8 });
第二个js
1 //希望在所有网页内容加载完成后，自动为两个按钮绑定单击事件
2 // window.onload=function(){
3 // window.addEventListener("load",function(){
4 $(window).load(function(){
5 $("#btn2").click(function(){
6 alert("btn2 疼!")
7 });
8 })
引入html中
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 <script src="js/jquery-1.11.3.js"></script>
10 <script src="14_load.js">
11 //window.addEventListener("load",function(){
12 //$("#btn1").click(function(){ ... })
13 //}
14 </script>
15 <script src="14_load2.js">
16 //window.addEventListener("load",function(){
17 //$("#btn2").click(function(){ ... })
18 //}
19 </script>
20 </head>
21
22 <body>
23 <button id="btn1">click me 1</button>
24 <button id="btn2">click me 2</button>
25 </body>
26
27 </html>
(7). 问题: load事件，必须等所有网页内容都加载完才自动执行！所有网页内容包括:HTML+JS+CSS+图片。所以，load事件加载时机比较晚！但是，实际生活中，用户有很多着急的操作！根本不关心网页图片长什么样！只希望尽快提前用上功能！比如: 秒杀时，抢票时... ...
(8). 解决: 其实，在网页加载过程中，有两个加载完成事件:
a. 早: 仅DOM内容(HTML+JS)加载完，就提前触发——DOMContentLoaded
无需等待css和图片。
b. 晚: 所有网页内容都加载完才触发——window.onload。
如果我们可以将页面初始化的操作，提前放入DOMContentLoaded事件中，就会提前执行，用户就可以提前用上网页的功能！
这里展示关于window加载完和DOMContentLoaded加载完时间的对比
(9). 如何:
a. DOM中: document.addEventListener("DOMContentLoaded", function(){ ...})
b. jq中: 程序中几乎所有页面初始化代码都要写在DOMContentLoaded中
1). $(document).on("DOMContentLoaded",function(){ ... })
2). 简化: $(document).ready(function(){ ... }) //ready==>on("DOMContentLoaded"
3). 更简化: $().ready(function(){ ... }) //$()===>$(document)
4). 更更简化: $(function(){ ... }) //$(function)===>$().ready
5). +ES6: $(()=>{ ... }) //箭头函数简写函数
6). 强调:结尾一定不要加()！这不是匿名函数自调！因为这里是事件绑定，不是立刻执行！
(10). 示例: 使用DOMContentLoaded为按钮绑定事件
第一个js
1 //希望在所有网页内容加载完成后，自动为两个按钮绑定单击事件
2 // window.onload=function(){
3 // window.addEventListener("load",function(){
4 // $(window).load(function(){
5 // document.addEventListener("DOMContentLoaded",function(){
6 // $(document).ready(function(){
7 $(function(){
8 alert("DOM内容加载完就提前绑定btn1的单击事件")
9 $("#btn1").click(function(){
10 alert("btn1 疼!")
11 });
12 });
第二个js
1 //希望在所有网页内容加载完成后，自动为两个按钮绑定单击事件
2 // window.onload=function(){
3 // window.addEventListener("load",function(){
4 // $(window).load(function(){
5 // document.addEventListener("DOMContentLoaded",function(){
6 // $(document).ready(function(){
7 $(function(){
8 alert("DOM内容加载完就提前绑定btn2的单击事件")
9 $("#btn2").click(function(){
10 alert("btn2 疼!")
11 });
12 })
引入js后的完整的html
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 <script>
10 window.onload=function(){
11 //这里必然最后执行
12 alert(`所有网页内容加载完成！`)
13 }
14 </script>
15 <script src="js/jquery-1.11.3.js"></script>
16 <script src="15_DOMContentLoaded.js">
17 //document.addEventListener("DOMContentLoaded",function(){
18 //$("#btn1").click(function(){ ... })
19 //}
20 </script>
21 <script src="15_DOMContentLoaded2.js">
22 //document.addEventListener("DOMContentLoaded",function(){
23 //$("#btn2").click(function(){ ... })
24 //}
25 </script>
26 </head>
27
28 <body>
29 <button id="btn1">click me 1</button>
30 <button id="btn2">click me 2</button>
31 </body>
32
33 </html>
(11). 总结: 程序中，所有jq代码，都要包裹在$(function(){ ... })或$(()=>{ ... })当中！
总结: $共有4种用法:
1. $("选择器") 查找DOM元素，并封装进jquery对象中
2. $(DOM元素对象) 无需查找，直接将一个DOM元素包装为jquery对象
3. $(`HTML片段`) 创建新元素！
4. $(function(){ ... }) 绑定DOMContentLoaded事件。
2987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
