jQuery 選擇器

什么是JQuery選擇器？

1. jQuery選擇器是jQuery為我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。注意：jQuery選

擇器返回的是jQuery對象。

2. jQuery選擇器有很多，基本兼容了CSS1到CSS3所有的選擇器，并且jQuery還添加了很多更加復(fù)雜更加實(shí)

用的選擇器。

?。∽⒁猓?/p>

jQuery選擇器返回的是jQuery對象，所以可以直接調(diào)用jQuery提供的api

jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個(gè)元素，你會有很多種方法

獲取到。所以我們平時(shí)真正能用到的只是少數(shù)的最常用的選擇器

JQuery基礎(chǔ)選擇器

原生 JS 獲取元素方式很多，很雜，而且兼容性情況不一致，因此 jQuery 給我們做了封裝，使獲取元素統(tǒng)一標(biāo)準(zhǔn)。

1.2 jQuery 篩選選擇器

1.3 jQuery 篩選方法（重點(diǎn)）

重點(diǎn)記?。?parent() children() find() siblings() eq() next()

2. jQuery 樣式操作

2.1 操作 css 方法-多組樣式設(shè)置

jQuery 可以使用 css 方法來修改簡單元素樣式，css方法可以設(shè)置單個(gè)樣式，也可以設(shè)置多個(gè)樣式

1.語法：$(選擇器).css(｛樣式名稱1，樣式值1，樣式名稱2，樣式值2｝); // 設(shè)置元素的多個(gè)樣式

2. 參數(shù)可以是對象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號隔開， 屬性名稱可以不用加引號，

$(this).css({ "color":"white","font-size":"20px"});

2.1 操作 css 方法-獲取元素的樣式

jQuery 可以使用 css 方法設(shè)置或獲取，元素的樣式如果只傳入樣式屬性名稱，沒有傳入樣式值，就是用來獲取元素的樣式

1.語法：$(選擇器).css(樣式名稱); // 獲取指定樣式屬性所對應(yīng)的值

如：$("div").css("background-color"); 獲取div元素的背影色

2.特點(diǎn)：獲取樣式操作只會返回滿足條件的第一個(gè)元素對應(yīng)的樣式值

2.2 設(shè)置類樣式方法

作用等同于以前的 classList，可以操作類樣式， 注意操作類里面的參數(shù)不要加點(diǎn)。

添加類：$(“div”).addClass(''current'');

移除類：$(“div”).removeClass(''current'');

切換類：(“div”).toggleClass(''current'');

判斷元素是否有指定類樣式

$(“div”).hasClass(''current''); // 返回true/false,true代表有這個(gè)類樣式

3.JQuery效果

jQuery 給我們封裝了很多動(dòng)畫效果，以滿足常見的頁面效果需求，最為常見的如下：

3.1 顯示隱藏效果

1.顯示語法規(guī)范

1.顯示語法規(guī)范

show|hide([speed,[easing],[fn]])

2.參數(shù)

（1）參數(shù)都可以省略， 如省略則無動(dòng)畫直接顯示。

（2）speed：三種預(yù)定速度之一的字符串(slow(200)、normal(400)、fast(600))或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)。

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn: 回調(diào)函數(shù)，在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

3.1 顯示隱藏效果

1.切換語法規(guī)范

toggle([speed,[easing],[fn]])

2.切換參數(shù)

（1）參數(shù)都可以省略， 無動(dòng)畫直接顯示。

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)。

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn: 回調(diào)函數(shù)，在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

建議：平時(shí)一般不帶參數(shù)，直接顯示隱藏即可。

3.2 滑動(dòng)效果

1. 下滑效果語法規(guī)范

slideDown|slideUp|slideToggle([speed,[easing],[fn]])

2. 下滑效果參數(shù)

（1）參數(shù)都可以省略。

（2）speed:三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或毫秒數(shù)值(如：1000)，默認(rèn)為normal。

（3）easing:(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn: 回調(diào)函數(shù)，在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

3. jQuery 效果

3.3 淡入淡出效果

1. 淡入效果語法規(guī)范

fadeIn|fadeOut|fadeToggle[speed,[easing],[fn]])

2. 淡入效果參數(shù)

（1）參數(shù)都可以省略。

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)。

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn: 回調(diào)函數(shù)，在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

