1.什么是jQuery?
jQuery就是一個(gè)js庫，使用jQuery的話，會(huì)比使用JavaScript更簡(jiǎn)單抢野。
js庫：把一些常用到的方法寫到一個(gè)單獨(dú)的js文件鸣皂，使用的時(shí)候直接去引用這js文件就可以了。（animate.js垒手、common.js）
2.讓div顯示與設(shè)置內(nèi)容.html
$(document).ready(function () {
$("#btn1").click(function () {
//隱式迭代：偷偷的遍歷，在jQuery中，不需要手動(dòng)寫for循環(huán)了梆暮，會(huì)自動(dòng)進(jìn)行遍歷。
$("div").show(200);
});
$("#btn2").click(function () {
$("div").text("我是內(nèi)容");
});
});
3.優(yōu)點(diǎn)總結(jié)：
- 查找元素的方法多種多樣绍昂，非常靈活
- 擁有隱式迭代特性啦粹，因此不再需要手寫for循環(huán)了。
- 完全沒有兼容性問題窘游。
- 實(shí)現(xiàn)動(dòng)畫非常簡(jiǎn)單唠椭，而且功能更加的強(qiáng)大。
- 代碼簡(jiǎn)單忍饰、粗暴贪嫂。
4.jQuery的入口函數(shù)
1. 引入jQuery文件
2. 入口函數(shù)
3. 功能實(shí)現(xiàn)
5.關(guān)于jQuery的入口函數(shù)：
//第一種寫法
$(document).ready(function() {
});
//第二種寫法
$(function() {
});
6.jQuery入口函數(shù)與js入口函數(shù)的對(duì)比
- JavaScript的入口函數(shù)要等到頁面中所有資源（包括圖片、文件）加載完成才開始執(zhí)行艾蓝。
- jQuery的入口函數(shù)只會(huì)等待文檔樹加載完成就開始執(zhí)行撩荣，并不會(huì)等待圖片铣揉、文件的加載。
7.jQuery對(duì)象與DOM對(duì)象的區(qū)別（重點(diǎn)）
- DOM對(duì)象：使用JavaScript中的方法獲取頁面中的元素返回的對(duì)象就是dom對(duì)象餐曹。
- jQuery對(duì)象：jquery對(duì)象就是使用jquery的方法獲取頁面中的元素返回的對(duì)象就是jQuery對(duì)象逛拱。
- jQuery對(duì)象其實(shí)就是DOM對(duì)象的包裝集（包裝了DOM對(duì)象的集合（偽數(shù)組））
- DOM對(duì)象與jQuery對(duì)象的方法不能混用。
?4.1 ?DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象：【聯(lián)想記憶：花錢】
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM對(duì)象轉(zhuǎn)jQuery對(duì)象
? ? 4.2? jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象：
var $li = $(“l(fā)i”);
//第一種方法（推薦使用）
$li[0]
//第二種方法
$li.get(0)
【練習(xí)：隔行變色案例.html】
選擇器
?? 什么是jQuery選擇器
?? 1.jQuery選擇器是jQuery為我們提供的一組方法台猴，讓我們更加方便的獲取到頁面中的元素朽合。注意：jQuery選擇器返回的是jQuery對(duì)象。
?? 2.jQuery選擇器有很多饱狂，基本兼容了CSS1到CSS3所有的選擇器曹步，并且jQuery還添加了很多更加復(fù)雜的選擇器⌒莼洌【查看jQuery文檔】
?? 3.jQuery選擇器雖然很多讲婚，但是選擇器之間可以相互替代，就是說獲取一個(gè)元素俊柔，你會(huì)有很多種方法獲取到筹麸。所以我們平時(shí)真正能用到的只是少數(shù)的最常用的選擇器。
??基本選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| ID選擇器 | $(“#id”); | 獲取指定ID的元素 |
| 類選擇器 | $(“.class”); | 獲取同一類class的元素 |
| 標(biāo)簽選擇器 | $(“div”); | 獲取同一類標(biāo)簽的所有元素 |
| 并集選擇器 | $(“div,p,li”); | 使用逗號(hào)分隔雏婶，只要符合條件之一就可 |
| 交集選擇器 | $(“div.redClass”); | 獲取class為redClass的div元素 |
總結(jié)：跟css的選擇器用法一模一樣物赶。
?? 層級(jí)選擇器
| 名稱 | 用法 | 描述 |
|---|---|---|
| 子代選擇器 | $(“ul>li”); | 使用>號(hào)，獲取兒子層級(jí)的元素留晚，注意酵紫，并不會(huì)獲取孫子層級(jí)的元素。 |
| 后代選擇器 | $(“ul li”); | 使用空格错维，代表后代選擇器奖地，獲取ul下的所有l(wèi)i元素，包括孫子等 |
?? 過濾選擇器
?? 這類選擇器都帶冒號(hào):
| 名稱 | 用法 | 描述 |
|---|---|---|
| :eq (index) | $(“l(fā)i:eq(2)”).css(“color”, ”red”); | 獲取到的li元素中赋焕，選擇索引號(hào)為2的元素鹉动，索引號(hào)index從0開始。 |
| :odd | $(“l(fā)i:odd”).css(“color”, ”red”); | 獲取到的li元素中宏邮，選擇索引號(hào)為奇數(shù)的元素 |
| :even | $(“l(fā)i:even”).css(“color”, ”red”); | 獲取到的li元素中泽示，選擇索引號(hào)為偶數(shù)的元素 |
?? 篩選選擇器(方法)
?? 篩選選擇器的功能與過濾選擇器有點(diǎn)類似，但是用法不一樣蜜氨，篩選選擇器主要是方法械筛。
| 名稱 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(“ul”).children(“l(fā)i”) | 相當(dāng)于$(“ul>li”)，子類選擇器 |
| find(selector) | $(“ul”).find(“l(fā)i”); | 相當(dāng)于$(“ul li”),后代選擇器 |
| siblings(selector) | $(“#first”).siblings(“l(fā)i”); | 查找兄弟節(jié)點(diǎn)飒炎，不包括自己本身埋哟。 |
| parent() | $(“#first”).parent(); | 查找父親 |
| eq(index) | $(“l(fā)i”).eq(2); | 相當(dāng)于$(“l(fā)i:eq(2)”),index從0開始 |
| next() | $(“l(fā)i”).next() | 找下一個(gè)兄弟 |
| prev() | $(“l(fā)i”).prev() | 找上一次兄弟 |
【案例：下拉菜單】this+children+mouseenter+mouseleave
【案例：突出展示】siblings+find
【案例：手風(fēng)琴】next+parent
【案例：淘寶精品】index+eq
