JQuery版本介紹
First
1.x：兼容ie678,使用最爲廣泛的，官方只做BUG維護，
功能不再新增。因此一般項目來說，使用1.x版本就可以了，
最終版本：1.12.4 (2016年5月20日)
Second
2.x：不兼容ie678，很少有人使用，官方只做BUG維護，
功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，
最終版本：2.2.4 (2016年5月20日)
Third
3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，
一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。
目前該版本是官方主要更新維護的版本。最新版本：3.2.1（2017年3月20日）
JQuery下載：
1.下載jQuery各個版本的頁面：http://www.jb51.net/zt/jquerydown.htm1
百度雲：鏈接：https://pan.baidu.com/s/1Yy30LnOKMVFYfTRuLZ9sPQ 提取碼：00qh
2.官網：https://jquery.com/
3.注意：jquery-xxx.js 與 jquery-xxx.min.js區別：
1. jquery-xxx.js：開發版本。給程序員看的，有良好的縮進和註釋。體積大一些
2. jquery-xxx.min.js：生產版本。程序中使用，沒有縮進。體積小一些。程序加載更快
JQuery快速入門：
①導入min.js文件
②使用（鄙人使用的是3.3.1版本，如果各位看官也想一起學習請使用同版本JQuery）
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery快速入門</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body <div id="div1">div1....</div> <div id="div2">div2....</div> </body> <script> //使用JQuery獲取元素對象 var div1 = $("#div1"); alert(div1.html()) var div2 = $("#div2"); alert(div2.html()); </script> </html>
JQuery對象與JS對象的區別：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery對象和Js對象的轉換</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body><div id="div1">div1....</div>
<div id="div2">div2....</div>
<p id="p1">p1...</p>
<p id="p2">p2...</p></body>
<script>
//1.通過js方式獲取名稱叫div的HTML所有元素對象
var divs = document.getElementsByTagName("div");
alert(divs); //返回object HTMLCollection//對div中所有div進行遍歷，改變內容爲aaa
for(var i=0;i<divs.length;i++){
divs[i].innerHTML="aaa";
}//2.通過Jq方式獲取名稱叫p的HTML所有元素對象
var $ps = $("p");
alert($ps); //返回object對象 兩者都可以當做數組使用//對ps中所有p進行遍歷，改變內容爲bbb
$ps.html("bbb");</script>
</html>
運行結果：
JQuery對象與JS對象的相互轉換：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery對象和Js對象的轉換</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body><div id="div1">div1....</div>
<div id="div2">div2....</div>
<p id="p1">p1...</p>
<p id="p2">p2...</p></body>
<script>
//1.通過js方式獲取名稱叫div的HTML所有元素對象
var divs = document.getElementsByTagName("div");
alert(divs); //返回object HTMLCollection//對div中所有div進行遍歷，改變內容爲aaa
for(var i=0;i<divs.length;i++){
$(divs[i]).html("ccc"); //js---》jq
}//2.通過Jq方式獲取名稱叫p的HTML所有元素對象
var $ps = $("p");
alert($ps); //返回object對象 兩者都可以當做數組使用//對ps中所有p進行遍歷，改變內容爲bbb
//$ps.innerHTML = "bbb"; JQuery對象不能直接當成JS對象使用
$ps[0].innerHTML = "ddd"; //jq----》js
$ps.get(1).innerHTML = "eee";</script>
</html>
運行結果：
JQuery事件綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-JQuery事件綁定</title>
<script src="js/jquery-3.3.1.min.js"></script></head>
<body><div id="div1">div1....</div>
<div id="div2">div2....</div>
<input type="button" value="點我" id="b1">
</body><script>
// 給按鈕添加單擊事件$("#b1").click(function () {
alert("abc");
});
</script>
</html>
運行結果：
JQuery入口事件：
window.onload 和$(function() {}) 的區別
window.onload在一個html中只能定義一次,如果定義多次，將會被最有一次覆蓋所有前面的
$(function)可以定義多次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04-JQuery事件綁定</title> <script src="js/jquery-3.3.1.min.js"></script> <script>$(function () { alert("258"); }) $(function () { alert("0258"); })</script> </head> <body> <div id="div1">div1....</div> <div id="div2">div2....</div> <input type="button" value="點我" id="b1"> </body> </html>
運行結果：
JQuery樣式控制：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-JQuery事件綁定</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>$(function () { //樣式控制 //方式一 $("#div1").css("background-color","red"); //方式二 $("#div2").css("backgroundColor","pink"); })</script>
</head>
<body><div id="div1">div1....</div>
<div id="div2">div2....</div>
<input type="button" value="點我" id="b1">
</body>
</html>
運行結果：