3.3 淡入淡出效果

1. 漸進(jìn)方式調(diào)整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]])

2. 效果參數(shù)

（1）opacity 透明度必須寫，取值 0~1 之間。

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)。必須寫

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn: 回調(diào)函數(shù)，在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

3.4 自定義動(dòng)畫 animate

1.語法

animate(params,[speed],[easing],[fn])

2. 參數(shù)

（1）params: 想要更改的樣式屬性，以對象形式傳遞，必須寫。 屬性名可以不用帶引號， 如果是復(fù)合屬性則需要采

取駝峰命名法 borderLeft。其余參數(shù)都可以省略。

（2）speed：三種預(yù)定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)。

（3）easing：(Optional) 用來指定切換效果，默認(rèn)是“swing”，可用參數(shù)“l(fā)inear”。

（4）fn: 回調(diào)函數(shù)，在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。

3.5 動(dòng)畫隊(duì)列及其停止排隊(duì)方法

1. 動(dòng)畫或效果隊(duì)列

動(dòng)畫或者效果一旦觸發(fā)就會執(zhí)行，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫或者效果排隊(duì)執(zhí)行。

2. 停止隊(duì)列中的動(dòng)畫：stop()

(1）stop() 方法用于停止動(dòng)畫或效果。

(2) 注意： stop() 寫到動(dòng)畫或者效果的前面， 相當(dāng)于停止結(jié)束上一次的動(dòng)畫。

4. jQuery 屬性操作

4.1 設(shè)置或獲取元素固有屬性值 prop()

所謂元素固有屬性就是元素本身自帶的屬性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。

1. 獲取屬性語法：prop(''屬性'')?? 類似原生 getAttribute()

2. 設(shè)置屬性語法：attr(''屬性'', ''屬性值'')??? 類似原生 setAttribute()

4.2 設(shè)置或獲取元素自定義屬性值 attr()

用戶自己給元素添加的屬性，我們稱為自定義屬性。 比如給 div 添加 index =“1”。

1. 獲取屬性語法：attr(''屬性'')?? 類似原生 getAttribute()

2. 設(shè)置屬性語法：attr(''屬性'', ''屬性值'')?? 類似原生 setAttribute()

4.3 prop和attr的使用選擇

1. 設(shè)置或獲取元素固有屬性值建議使用prop

2. 設(shè)置或獲取元素自定義屬性值建議使用attr

注意?。翰僮鳡顟B(tài)值的時(shí)候(如'checked','selected','disabled'等)只能使用prop,否則無法獲取到想要的結(jié)果

4.4 數(shù)據(jù)緩存 data()

data() 方法可以在指定的元素上存取數(shù)據(jù)，并不會修改 DOM 元素結(jié)構(gòu)。一旦頁面刷新，之前存放的數(shù)據(jù)都將被移除。

1. 附加數(shù)據(jù)語法：data(''name'',''value'')??? 向被選元素附加數(shù)據(jù)

2. 獲取數(shù)據(jù)語法：

data()??? 獲取元素所有自定義屬性，返回一個(gè)對象

data(''name'')?? 向被選元素獲取抒寫名稱的自定義屬性數(shù)據(jù)

5. jQuery 內(nèi)容文本值

主要針對元素的內(nèi)容還有表單的值操作。

1. 普通元素內(nèi)容 html()（ 相當(dāng)于原生inner HTML)

html()??? 獲取元素的內(nèi)容

html(''內(nèi)容'')?? 設(shè)置元素的內(nèi)容

2. 普通元素文本內(nèi)容 text() (相當(dāng)與原生 innerText)

text()??? 獲取元素的文本內(nèi)容

text(''文本內(nèi)容'')?? 設(shè)置元素的文本內(nèi)容

3. 表單的值 val()（ 相當(dāng)于原生value)

val()??? 獲取表單的值

val(''內(nèi)容'')?? 設(shè)置表單的值

6. jQuery 元素操作

6.1 遍歷元素

jQuery 隱式迭代是對同一類元素做了同樣的操作。 如果想要給同一類元素做不同操作，就需要用到遍歷。

