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>
