前端基礎入門五（掌握jQuery的常用api，實現動態效果）

jQuery基本概念

學習目標：學會如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實現常見的效果。

---

為什麼要學習jQuery？

【01-讓div顯示與設定內容.html】

使用javascript開發過程中，有許多的缺點：

1\. 查詢元素的方法太少，麻煩。
2\. 遍歷偽陣列很麻煩，通常要巢狀一大堆的for迴圈。
3\. 有相容性問題。
4\. 想要實現簡單的動畫效果，也很麻煩
5\. 程式碼冗餘。

自己是個做了幾年開發的老碼農，希望本文對你有用！ 這裡推薦一下我的前端學習交流圈：767273102 ，裡面都是學習前端的，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

點選： 加入

---

jQuery初體驗

【02-讓div顯示與設定內容.html】

$(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的入口函式

使用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選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，你會有很多種方法獲取到。所以我們平時真正能用到的只是少數的最常用的選擇器。

---

基本選擇器

總結：跟css的選擇器用法一模一樣。

---

層級選擇器

跟CSS的選擇器一模一樣。

---

過濾選擇器

---

篩選選擇器(方法)

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2645004/，如需轉載，請註明出處，否則將追究法律責任。