語法1:$("div").each(function (index, domEle) { xxx; }）??? //主要用于遍歷元素

1. each() 方法遍歷匹配的每一個(gè)元素。主要用DOM處理。 each 每一個(gè)

2. 里面的回調(diào)函數(shù)有2個(gè)參數(shù)： index 是每個(gè)元素的索引號; demEle 是每個(gè)DOM元素對象，不是jquery對象

3. 所以要想使用jquery方法，需要給這個(gè)dom元素轉(zhuǎn)換為jquery對象 $(domEle)

語法2： $.each(object，function (index, element) { xxx; }）

1. $.each()方法可用于遍歷任何對象。主要用于數(shù)據(jù)處理，比如數(shù)組，對象

2. 里面的函數(shù)有2個(gè)參數(shù)： index 是每個(gè)元素的索引號; element 遍歷內(nèi)容

6.2 創(chuàng)建元素

語法：$(''<li></li>'');?? //動(dòng)態(tài)創(chuàng)建一個(gè)li標(biāo)簽

6.3 添加元素

1. 內(nèi)部添加

element.append(''內(nèi)容'')??? //把內(nèi)容放入匹配元素內(nèi)部最后面，類似原生 appendChild。

element.prepend(''內(nèi)容'')??? //把內(nèi)容放入匹配元素內(nèi)部最前面。

2. 外部添加

element.after(''內(nèi)容'')??? // 把內(nèi)容放入目標(biāo)元素后面

element.before(''內(nèi)容'')??? // 把內(nèi)容放入目標(biāo)元素前面

① 內(nèi)部添加元素，生成之后，它們是父子關(guān)系。

② 外部添加元素，生成之后，他們是兄弟關(guān)系。

6.4 刪除元素

element.remove()??? // 刪除匹配的元素（本身）

element.empty()??? // 刪除匹配的元素集合中所有的子節(jié)點(diǎn)

element.html('''')??? // 清空匹配的元素內(nèi)容,可以用來刪除內(nèi)容也可以設(shè)置內(nèi)容

7. jQuery 尺寸、位置操作

7.1 jQuery 尺寸

1.以上參數(shù)為空，則是獲取相應(yīng)值，返回的是數(shù)字型。

2.如果參數(shù)為數(shù)字，則是設(shè)置相應(yīng)值。

3.參數(shù)可以不必寫單位。

7.2 jQuery 位置

位置主要有三個(gè)： offset()、position()、scrollTop()/scrollLeft()

1. offset() 設(shè)置或獲取元素偏移

① offset() 方法設(shè)置或返回被選元素相對于文檔的偏移坐標(biāo)，跟父級沒有關(guān)系。

② 該方法有2個(gè)屬性 left、top 。offset().top 用于獲取距離文檔頂部的距離，offset().left 用于獲取距離文檔左側(cè)的距離。

③ 可以設(shè)置元素的偏移：offset({ top: 10, left: 30 });

2. position() 獲取元素偏移

① position() 方法用于返回被選元素相對于帶有定位的父級偏移坐標(biāo)，如果父級都沒有定位，則以文檔為準(zhǔn)。

② 該方法有2個(gè)屬性 left、top。position().top 用于獲取距離定位父級頂部的距離，position().left 用于獲取距離定

位父級左側(cè)的距離。

③ 該方法只能獲取。

3. scrollTop()/scrollLeft() 設(shè)置或獲取元素被卷去的頭部和左側(cè)

① scrollTop() 方法設(shè)置或返回被選元素被卷去的頭部。

② 不跟參數(shù)是獲取，參數(shù)為不帶單位的數(shù)字則是設(shè)置被卷去的頭部

8. jQuery事件機(jī)制

JQ事件發(fā)展歷程的擴(kuò)展

jq事件發(fā)展的歷程：簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定(推薦）

簡單事件注冊

語法：事件類型(事件處理函數(shù))

不能同時(shí)注冊多個(gè)事件,同時(shí)也不能實(shí)現(xiàn)委托事件

bind方式注冊事件

語法：$(jq).bind(‘事件類型’，事件處理函數(shù))

不支持動(dòng)態(tài)事件綁定

delegate注冊委托事件

語法：$(jq).delegate(‘子元素選擇器’，‘事件類型’，事件處理函數(shù))

只能注冊委托事件，因此注冊時(shí)間需要記得方法太多了

8.2 使用on注冊事件

jQuery1.7之后，jQuery用on統(tǒng)一了所有事件的處理方法，建議使用