2019-11-02 21:11:17 by冲冲
jQuery：轻量级、"写的少，做的多"、JavaScript函数库。
目前jQuery有三大版本：
1.x：兼容ie678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)。
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)。
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.3.1（2018年1月20日）。
① 官网https://jquery.com/download/下载
② CDN(内容分发网络)加载
<head><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head>
目前，在百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软（国内访问外网不稳定）。例如：
<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head>
CDN优势：CDN 可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样可以提高加载速度。
在浏览器的 Console 窗口中输入 $.fn.jquery 命令，可以查看当前 jQuery 使用的版本。
基础语法： $(selector).action()。
$(this).hide() //隐藏当前元素$("p").hide() //隐藏所有 <p> 元素$("p.test").hide() //隐藏所有 class="test" 的 <p> 元素$("#test").hide() //隐藏所有 id="test" 的元素
// 第一种$(document).ready(function(){ // 执行代码});// 第二种$(function(){ // 执行代码});
对比：JavaScript入口函数
window.onload = function () { // 执行代码}
jQuery 入口函数与 JavaScript 入口函数的区别：
① jQuery 的入口函数是在所有的HTML标签(DOM)都加载之后，才会执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
② jQuery 的入口函数可以执行多次，第N次都不会将上次的结果覆盖。
JavaScript 的 window.onload 事件只能执行一次，如果是第二次，就会覆盖第一次的结果。
<!-- 多次调用$(document).ready()不会覆盖前一次 --><!DOCTYPE html> <html> <head></head> <body> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="test1.js"></script> <script src="test2.js"></script></body> </html><!-- // test1.js$(function(){ $(document.body).append("$(document).ready()1 is now been executed!!!<br/>"); });// --><!-- // test2.js$(function(){ $(document.body).append("$(document).ready()2 is now been executed!!!<br/>"); });// --><!-- // 页面输出$(document).ready()1 is now been executed!!!$(document).ready()2 is now been executed!!!// -->
<!-- 多次调用window.onload，后一次会覆盖前一次 -->window.οnlοad=func1;window.οnlοad=func2;
jQuery选择器用于选取对应的HTML元素，格式是以美元符号开头：$()。
jQuery 选择器基于元素的 id、类、元素类型、属性、属性值等查找/选择HTML元素。
（1）基于已经存在的CSS选择器
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); $("#test").hide(); $(".test").hide(); });});
$("*") // 选取所有元素$(this) // 选取当前 HTML 元素$("p.intro") // 选取 class 为 intro 的 <p> 元素$("p:first") // 选取第一个 <p> 元素$("ul li:first") // 选取第一个 <ul> 元素的第一个 <li> 元素$("ul li:first-child") // 选取每个 <ul> 元素的第一个 <li> 元素$("[href]") // 选取带有 href 属性的元素$("a[target=‘_blank‘]") // 选取所有 target 属性值等于 "_blank" 的 <a> 元素$("a[target!=‘_blank‘]") // 选取所有 target 属性值不等于 "_blank" 的 <a> 元素$(":button") // 选取所有 type="button" 的 <input> 元素 和 <button> 元素$("button") // 选取所有 <button> 元素$("tr:even") // 选取偶数位置的 <tr> 元素$("tr:odd") // 选取奇数位置的 <tr> 元素$("#id",".class") // 复合选择器$("div p span") // 层级选择器$("div>p") // 父子选择器（div里面所有p元素）$("div+p") // 相邻元素选择器（div后面第一个p元素）$("div~p") // 兄弟选择器（div后面所有p元素，要求是同级别的p元素）$("div p:eq(2)") // 索引选择器（div里面第三个p元素，索引从0开始）$("a[href=‘www.baidu.com‘]") // 属性选择器$("p:contains(test)") // 内容过滤选择器，包含text内容的p元素$(":emtyp") // 内容过滤选择器，所有空标签（不包含子标签和内容的标签）$(":hidden") // 所有隐藏元素 visible $("input:enabled") // 选取所有启用的表单元素$(":disabled") // 所有不可用的元素$("input:checked") // 获取所有选中的复选框单选按钮等$("select option:selected") // 获取选中的选项元素
（1）用户动作/行为 -- 触发/激发 -- DOM事件/响应 -- 调用事件的方法
// 给p元素指定一个点击事件$("p").click();
// 给点击事件添加实现函数$("p").click(function(){ // 动作触发后执行的代码});
（2）DOM事件
① 鼠标事件：click(), dblclick(), mouseenter(), mouseleave(), mousedown(), mouseup(), hover()
② 键盘事件：keypress(), keydown(), keyup()
③ 表单事件：submit(), change(), focus(), blur()
④ 文档/窗口事件：load(), resize(), scroll()
// 给某元素绑定一个事件$("p").bind("click",function(){ alert("...");});
// 移除所有 <p> 元素上的 click 事件：$("button").click(function(){ $("p").off("click"); });
// 防止链接打开 URL $("a").click(function(event){ event.preventDefault();});
// 返回哪个 DOM 元素触发了事件。$("p, button, h1").click(function(event){ $("div").html("通过 " + event.target.nodeName + " 元素触发。");});
// 返回哪种事件类型被触发：$("p").on("click dblclick mouseover mouseout",function(event){$("div").html("Event: " + event.type);});
（1）显示/隐藏 -- hide(), show(), toggle()
// 点击id=hide的元素，触发隐藏事件$("#hide").click(function(){ $("p").hide();});// 点击id=show的元素，触发显示事件$("#show").click(function(){ $("p").show();});// 第一个参数指定显示/隐藏的速度（毫秒数），第二个参数指定显示/隐藏后的回调函数$("#show").click(function(){ $("p").show(1000,function(){ alert("show occurred!"); });});// toggle()是hide()和show()的结合$("#hide").click(function(){ $("p").toggle(1000,function(){ alert("本身是隐藏，点击则显示；本身是显示，点击则隐藏"); });
① 第二个可选参数callback函数补充：
// 在隐藏效果完全实现后，执行回调函数$("button").click(function(){ $("p").hide("slow",function(){ alert("段落现在被隐藏了"); });});// 没有回调函数，警告框会在隐藏效果完成前弹出$("button").click(function(){ $("p").hide(1000); alert("段落现在被隐藏了");});
② hide() 等于 $("selector").css("display","none")
（2）淡入/淡出 -- fadeIn(), fadeOut(), fadeToggle(), fadeTo()
$("button").click(function(){ // 淡入已隐藏的元素 $("#div1").fadeIn(); $("#div2").fadeIn(1000); $("#div3").fadeIn("slow",function(){alert("slow fade in");}); // 淡出已显示的元素 $("#div2").fadeOut(); // 在fadeIn()与fadeOut()方法之间进行切换：如果元素已淡出，则fadeToggle()会向元素添加淡入效果。如果元素已淡入，则fadeToggle()会向元素添加淡出效果。 $("#div3").fadeToggle(); // 渐变为给定的不透明度（值介于 0 与 1 之间） $("#div4").fadeTo(1000,0.5);});注意：fadeTo()必须带参数。
（3）滑动 -- slideDown(), slideUp(), slideToggle()
$("button").click(function(){ // 滑入已隐藏的元素 $("#div1").slideIn(); $("#div2").slideIn(1000); $("#div3").slideIn("slow",function(){alert("slow fade in");}); // 滑出已显示的元素 $("#div2").slideOut(); // 在slideIn()与slideOut()方法之间进行切换：如果元素已滑出，则slideToggle()会向元素添加滑入效果。如果元素已滑入，则slideToggle()会向元素添加滑出效果。 $("#div3").slideToggle();});（4）动画
animate() 方法用于创建自定义动画。
https://www.runoob.com/jquery/jquery-animate.html
（5）停止动画/效果
stop() 方法用于停止所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画，在它们完成之前就停止。
https://www.runoob.com/jquery/jquery-stop.html
IIFE (Immediately Invoked Function Expression)
// 函数声明/具名函数function test(){ alert("hello");}// 函数表达式var fn = function(){ alert("hello");}// 匿名函数function(){ alert("hello");}
（1）匿名函数 转化为立即执行函数
两种常见形式：( function(){…} )() 和 ( function (){…} () )
// 使用()，！，+，-，=等运算符都能起到立即执行的作用(function(args){ alert(args); })(123); //输出123(function(args){ alert(args); }(123)); //输出123!function(args){ alert(args); }(123); //输出123+function(args){ alert(args); }(123); //输出123-function(args){ alert(args); }(123); //输出123var fn = function(args){ alert(args); }(123); //fn=123
（2）具名函数 转化为立即执行函数
// 使用()，！，+，-，=等运算符都能起到立即执行的作用(function test(args){ alert(args); })(123); //输出123(function test(args){ alert(args); }(123)); //输出123!function test(args){ alert(args); }(123); //输出123+function test(args){ alert(args); }(123); //输出123-function test(args){ alert(args); }(123); //输出123
在相同的元素上运行多条 jQuery 命令，一条接着另一条。作用：浏览器不必多次查找相同的元素。
// "p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动$("#p1").css("color","red").slideUp(2000).slideDown(2000);
等价于
$("#p1").css("color","red");$("#p1").slideUp(2000);$("#p1").slideDown(2000);
