為什么要學習jQuery？
使用javascript開發程序中，有許多的缺點：
1. 查找元素的方法太少，麻煩，
2. 遍歷偽陣列很麻煩，通常要嵌套一大堆的for回圈，
3. 有兼容性問題，
4. 想要實作簡單的影片效果，也很麻煩
5. 代碼冗余，
jQuery初體驗
讓div顯示與設定內容：
$(document).ready(function () {
$("#btn1").click(function () {
//隱式迭代：偷偷的遍歷，在jQuery中，不需要手動寫for回圈了，會自動進行遍歷，
$("div").show(200);
});
$("#btn2").click(function () {
$("div").text("我是內容");
});
});
優點總結：
1. 查找元素的方法多種多樣，非常靈活
2. 擁有隱式迭代特性，因此不再需要手寫for回圈了，
3. 完全沒有兼容性問題，
4. 實作影片非常簡單，而且功能更加的強大，
5. 代碼簡單、粗暴，
什么是jQuery?
jQuery的官網 http://jquery.com/
jQuery就是一個js庫，使用jQuery的話，會比使用JavaScript更簡單，
js庫：把一些常用到的方法寫到一個單獨的js檔案，使用的時候直接去參考這js檔案就可以了，（animate.js、common.js）
jQuery其實就是一個js檔案，里面封裝了一大堆的方法方便我們的開發，其實就是一個加強版的common.js，因此學習jQuery，其實就是學習jQuery這個js檔案中封裝的一大堆方法，
jQuery的版本
官網下載地址：http://jquery.com/download/
jQuery版本有很多，分為1.x 2.x 3.x
大版本分類：
1.x版本：能夠兼容IE678瀏覽器
2.x版本：不兼容IE678瀏覽器
3.x和2.x版本jquery都不再更新版本了，現在只更新3.x版本，
4.x版本：不兼容IE678，更加的精簡（在國內不流行，因為國內使用jQuery的主要目的就是兼容IE678）
關于壓縮版和未壓縮版
jquery-1.12.4.min.js:壓縮版本，適用于生產環境，因為檔案比較小，去除了注釋、換行、空格等東西，但是基本沒有顆閱讀性，
jquery-1.12.4.js:未壓縮版本，適用于學習與開發環境，原始碼清晰，易閱讀，
jQuery的入口函式
使用jQuery的三個步驟：
1. 引入jQuery檔案
2. 入口函式
3. 功能實作
關于jQuery的入口函式：
//第一種寫法
$(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物件的集合（偽陣列））
4. 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選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，你會有很多種方法獲取到，所以我們平時真正能用到的只是少數的最常用的選擇器，
基本選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| ID選擇器 | $(“#id”); | 獲取指定ID的元素 |
| 類選擇器 | $(“.class”); | 獲取同一類class的元素 |
| 標簽選擇器 | $(“div”); | 獲取同一類標簽的所有元素 |
| 并集選擇器 | $(“div,p,li”); | 使用逗號分隔，只要符合條件之一就可， |
| 交集選擇器 | $(“div.redClass”); | 獲取class為redClass的div元素 |
總結：跟css的選擇器用法一模一樣，
層級選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| 子代選擇器 | $(“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元素中，選擇索引號為偶數的元素 |
篩選選擇器(方法)
篩選選擇器的功能與過濾選擇器有點類似，但是用法不一樣，篩選選擇器主要是方法，
| 名稱 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(“ul”).children(“li”) | 相當于$(“ul>li”)，子類選擇器 |
| find(selector) | $(“ul”).find(“li”); | 相當于$(“ul 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() | 找上一次兄弟 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/160538.html
標籤：JavaScript
上一篇：ES6 中變數的解構賦值