為什么要學jQuery
使用JS操作DOM的時候东抹，會遇到以下的一些缺點：
1\. 獲取元素的方法太少且長蕊爵，麻煩拥坛。
2\. 遍歷偽數組很麻煩匈仗，通常要嵌套一大堆的for循環(huán)。
3\. 注冊的事件會覆蓋悍手。
4\. 有兼容性問題帘睦。
5\. 實現動畫很麻煩
jQuery初體驗
$(document).ready(function () {
$("#btn1").click(function () {
// 隱式迭代：偷偷的遍歷袍患，在jQuery中，不需要手動寫for循環(huán)了竣付，會自動進行遍歷诡延。
$("div").show(200);
});
$("#btn2").click(function () {
$("div").text("我是內容");
});
});
使用jQuery的優(yōu)點
1\. 獲取元素的方式非常的簡單，而且非常的豐富
2\. jQuery的隱式迭代特性古胆，不再需要書寫for循環(huán)語句肆良。
3\. 使用jQuery完全不用考慮兼容性問題。
4\. jQuery提供了一系列動畫相關的函數逸绎，使用非常方便惹恃。
5\. 代碼簡單、粗暴棺牧。</pre>
什么是jQuery?
jQuery是一個快速的巫糙、輕量的、功能豐富的js庫颊乘。
jQuery的官網 http://jquery.com/
jQuery就是一個js庫参淹，使用jQuery的話，會比使用JavaScript更簡單乏悄。
js庫：把一些常用到的方法寫到一個單獨的js文件浙值，使用的時候直接去引用這js文件就可以了。（animate.js檩小、common.js）
入口函數
入口函數的好處：
1. 等待文檔加載完成开呐，保證能夠獲取到元素
2. 形成了一個沙箱，防止全局變量污染规求。
兩種寫法：
//第一種寫法
$(document).ready(function() {
});
//第二種寫法
$(function() {
});
jQuery入口函數與js入口函數的對比
1. JavaScript的入口函數要等到頁面中所有資源（包括圖片筐付、文件）加載完成才開始執(zhí)行。
2. jQuery的入口函數只會等待文檔樹加載完成就開始執(zhí)行颓哮，并不會等待圖片家妆、文件的加載鸵荠。
jQuery使用步驟
- 引包（引入js文件）
<script src="jquery-1.11.1.js"></script>
- 寫上入口函數
$(document).ready(function () {
});
?
// 或者
$(function(){
});
- 在入口函數內部實現功能
$("#btnShowDiv").click(function () {
$("div").show(1000);
});
jQuery對象與DOM對象(重點)
基本概念：
1. DOM對象：使用JavaScript中的方法獲取頁面中的元素返回的對象就是dom對象冕茅。
2. jQuery對象：jquery對象就是使用jquery的方法獲取頁面中的元素返回的對象就是jQuery對象。
3. jQuery對象其實就是DOM對象的包裝集（包裝了DOM對象的集合（偽數組））
jQuery對象與DOM對象的區(qū)別：
1. DOM對象與jQuery對象的方法不能混用蛹找。
2. DOM對象可以和jQuery對象相互轉化
DOM對象轉換成jQuery對象
var $obj = $(domObj);
// $(document).ready(function(){}); 就是典型的DOM對象轉jQuery對象
jQuery對象轉換成DOM對象：
var $li = $(“l(fā)i”);
//第一種方法（推薦使用）
$li[0]
//第二種方法
$li.get(0)</pre>
選擇器
什么是jQuery選擇器
jQuery選擇器是jQuery為我們提供的一組方法姨伤，讓我們更加方便的獲取到頁面中的元素。注意：jQuery選擇器返回的是jQuery對象庸疾。
jQuery選擇器有很多乍楚，基本兼容了CSS1到CSS3所有的選擇器，并且jQuery還添加了很多更加復雜的選擇器届慈。
jQuery選擇器雖然很多徒溪，但是選擇器之間可以相互替代忿偷，就是說獲取一個元素，你會有很多種方法獲取到臊泌。所以我們平時真正能用到的只是少數的最常用的選擇器鲤桥。
css選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| ID選擇器 | $(“#id”); | 獲取指定ID的元素 |
| 類選擇器 | $(“.class”); | 獲取同一類class的元素 |
| 標簽選擇器 | $(“div”); | 獲取同一類標簽的所有元素 |
| 并集選擇器 | $(“div,p,li”); | 使用逗號分隔，只要符合條件之一就可渠概。 |
| 交集選擇器 | $(“div.redClass”); | 獲取class為redClass的div元素 |
| 子代選擇器 | $(“ul>li”); | 使用>號茶凳，獲取兒子層級的元素，注意播揪，并不會獲取孫子層級的元素 |
| 后代選擇器 | $(“ul li”); | 使用空格贮喧，代表后代選擇器，獲取ul下的所有l(wèi)i元素猪狈，包括孫子等 |
過濾選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| :eq（index） | $(“l(fā)i:eq(2)”).css(“color”, ”red”); | 獲取到的li元素中箱沦，選擇索引號為2的元素，索引號index從0開始雇庙。 |
| :odd | $(“l(fā)i:odd”).css(“color”, ”red”); | 獲取到的li元素中饱普，選擇索引號為奇數的元素 |
| :even | $(“l(fā)i:even”).css(“color”, ”red”); | 獲取到的li元素中，選擇索引號為偶數的元素 |
| :first | $(“l(fā)i:first”).css(“color”, ”red”); | 獲取到的li元素中的第一個 |
| :last | $(“l(fā)i:last”).css(“color”, ”red”); | 獲取到的li元素中的最后一個 |
篩選選擇器(方法)
| 名稱 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(“ul”).children(“l(fā)i”) | 獲取當前元素的所有子元素中的li元素 |
| find(selector) | $(“ul”).find(“l(fā)i”); | 獲取當前元素中的后代元素中的li元素 |
| siblings(selector) | $(“#first”).siblings(“l(fā)i”); | 查找兄弟節(jié)點状共，不包括自己本身套耕。 |
| parent() | $(“#first”).parent(); | 查找父親 |
| eq(index) | $(“l(fā)i”).eq(2); | 相當于$(“l(fā)i:eq(2)”),index從0開始 |
| next() | $(“l(fā)i”).next() | 找下一個兄弟 |
| prev() | $(“l(fā)i”).prev() | 找上一次兄弟 |
其他補充
mouseover 與 mouseenter
- mouseover 和 mouseoverenter 都有鼠標經過的意思，但是在注冊鼠標經過事件的時候峡继，推薦使mouseenter
mouseover與mouseout是一對事件冯袍，當鼠標經過當前元素或者當前元素的子元素的時候，mouseover事件都會觸發(fā)【事件冒泡】碾牌。
mouseenter 與mouseleave是一對事件康愤，只有當鼠標經過當前元素時，事件會觸發(fā)舶吗，鼠標經過子元素征冷，mousenter事件是不會觸發(fā)的。
index方法
-
index()方法返回的是當前元素在所有兄弟元素里面的索引誓琼。
<ul>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
<li><a href="#">我是鏈接</a></li>
</ul>
當碰到這種結構的時候检激，推薦給li注冊事件，這樣通過index方法才能獲取到正確的索引值腹侣。
區(qū)分jQuery與Javascript
JavaScript是一門編程語言叔收，jQuery僅僅是用JavaScript實現的一個JavaScript庫，目的是簡化我們的開發(fā)傲隶。
