jQuery=JavaScript+Query 是JavaScript的開發庫，對其的一個功能封裝
一、引入方式
描述：jQuery相當於是一個補丁，外部引入js的方式使用
1. 在線引入
說明：在js中”https://code.jquery.com/jquery-3.1.1.js”
2. 離線引入
說明：下載後導入本地”jquery-3.1.1.min.js”
二、語法
$(選擇器).action()
說明：選擇器中除了this、document不加引號，其他的都要加引號。
三、選擇器
基本選擇器
說明：和CSS的選擇器基本相同（1）元素選擇器：標籤名
（2）id選擇器：#id名
（3）class選擇器：.class名
（4）羣組選擇器：A選擇器,B選擇器
（5）*選擇器：全選（通常用它來去除所有的外邊距）層次選擇器
（1）後代選擇器：M N
說明：選中M後代中所有的N（2）子代選擇器：M>N
說明：選中M子一代中所有的N（3）兄弟選擇器：M~N
說明：選中M之後所有的同級N（4）相鄰選擇器：M+N
說明：選中M之後相鄰的一個N
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>層次選擇器</title>
<script src="https://code.jquery.com/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#first p").css("background-color", "green");
$("#second>p").css("background-color", "gray");
$("#third_h~p").css("background-color", "yellow");
$("#fourth_h+p").css("background-color", "red");
});
</script>
</head>
<body>
<div id="first">
<h5>後代選擇器</h5>
<p>子一代p</p>
<a>子一代a</a>
<div>
<p>子二代p</p>
</div>
</div>
<hr/>
<div id="second">
<h5>子一代選擇器</h5>
<p>子一代p</p>
<a>子一代a</a>
<div>
<p>子二代p</p>
</div>
</div>
<hr/>
<div id="third">
<h5 id="third_h">兄弟選擇器</h5>
<p>子一代p1</p>
<a>子一代a</a>
<div>
<p>子二代p</p>
</div>
<p>子一代p2</p>
</div>
<hr/>
<div id="fourth">
<h5 id="fourth_h">相鄰選擇器</h5>
<p>子一代p1</p>
<p>子一代p2</p>
<a>子一代a</a>
<div>
<p>子二代p</p>
</div>
<p>子一代p3</p>
</div>
</body>
</html>3.屬性選擇器
（1）屬性：$(“a[name]”)
說明：選中含有name屬性的所有a元素
（2）屬性值：$(“a[name=’night_light’]”)
說明：選中name爲指定的值的所有a元素（“！=”表示不等於）
四、文檔就緒
window.onload = function(){}
等價於
$(“document”).ready(function(){})
等價於
$(function(){})
五、獲取內容
- html內容：$(選擇器).html
- 純文本內容：$(選擇器).text
- 表單內容：$(選擇器).val
六、動作
修改內容：$(選擇器).html(“content”)
說明：將選中的元素的內容改爲content修改樣式：
說明：當CSS也設定了樣式的時候，CSS優先（1）$(選擇器).css(“color”,”red”);
說明：當只有一個的時候，中間用逗號隔開（2）$(選擇器).css({“color”:”red”,”font-size”:”50px”});
說明：當有多個樣式時，每一個屬性與屬性值用冒號隔開，屬性之間用逗號隔開，並且要加上大括號3.修改屬性： $(選擇器).attr()
七、常用事件
click（點擊）、dblclick（雙擊）、mouseenter（鼠標移入）、mouseleave（鼠標移出）、keyup（放開按鍵）、submit（提交）、change（改變）、focus（獲取焦點）、blur（失去焦點）
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動作</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#first p").click(function(){/*點擊改變內容*/
$(this).html("<h3>新的內容</h3>");
});
$("#second_p1").click(function(){/*點擊改變顏色*/
$(this).css("color","red");
});
$("#second_p2").click(function(){/*點擊改變樣式*/
$(this).css({"color":"gray","font-size":"50px"});
});
$("#third input").dblclick(function(){/*雙擊改變屬性*/
$(this).attr({"type":"password","readOnly":"true"});
});
});
</script>
</head>
<body>
<div id="first">
<p>點我改變內容</p>
</div>
<hr/>
<div>
<p id="second_p1">點我改變顏色</p>
<p id="second_p2">點我改變樣式</p>
</div>
<hr/>
<div id="third">
<input type="text" value="雙擊改變屬性"></input>
</div>
</body>
</html>
