jQuery 事件机制
（1）、注册事件
bind() on() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数
$("#header1").bind({
mouseover(){
$(this).css("background-color","blue");
},
mouseout(){
$(this).css("background-color","black");
}
})
$("p").on("click",function(){ alert("段落被点击了。"); });
bink() on() 两种方法，基本差不多
委托事件
delegate()
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
$("div").delegate("p","click",function(){
$("p").css("background-color","pink");
});
事件对象 event
event 对象有以下属性
type:事件类型，比如click
which:触发该事件的鼠标按钮或键盘的键
target: 事件发生的初始对象
data:传入事件对象的数据
pageX: 事件发生时，鼠标位置的水平坐标（相对于浏览器）
pageY: 事件发生时，鼠标位置的垂直坐标（相对于浏览器）
clientX: 事件发生时，鼠标位置的水平坐标（相对于可视窗口）
clientY：事件发生时，鼠标位置的垂直坐标（相对可是窗口）
each()方法 为每个匹配元素规定要运行的函数
jQuery.each()函数用于遍历指定的对象和数组
var arr = [1,2,3,4]
$.each(arr,function(index,item){
console.log(`我是第${index+1}元素，值为${item}`)
})
var obj = {
name:"lisi",
age:15
eat(){
return 1;
}}
$.each(obj,(key,value)=>{
console.log(`${key};${value}`);
})
jQuery 对HTML的设置与捕获
1.html() 设置或返回元素的内容（可以解析富文本）
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});（2）text()
设置或返回所选元素的文本内容 (不解析富文本)
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
（3）val()
设置或返回表单字段的值
$("#btn1").click(function(){
alert("值为: " + $("#test").val());
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
(4) text()、html() 以及 val() 的回调函数
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。
然后以函数新值返回您希望使用的字符串。
$("p").html(function(i,v){
console.log(i); //被选元素列表中当前元素的下标
console.log(v);//它自己所对应的值
})
（5）attr() prop()
用于获取和返回属性值
prop() :具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled
attr() : 可以返回（设置）元素的原生属性，还可以返回（设置）自定义属性。
jQuery 对HTML的页面尺寸操作
（1）width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
（2）innerWidth() 和 innerHeight()方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
（3）outerWidth() 和outerHeight()
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
（4）outerWidth(true) 和outerHeight(true)
outerWidth(true) 方法返回元素的宽度（包括外边距）。
outerHeight(true) 方法返回元素的高度（包括外边距）。
（5）scrollTop() 和 scrollLeft()
scrollTop() 设置或者返回滚动条被卷去的元素的高度
scrollLeft() 设置或者返回滚动条被卷去的元素的宽度
jQuery添加和删除元素
（1）append() 在被选元素的结尾插入内容
$("ol").append("<li>追加列表项</li>")
（2）prepend() 在元素的开头插入内容
这两种是添加 子元素
（3）after() 在被选元素之后插入内容
$("img").after("<b>之前</b>")
before() 在被选元素之前插入内容
这两个是添加兄弟元素
删除元素和内容
remove() 删除被选元素（及其子元素）
empty() 删除被选元素的子元素
jquery.lazyload.js 的使用
懒加载
<script src="../js/jquery.lazyload.min.js"></script>
<img alt="" class="lazy" width="640" height="480" data-original="images/load.jpg" style="margin-top:1000px;" />
$(function() {
$("img.lazy").lazyload({
event : "sporty"
});
});
//当指定的元素已加载时，会发生 load() 事件
$(window).bind("load", function() {
var timeout = setTimeout(function() {
//trigger() 方法触发被选元素上指定的事件以及事件的默认行为
$("img.lazy").trigger("sporty")
}, 5000);
});
jquery.ui.js的使用
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。
，您需要在页面中引用这三个文件，以便使用 jQuery UI 的窗体小部件和交互部件：
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css" /><script src="js/jquery-1.11.1.min.js"></script><script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
ECharts的使用丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
