一愉粤、初始jquery

1. 什么是jquery

jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架拿撩。

jQuery設(shè)計(jì)的宗旨是“write Less衣厘，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情影暴。

它封裝JavaScript常用的功能代碼错邦，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作型宙、事件處理撬呢、動(dòng)畫設(shè)計(jì)和Ajax交互。

可以將jQuery庫下載到本地妆兑，然后引入本地的jQuery庫魂拦。

可以直接引入外網(wǎng)資源

2.實(shí)例：操作dom元素，給它添加點(diǎn)內(nèi)容搁嗓，加背景色芯勘，加顏色，加邊框谱姓，加點(diǎn)擊事件

原生js：

jquery：

2.jQuery的方法鏈?zhǔn)秸{(diào)用的原理

3. jquery選擇器

全局選擇器

標(biāo)簽選擇器

類選擇器

id選擇器借尿，注意：如果id值相同，只能獲取第一個(gè)元素

后代選擇題

屬性選擇器

?在css中選擇器怎么寫屉来，在jQuery中選擇器就怎么寫

?jQuery就是通過各種選擇器路翻，獲取對(duì)應(yīng)的dom元素，如果獲取的是多個(gè)dom元素茄靠，不需要遍歷元素就可以操作元素茂契。

4. jquery獲取元素的方法

使用jquery選擇器返回的對(duì)象是一個(gè)集合

prev()方法，返回同級(jí)的上一個(gè)元素

prevAll()方法慨绳，返回同級(jí)的上面所有元素

注意：方法里面還可以繼續(xù)添加選擇器掉冶，針對(duì)指定的元素

next()方法，返回同級(jí)的下一個(gè)元素

相鄰的下一個(gè)li元素

nextAll()方法脐雪，返回同級(jí)的下面所有元素

相鄰的下面所有l(wèi)i元素

?siblings()方法厌小，返回同級(jí)的所有元素

parent()方法，獲取父級(jí)元素

children()方法战秋，獲取所有的子元素

?parents()方法璧亚，默認(rèn)是獲取所有的父級(jí)元素，所有在使用該方法時(shí)脂信，需要添加選擇器

$是jQuery的簡(jiǎn)寫

children()方法癣蟋，返回所有的子元素

?find()方法，返回所有的后代元素

first()方法狰闪，返回第一個(gè)元素

last()方法疯搅，返回最后一個(gè)元素

eq(索引)方法，返回指定位置的元素埋泵，注意：位置從0開始幔欧。

5. 顯示和隱藏方法

顯示按鈕點(diǎn)擊事件

show()方法，顯示元素

show()方法的第一個(gè)參數(shù)是顯示時(shí)間：fast(快速),slow(慢速),normal(正常速度),也可以傳遞具體的毫秒數(shù)

show()方法的第二個(gè)參數(shù)是顯示后的回調(diào)函數(shù)：比如顯示后，發(fā)生請(qǐng)求獲取數(shù)據(jù)

隱藏按鈕點(diǎn)擊事件

顯示/隱藏按鈕點(diǎn)擊事件

下拉顯示按鈕點(diǎn)擊事件

上拉隱藏按鈕點(diǎn)擊事件

下拉顯示/上拉隱藏

淡入

淡出

淡入/淡出

?顯示

隱藏

6.js對(duì)象和jquery對(duì)象之間的轉(zhuǎn)換

獲取dom元素琐馆，返回一個(gè)js對(duì)象

獲取dom元素规阀，返回一個(gè)jq對(duì)象

將js對(duì)象轉(zhuǎn)為jq對(duì)象的方式：直接通過$()工廠函數(shù)

?jq對(duì)象恒序，返回的是一個(gè)集合瘦麸，通過集合的下標(biāo)，返回的就是js對(duì)象歧胁。

使用get()方法滋饲，也可以通過集合的下標(biāo)，返回一個(gè)指定的js對(duì)象

二喊巍、jquery-ajax

1. 選項(xiàng)卡

?方式一:原生js

? ? ??獲取所有的標(biāo)題li

? ? ? ?獲取所有的內(nèi)容li

方式二:jQuery

2. get&post

get請(qǐng)求

get請(qǐng)求屠缭，需要傳參數(shù)

post請(qǐng)求

3. 制作導(dǎo)航條

$('<標(biāo)簽名/>') 是jquery創(chuàng)建標(biāo)簽的方式

html()方法 ==> js中的innerHTML屬性

text()方法 ==> js中的innerText屬性

append()方法 ==> js中的appendChild()方法

加載菜單的方法

4. 三級(jí)菜單

5. 下拉框省市聯(lián)動(dòng)效果

獲取省份信息

省份下拉框選項(xiàng)改變后事件

城市下拉框選項(xiàng)改變后事件

6.ajax

get和post方法的四個(gè)參數(shù)分別是：地址，參數(shù)崭参，回調(diào)函數(shù)呵曹，返回?cái)?shù)據(jù)的格式

