Tony's Blog

jQuery 基本概念

學習⽬標：學會如何使⽤ jQuery，掌握 jQuery 的常⽤ api，能夠使⽤ jQuery 實現常⾒的效果。

1.1 為什麼要學習 jQuery?

【01-讓div 顯⽰與設置內容.html】

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

1. 查找元素的⽅法太少，⿇煩。 
2. 遍歷偽陣列很⿇煩，通常要嵌套⼀⼤堆的for迴圈。 
3. 有相容性問題。
4. 想要實現簡單的動畫效果，也很⿇煩 
5. 代碼冗餘。

1.2 jQuery 初體驗

【02-讓div顯⽰與設置內容.html】

<script>
$(document).ready(function () {
 $("#btn1").click(function () {
 //隱式反覆運算：偷偷的遍歷，在jQuery中，不需要⼿動寫for迴圈了，會⾃動進⾏遍歷。
 $("div").show(200);
 });
 $("#btn2").click(function () {
 $("div").text("我是內容");
 });
});
</script>

優點總結：

1. 查找元素的⽅法多種多樣，非常靈活
2. 擁有隱式反覆運算特性，因此不再需要⼿寫for迴圈了。
3. 完全沒有相容性問題。
4. 實現動畫非常簡單，⽽且功能更加的強⼤。
5. 代碼簡單、粗暴。

1.3 什麼是 jQuery?

jQuery的官網 http://jquery.com/ jQuery就是⼀個js庫，使⽤jQuery的話，會比使⽤JavaScript更簡單。

js庫：把⼀些常⽤到的⽅法寫到⼀個單獨的js檔，使⽤的時候直接去引⽤這js檔就可以了。（animate.js、 common.js）

我們知道了，jQuery其實就是⼀個js檔，裡⾯封裝了⼀⼤堆的⽅法⽅便我們的開發，其實就是⼀個加強版的 common.js，因此我們學習jQuery，其實就是學習jQuery這個js檔中封裝的⼀⼤堆⽅法。

1.4 jQuery 的版本

官網下載地址：http://jquery.com/download/ jQuery版本有很多，分為 1.x 2.x 3.x

⼤版本分類：

1.x 版本：能夠相容IE678流覽器
2.x 版本：不相容IE678流覽器
1.x 和 2.x 版本 `jquery` 都不再更新版本了，現在只更新 `3.x` 版本。
3.x 版本：不相容 IE678，更加的精簡（在國內不流⾏，因為國內使⽤jQuery的主要⽬的就是相容
IE678）

關於壓縮版和未壓縮版

jquery-1.12.4.min.js:壓縮版本，適⽤於⽣產環境，因為檔比較⼩，去除了注釋、換⾏、空格等東
⻄，但是基本沒有顆閱讀性。
jquery-1.12.4.js:未壓縮版本，適⽤于學習與開發環境，源碼清晰，易閱讀。

1.5 jQuery 的入⼝函數

使⽤jQuery的三個步驟：

1. 引入 `jQuery` 文件
2. 入⼝函數
3. 功能實現

關於jQuery的入⼝函數：

//第⼀種寫法
$(document).ready(function() {
});
//第⼆種寫法
$(function() {
});

jQuery入⼝函數與js入⼝函數的對比

1. JavaScript的入⼝函數要等到⾴⾯中所有資源（包括圖片、檔案）載入完成才開始執⾏。
2. jQuery的入⼝函數只會等待文檔樹載入完成就開始執⾏，並不會等待圖片、檔的載入。

1.6 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)

7$ 符號的實質

$ 符號代表是什麼 ?

$(function () {
});
console.log(typeof $);

結果 function

$ 其實就是⼀個函數，以後⽤$的時候，記得跟⼩括弧 $(); 這函式能作什麼，依參數不同，功能就不同， 有 3 種功能。

1. 入⼝函式。
2. 把 dom 物件轉換成 jquery 物件。
3. ⽤來找物件。

參數不同，功能就不同，3 種⽤法

參數是⼀個 function, 入⼝函數

$(function(){
});

參數可以是⼀個 DOM 對象, 把 DOM 物件轉換成 jquery 物件

$(document).ready(function () {
});
>$(document) 把 `DOM` 的 `document` 物件轉換成 `jQ` 對象, 所以就可⽤ `jQ`
的 `ready()` ⽅法。

參數是⼀個字串(有⼀定格式),⽤來找物件。

$("div"); $("div ul"); $(".current");

2.選擇器

2.1 什麼是 jQuery 選擇器

jQuery 選擇器是 jQuery 為我們提供的⼀組⽅法，讓我們更加⽅便的獲取到⾴⾯中的元素。注意：jQuery 選擇器返回的是 jQuery 物件。

jQuery 選擇器有很多，基本相容了 CSS1 到CSS3 所有的選擇器，並且 jQuery 還添加了很多更加複雜的選擇器。【查看 jQuery 文檔】

jQuery 選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取⼀個元素，你會有很多種⽅法獲取到。所以我們平時真正能⽤到的只是少數的最常⽤的選擇器。

找 jQuery 對象與有許多⽅法。

2.2 基本選擇器

名稱	⽤法	描述
ID選擇器	$("#id");	獲取指定ID的元素
類別選取器	$(".class");	獲取同⼀類class的元素
標籤選擇器	$(“div”);	獲取同⼀類標籤的所有元素
聯集選擇器	$(“div,p,li”);	使⽤逗號分隔，只要符合條件之⼀就可。
交集選擇器	$(“div.redClass”);	獲取class為redClass的div元素

總結：跟 css 的選擇器⽤法⼀模⼀樣。

2.3 層級選擇器

名稱	⽤法	描述
⼦代選擇器	$(“ul>li”);	使⽤ > 號，獲取兒⼦層級的元素，注意，並不會獲取孫⼦層級的元素
後代選擇器	$(“ul li”);	使⽤空格，代表後代選擇器，獲取 ul 下的所有 li 元素，包括孫⼦等

跟 CSS 的選擇器⼀模⼀樣。

2.4 過濾選擇器

這類別選取器都帶冒號:

名稱	⽤法	描述
: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元素中，選擇索引號為偶數的元素

2.5 篩選選擇器(⽅法)

篩選選擇器的功能與過濾選擇器有點類似，但是⽤法不⼀樣，篩選選擇器主要是⽅法。

名稱	⽤法	描述
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();	找上⼀次兄弟

w3school

菜鳥教程

jquery基本入門

jQuery 基本概念

2.選擇器