jQuery和ES6知识整理
资料：翻了几本书找的，内容自己不是很满意，后续有时间会补充的。
文中有错的地方请及时提醒，谢谢！
效果图：
代码分享：
html和js代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ES6和jQuery</title>
<link rel="stylesheet" href="es_jQ.css" type="text/css" />
</head>
本来是想整点花活来个单页面应用的，想来不用组件的话要实现还是费不少功夫，还是简单的做个知识总结吧，我最近的学习状态不太好，偏偏任务很多，所以还是从简了。
<p style="font-size: 20px;text-align: center;font-weight: bold">jQuery和ES6</p>
<h3>jQuery</h3>
<p>jQuery是一款优秀的JavaScript库，通过JavaScript的函数封装，简化了html与JavaScript之间的操作，使得DOM对象、事件处理、动画效果等操作的实现语法更加简介，同时提高了程序的开发效率，消除很多跨浏览器的兼容问题。</p>
<ul><li>认识jQuery</li></ul>
<p class="one1">
<span class="one2">什么是jQuery:</span>jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“write less，do more”，倡导用更少的代码，做更多的事情。jQuery封装了JavaScript常用的功能代码，使用jQuery可以快速地完成JavaScript中的DOM操作等常见的开发需求。
jQuery的特点：jQuery使用ige轻量级的脚本，其代码非常小巧；语法简洁易懂，学习速度快，文档丰富；支持css1~css3定义的属性和选择器；跨浏览器，支持的浏览器包括IE6~IE11和FireFox、Chrome等；实现了JavaScript脚本和html代码的分离，
便于后期编辑和维护；插件丰富，可以通过插件扩展更多功能。
<span class="one2">jQuery的获取和使用</span>
获取：从jQuery的官方网站可以获取最新版本的jQuery文件，讲jQuery文件下载后，在html中使用<script>标签引入即可。此外，一些CDN(内容分开网络)也提供了jQuery文件，可以无序下载直接引入。
使用：使用jQuery时，有两个基本步骤：1、获取要操作的元素，也就是在$()函数中传入标签名；2、调用操作方法，如hide()方法用来将元素隐藏。注意：在使用jQuery时需要注意代码的书写位置，jQuery代码需要写在要操作的DOM元素的后面，
确保DOM元素已经加载后，才可以用jQuery进行操作。反之不会生效。
<span class="one2">jQuery加载事件：</span>将页面DOM加载完成后要执行的代码提前写到函数中，传给jQuery，由jQuery再合适的时机去执行。语法：1、简写形式：$(function(){});2、完整形式：$(document).ready(function(){});
<p style="text-align: center">页面加载事件对比</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>对比项</th>
<th>window.onload</th>
<th>DOM.addEventListener()</th>
<th>$(document).reday()</th>
</tr>
<tr>
<td>执行时机</td>
<td>必须等待网页中的所有内容加载完成后(包括外部元素，如图片)才能执行</td>
<td>必须等待网页中的所有内容加载完成后(包括外部元素，如图片)才能执行</td>
<td>网页中的所有DOM绘制完成后就执行(可能关联内容并未加载完成)</td>
</tr>
<tr>
<td>编写个数</td>
<td>不能编写多个</td>
<td>能够编写多个，依次执行</td>
<td>能够编写多个，依次执行</td>
</tr>
<tr>
<td>简化写法</td>
<td>无</td>
<td>无</td>
<td>$()</td>
</tr>
</table>
</p>
<p class="one1">
<span class="one2">jQuery对象</span>
介绍：将jQuery引入后，在全局作用域下会新增"$"和"jQuery"两个全局变量，这两个变量引用的是同一个对象，称为jQuery顶级对象。在代码中可以使用jQuery代替$，一般使用$。jQuery顶级对象类似一个构造函数，用来创建jQuery实例对象(简称jQuery
对象)，但不需要使用new进行实例化，它内部会自动进行实例化，返回实例化后的对象。jQuery对象的使用：1、创建jQuery对象：语法：$("选择器");2、调用方法：实例方法：jquery对象.方法，静态方法：$.静态方法；
转换：在实际开发中，经常会在jQuery对象和DOM对象之间进行转换。DOM对象是用原生JavaScript的DOM操作获取的对象，jQuery对象是通过jQuery方式获取到的对象，对象的使用方式不同。
jQuery转DOM：1、$("选择器")[0]；2、$("选择器").get(0)，其中，0表示第一个DOM对象。
DOM转jQuery：$(DOM对象)；
</p>
<ul><li>jQuery选择器</li></ul>
<p class="one1">
<span class="one2">基本选择器：</span>从控制台可以看出，length属性表示匹配到的符合条件的DOM对象个数。其中类选择器、标签选择器等可以获取多个元素，id选择器只能获取1个元素。
<p style="text-align: center">基本选择器</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>名称</th>
<th>用法</th>
<th>描述</th>
</tr>
<tr>
<td>id选择器</td>
<td>$("#id")</td>
<td>获取指定id的元素</td>
</tr>
<tr>
<td>全选选择器</td>
<td>$("*")</td>
<td>匹配所有元素</td>
</tr>
<tr>
<td>类选择器</td>
<td>$(".class")</td>
<td>获取同一类class的元素</td>
</tr>
<tr>
<td>标签选择器</td>
<td>$("div")</td>
<td>获取相同标签名的所有元素</td>
</tr>
<tr>
<td>并集选择器</td>
<td>$("div,p,li")</td>
<td>选取多个元素</td>
</tr>
<tr>
<td>交集选择器</td>
<td>$("li.current")</td>
<td>交集元素</td>
</tr>
</table>
</p>
<p class="one1">
<span class="one2">层级和筛选选择器</span>
</p>
<div class="contain1">
<div class="left1">
<p class="p1">层级选择器可以完成多层级之间的获取。隐式迭代：在使用jQuery选择器获取元素后，如果不考虑获取到的元素数量，直接对元素进行操作，则在操作时会发生隐式迭代。隐式迭代指要操作的元素有多个时，jQuery会自动对所有的元素进行操作。</p>
<p style="text-align: center">层级选择器</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>名称</th>
<th>用法</th>
<th>描述</th>
</tr>
<tr>
<td>子代选择器</td>
<td>$("ul>li")</td>
<td>获取子级元素</td>
</tr>
<tr>
<td>后代选择器</td>
<td>$("ul li")</td>
<td>获取后代元素</td>
</tr>
</table>
</div>
<div class="left2">
<p class="p1">筛选选择器用来筛选元素，通常和别的选择器搭配使用。</p>
<p style="text-align: center">筛选选择器</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>名称</th>
<th>用法</th>
<th>描述</th>
</tr>
<tr>
<td>:first</td>
<td>$("li:first")</td>
<td>获取第一个li元素</td>
</tr>
<tr>
<td>:last</td>
<td>$("li:last")</td>
<td>获取最后一个li元素</td>
</tr>
<tr>
<td>:eq(index)</td>
<td>$("li:eq(2)")</td>
<td>获取li元素，选择索引为2的元素</td>
</tr>
<tr>
<td>:odd</td>
<td>$("li:odd")</td>
<td>获取li元素，选择索引为奇数的元素</td>
</tr>
<tr>
<td>:even</td>
<td>$("li:even")</td>
<td>获取li元素，选择索引为偶数的元素</td>
</tr>
</table>
</div>
<div class="left3">
<p class="p1">筛选方法：在实际开发中，有时需要对一个已经用选择器获取到的集合进行筛选。</p>
<p style="text-align: center">筛选方法</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>方法</th>
<th>用法</th>
<th>说明</th>
</tr>
<tr>
<td>parent()</td>
<td>$("ul").parent()</td>
<td>查找父级元素</td>
</tr>
<tr>
<td>children(selector)</td>
<td>$("ul").children("li")</td>
<td>查找子级元素</td>
</tr>
<tr>
<td>find(selector)</td>
<td>$("ul").find("li")</td>
<td>查找后代</td>
</tr>
<tr>
<td>siblings(selector)</td>
<td>$(".first").siblings("li")</td>
<td>查找兄弟节点</td>
</tr>
<tr>
<td>nextAII([expr])</td>
<td>$("first").nextAII()</td>
<td>查找当前元素之后所有的同辈元素</td>
</tr>
<tr>
<td>prevAII([expr])</td>
<td>$(".last").prevAII()</td>
<td>查找当前元素之前所有的同辈元素</td>
</tr>
<tr>
<td>hasClass(class)</td>
<td>$("div").hasClass("protected")</td>
<td>检查当前的元素是否含有特定的类，返回true或false</td>
</tr>
<tr>
<td>eq(index)</td>
<td>$("li").eq(2)</td>
<td>相当于$("li:eq(2)")</td>
</tr>
</table>
</div>
</div>
<p class="one1">
<span class="one2">排他思想</span>
排他思想：先设置自己的样式，后根据兄弟元素的筛选方法设置其他样式为空。
链式编程：在jQuery中，经常会用到链式编程。使用链式编程是为了节省代码量，让代码看起来更优雅。其原理是，在调用上一个方法后，如果返回的结果是一个对象，就可以接着调用该对象的方法。如果希望同一个方法的对象可以被链式调用，
可以使用return this 返回对象自身。
<span class="one2">其他选择器：</span>jQuery中的选择器种类非常多，只需要记住常见的选择器即可，对于不熟悉的选择器，在使用时查阅资料。之后的博客会有一篇介绍。这里做简单的介绍。
1、获取同级元素；2、筛选元素；3、属性选择器；4、子元素选择器；5、表单选择器；
</p>
<ul><li>jQuery样式操作：jQuery提供了用于样式操作的两种方式，分别是css()方法设置类样式的方法，前者通过css()方法直接操作元素的样式，如width、height等，后者同通过给元素添加或删除类名来操作元素的样式。</li></ul>
<p class="one1">
<span class="one2">修改样式</span>
获取样式：css()方法接受参数时只写样式名，则返回样式值。如：$("div").css("width")；
设置单个样式：css()接受的参数是属性名和属性值，以逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。如：$("div").css("width","300px")；
设置多个样式：css()方法的参数可以是对象形式，方便设置多组样式。样式名和样式值用冒号隔开，样式名可以不用加引号。如：$("div").css({width:400,height:400});
<span class="one2">类操作：原生JavaScript中的className会替换元素原来的所有类名；jQuery里面类操作只是针对指定类进行操作，不影响原先的类名。</span>
addClass()添加类：该方法向被选元素添加一个或多个类名。语法：$(selector).addClass(className)。如果添加多个类，使用空格分隔类名。
removeClass()移除类：该方法从被选元素移除一个或多个类。语法：$(selector).removeClass(className)。如果省略该参数，表示移除所有的类名。
toggleClass()切换类：该方法用来为元素添加或移除一个或多个类名，多个类名用空格分隔；switch参数用来规定只删除类或只添加类，设为true表示添加，设为false表示移除。语法：$(selector).toggleClass("className")。
</p>
<ul><li>jQuery动画：在网页开发中，适当地使用动画可以可以使页面更加美观，进而增强用户体验。</li></ul>
<p class="one1">
<span class="one2">显示与隐藏效果：</span>jQuery中用于控制元素显示和隐藏效果的方法如下表所示，其中，参数speed表示动画的速度，可设置为动画时长的毫秒值(如1000)，或预定的三种速度(slow、fast和normal)；参数easing表示切换效果，默认效果为swing，
还可以使用linear效果；参数fn表示在动画完成时执行的函数。
<p style="text-align: center">控制元素显示和隐藏的方法</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>方法</th>
<th>说明</th>
</tr>
<tr>
<td>show([speed,[easing],[fn]])</td>
<td>显示被隐藏的匹配元素</td>
</tr>
<tr>
<td>hide([speed,[easing],[fn]])</td>
<td>隐藏已显示的匹配元素</td>
</tr>
<tr>
<td>toggle([speed],[easing],[fn])</td>
<td>元素显示与隐藏切换</td>
</tr>
</table>
</p>
<p class="one1">
<span class="one2">滑动效果：</span>jQuery中用于控制元素上滑和下滑效果的方法如下表。值得一提的是：jQuery中提供了hover()方法，可以直接带题鼠标指针移出和移入事件，语法：$(selector).hover([over,] out)；
其中，over表示鼠标指针移到元素上要触发的函数(相当于mouseenter)，out表示鼠标指针移出元素要触发的函数(相当于mouseleave)。如：$(selector).hover(fn1,fn2)；
<p style="text-align: center">控制元素上滑和下滑的方法</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<td>方法</td>
<td>说明</td>
</tr>
<tr>
<td>slideDown([speed],[easing],[fn])</td>
<td>垂直滑动显示匹配元素(向下增大)</td>
</tr>
<tr>
<td>slideUp([speed,[easing],[fn]])</td>
<td>垂直滑动显示匹配元素(向上减小)</td>
</tr>
<tr>
<td>slideToggle([speed],[easing],[fn])</td>
<td>在slideUp()和slideDown()量汇总那个效果间切换</td>
</tr>
</table>
</p>
<p class="one1">
<span class="one2">停止效果：</span>使用动画的过程中，如果在同一个元素上调用一个以上的动画方法，那么对这个元素来说，除了当前正在调用的动画，其他的动画将被放到效果队列中，这样就形成了动画队列。动画队列中所有动画都是按照顺序执行的，默认只有当前一个动画
执行完毕，才会执行后面的动画。为此，jQuery提供了stop()方法用于停止动画效果。通过此方法，可以让动画队列后面的动画提前执行。stop()适用于所有的jQuery效果。语法：$(selector).stop(stopAII,goToEnd)；其中，stopAII参数用于规定是否
清除动画队列，默认是false；goToEnd参数用于规定是否立即完成当前的动画，默认是false。
4种常见的使用方式：1、停止当前动画，继续下一个动画：$("div").stop()；2、清除div元素动画队列中的所有动画：$("div").stop(true);3、停止当前动画，清除动画队列中的所有动画$("div").stop(true,true);
4、停止当前动画，继续执行下一个动画：$("div").stop(false,true)；
例：前面实现下拉菜单滑动效果时，如果用户频繁操作，就会产生动画队列现象，影响用户体验。在实现动画前停止上一个动画即可避免。如：$("div").children("ul").stop().slideToggle(200);
<span class="one2">淡入淡出效果</span>
<p style="text-align: center">控制元素淡入和淡出的方法</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>方法</th>
<th>说明</th>
</tr>
<tr>
<td>fadeIn([speed],peasing],[fn])</td>
<td>淡入显示匹配元素</td>
</tr>
<tr>
<td>fadeOut([speed],peasing],[fn])</td>
<td>淡出隐藏匹配元素</td>
</tr>
<tr>
<td>fadeTo([[speed],opacity,[easing],[fn]])</td>
<td>以淡入淡出方式将匹配元素调整到指定的透明度</td>
</tr>
<tr>
<td>fadeToggle([speed,[easing],[fn]])</td>
<td>在fadeIn()和fadeOut()两种效果间切换</td>
</tr>
</table>
</p>
<p class="one1">
<span class="one2">自定义动画：</span>为了满足动画实现的灵活性，解决单个方法实现动画的单一性，jQuery中提供了animate()方法让用户可以自定以动画。语法：$(selector).animate(params[,speed][,easing][,fn]);其中，params表示想要更改的样式，以对象的形式传递，
样式名可以不用带引号，但如果样式名中有"-"(如font-size)，则需要用驼峰命名法(如fontSize)。
</p>
<ul><li>jQuery属性操作：jQuery提供了一些属性操作的方法，主要包括prop()、attr()和data()等。通过这些方法能够实现不同的需求。</li></ul>
<p class="one1">
<span class="one2">prop()方法和attr()方法</span>
prop()方法用来设置或获取元素固有属性值。元素固有属性是指元素本身自带的属性，如<a&ft;标签的href属性。如：1、获取属性：$(selector).prop("属性名")；2、设置属性值：$(selector).prop("属性","属性值")；
attr()方法用来设置或获取元素的自定义属性，自定义属性是指用户给元素添加的非固有属性。如：1、获取属性：$(selector).attr("属性名")；2、设置属性值：$(selector).attr("属性名","属性值");另外，带有"data-"开头的是html5自定义的属性。
<span class="one2">data()方法：</span>用来在指定的元素上获取数据。数据保存在内存中，并不会修改DOM元素结构；一旦页面刷新，之前存放的数据都将被移除。如：$(selector).data("数据名");2、获取数据：$(selector).attr("数据名","数据值");
另外，使用data方法可以读取html5自定义属性，不需带data-开头可直接读取。
</p>
<ul><li>jQuery内容操作：jQuery提供了内容操作的方法，用来操作元素的内容。根据不同的需求，可以使用html()、text()或val()方法。</li></ul>
<p class="one1">
<span class="one2">jQuery中的内容操作方法：</span>jQuery中的操作元素内容方法，主要包括html()、text()和val()方法。html()用于获取或设置元素的HTML内容，text()用于获取或设置元素的文本内容，val()用来获取或设置表单元素的value值。
需要注意的是，val()方法可以操作表单(select、radio和checkbox)的选中情况。当要获取的元素是<select>元素时，返回结果是一个包含所选值的数组；当要为表单元素设置选中情况时，可以传递数组参数。
<p style="text-align: center">元素内容操作</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>语法</th>
<th>说明</th>
</tr>
<tr>
<td>html()</td>
<td>获取第一个匹配元素的HTML内容</td>
</tr>
<tr>
<td>html(content)</td>
<td>设置第一个匹配元素的HTML内容</td>
</tr>
<tr>
<td>text()</td>
<td>获取所有匹配元素包含的文本内容组合起来的文本</td>
</tr>
<tr>
<td>text(content)</td>
<td>设置所有匹配元素的文本内容</td>
</tr>
<tr>
<td>val()</td>
<td>获取表单元素的value值</td>
</tr>
<tr>
<td>val(value)</td>
<td>设置表单元素的value值</td>
</tr>
</table>
</p>
<ul><li>jQuery元素操作：元素的操作主要是通过jQuery提供的一系列方法，实现元素的遍历、创建、添加和删除操作。</li></ul>
<p class="one1">
<span class="one2">遍历元素：</span>jQuery具有隐式迭代的效果，当一个jQuery对象中包含多个元素时，jQuery会对这些元素进行相同的操作。可以使用jQuery提供的each()对这些元素进行遍历。语法：$(selector).each(function(index,domEle){//对每个元素进行操作});
其中，each()方法会遍历$(selector)对象中的元素。该方法的参数是一个函数。这个函数将会在遍历时调用，每个元素调用一次。在函数中，index参数是每个元素的索引号，domEle是每个DOM元素的对象(不是jQuery对象)，如果要想使用jQuery方法，
需要将这个DOM对象转换成为jQuery，即$(domELe)。此外，$.each()方法可用于遍历任何对象，主要用于数据处理，如数组、对象。$each()方法的使用和each()方法类似。语法：$.each(Object,function(index,element){//对每个元素进行操作})；
<span class="one2">创建、添加和删除和元素</span>
创建元素：通过jQuery可以很方便地动态创建一个元素，直接在"$()"函数中传入一个HTML字符串即可进行创建。例：创建一个li元素，语法：$("<li></li>")。
添加元素：jQuery提供了添加元素的方法，用来为目标元素添加某个元素。添加的方式有两种，分别时内部添加和外部添加：
1、内部添加：内部添加的方式可以是实现在元素内部添加元素，并且可以放到内部的最后面或者最前面。内部添加主要通过append()和prepend()方法来实现。例：(1)、放到后面：$("ul").append(li)；(2)、放到前面：$("ul").prepend(li)；
2、外部添加：外部添加就是把元素放到目标元素的后面或者前面，通过after()和before()方法来实现。例：(1)、放到后面：$(".test").after(div);(2)、放到前面：$(".test").before(div)；
删除元素：删除元素分为删除元素匹配的元素本身、删除匹配的元素里面的子节点两种情况。1、清空元素的内容，但不删除元素本身：empty()；2、清空元素的内容，并删除元素本身(可选参数expr用于筛选元素):remove([expr])；
另外，利用html()方法可以修改元素的内容，如果在参数中传入一个空字符串，也可以实现删除元素子节点的效果，如"$("ul").html("")"。
</p>
<ul><li>jQuery尺寸和位置操作</li></ul>
<p class="one1">
<span class="one2">尺寸：</span>在jQuery中，尺寸方法用来获取或设置元素的宽度和高度。
<p style="text-align: center">尺寸方法</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>方法</th>
<th>说明</th>
</tr>
<tr>
<td>width()</td>
<td>获取或设置元素宽度</td>
</tr>
<tr>
<td>height()</td>
<td>获取或设置元素高度</td>
</tr>
<tr>
<td>outerWidth(true)</td>
<td>获取元素宽度(包含padding、border、margin)</td>
</tr>
<tr>
<td>outHeight(true)</td>
<td>获取元素高度(包含padding、border、margin)</td>
</tr>
<tr>
<td>innerWidth()</td>
<td>获取元素宽度(包含padding)</td>
</tr>
<tr>
<td>innerHeight</td>
<td>获取元素高度(padding)</td>
</tr>
<tr>
<td>outerWidth()</td>
<td>获取元素高度(包含padding、border)</td>
</tr>
<tr>
<td>outerWidth()</td>
<td>获取元素高度(包含padding、border)</td>
</tr>
</table>
</p>
<p class="one1">
<span class="one2">位置方法：</span>jQuery操作位置的方法主要有offset()、position()、scrollTop()和scrollLeft()。
1、offset()方法：使用offset()方法可以获取元素的位置，返回的是一个对象，包含left和top属性，表示相对于文档的偏移坐标，和父级元素没有关系。例：获取元素距离文档顶部的距离：$(selector).offset().top;获取元素距离文档左侧的距离：
$(selector).offset().left;设置元素的偏移：$(selector).offset({top:200,left:200})；
2、position()方法：用于获取元素距离父元素的位置，如果父元素没有设置定位(即css中的position)，则获取的结果是距离文档的位置。注意：position()只能获取元素位置，不能设置元素位置。例：获取距离顶部的位置：
$(selector).position().top；获取距离左侧的位置：$(selector).position().left；
3、scrollTop()和scrollLeft()：用于获取或设置元素被卷去的头部距离和左侧距离。例：获取元素距离页面左侧的距离：$(selector).scrollLeft()；设置元素距离顶部的距离：$(selector).scrollTop(100)；
</p>
<ul><li>jQuery事件：jQuery提供了一些事件操作的方法，如事件绑定、事件委托和事件解绑等，可以方便用户在开发中进行事件处理。在触发事件时，可以获取到事件对象，通过事件对象来阻止默认事件行为，或者获取事件发生时的一些信息等。</li></ul>
<p class="one1">
<span class="one2">事件的绑定和委派</span>
事件绑定：在jQuery中，实现事件绑定有两种方式，一种是通过事件方法进行绑定，另一种是通过on()方法进行绑定。
1、通过事件方法绑定事件：jQuery的事件和DOM中的事件相比，省略了开头的"on"，如jQuery中的click()对应DOM中的onclick。并且，jQuery的事件方法允许为一个事件绑定多个事件处理函数，只需多次调用事件方法，传入不同的函数即可。
jQuery常见事件方法如下表所示。其中，参数function表示触发事件时执行的处理函数，参数data表示为函数传入的数据，可以使用"事件对象.data"获取。如果调用时省略参数，则表示手动触发事件。
2、on()方法在匹配元素上绑定一个或多个事件处理函数，语法：element.on(event,[selector],fn);例：$("ul").on("click","li:first-child",function(){});其中，events表示一个或多个用空格分隔的事件类型，selector表示子元素选择器；fn表示回调函数，
即绑定在元素身上的侦听函数。此外，on()方法中还可以传入一个对象，对象的属性名表示事件类型，属性值表示对应的事件处理函数。
事件委派：指把原本要给子元素绑定的事件绑定要父元素上，表示把子元素的事件委派给父元素，由于事件有冒泡机制，当一个元素触发事件时，可以区分发生事件的是父元素还是子元素。在事件委派的情况下，事件处理函数中的this表示触发事件的元素。
另外，事件委派的优势在于，可以为未来动态创建的元素绑定事件。其原理是将事件委派给父元素后，在父元素中动态创建的子元素也会拥有事件。
<p style="text-align: center">jQuery常用事件方法</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>分类</th>
<th>方法</th>
<th>说明</th>
</tr>
<tr>
<td rowspan="7">表单事件</td>
<td>blur([[data],function])</td>
<td>当元素失去焦点时触发</td>
</tr>
<tr>
<td>focus([[data],function])</td>
<td>当元素获得焦点时触发</td>
</tr>
<tr>
<td>change([[data],function])</td>
<td>当元素的值发生改变时触发</td>
</tr>
<tr>
<td>focusin([[data],function])</td>
<td>在父元素上检测子元素获取焦点的情况</td>
</tr>
<tr>
<td>focusout([[data],function])</td>
<td>在父元素上检测子元素失去焦点的情况</td>
</tr>
<tr>
<td>select([[data],function])</td>
<td>当文本框(包括<input>和<textarea>)中的文本被选中时触发</td>
</tr>
<tr>
<td>submit([[data],function])</td>
<td>当表单提交时触发</td>
</tr>
<tr>
<td rowspan="3">键盘事件</td>
<td>keydown([[data],function])</td>
<td>键盘按键按下时触发</td>
</tr>
<tr>
<td>keypress([[data],function])</td>
<td>键盘按键(Shift、Fn、CapsLock等非字符键除外)按下时触发</td>
</tr>
<tr>
<td>keyup([[data],function])</td>
<td>键盘按键谈起时触发</td>
</tr>
<tr>
<td rowspan="6">鼠标事件</td>
<td>mouseover([[data],function])</td>
<td>当鼠标指针移入对象时触发</td>
</tr>
<tr>
<td>mouseout([[data],function])</td>
<td>当鼠标指针从元素上离开时触发</td>
</tr>
<tr>
<td>click([[data],function])</td>
<td>当单击元素时触发</td>
</tr>
<tr>
<td>dblclick([[data],function])</td>
<td>当双击元素时触发</td>
</tr>
<tr>
<td>mousedown([[data],function])</td>
<td>当鼠标指针移动到元素上方，并按下鼠标按键时触发</td>
</tr>
<tr>
<td>mouseup([[data],function])</td>
<td>当在元素上放开鼠标按钮时，会被触发</td>
</tr>
<tr>
<td rowspan="2">浏览器事件</td>
<td>scroll([[data],function])</td>
<td>当滚动条发生变化时触发</td>
</tr>
<tr>
<td>resize([[data],function])</td>
<td>当调整浏览器窗口的大小时会被触发</td>
</tr>
</table>
</p>
<p class="one1">
<span class="one2">事件解绑和触发事件</span>
事件解绑：事件解绑使用off()方法，该方法可以移除通过on()方法添加的事件处理程序，语法：1、解除p元素上的所有时间处理程序：$("p").off()；2、解绑p元素上的单击事件：$("p").off("click")；3、解绑事件委派：$("ul").off("click","li")；
如果想要一个元素的事件只触发一次，为元素绑定事件后再解绑会比较麻烦，可以使用one()方法，直接绑定一次性事件。
触发事件：在jQuery中，触发事件有3种方式，第1种是调用事件方法，第2种是通过trigger()方法触发事件，第3种是通过triggerHandler()方法触发事件。
1、事件方法触发事件：jQuery中的事件方法在调用时如果传参数，表示绑定事件，如果不传参数，表示触发事件。例：$(selector).click(function(){})；和$(selector).click()；
2、trigger()方法触发事件：使用trigger()方法可以触发指定事件，语法：：$(selector).trigger("事件名");
3、triggerHandler()方法触发事件：事件方法和trigger()方法在触发事件时，都会执行元素的默认行为，而triggerHandler()方法在触发事件时不会执行元素的默认行为。
<span class="one2">事件对象：</span>当事件被触发时，就会有事件对象的产生，在事件处理函数中可以使用参数来接受事件对象。通过事件对象可以获取和事件相关的信息。也可以阻止事件的默认行为和事件冒泡。
</p>
<ul><li>jQuery其他方法：jQuery提供了$extend()方法和$.ajax()方法，分别用来实现对象成员的扩展和Ajax请求。</li></ul>
<p class="one1">
<span class="one2">$.extend()方法：</span>用来实现对象成员的扩展，可以将一个对象的成员拷贝给另一个对象使用，语法：$.extend([deep],target,object1,[objectN]);其中，target是要拷贝的目标对象，后面可以跟多个对象(object1~objectN),object1表示待拷贝的第一个对象，
objectN表示待拷贝的第N个对象。当不同对象中存在相同的成员名时，后面的对象的成员会覆盖前面的对象的成员。第1个参数deep是可选参数，如果设为true表示深拷贝，默认为false表示浅拷贝。
1、浅拷贝：当一个对象中包含复杂数据结构(如对象)的成员时，浅拷贝会把这个成员的引用地址拷贝给目标对象，相当于"="赋值。
2、深拷贝：深拷贝把obj对象的成员完全复制一份，再添加给目标对象targetObj，如果对象的成员中包含对象，会递归进行复制。
<span class="one2">$.ajax()方法：</span>jQuery提供了$.ajax方法()，用来通过Ajax(Asynchronous JavsScript and XML，异步JavaScript和XML)技术请求服务器，获取服务器的响应结果。Ajax技术用来在浏览器中通过JavaScript向服务器发送请求，接受服务器返回的结果。
注意：Ajax技术具有一定的学习门槛，需要结合服务器才能实现，再具备了服务器搭建、域名的配置、HTTP协议、服务器应用开发、同源策略、数据交互格式(XML、JSON)等基础知识才能更好的理解。这里不多做介绍，之后会单独介绍Ajax技术。
</p>
<h3>ES6</h3>
<p>这里简单介绍一下ES6的特性，有些特性可能介绍的不是太清楚，我手边的资料也有限，不过后续我看笔记的时候若是发现了会完善的。</p>
<ul><li>认识ES6</li></ul>
<p class="one1">
<span class="one2">ES6的发展历史：</span>1994年，ES1被欧洲计算机制造商协会(European Computer Manufactures Association,ECMA)制定出来，目的是为了给当时市场上的客户端脚本语言一个标准。ES1应运而生。在随后的两年里，ES2和ES3相继诞生，使得ES1更加完善。
但随后的ES4变化过于巨大，无法被当时的市场所接受，值得面临被废弃的命运，不过其部分特性依然被ES6所采用，09年，ES5被发布出来，增加了严格模式的新的规范，11年，ES6横空出世，其简洁的语法和完善的规则解决了ES5中的很多问题。同时，
ES系列规则进行了更名的操作，改成了"ES+年份"的格式，这样使得ES系列规则的过渡更加平滑，理解和使用起来更加方便。<span class="one2">注意：ES6是向下兼容，所以老代码也可以正常运行。一般情况下，前端使用ES6，基本上都会使用Babel对ES6语法进行转义，
转成ES5之后，再在浏览器上执行。所以，可以将ES规则理解为一种泛型的语言规范，它能够适配多种客户端脚本语言，JS只是遵循其规范的一种语言。有趣的是，ES1的制定是以当时JS1.1为基准的，可以说两者之间的关系是相互依存。</span>
<span class="one2">为什么要使用ES6：</span>ES6不仅可以是代码更加简洁，可读性更高，同时解决使用JS时经常会遇到的问题。
</p>
<ul><li>ES6的常用语法：这里列出了ES6的排名前10的最佳特性列表。</li></ul>
<p class="one1">
<span class="one2">Default Parameters(默认参数)：</span>在ES6中可以把函数传递的值直接放在参数中。如：var fn1=function(height){var saveHeight=height};ES6中：var fn1=function(heght=50){};
<span class="one2">Template Literals(模板文本)和Multi-line String(多行字符串)：</span>在其它语言中，使用模板和插入值是在字符串里输出变量的一种方式，ES6的字符串模板可以使用反引号(`)包裹，在模板中使用${}包裹变量，无需使用双引号和加号来进行拼接。
特点：1、若${}中包含对象不是字符串，则会被强制转化成字符串。2、反引号中会保留所有空格、缩进和换行。3、反引号中，使用{}和`需要进行"\"进行转义。
<span class="one2">Destructuring Assingnment(解构赋值)：</span>解构是一个比较难掌握的该奶奶，适用的场景比较多，这里简单介绍；1、扩展到对象功能：变量名和属性名相同的情况下，可以省略掉属性名，直接写变量名称即可，如：{data：data,},ES6中{data,}；
2、替换对象：如：[a,b]=[b,a]；
<span class="one2">Enhanced Object Literals(增强的对象文本)：</span>待补充···
<span class="one2">Arrow Functions(箭头函数)：</span>=>就是ES6中新的声明函数的方法，省略了function关键词。注意："=>"可以混合和匹配老的函数一起使用。当在一行代码中用来箭头函数后，就变成了一个表达式，其将暗中返回单个语句的结果。如果结果超过一行，
将需要明确使用return。
<span class="one2">Promise实现：</span>待补充···
<span class="one2">const、let和块级作用域</span>
const、let：在ES6中，使用const和let声明常量和变量的方法与var相关，但是不能像var一样一次声明多个变量，而且声明出来的类别有着很大的不同。const用来声明常量，常量值不可修改，但是可以修改其属性。使用let声明的变量与var声明的变量一样，
可以修改。
块作用域：ES6中，用{}括起的内容成为块级作用域，在其内部可以使用外界力量，同时也声明跟外界变量同名的变量。如果在{}中使用此名称的变量，会使用在{}中声明的变量，对其进行的修改也不会对外界变量产出。一般情况下使用{}来包裹一个函数，
这个函数内容就是一个块级作用域，在这个函数里面，声明新的变量不会暴露到函数外面。
<span class="one2">Class(类)：</span>不做介绍，下篇博客有详细介绍。
<span class="one2">Modules(模块)：</span>待补充···
<span class="one2">Babel进行ES6的转化：</span>大多数的浏览器对JavaScript的版本支持并不是到最新的版本，为了向下兼容，需要将ES6以上的代码进行转换。Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有浏览器环境下执行。
之后的vue博客会介绍依赖的安装。
</p>
<hr size="2px" color="blue" />
<p style="text-align: center;font-size: 16px;font-weight: bold;">未完待续...</p>
<body>
</body>
</html>
css代码：
@charset "utf-8";
/* CSS Document */
.one1 {
white-space: pre;
margin-top:-20px;
margin-bottom:-20px;
}
.one2 {
color: red;
font-style: italic;
font-weight: bold;
}
table{
border: 1px solid #6B3435;
border-collapse: collapse;
}
th,td{border: 1px solid #6B3435;white-space: pre;}
.beforeImg:before {
content: url("arrow.jpg");
}
.beforeImg {
text-indent: 8em;
white-space: pre;
}
.left1 {
float: left;width: 30%;
}
.left2 {
float: left;width: 30%;
}
.left3 {
float: left;width: 40%;
}
.p1 {
padding: 20px 50px;
}
.contain1 {
width: 100%;height: 360px;
}
未完待续，敬请期待...
扫一扫
2647
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