返回?cái)?shù)據(jù)的格式默認(rèn)是json。參數(shù)可以不傳何暮。

$.get('地址','參數(shù)','回調(diào)函數(shù)','json/xml/text/html')

$.post('地址','參數(shù)','回調(diào)函數(shù)','json/xml/text/html')

ajax方法奄喂，是發(fā)送請(qǐng)求的通用方法，參數(shù)是一個(gè)配置對(duì)象

通過配置對(duì)象的屬性海洼，設(shè)置請(qǐng)求的類型跨新，參數(shù)，回調(diào)函數(shù)等等坏逢。

三域帐、經(jīng)典案例

輪播圖效果

輪播圖的圖片數(shù)組

定義定時(shí)器變量

輪播索引

循環(huán)圖片數(shù)組，生成小點(diǎn)

調(diào)用輪播方法

調(diào)用開始輪播方法

鼠標(biāo)進(jìn)入輪播區(qū)域

鼠標(biāo)離開輪播區(qū)域????

小點(diǎn)注冊(cè)點(diǎn)擊事件

左箭頭點(diǎn)擊事件

右箭頭點(diǎn)擊事件

開始輪播方法

輪播方法

四是整、jquery方法

1. 內(nèi)部插入方法

獲取ul對(duì)象

創(chuàng)建一個(gè)li對(duì)象

append()方法肖揣，用于在內(nèi)部添加成員，方式是：父級(jí).append(子級(jí))

appendTo()方法浮入，用于在內(nèi)部添加成員龙优，方式是：子級(jí)appendTo(父級(jí))

?prepend()方法，表示在上面添加

2. 外部插入方法

?after()方法舵盈，在元素的外面的下面插入元素

?insertAfter()方法陋率，跟after()方法類似，只是兩個(gè)元素的位置相反

before()和insertBefore()方法秽晚，用于在元素的上面插入元素

3. 擴(kuò)展方法

?extend()方法瓦糟，如果只傳一個(gè)參數(shù)，是給jquery自身擴(kuò)展方法

extend()方法赴蝇，如果只傳多個(gè)參數(shù)菩浙，是將后面對(duì)象的成員擴(kuò)展給第一個(gè)對(duì)象

如果后面對(duì)象的方法跟原對(duì)象的方法名重復(fù)，會(huì)覆蓋

4. on方法和off方法

click方法內(nèi)部會(huì)先獲取到選擇器找到所有元素

如果元素在注冊(cè)事件之后添加，該事件方法不會(huì)執(zhí)行劲蜻。

遇到這種情況陆淀，通常會(huì)將事件委托給它的父級(jí)注冊(cè)

?$('.one>div').click(function(){

? ? ? ? alert('哈哈！')

? ? ?})

通過on方法先嬉，給子元素添加指定的事件

on方法的參數(shù)

參數(shù)1：事件名稱

參數(shù)2：獲取子元素的選擇器

參數(shù)3：事件方法

注意：on方法可以添加多個(gè)事件方法

click方法內(nèi)部會(huì)先獲取到選擇器找到所有元素

如果元素在注冊(cè)事件之后添加轧苫，該事件方法不會(huì)執(zhí)行

遇到這種情況，通常會(huì)將事件委托給它的父級(jí)注冊(cè)

? ? ? ? ?$('.one>div').click(function(){

? ? ? ? ? ? ?alert('哈哈疫蔓！')

? ? ? ? ?})

on方法的第二個(gè)參數(shù)不傳含懊，就是給自己注冊(cè)事件

5.節(jié)流和防抖

節(jié)流：連續(xù)觸發(fā)時(shí)，在指定的時(shí)間內(nèi)只觸發(fā)一次

定義節(jié)流時(shí)間

防抖：連續(xù)觸發(fā)只執(zhí)行一次衅胀，等待指定的時(shí)間后岔乔，才能觸發(fā)第二次

定義防抖時(shí)間