1.定义：第三方的 极简化的 DOM操作的 函数库。
(1) 应用：
1).DOM的终极简化（简化增删改查，简化事件绑定，简化动画，简化ajax...）。
2).几乎对所有浏览器没有兼容性的问题。
(2) 如何快速学会一门技术：看官网是什么，看官网快速入门，看手册。
(3) jQuery版本：1.x不支持旧浏览器，2.x支持旧浏览器，3.x支持旧浏览器并增
加特性（如API都是运行在严格模式下，支持for..of代替each，支持动画API，
支持promise....）。
(4) 引入jQuery：即向window中添加一种新的类型jQuery,包括构造函数/工厂函
数和原型对象，其API只能被jQuery类型的子对象引用。普通DOM无法使用。
1).将jQuery.js文件保存在本地文件中，在页面用<script src="本地相对路
径">。
2).引用网络CDN(内容分发网络)中的jQuery.js文件<srcipt src="网络绝对
路径">。官网=>CDN=>绝对路径。
2.jQuery对象：即封装所有DOM对象的类数组对象，并提供操作DOM对象的简化版API。
构建DOM Tree=>查找触发事件的元素=>绑定事件=>查找要修改的元素=>修改
元素(内容，属性，样式...)。
(1) 创建：
1).var $obj=new jQuery("选择器"); 对jQuery对象调用任何简化版本的
API相当于自动把其中的每个DOM元素都引用一遍简化API——自带遍历。
2).var $obj=jQuery(DOM对象);基于已经找出获得DOM对象，将其封装为
jQuery对象。 所有jQuery可以被$替代。
(2)jQuery API的三大特性：
1).自带遍历效果;如对$btns.click(),其里面的每个btn自动调用click();
2).一个函数两用;如 elem.html(['新内容']),如果括号里面有内容为修改，
没有内容为获取。
3).多数简化的API都是返回的是正在操作的jQuery对象，所有可以有$().css()
.css(),或$().mouseover().mouseout()的链式操作。
(3)jQuery对象可用的选择器：
1).基本选择器,包括css中的5种：id选择器,元素选择器,class类选择器,通
配选择器(*),群组选择器(selector1,selector2,...)。选择器名中含有特殊字
符jQuery可用双\\对其进行转义,如正则表达式类型的选择器名。
| DOM:API |
jQuery:API |
| document.getElementById("#id"); |
$("#id"); |
| document.getElementsByTagName("element";) |
$("element"); |
| document.getElementsByClassName("ClassName"); |
$("ClassName"); |
| Document.getElementsByTagName("*"); |
$("*"); |
| ...........无............ |
$("群组选择器"); |
2).结构选择器,包括CSS中的4种：相邻兄弟选择器(+)，通用兄弟选择器(~)，
子代选择器(>,包括:first-child,:last-child,:nth-child(n),:only-
child)，后代选择器( )。以及jQuery中自带的子代选择器：:eq(n/even/odd)
,表示从0开始第n个/所有偶数/所有奇数。
3).过滤选择器：jQuery自带的定位过滤选择器：
:first,:last,:not(),:even,:odd,:eq(),:gt(),:lt(),:header(h#标签),
:animated(正在执行的动画)。其中:even,:odd,:eq(),:gt(),:lt()都是从0
开始计算。
jQuery自带的内容过滤选择器：
:contains("文本内容"),:empty,:has("selector"),:parent。
其中:hidden,:visible。是匹配所有隐藏/可见的元素。
4).属性选择器：[attribute],[attribute=value],[attribute!=value],
[attribute^=value],[attribute$=value],[attribute*=value],
[selector1][selector2][selector3]。其中*=表示包含某值。
5).表单选择器：:input(匹配所有表单元素),:text(匹配文本框),:password,
:radio,:checkbox,:submit,:image(type="image"),:reset,:button,
:file,:hidden。
(4) jQuery选择器优化：
1).多用ID选择器；缩短节点访问路径。
2).少直接用Class选择器。
3).多用父子关系，少用后代关系。
4).缓存jQuery对象，即将其赋值给一个变量。
(5) jQuery对象的过滤方法(强调不是选择器是用.访问的方法)：
.eq(n);获取第n个元素；
.hasClass(className);判断是否有某className；
.filter(expr/fn);筛选出满足表达式expr/函数返回值的元素集合；
.is(expr);判断是否至少有一个满足表达式expr的元素。
.has(expr);保留满足表达式的元素。
.not(expr);排除满足表达式的元素。
.slice(start[,end]);截取子元素集合。
3.查找：
(1) 属性选择器查找；未获得任何元素下，查找第一个元素，jQuery支持所有CSS选
择器,并还有自带的选择器。jQuery选择器返回值均是一个伪数组对象，如果没
有就返回空的伪数组对象，判断一个jQuery对象是否存在，不能使用$("选择器
")而是应该用$("选择器").length是否大于0判断其是否是空伪数组对象。
(2) 节点间关系查找；已获得一个元素，找其父，后，兄，弟元素。
1).父子：$elem.parent() => elem.parenElement;其中$elem.parents()
是查找$elem所有祖元素。
$elem.children(/*[选择器]*/) => elem.children;
只能查找直接子元素，可以用$().find(["selector"])去查
找所有子元素/或查找指定选择器的子元素。
$elem.children().first() => elem.firstElementChild;
$elem.children().last() => elem.lastElementChild;
2).兄弟：$elem.prev() => elem.previousElementSibling;
$()/$elem.prevAll(),查找之前的所有兄弟。
$elem.next() => elem.nextElementSibling;
$()/$elem.nextAll(),查找之后的所有兄弟。
$().siblings(["selector"]),查找除自己之外的所
有兄弟或除自己之外的指定选择器兄弟。
4.修改：
(1) 内容：
1).$().html(['新内容HTML片段']) => .innerHTML="新内容";不支XML。
2).$().text() => .textContent;文本内容。
3).$().val() => .value; 表单元素的值。
4).$().empty() ;清空元素集合中所有内容/所有子节点。没有参数。
(2) 属性：
1).标准属性；$elem.attr("属性名"[,"属性值"]) => elem.属性名=值;
$().attr((css属性:值,css属性:值...));
$()/$elem.removeAttr("属性名");表示删除属性。
2).状态属性；$elem.prop("状态属性名"[,bool]) => elem.属性名=bool;
$()/$elem.removeProp("属性名");表示删除属性。
3).自定义属性；$().data("属性名"[,"值"]) => elem.dataset.属性名;
(3) 样式：
1).$().css("css属性名") => getComputedStyle(elem).css属性;
修改:$().css("css属性名",值) => elem.style.css属性名; 一次
修改一个样式。
2).$().css({属性名:值,属性名:值...});
3).$().addClass/removeClass/hasClass("class1
class2....");用class批量应用增/删/判断存在属性;hasClass()相
当于is();
4). $().toggleClass("class1");如果属性存在就删除，否则就添加相当于
if(.hasClass()){.removeClass()}else{.addClass()};
5.添加，删除，替换，克隆：
(1)添加：用html代码片段创建新元素:var $elem=$("html片段");
将新元素添加到父元素下:
$parent.append($elem);//return $parent。
$elem.appendTo($parent); //return $elem。
$parent.prepend($elem);
$elem.prependTo($parent);
$child.before/after($elem);//return $child。
$elem.insertBefore/insertAfter($child);//return $elem。
(2)删除：$().remove([selector]);从DOM中删除所有满足参数/匹配元素及其内
容，可有参数。返回被删除的元素。$().detach([expr]),表示移除并保留元
素及其内容，以便下次使用。如，用.detach([expr])移除单击事件中的某代
码，当再次回复被删除的内容时，再次单击仍然可有有效执行，如果换成
remove()就不行了。
(3)替换：
$(旧).replaceWith(新); //return $(旧)。
$(新).reolaceAll(旧); //return $(新)。
(4)克隆：
浅克隆;var $elem=$().clone();仅克隆样式和属性。
深克隆;var $elem=$().clone(true);克隆样式，属性和行为。
(5)链式操作中addBack()和end()方法：
1).$("div").find("p").addBack().css();表示把$("div")和$("div").
find("p")绑定在一起新成新jQuery对象执行.css()方法；
2).$("div").find("p").css(1).end().css(2);表示对$("div").find("p")
执行css(1),并返回$("div")对其执行css(2);
(6)包裹元素：即为某一个元素里/外包裹一个子/父元素。
1).外包：即为匹配的每个元素外包一个标签元素,参数可有是字符串或对象。
$("a").wrap("<li></li>");表示为匹配的每个a外包裹一个li标签。
2).内包: 即为匹配的元素内包一个标签元素。
$("body").wrapInner("<ul></ul>");表示在body下内嵌一个ul。
3).总包：即为匹配的元素集合作为一个整体外包一个标签元素。
$("ul").wrapAll("div");表示为匹配ul整体外包裹一个div标签。
4).卸包：即为匹配的元素去掉父元素，没有参数。与wrap()相反。
$("a").unwrap(); 即去掉a的父元素，保留自身。
6.事件绑定：共6种方法。
(1).bind/unbind():简化addEventListener/removeEventListener;
unbind()三种重载:unbind("click",handler)移除指定元素的click的
handler函数;unbind("click")移除指定元素的click事件绑定的所有处理函
数;unbind()移除指定元素上所有事件的所有处理函数。bind("事件名",[参数,]
事件函数);或bind({事件1:事件函数1，事件2:事件函数2.....})。 (2).one():只触发移除，触发后自动解绑。
(3)delegate/undelegate():对利用冒泡的简化，this ->父元素，e.target->目标
元素，delegate将this->e.target;且delegate添加了选择参数，自动执行
is判定。与bind相比其直接绑定在父元素上减少监听个数，且可以让新生成的元
素自动获得父元素的处理函数。
(4) live/die()...;jQuery1.9版本之后已经删除用on/off代替。
(5)on/off();on()两种重载，代替bind,on("事件名",handler)。代替delegate,
on("事件名","selector",handler)。
(6)直接事件绑定; $().事件名(handler)。其中var bool=$().is("selector")用
于判断$()下的一个元素是否满足选择器selector条件。var i=
$(child).index()查找child在其父元素下的位置。
7.其他具体事件：
(1)页面加载自动执行时间;
1).DOM内容(css,html)加载完成后执行：$(document).ready(function(){}) 或简化为$().ready(function(){})或更简化$(()=>{});
2).所有页面内容(HTML,CSS,JS,图片...)加载完成之后：window.onload=
function(){};或$(window).load(function(){});
(2).鼠标事件;mouseover(),mouseout(),mouseenter(),mouseleave():前2个和
后2个相比在于频繁进出是否触发父元素上的事件即冒泡。简写$().hover
(mouseenter(),mouseleave());其中hover(鼠标移入函数事件,鼠标移出函数事件)；
(3).模拟触发;用程序触发一个元素上的事件处理函数,$().trigger("事件名")
简化为$().事件名();
7.动画：动画的API参数大0都可以有时间ms,和动画执行完之后执行的函数。
(1).简单动画：用定时器实现动画不如css的transition,且在jQuery中不便维护。
1).显示/隐藏:show(),hide(),toggle();默认不带参数，用display实现瞬间
显示隐藏不支持动画，加ms参数才有动画效果。
2).上滑动下滑动：slideUp(),slideDown(),slideToggle();
3).淡入淡出：fadeIn(),fadeOut(),fadeToggle();
(2).万能动画：$().animate({css属性:目标值,....},ms,callback);但是其仅支
持单个数值的属性，不支持动画演示，字体，转换等属性.但是可随时
停止动画$().stop(/*true*/)参数为true表示停止当前动画并清空
动画排对;其中$().动画API(ms,callback)表示动画执
行完以后会自动执行的函数。其this指正在播放动画的DOM元素。
:animated该表示正在执行动画的选择器($().is(":animated"))表
示判断某个jQuery对象$()是否是正在执行的动画。以及delay(ms)延迟动画执行。
(3).排队和并发：排队指对同一个元素反复调用多个动画API，而动画API是排队触
发的，并发是多个CSS属性同时发生，如在animate{}里内修改多个属性。
8.类数组操作：
(1).$().each(function(i,elem){});对当前类型数组里面的元素依次遍历。 VS
$.each(obj.function(){});前者在jQuery原型对象中，$()调用的对象必须
是jQuery对象，后者是直接存在在构造函数中,obj可以是任何类型的数组对象。
(2).$().index();包括$("所有").index(DOM元素)和$(子元素).index();都是查
找子元素的对象;
9.jQuery插件设计原理：jQuery.extend()和jQuery.fn.extend();分别表示创建构造
函数和父对象函数。其中extend可以有函数名代替。一般前者
定义属性，后者定义方法。
(1).jQuery.fn.自定义函数=function(){//this指将来调用jQuery类型子对象，
且不用再用$()封装这个自定义函数了，可$(this)将this转为为
jQuery对象}。
(2).jQuery.自定义函数=function(){// 定义jQuery构造函数对象}。
(3).自定义jQuery选择器：步骤如下；
1).创建自定义选择器名及其方法函数,如：le:function([参数]){};
2).将选择器添加到jQuery选择器对象中,jQuery.expr[":"].le;
3).调用自定义选择器，.le([参数]);
(4).优化/重新jQuery选择器：即与原生选择器重名，两种方法如下；
1).直接覆盖；与自定义选择器步骤一样。
2).直接嵌入jQuery构造函数中；jQuery.extend(jQuery.expr[":"],{
"重名选择器名":function(){});
(5).封装插件；(function($){//自定义构造函数和父对象函数})(jQuery)；