課程回顧：

? jQuery：JavaScript庫

? 入口函數：$(function () {});

? jQuery：jQuery對象，DOM對象

? jQuery轉成DOM：$(‘元素’)[索引值]

? DOM轉成jQuery：$(DOM對象);

? 篩選方法：parent，children，find，siblings，eq

? 樣式操作：css方法

? 類名操作：addClass，removeClass，toggleClass

jQuery動畫效果

顯示隱藏效果

show([speed,[easing],[fn]])【顯示】 hide([speed,[easing],[fn]])【隱藏】 toggle([speed,[easing],[fn]])【切換】（1）參數都可以省略， 無動畫直接顯示。 （2）speed：三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。 （3）easing：(Optional) 用來指定切換效果，默認是“swing”，可用參數“linear”。 （4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。

滑動效果

slideDown([speed,[easing],[fn]])【下滑效果】 slideUp([speed,[easing],[fn]])【上滑效果】 slideToggle([speed,[easing],[fn]])【切換效果】（1）參數都可以省略。 （2）speed：三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。 （3）easing：(Optional) 用來指定切換效果，默認是“swing”，可用參數“linear”。 （4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次

下拉菜單案例修改

事件切換**

hover([over,]out)

hover(function () {},function () {});

$(‘div’).hover(function () {//鼠標進入的函數},function () {//鼠標離開的函數});

（1）over:鼠標移到元素上要觸發的函數（相當于mouseenter）（2）out:鼠標移出元素要觸發的函數（相當于mouseleave）（3）如果只寫一個函數，則鼠標經過和離開都會觸發它

動畫隊列及其停止排隊方法

動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。停止排隊:stop()(1）stop() 方法用于停止動畫或效果。 (2) 注意： stop() 寫到動畫或者效果的前面， 相當于停止結束上一次的動畫

淡入淡出效果

fadeIn([speed,[easing],[fn]])【淡入】 fadeOut([speed,[easing],[fn]])【淡出】 fadeToggle([speed,[easing],[fn]])【切換】 fadeTo([[speed],opacity,[easing],[fn]])【到達某個位置】（1）參數都可以省略。 （2）speed：三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。 （3）easing：(Optional) 用來指定切換效果，默認是“swing”，可用參數“linear”。 （4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。注意：fadeTo([[speed],opacity,[easing],[fn]])（1）opacity 透明度必須寫，取值 0~1 之間。 （2）speed：三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。必須寫 （3）easing：(Optional) 用來指定切換效果，默認是“swing”，可用參數“linear”。 （4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。

練習：高亮顯示

原理：鼠標進入讓當前元素的所有兄弟透明度降低，鼠標離開恢復既可注意：動畫排隊問題<script>$(function () {// 鼠標進入li，其他兄弟們透明度改成0.5$('.wrap li').mouseover(function () {$(this).siblings().stop().fadeTo(400, 0.5);});// 鼠標離開li，其他兄弟們的透明度改成1$('.wrap li').mouseout(function () {$(this).siblings().stop().fadeTo(400, 1);});});</script>

自定義動畫 animate

語法：animate(params,[speed],[easing],[fn])；參數： （1）params: 想要更改的樣式屬性，以對象形式傳遞，必須寫。 屬性名可以不用帶引號， 如果是復合屬性則需要采取駝峰命名法 borderLeft。其余參數都可以省略。 （2）speed：三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。 （3）easing：(Optional) 用來指定切換效果，默認是“swing”，可用參數“linear”。 （4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。

案例：王者榮耀手風琴效果

鼠標經過某個小li 有兩步操作：1、當前小li 寬度變為 224px， 同時里面的小圖片淡出，大圖片淡入2、其余兄弟小li寬度變為69px， 小圖片淡入， 大圖片淡出$(function () {$('.king li').mouseover(function () {// 鼠標進入li，讓當前這個li變成224寬，小圖隱藏，大圖顯示$(this).stop().animate({width : 224}).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();// 其他兄弟li變成69寬，他們的小圖顯示，大圖隱藏$(this).siblings().stop().animate({width : 69}).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut();});});

動畫：

? 基本動畫：show，hide，toggle

? 滑動動畫：slideDown，slideUp，slideToggle

? 淡入淡出動畫：fadeIn，fadeOut，fadeToggle，fadeTo(speed，opcity)

? 自定義動畫：animate({屬性});

上午回顧：

? 動畫效果：基本動畫效果，滑動動畫效果，淡入淡出動畫效果，自定義動畫

? 事件切換：hover（inFn，outFn）

? 停止動畫：stop

jQuery選擇器：獲取元素$(元素)

樣式操作：css方法

類名操作：addClass，removeClass，toggleClass

動畫效果：4種

jQuery 屬性操作

<img src="a.jpg" id="d1" width="100 index='3' data-index='1' bigSrc='2.jpg'>固有屬性，自定義屬性prop操作固有屬性，attr操作自定義屬性

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

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

獲取語法：

$(‘div’).prop(’‘屬性’’)

$(‘div’).prop(‘id’)

設置屬性語法

$(‘div’).prop(’‘屬性’’, ‘‘屬性值’’)

$(‘div’).prop(‘id’,‘d2’)

change事件，表單中checked屬性

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

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

獲取屬性語法

attr(’‘屬性’’) // 類似原生 getAttribute()

設置屬性語法

attr(’‘屬性’’, ‘‘屬性值’’) //類似原生 setAttribute()

數據緩存 data()【了解】

當做變量存儲

data() 方法可以在指定的元素上存取數據，并不會修改 DOM 元素結構，所以元素上無法查看。一旦頁面刷新，之前存放的數據都將被移除。

附加數據語法

$(元素).data(’‘name’’,’‘value’’) // 向被選元素附加數據

獲取數據語法

$(元素).date(’‘name’’) // 向被選元素獲取數據

例如：

$('span').data('spanindex',3);console.log($('span').data('spanindex'));

購物車案例：

案例：購物車案例模塊-全選**

①全選思路：里面3個小的復選框按鈕（j-checkbox）選中狀態（checked）跟著全選按鈕（checkall）走。②因為checked 是復選框的固有屬性，此時我們需要利用prop()方法獲取和設置該屬性。③把全選按鈕狀態賦值給3小復選框就可以了。④當我們每次點擊小的復選框按鈕，就來判斷：⑤如果小復選框被選中的個數等于3 就應該把全選按鈕選上，否則全選按鈕不選。⑥:checked 選擇器 :checked 查找被選中的表單元素。change改變到時候，獲取當前input的checked狀態，賦值給小按鈕和全選按鈕既可小按鈕改變的時候，判斷選中個數和總個數，修改大按鈕是否要選中

課程回顧：

? 動畫效果：

? 基本動畫：show，hide，toggle

? 滑動動畫：slideDown，slideUp，slideToggle

? 淡入淡出：fadeIn，fadeOut，fadeTo，fadeToggle

? 自定義動畫：animate({屬性});

? 事件切換：hover(over，out);

? 停止動畫：stop

? 屬性操作：prop固有屬性，attr自定義屬性，[data]$(元素).prop(‘屬性’, ‘值’);

? 文本內置：html，text，val；$(元素).html(‘值’)

?

jQuery 內容文本值

innerHTML，innerText，value

普通元素內容 **html()****（相當于原生inner HTML)

? 獲取：html() // 獲取元素的內容

? 設置：html(’‘內容’’) // 設置元素的內容

普通元素文本內容 **text() (相當與原生innerText)

? 獲取：text() // 獲取元素的文本內容

? 設置：text(’‘文本內容’’) // 設置元素的文本內容

表單的值 val()（ 相當于原生value)

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

? 設置：val(’‘內容’’) // 設置表單的值

$('input').click(function () {// 獲取// console.log( $('div').html() );// 設置// $('div').html('<b>哇哈哈哈</b>');// 獲取// console.log( $('div').text() );// 設置// $('div').text('<b>新的內容</b>');// 獲取// console.log( $('input').val() );// 設置$('input').val('哇哈哈哈按鈕');});

案例：購物車案例模塊-增減商品數量

①核心思路：首先聲明一個變量，當我們點擊+號（increment），就讓這個值++，然后賦值給文本框。②注意1： 只能增加本商品的數量， 就是當前+號的兄弟文本框（itxt）的值。 ③修改表單的值是val() 方法④注意2： 這個變量初始值應該是這個文本框的值，在這個值的基礎上++。要獲取表單的值⑤減號（decrement）思路同理，但是如果文本框的值是1，就不能再減了，直接return false即可

**購物車案例模塊-**修改商品小計

①核心思路：每次點擊+號或者-號，根據文本框的值 乘以 當前商品的價格 就是 商品的小計②注意1： 只能增加本商品的小計， 就是當前商品的小計模塊（p-sum） ③修改普通元素的內容是text() 方法④注意2： 當前商品的價格，要把￥符號去掉再相乘 截取字符串 substr(1)⑤parents(‘選擇器’) 可以返回指定祖先元素 ⑥最后計算的結果如果想要保留2位小數 通過 toFixed(2) 方法⑦用戶也可以直接修改表單里面的值，同樣要計算小計。 用表單change事件⑧用最新的表單內的值 乘以 單價即可 但是還是當前商品小計點擊獲取單價和數量相乘的結果保存給小計既可用戶直接輸入數字問題

jQuery 元素操作

主要是遍歷、創建、添加、刪除元素操作。

遍歷元素

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

語法1：$(“div”).each(function(index, domEle) { xxx; }）

\1. each() 方法遍歷匹配的每一個元素。主要用DOM處理。 each 每一個\2. 里面的回調函數有2個參數： index 是每個元素的索引號; demEle 是每個DOM元素對象，不是jquery對象\3. 所以要想使用jquery方法，需要給這個dom元素轉換為jquery對象 $(domEle)

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

\1. $.each()方法可用于遍歷任何對象。主要用于數據處理，比如數組，對象\2. 里面的函數有2個參數： index 是每個元素的索引號; element 遍歷內容

**案例：購物車案例模塊-**計算總計和總額

①核心思路：把所有文本框里面的值相加就是總計數量。總額同理②文本框里面的值不相同，如果想要相加需要用到each遍歷。聲明一個變量，相加即可③點擊+號-號，會改變總計和總額，如果用戶修改了文本框里面的值同樣會改變總計和總額④因此可以封裝一個函數求總計和總額的， 以上2個操作調用這個函數即可。⑤注意1： 總計是文本框里面的值相加用 val() 總額是普通元素的內容用text() ⑥要注意普通元素里面的內容要去掉￥并且轉換為數字型才能相加多次需要求總計，所有封裝函數最為合適

創建元素

語法：$(’‘

• 內容
• ’’);

添加元素

內部添加：產生的父子級關系

element.append(’‘內容’’) [把內容放入匹配元素內部最后面，類似原生 appendChild。

appendTo

element.prepend(’‘內容’’) 把內容放入匹配元素內部最前面。

prependTo

外部添加

element.after(’‘內容’’) // 把內容放入目標元素后面

element.before(’‘內容’’) // 把內容放入目標元素前面

①內部添加元素，生成之后，它們是父子關系。②外部添加元素，生成之后，他們是兄弟關系。

刪除元素

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

element.empty() // 刪除匹配的元素集合中所有的子節點

element.html(’’’’) // 清空匹配的元素內容

①remove 刪除元素本身。②empt() 和 html('''') 作用等價，都可以刪除元素里面的內容，只不過 html 還可以設置內容。

**案例：購物車案例模塊-**刪除商品模塊

①核心思路：把商品remove() 刪除元素即可②有三個地方需要刪除： 1. 商品后面的刪除按鈕 2. 刪除選中的商品 3. 清理購物車③商品后面的刪除按鈕： 一定是刪除當前的商品，所以從 $(this) 出發④刪除選中的商品： 先判斷小的復選框按鈕是否選中狀態，如果是選中，則刪除對應的商品⑤清理購物車： 則是把所有的商品全部刪掉

**案例：購物車案例****模塊選中商品添加背景

①核心思路：選中的商品添加背景，不選中移除背景即可②全選按鈕點擊：如果全選是選中的，則所有的商品添加背景，否則移除背景③小的復選框點擊： 如果是選中狀態，則當前商品添加背景，否則移除背景④這個背景，可以通過類名修改，添加類和刪除類

總結

以上是生活随笔為你收集整理的jQuery第二天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。