課程回顧：

? 元素操作：

? 遍歷元素：

? $(‘元素’).each(function (index, elm) {});

? $.each(對象，function (index, elm) {});

? 創(chuàng)建元素：$(‘

• 新的元素
• ?’);

  ? 添加元素：

  ? 內(nèi)部添加：append，appendTo，prepend，prependTo

  ? 外部添加：after，before

  ? 刪除元素：remove，empty，html(’’);

  ? 元素尺寸：width，innerWidth，outerWidth，outerWidth(true);

  ? 元素位置：

  ? 偏移位置：offset，position

  ? 卷起位置：scrollTop

  ? parents：獲取所以上級元素

  每日反饋

  小計(jì)：小計(jì) = 單價(jià) * 數(shù)量數(shù)量：獲取輸入框里面的數(shù)量單價(jià)：獲取內(nèi)容，獲取之后要吧純數(shù)字部分截取出來小計(jì)：鏈接￥，并且要保留兩位有效數(shù)字 總計(jì)：總件數(shù)：把所以輸入框里面的數(shù)量相加,放到頁面中總價(jià)格：把所有小計(jì)里面的數(shù)相加，放到頁面中

  案例：品優(yōu)購電梯導(dǎo)航

  ①當(dāng)我們滾動(dòng)到 今日推薦 模塊，就讓電梯導(dǎo)航顯示出來②點(diǎn)擊電梯導(dǎo)航頁面可以滾動(dòng)到相應(yīng)內(nèi)容區(qū)域③核心算法：因?yàn)殡娞輰?dǎo)航模塊和內(nèi)容區(qū)模塊一一對應(yīng)的④當(dāng)我們點(diǎn)擊電梯導(dǎo)航某個(gè)小模塊，就可以拿到當(dāng)前小模塊的索引號⑤就可以把a(bǔ)nimate要移動(dòng)的距離求出來：當(dāng)前索引號內(nèi)容區(qū)模塊它的offset().top⑥然后執(zhí)行動(dòng)畫即可 第二部分：①當(dāng)我們點(diǎn)擊電梯導(dǎo)航某個(gè)小li， 當(dāng)前小li 添加current類，兄弟移除類名②當(dāng)我們頁面滾動(dòng)到內(nèi)容區(qū)域某個(gè)模塊， 左側(cè)電梯導(dǎo)航，相對應(yīng)的小li模塊，也會(huì)添加current類， 兄弟移除current類。③觸發(fā)的事件是頁面滾動(dòng)，因此這個(gè)功能要寫到頁面滾動(dòng)事件里面。④需要用到each，遍歷內(nèi)容區(qū)域大模塊。 each里面能拿到內(nèi)容區(qū)域每一個(gè)模塊元素和索引號⑤判斷的條件： 被卷去的頭部 大于等于 內(nèi)容區(qū)域里面每個(gè)模塊的offset().top⑥就利用這個(gè)索引號找到相應(yīng)的電梯導(dǎo)航小li添加類。

  jQuery 事件

  目標(biāo)：

  能夠說出4種常見的注冊事件 能夠說出 on 綁定事件的優(yōu)勢能夠說出 jQuery 事件委派的優(yōu)點(diǎn)以及方式能夠說出綁定事件與解綁事件

  jQuery事件注冊

  語法：element.事件(function(){})

  $(“div”).click(function(){ 事件處理程序 })

  其他事件和原生基本一致。

  比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

  事件處理 on() 綁定事件

  on() 方法在匹配元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)

  語法：element.on(events,[selector],fn)

  \1. events:一個(gè)或多個(gè)用空格分隔的事件類型，如"click"或"keydown" 。\2. selector: 元素的子元素選擇器 。\3. fn:回調(diào)函數(shù) 即綁定在元素身上的偵聽函數(shù)。

  on() 方法優(yōu)勢1：

  1、可以綁定多個(gè)事件，多個(gè)處理事件處理程序。

  $(“div”).on({mouseover: function(){},mouseout: function(){},click: function(){} });

  on() 方法優(yōu)勢2：

  可以事件委派操作。事件委派的定義就是，把原來加給子元素身上的事件綁定在父元素身上，就是把事件委派給父元素。

  $('ul').on('click', 'li', function() {alert('hello world!');});

  在此之前有bind(), live()，delegate()等方法來處理事件綁定或者事件委派，最新版本的請用on替代他們。

  on() 方法優(yōu)勢3：

  動(dòng)態(tài)創(chuàng)建的元素，click()沒有辦法綁定事件，on() 可以給動(dòng)態(tài)生成的元素綁定事件

  $(“div").on("click",”p”, function(){alert("俺可以給動(dòng)態(tài)生成的元素綁定事件")});

  案例：發(fā)布微博案例

  ①點(diǎn)擊發(fā)布按鈕， 動(dòng)態(tài)創(chuàng)建一個(gè)小li，放入文本框的內(nèi)容和刪除按鈕， 并且添加到ul 中。

  ②點(diǎn)擊的刪除按鈕，可以刪除當(dāng)前的微博留言。

  事件處理 off() 解綁事件

  off() 方法可以移除通過 on() 方法添加的事件處理程序。

  $("p").off() // 解綁p元素所有事件處理程序$("p").off( "click") // 解綁p元素上面的點(diǎn)擊事件 后面的 foo 是偵聽函數(shù)名$("ul").off("click", "li"); // 解綁事件委托

  如果有的事件只想觸發(fā)一次， 可以使用 one()來綁定事件。

  // 給input添加點(diǎn)擊事件，但是這個(gè)事件只要觸發(fā)1次就夠$('input').one('click', function () {console.log('哇哈哈');});解綁：off， 一次性：one

  自動(dòng)觸發(fā)事件trigger()

  有些事件希望自動(dòng)觸發(fā), 比如輪播圖自動(dòng)播放功能跟點(diǎn)擊右側(cè)按鈕一致。可以利用定時(shí)器自動(dòng)觸發(fā)右側(cè)按鈕點(diǎn)擊事件，不必鼠標(biāo)點(diǎn)擊觸發(fā)

  element.click() // 第一種簡寫形式

  element.trigger(“type”)//第二種自動(dòng)觸發(fā)模式

  element.triggerHandler(‘type)’ // 第三種自動(dòng)觸發(fā)事件【不會(huì)觸發(fā)事件元素的默認(rèn)效果】

  $("p").on("click", function () {alert("hi~");}); $("p").trigger("click"); // 此時(shí)自動(dòng)觸發(fā)點(diǎn)擊事件，不需要鼠標(biāo)點(diǎn)擊

  element.triggerHandler(type) // 第三種自動(dòng)觸發(fā)模式

  triggerHandler模式不會(huì)觸發(fā)事件的默認(rèn)效果行為，這是和前面兩種的區(qū)別。

  $('input').focus(function () {console.log(123);});// $('input').focus();// $('input').trigger('focus');$('input').triggerHandler('focus');

  上午回顧：

  ? jQuery事件：

  ? 注冊事件：

  ? $(元素).click(function () {});

  ? $(元素).on(‘事件類型’, [后代元素], function () {});

  ? // 用on的又是：1.可以多事件同時(shí)綁定，2.事件委派，3.如果動(dòng)態(tài)創(chuàng)建的元素可以有事件

  ? 解綁事件：

  ? off：如果不加參數(shù)意思都解除，如果加參數(shù)解除指定的事件，可以解除事件委派

  ? one：一次性事件

  ? 自動(dòng)觸發(fā)事件：

  ? $(元素).click();

  ? $(元素).trigger(‘事件類型’);

  ? $(元素).triggerHandler(‘事件類型’)

  jQuery事件對象

  事件被觸發(fā)，就會(huì)有事件對象的產(chǎn)生。

  事件出發(fā)時(shí)，產(chǎn)生的特殊的對象

  【event==》事件對象】

  element.on(events,[selector],function(event){}) 阻止默認(rèn)行為：event.preventDefault() 或者 return false 阻止冒泡： event.stopPropagation()

  釋放$符號

  var jq = $.noConflict();<script type="text/javascript">// $('input');var jq = $.noConflict();console.log( jq('input') );</script>

  jQuery 其他方法

  jQuery 插件

  jQuery插件

  jQuery 功能比較有限，想要更復(fù)雜的特效效果，可以借助于 jQuery 插件完成。 注意: 這些插件也是依賴于jQuery來完成的，所以必須要先引入jQuery文件，因此也稱為 jQuery 插件。**jQuery** **插件常用的網(wǎng)站：**1. jQuery 插件庫 http://www.jq22.com/ 2. jQuery 之家 http://www.htmleaf.com/ **jQuery** **插件使用步驟：**1. 引入相關(guān)文件。（jQuery 文件 和 插件文件）2. 復(fù)制相關(guān)html、css、js (調(diào)用插件)。

  瀑布流：

  瀑布流

  圖片懶加載或者（BOOTSTRAP插件）

  （圖片使用延遲加載在可提高網(wǎng)頁下載速度。它也能幫助減輕服務(wù)器負(fù)載）

  當(dāng)我們頁面滑動(dòng)到可視區(qū)域，再顯示圖片。

  我們使用jquery 插件庫 EasyLazyload。 注意，此時(shí)的js引入文件和js調(diào)用必須寫到 DOM元素（圖片）最后面

  注意：1、要引入JQuery2、插件JS【js引入文件和js調(diào)用必須寫到 DOM元素（圖片）最后面】3、將圖片 src 替換為 data-lazy-src1、ctrl + H2、查找img的src（因?yàn)檫@里面還有script的src）3、替換的時(shí)候要和查找的時(shí)候保存格式相同4、調(diào)用lazyLoadInit(）

  BOOTSTRAP插件

  1、引入CSS、引入JQ、引入JS2、.container3、復(fù)制粘貼

  知識點(diǎn)：

  本地存儲技術(shù)：

  localSortage對象：把數(shù)據(jù)以字符串的方式保存本地獲取： localStorage.getItem()設(shè)置： localStorage.setItem()

  JSON 方法補(bǔ)充

  作用：把字符串?dāng)?shù)組轉(zhuǎn)成數(shù)組，或者把數(shù)組轉(zhuǎn)成字符串?dāng)?shù)組例如：var str = '[{"name":"張三豐"},{"name":"李尋歡"},{"name":"喬峰"}]';JSON 解析：JSON.parse()：返回轉(zhuǎn)換后的數(shù)組JSON 轉(zhuǎn)字符串：JSON.stringify();<script type="text/javascript">var str = '[{"name":"張三豐"},{"name":"李尋歡"},{"name":"喬峰"}]';// console.log(str);// 轉(zhuǎn)成數(shù)組var arr = JSON.parse(str);// console.log( arr );var newStr = JSON.stringify(arr);console.log(newStr);</script>

  課程回顧：

  ? jQuery注冊事件：

  ? $(元素).click(function () {})

  ? $(元素).on(‘click’,[委派元素],function () {})；

  ? 一次性：one

  ? jQuery解綁事件：off

  ? 自動(dòng)觸發(fā)：

  ? 簡寫：$(元素).click()

  ? 觸發(fā)：$(元素).trigger(‘click’);

  ? 觸發(fā)：$(元素).triggerHandler(‘click’);

  ? jQuery事件對象：如果要用事件對象，那么我們直接再函數(shù)中設(shè)置形參接受即可

  ? 釋放符號：var jq = $.noConflict();

  ? jQuery成品插件：很多

  ? 知識點(diǎn)：

  ? 本地存儲技術(shù)：localStorage.setItem(‘鍵’,‘值’);localStorage.getItem(‘鍵’);

  ? JSON方法：JSON.parse，JSON.stringify

  ?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。