jquery基礎知識基本使用概述（1）
jQuery基本介紹
為什麽要學jQuery
【01-讓div顯示與設置內容.html】
使用JS操作DOM的時候，會遇到以下的一些缺點：
//1. 獲取元素的方法太少且長，麻煩。
//2. 遍歷偽數組很麻煩，通常要嵌套一大堆的for循環。
//3. 註冊的事件會覆蓋。
//4. 有兼容性問題。
//5. 實現動畫很麻煩
初體驗
【02-讓div顯示與設置內容.html】
$(document).ready(function () {
$("#btn1").click(function () {
//隱式叠代：偷偷的遍歷，在jQuery中，不需要手動寫for循環了，會自動進行遍歷。
$("div").show(200);
});
$("#btn2").click(function () {
$("div").text("我是內容");
});
});
使用jQuery的優點
//1. 獲取元素的方式非常的簡單，而且非常的豐富
//2. jQuery的隱式叠代特性，不再需要書寫for循環語句。
//3. 使用jQuery完全不用考慮兼容性問題。
//4. jQuery提供了一系列動畫相關的函數，使用非常方便。
//5. 代碼簡單、粗暴。
沒有對比，就沒有傷害，有了對比，處處戳中要害。
什麽是jQuery?
jQuery是一個快速的、輕量的、功能豐富的js庫。
jQuery的官網 http://jquery.com/
jQuery就是一個js庫，使用jQuery的話，會比使用JavaScript更簡單。
js庫：把一些常用到的方法寫到一個單獨的js文件，使用的時候直接去引用這js文件就可以了。（animate.js、common.js）
使用步驟
引包（引入js文件）
<script src="jquery-1.11.1.js"></script>
入口函數
$(document).ready(function () {
});
?
$(function(){
});
功能實現
$("#btnShowDiv").click(function () {
$("div").show(1000);
});
版本介紹
官網下載地址：http://jquery.com/download/
jQuery版本有很多，分為1.x 2.x 3.x
大版本分類：
1.x版本：能夠兼容IE678瀏覽器（最終版本1.12.4）
2.x版本：不兼容IE678瀏覽器（最終版本2.2.4）
?
//jQuery目前正在更新的版本
3.x版本：不兼容IE678，更加的精簡（在國內不流行，因為國內使用jQuery的主要目的就是兼容IE678）,3.x版本只是在原來的基礎上增加了一些新的特性。
關於壓縮版和未壓縮版
jquery-1.12.4.min.js:壓縮版本，適用於生產環境，因為文件比較小，去除了註釋、換行、空格等東西，但是基本沒有顆閱讀性。
jquery-1.12.4.js:未壓縮版本，適用於學習與開發環境，源碼清晰，易閱讀。
入口函數
入口函數的好處：
1. 等待文檔加載完成，保證能夠獲取到元素
2. 形成了一個沙箱，防止全局變量汙染。
兩種寫法：
//第一種寫法
$(document).ready(function() {
});
//第二種寫法
$(function() {
});
jQuery入口函數與js入口函數的對比
1. JavaScript的入口函數要等到頁面中所有資源（包括圖片、文件）加載完成才開始執行。
2. jQuery的入口函數只會等待文檔樹加載完成就開始執行，並不會等待圖片、文件的加載。
jQuery對象與DOM對象(重點)
基本概念：
1. DOM對象：使用JavaScript中的方法獲取頁面中的元素返回的對象就是dom對象。
2. jQuery對象：jquery對象就是使用jquery的方法獲取頁面中的元素返回的對象就是jQuery對象。
3. jQuery對象其實就是DOM對象的包裝集（包裝了DOM對象的集合（偽數組））
jQuery對象與DOM對象的區別：
1. DOM對象與jQuery對象的方法不能混用。
2. DOM對象可以和jQuery對象相互轉化
DOM對象轉換成jQuery對象：【聯想記憶：花錢】
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM對象轉jQuery對象
jQuery對象轉換成DOM對象：
var $li = $(“li”);
//第一種方法（推薦使用）
$li[0]
//第二種方法
$li.get(0)
選擇器
什麽是jQuery選擇器
jQuery選擇器是jQuery為我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。註意：jQuery選擇器返回的是jQuery對象。
jQuery選擇器有很多，基本兼容了CSS1到CSS3所有的選擇器，並且jQuery還添加了很多更加復雜的選擇器。【查看jQuery文檔】
jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，你會有很多種方法獲取到。所以我們平時真正能用到的只是少數的最常用的選擇器。
css選擇器
jQuery完全兼容css選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| ID選擇器 | $(“#id”); | 獲取指定ID的元素 |
| 類選擇器 | $(“.class”); | 獲取同一類class的元素 |
| 標簽選擇器 | $(“div”); | 獲取同一類標簽的所有元素 |
| 並集選擇器 | $(“div,p,li”); | 使用逗號分隔，只要符合條件之一就可。 |
| 交集選擇器 | $(“div.redClass”); | 獲取class為redClass的div元素 |
| 子代選擇器 | $(“ul>li”); | 使用>號，獲取兒子層級的元素，註意，並不會獲取孫子層級的元素 |
| 後代選擇器 | $(“ul li”); | 使用空格，代表後代選擇器，獲取ul下的所有li元素，包括孫子等 |
跟CSS的選擇器一模一樣。
過濾選擇器
這類選擇器都帶冒號:
| 名稱 | 用法 | 描述 |
|---|---|---|
| :eq（index） | $(“li:eq(2)”).css(“color”, ”red”); | 獲取到的li元素中，選擇索引號為2的元素，索引號index從0開始。 |
| :odd | $(“li:odd”).css(“color”, ”red”); | 獲取到的li元素中，選擇索引號為奇數的元素 |
| :even | $(“li:even”).css(“color”, ”red”); | 獲取到的li元素中，選擇索引號為偶數的元素 |
| :first | $(“li:first”).css(“color”, ”red”); | 獲取到的li元素中的第一個 |
| :last | $(“li:last”).css(“color”, ”red”); | 獲取到的li元素中的最後一個 |
篩選選擇器(方法)
篩選選擇器的功能與過濾選擇器有點類似，但是用法不一樣，
篩選選擇器主要是方法。
| 名稱 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(“ul”).children(“li”) | 獲取當前元素的所有子元素中的li元素 |
| find(selector) | $(“ul”).find(“li”); | 獲取當前元素中的後代元素中的li元素 |
| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟節點，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找父親 |
| eq(index) | $(“li”).eq(2); | 相當於$(“li:eq(2)”),index從0開始 |
| next() | $(“li”).next() | 找下一個兄弟 |
| prev() | $(“li”).prev() | 找上一次兄弟 |
其他補充
mouseover與mouseenter
mouseover和mouseoverenter都有鼠標經過的意思，但是在註冊鼠標經過事件的時候，推薦使用
mouseenter
mouseenter 與 mouseover 的不同
-
mouseover與mouseout是一對事件，當鼠標經過當前元素或者當前元素的子元素的時候，mouseover事件都會觸發【事件冒泡】。
-
mouseenter與mouseleave是一對事件，只有當鼠標經過當前元素時，事件會觸發，鼠標經過子元素，mousenter事件是不會觸發的。
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方法才能獲取到正確的索引值。
jquery基礎知識基本使用概述（1）