1.jQuery 事件机制
1.1 注册事件
bind()、on()方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数
$("p").on({"click": function () {alert("点击了")},"mouseenter": function () {alert("移动了")}})1.2 委托事件
delegate()方法为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
$("div").delegate("span", "click", function () {$("span").css("background-color", "pink")
})1.3 事件对象event
type:事件类型
which:触发该事件的鼠标按钮或键盘的键
target:事件发生的初始对象
data:传入事件对象的数据
pageX\pageY：事件发生时，鼠标位置的水平坐标\垂直坐标
1.4 each()方法
each()方法为每个匹配元素规定要运行的函数
jQuery.each()函数用于遍历指定的对象和数组
$.each(数组或对象，回调函数)
var arr = [1, 2, 3, 4]
$.each(arr, function (index, item) {console.log(index, item);
})var obj = {name: "zs",age: 18
}
$.each(obj, function (key, value) {console.log(key, value);
})2.jQuery对HTML的设置与捕获
2.1 html()---设置或返回所选元素的内容
2.2 text()---设置或返回所选元素的文本内容
2.3 val()---设置或返回表单字段的值
2.4 attr()、prop()---获取和返回属性值
//html()
$("#btn2").click(function () {console.log($("p").html());
})
$("#btn5").click(function () {$("p").html("<span>11111111</span>")
})//text()
$("#btn1").click(function () {console.log($("p").text());
})
$("#btn4").click(function () {$("p").text("1111111111")
})//val()
$("#btn3").click(function () {console.log($("#btn3").val());$("#btn3").val("666")
})
//attr()
$("#btn7").click(function () {$("p").attr("class", "two")console.log($("a").attr("href", "www.jd.com"));
})
3.jQuery对Html的页面尺寸操作
3.1width() height()
设置或返回元素的宽度和高度，不包括边框和内外边距
3.2innerWidth() innerHeight()
返回元素的高度，包括内边距
3.3outerWidth() outerHeight()
返回元素的高度，包括内边距和边框
3.4scrollTop() scrollLeft()
设置或返回滚动条被卷出去的元素的高度和宽度
4.jQuery添加元素和删除元素
4.1append()
在被选元素的结尾插入内容（仍然在该元素的内部）
4.2prepend()
在被选元素的开头插入内容（仍然在该元素的内部）
4.3after() before()
after()在被选元素之后插入内容
before()在被选元素之前插入内容
4.4删除元素、内容
remove()---删除被选元素及其子元素（自己和子元素都删除了，本身已删除，所以不占位置）
empty()---从被选元素中删除子元素（只是把子元素删除掉了，本身没有删除，所以本身占位）
5.jquery.color.js的使用
（1）引入JS文件
jquery中的animate不支持变色，但是使用jquery.color.js，就可以变色，.color.js依赖于jquery
所以需要先引入jquery.js
//引入
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/jquery.color.js"></script><script>$("#btn").on("click", function () {$("div").animate({ "width": 200, "background-color": "red" }, 2000, function () {alert("动画结束")})})
</script>6.jquery.lazyload.js的使用
懒加载原理：浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。它可以延迟加载长页面中的图片在浏览器可视区域外，图片不会被载入，直到用户将页面滚动到它们所在的位置。
//引入文件
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/jquery.lazyload.js"></script><script>$("img").lazyload()
</script>7.jquery.ui.js的使用
//引入
<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>//操作日期选择器 datepicker()
<input type="text"name="date"id="date"/>
<script$("#date").datepicker();
</script>
