課程回顧：

? 元素操作：

? 遍歷元素：

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

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

? 創建元素：$(‘

• 新的元素
• ?’);

  ? 添加元素：

  ? 內部添加：append，appendTo，prepend，prependTo

  ? 外部添加：after，before

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

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

  ? 元素位置：

  ? 偏移位置：offset，position

  ? 卷起位置：scrollTop

  ? parents：獲取所以上級元素

  每日反饋

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

  案例：品優購電梯導航

  ①當我們滾動到 今日推薦 模塊，就讓電梯導航顯示出來②點擊電梯導航頁面可以滾動到相應內容區域③核心算法：因為電梯導航模塊和內容區模塊一一對應的④當我們點擊電梯導航某個小模塊，就可以拿到當前小模塊的索引號⑤就可以把animate要移動的距離求出來：當前索引號內容區模塊它的offset().top⑥然后執行動畫即可 第二部分：①當我們點擊電梯導航某個小li， 當前小li 添加current類，兄弟移除類名②當我們頁面滾動到內容區域某個模塊， 左側電梯導航，相對應的小li模塊，也會添加current類， 兄弟移除current類。③觸發的事件是頁面滾動，因此這個功能要寫到頁面滾動事件里面。④需要用到each，遍歷內容區域大模塊。 each里面能拿到內容區域每一個模塊元素和索引號⑤判斷的條件： 被卷去的頭部 大于等于 內容區域里面每個模塊的offset().top⑥就利用這個索引號找到相應的電梯導航小li添加類。

  jQuery 事件

  目標：

  能夠說出4種常見的注冊事件 能夠說出 on 綁定事件的優勢能夠說出 jQuery 事件委派的優點以及方式能夠說出綁定事件與解綁事件

  jQuery事件注冊

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

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

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

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

  事件處理 on() 綁定事件

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

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

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

  on() 方法優勢1：

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

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

  on() 方法優勢2：

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

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

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

  on() 方法優勢3：

  動態創建的元素，click()沒有辦法綁定事件，on() 可以給動態生成的元素綁定事件

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

  案例：發布微博案例

  ①點擊發布按鈕， 動態創建一個小li，放入文本框的內容和刪除按鈕， 并且添加到ul 中。

  ②點擊的刪除按鈕，可以刪除當前的微博留言。

  事件處理 off() 解綁事件

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

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

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

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

  自動觸發事件trigger()

  有些事件希望自動觸發, 比如輪播圖自動播放功能跟點擊右側按鈕一致。可以利用定時器自動觸發右側按鈕點擊事件，不必鼠標點擊觸發

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

  element.trigger(“type”)//第二種自動觸發模式

  element.triggerHandler(‘type)’ // 第三種自動觸發事件【不會觸發事件元素的默認效果】

  $("p").on("click", function () {alert("hi~");}); $("p").trigger("click"); // 此時自動觸發點擊事件，不需要鼠標點擊

  element.triggerHandler(type) // 第三種自動觸發模式

  triggerHandler模式不會觸發事件的默認效果行為，這是和前面兩種的區別。

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

  上午回顧：

  ? jQuery事件：

  ? 注冊事件：

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

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

  ? // 用on的又是：1.可以多事件同時綁定，2.事件委派，3.如果動態創建的元素可以有事件

  ? 解綁事件：

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

  ? one：一次性事件

  ? 自動觸發事件：

  ? $(元素).click();

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

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

  jQuery事件對象

  事件被觸發，就會有事件對象的產生。

  事件出發時，產生的特殊的對象

  【event==》事件對象】

  element.on(events,[selector],function(event){}) 阻止默認行為：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 功能比較有限，想要更復雜的特效效果，可以借助于 jQuery 插件完成。 注意: 這些插件也是依賴于jQuery來完成的，所以必須要先引入jQuery文件，因此也稱為 jQuery 插件。**jQuery** **插件常用的網站：**1. jQuery 插件庫 http://www.jq22.com/ 2. jQuery 之家 http://www.htmleaf.com/ **jQuery** **插件使用步驟：**1. 引入相關文件。（jQuery 文件 和 插件文件）2. 復制相關html、css、js (調用插件)。

  瀑布流：

  瀑布流

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

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

  當我們頁面滑動到可視區域，再顯示圖片。

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

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

  BOOTSTRAP插件

  1、引入CSS、引入JQ、引入JS2、.container3、復制粘貼

  知識點：

  本地存儲技術：

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

  JSON 方法補充

  作用：把字符串數組轉成數組，或者把數組轉成字符串數組例如：var str = '[{"name":"張三豐"},{"name":"李尋歡"},{"name":"喬峰"}]';JSON 解析：JSON.parse()：返回轉換后的數組JSON 轉字符串：JSON.stringify();<script type="text/javascript">var str = '[{"name":"張三豐"},{"name":"李尋歡"},{"name":"喬峰"}]';// console.log(str);// 轉成數組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

  ? 自動觸發：

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

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

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

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

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

  ? jQuery成品插件：很多

  ? 知識點：

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

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

  ?

總結

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

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