日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery的介绍与应用

發布時間:2023/12/29 编程问答 29 豆豆
生活随笔 收集整理的這篇文章主要介紹了 jQuery的介绍与应用 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery已經淘汰了,有興趣的同學可以瞅瞅,等我整理筆記,到時候發布一些VUE的筆記

一、jQuery概述

1.1、JavaScript庫

JavaScript庫:即library ,是一個封裝好的特定的集合(方法和函數)。從封裝大堆函數的角度理解庫,就是在這個庫中,封裝了很多預先定義好的函數在里面,比如動畫animate、hide、show ,比如獲取元素等。

簡單理解:就是一個JS文件、里面對我們原生js代碼進行了封裝,存放到里面。這樣我們可以快速高效的使用這些封裝好的功能了。

比如jQuery ,就是為了快速方便的操作DOM ,里面基本都是函數(方法)

1.2、常見的JavaScript庫

● jQuery

● Prototype

● YUI

● Dojo

● Ext JS

● 移動端的zepto

這些庫都是對原生JavaScript的封裝,內部都是用JavaScript實現的。

1.3、jQuery的概念

jQuery是一個快速、 簡潔的JavaScript庫,其設計的宗旨是 “write Less , Do More”

即倡導寫更少的代碼,做更多的事情。

j就是JavaScript; Query 查詢;意思就是查詢js ,把js中的DOM操作做了封裝,我們可以快速的查詢使用里面的功能。

jQuery封裝了JavaScript常用的功能代碼,優化了DOM操作、事件處理、動畫設計和Ajax交互。

學習jQuery本質:就是學習調用這些函數(方法)。

jQuery出現的目的是加快前端人員的開發速度,我們可以非常方便的調用和使用它,從而提高開發效率。

1.4、jQuery的優點

● 輕量級。 核心文件才幾十kb ,不會影響頁面加載速度。

● 跨瀏覽器兼容。 基本兼容了現在主流的瀏覽器。

● 鏈式編程、 隱式迭代。

● 對事件、 樣式、動畫支持,大大簡化了DOM操作。

● 支持插件擴展開發。有著豐富的第三方的插件,例如:樹形菜單、日期控件、輪播圖等。

● 免費、開源。

二、jQuery的基本使用

2.1、jQuery 的下載

官網地址: https://jquery.com/

版本:

● 1x :兼容IE678等低版本瀏覽器,官網不再更新。

● 2x:不兼容IE 678等低版本瀏覽器,官網不再更新。

● 3x :不兼容IE 678等低版本瀏覽器,是官方主要更新維護的版本。

各個版本的下載: https://code.jquery.com/

2.2、jQuery使用步驟

1.引入jQuery文件。

2.使用即可。

2.3、jQuery的入口函數


① 等著DOM結構渲染完畢即可執行內部代碼,不必等到所有外部資源加載完成, jQuery幫我們完成了封裝。

② 相當于原生js中的DOMContentl oaded 。

③ 不同于原生js 中的load事件是等頁面文檔、外部的js文件、css文件、 圖片加載完畢才執行內部代碼。

2.4、jQuery的頂級對象$

是jQuery的別稱,在代碼中可以使用jQuery代替是jQuery的別稱,在代碼中可以使用jQuery代替jQuery,使jQuery ,但一般為了方便,通常都直接使用$。

是jQuery的頂級對象,相當于原生JavaScript中的window。把元素利用是jQuery的頂級對象,相當于原生JavaScript中的window。 把元素利用jQueryJavaScriptwindow包裝成jQuery對象,就可以調用jQuery的方法。

2.5、jQuery 對象和DOM對象

1.用原生JS獲取來的對象就是DOM對象。

\2. jQuery方法獲取的元素就是jQuery對象。

\3. jQuery對象本質是:利用$對DOM對象包裝后產“生的對象(偽數組形式存儲)。

4. jQuery 對象只能使用jQuery 方法,DOM對象則使用原生的JavaScirpt 屬性和方法。

DOM對象與jQuery對象之間是可以相互轉換的。

因為原生js比jQuery更大,原生的一-些屬性和方法jQuery沒有給我們封裝要想使用這些屬性和方法需要把jQuery對象轉換為DOM對象才能使用。

1. DOM對象轉換為jQuery對象: $(DOM對象)

2. jQuery對象轉換為DOM對象(兩種方式)


jQuery常用API

1.1、jQuery 基礎選擇器

原生JS獲取元素方式很多,很雜,而且兼容性情況不一致,因此jQuery給我們做了封裝,使獲取元素統一標準。


1.2 、jQuery 層級選擇器

1.3、隱式迭代(重要)

遍歷內部DOM元素(偽數組形式存儲)的過程就叫做隱式迭代。

簡單理解:給匹配到的所有元素進行循環遍歷,執行相應的方法,而不用我們再進行循環,簡化我們的操作,方便我們調用。

1.4、jQuery 篩選選擇器



1.5、jQuery篩選方法(重點)


parents $(“li”).parents(“.div”) 查找所有父級元素中的div

更推薦用紅框的寫法篩選第幾個元素,這樣便于用變量。

重點記住: parent()children()find()siblings()eq()

1.6、jQuery里面的排他思想

想要多選一的效果,排他思想:當前元索設置樣式,其余的兄弟元素清除樣式。

1.7、鏈式編程

鏈式編程是為了節省代碼量,看起來更優雅。

使用鏈式編程一定注意是哪個對象執行樣式

二、jQuery樣式操作

2.1 操作css方法

jQuery可以使用css方法來修改簡單元素樣式;也可以操作類,修改多個樣式。

1.參數只寫屬性名,則是返回屬性值

2.參數是屬性名,屬性值,逗號分隔,是設置一組樣式,屬性必須加引號。值如果是數字可以不用跟單位和引號。

3.參數可以是對象形式,方便設置多組樣式。屬性名和屬性值用冒號隔開,屬性可以不用加引號。(如果是復合屬性則必須采取駝峰命名法,如果值不是數字,則需要加引號)

2.2設置類樣式方法

作用等同于以前的classList ,可以操作類樣式,注意操作類里面的參數不要加點。

1.添加類addClass()

2.刪除類removeClass()

3.切換類toggleClass()

(有這個類就移除,沒有就添加)

2.3、類操作與className區別

原生JS中className會覆蓋元素原先里面的類名。

jQuery里面類操作只是對指定類進行操作,不影響原先的類名。

三、jQuery效果

jQuery給我們封裝了很多動畫效果,最為常見的如下:

顯示隱藏

滑動

淡入淡出

自定義動畫

3.1、顯示隱藏效果

1.顯示語法規范

顯示參數

(1) 參數都可以省略,無動畫直接顯示。

(2) speed :三種預定速度之一的字符串( “slow” , “nommal” , or “fast” )或表示動畫時長的毫秒數值(如: 1000)。

(3) easing : (Optional)用來指定切換效果,默認是"swing” , 可用參數"Iinear" 。

(4) fn:回調函數,在動畫完成時執行的函數,每個元素執行一次。

2.隱藏語法規范

隱藏參數

(1) 參數都可以省略,無動畫直接顯示。

(2) speed:三種預定速度之-的字符串( “slow”,“normal” ,or “fast” )或表示動畫時長的毫秒數值(如: 1000)。

(3) easing : (Optional)用來指定切換效果,默認是"swing” , 可用參數"linear"。

(4) fn:回調函數,在動畫完成時執行的函數,每個元索執行一次。

3.切換語法規范

切換參數

(1) 參數都可以省略,無動畫直接顯示。

(2) speed:三種預定速度之一的字符串( “slow”,“normal” ,or “fast” )或表示動畫時長的毫秒數值(如: 1000)。

(3) easing : (Optional)用來指定切換效果,默認是"swing” , 可用參數"Iinear"。

(4) fn:回調函數,在動畫完成時執行的函數,每個元索執行一次。

3.2、滑動效果

1.下滑效果語法規范

2.下滑效果語法規范

3.滑動切換效果語法規范

各個參數

(1) 參數都可以省略。

(2) speed:三種預定速度之一的字符串( “slow” , “normal” , or “fast” )或表示動畫時長的毫秒數值(如: 1000)。

(3) easing:(Optional)用來指定切換效果,默認是"swing”, 可用參數"Iinear”

(4) fn:回調函數,在動畫完成時執行的函數,每個元素執行次。

3.3、事件切換

( 1 ) over:鼠標移到元素上要觸發的函數(相當于mouseenter )。

( 2 ) out:鼠標移出元素要觸發的函數(相當于mouseleave )。

( 3 ) 事件切換hover 就是鼠標經過和離開的復合寫法。

( 4 ) 事件切換hover如果只寫一個函數,那么鼠標經過和鼠標離開都會觸發這個函數。

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

1.動畫或效果隊列

動畫或者效果一旦觸發就會執行,如果多次觸發,就造成多個動畫或者效果排隊執行。

2.停止排隊

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

(2) 注意: stop(寫到動畫或者效果的前面,相當于停止結束上一次的動畫)。

3.5、淡入淡出效果

1.淡入效果語法規范

2.淡出效果語法規范

3.淡入淡出切換效果語法規范

效果參數

(1 )參數都可以省略。

(2 ) speed :三種預定速度之一的字符串( “slow”,“normal” ,or “fast” )或表示動畫時長的毫秒數值(如: 1000)。

( 3 ) easing : (Optional)用來指定切換效果,默認是"swing” ,可用參數"Ilinear" 。

(4 ) fn:回調函數,在動畫完成時執行的函數,每個元素執行一次。

4.漸進方式調整到指定的不透明度

效果參數

( 1 ) opacity:透明度必須寫,取值0~1之間。

( 2 ) speed : 三種預定速度之切的字符串( “slow”,“normal” ,or “fast” )或表示動畫時長的毫秒數值(如: 1000)。必須寫

( 3 ) easing : (Optional)用來指定切換效果,默認是"swing" , 可用參數"linear” 。

( 4 ) fn:回調函數,在動畫完成時執行的函數,每個元素執行一次。

3.6自定義動畫animate

1.語法

參數:

( 1 ) params:想要更改的樣式屬性,以對象形式傳遞,必須寫。 屬性名可以不用帶引號,如果是復合屬性則需要采取駝峰命名法borderLeft。 其余參數都可以省略。

(2 ) speed: 三種預定速度之一的字符串( “slow” ,“normal” , or “fast” )或表示動畫時長的亳秒數值(如: 1000)。

(3 ) easing : (Optional)用來指定切換效果,默認是"swing” , 可用參數"linear" 。

(4 ) fn:回調函數,在動畫完成時執行的函數,每個元素執行一次。

四、jQuery屬性操作

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

所謂元素固有屬性就是元素本身自帶的屬性,比如元素里面的href , 比如元素里面的type 。

1.獲取屬性語法.

2.設置屬性語法

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

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

1.獲取屬性語法

2.設置屬性語法

該方法也可以獲取H5自定義屬性

4.3、數據緩存data()

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

1.附加數據語法

2.獲取數據語法


同時,還可以讀取HTML5自定義屬性data-index 。得到的是數字型

這個方法獲取 data-index h5 自定義屬性第一個不用寫 data- 而且返回的是數字型

五、jQuery內容文本值

主要針對元素的內容還有表單的值操作。

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


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


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

同上。

六. jQuery元素操作

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

6.1、遍歷元素

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

語法1:

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

2.里面的回調函數有2個參數: index 是每個元素的索引號; demEle是每個DOM元素對象不是jquery對象。

3.所以要想使用jquery方法,需要給這個dom元素轉換為jquery對象$(domEle)

例:讓每個div有不同顏色

語法2:


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

2.里面的函數有2個參數: index 是每個元素的索引號; element遍歷內容




6.2、創建元素

語法:


動態的創建了一個

  • 6.3、添加元素

    1.內部添加


    把內容放入匹配元素內部最后面,類似原生appendChild 。

    內部添加并且放到內容的最前面,

    2.外部添加


    ① 內部添加元素,生成之后,它們是父子關系。

    ② 外部添加元素,生成之后,他們是兄弟關系。

    6.4、刪除元素




    七、jQuery尺寸、位置操作

    7.1、jQuery 尺寸

    ● 以上參數為空,則是獲取相應值,返回的是數字型。

    ● 如果參數為數字,則是修改相應值。

    ● 參數可以不必寫單位。

    7.2、jQuery 位置

    位置主要有三個: offset()、position()、scrollTop()/scrollLeft()

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

    ①offset() 方法設置或返回被選元素相對于文檔的偏移坐標,跟父級沒有關系。

    ①offset() 方法設置或返回被選元索相對于文檔的偏移坐標,跟父級沒有關系。

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

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

    2.position()獲取元素偏移

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

    ② 這個方法只能獲取不能設置偏移。

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

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

    jQuery事件

    一、jQuery事件注冊

    單個事件注冊

    語法:


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

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

    二、事件處理

    2.1、事件處理 on()綁定事件

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

    語法:

    1.events: 一個或多個用空格分隔的事件類型,如"click" 或"keydown"。

    2 selector: 元素的子元素選擇器。

    3.fn:回調函數即綁定在元素身上的偵聽函數。

    例:

    優勢:

    ● 可以綁定多個事件,多個處理事件處理程序。

    語法:


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

    語法:

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

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

    2.2、事件處理off()解綁事件

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

    語法:

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

    2.3、自動觸發事件trigger()

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

    有三種方式:



    trigger()語法:


    元素. triggerHandler(“事件”)就是不會觸發元素的默認行為。

    2.4、事件切換toggle

    當單擊jq對象對應的組件后,會執行fn1,第二次點擊會執行fn2。

    注意: 1.9版本.toggle()方法刪除,jQuery Migrate (遷移)插件可以恢復此功能。

    2.5、jQuery事件對象

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

    阻止默認行為: event.preventDefault() 或者return false

    阻止冒泡: event.stopPropagation0

    2.6、補充

    jQuery其他方法

    一、jQuery拷貝對象extend ()

    如果想要把某個對象拷貝(合并)給另外一個對象使用,此時可以使用 $.extend() 方法

    語法:

    參數值:

    1.deep:如果設為true為深拷貝,默認為false淺拷貝。

    2.target:要拷貝的目標對象。

    3.object1:待拷貝到第一個對象的對象。

    4.objectN:待拷貝到第N個對象的對象。

    5.淺拷貝是把被拷貝的對象復雜數據類型中的地址拷貝給目標對象,修改目標對象影響被拷貝對象。

    6.深拷貝把里面的數據完全復制一份給目標對象如果里面有不沖突的屬性,會合并到一起。修改目標對象不會影響被拷貝對象。

    二、多庫共存

    問題概述:

    jQuery使用作為標示符,隨著jQuery的流行,其他js庫也會用這作為標示符,隨著jQuery的流行,其他js庫也會用這,jQuery,js作為標識符,這樣-起使用會引起沖突。

    客觀需求:

    需要一個解決方案,讓jQuery和其他的js庫不存在沖突,可以同時存在,這就叫做多庫共存。

    jQuery解決方案:

    1.把里面的$符號統-改為jQuery。 比如jQuery("div’)

    2.jQuery變量規定新的名稱: $.noConflict() var xx = $.noConflict();

    三、jQuery插件

    jQuery功能比較有限,想要更復雜的特效效果,可以借助于jQuery插件完成。

    注意:這些插件也是依賴于jQuery來完成的,所以必須要先引入jQuery文件,因此也稱為jQuery插件。

    3.1、jQuery插件常用的網站:

    1.jQuery插件庫http://www.jq22.com/

    2.jQuery之家http://www.htmleaf.com/

    3.2、jQuery插件使用步驟:

    1.引入相關文件。(jQuery文件 和插件文件)

    2.復制相關html. Css、 js (調用插件)。

    3.3、jQuery插件演示:

    1.瀑布流

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

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

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

    3.全屏滾動( fllpagejis )

    gitHub : https://ithub.com/alvrotrigopfullPagejis

    中文翻譯網站: http://www.dowebok.com/demo/2014/77/

    3.4、bootstrap JS插件:

    bootstrap框架也是依賴于jQuery開發的,因此里面的js插件使用, 也必須引入jQuery文件。

    例(返回頂部顯示案例)

    開發實例

    一、下拉菜單

    JS代碼:

    優化后JS:

    簡化后JS:

    最終簡化版:


    Bug修復最終簡化版:

    二、淘寶精品推薦欄

    思路:

    ① 核心原理:鼠標經過左側盒子某個小i ,就讓內容區盒子相對應圖片顯示,其余的圖片隱藏。

    ② 需要得到當前小i的索引號,就可以顯示對應索引號的圖片。

    ③ jQuery得到當前元素索引號**$(this).index()**。

    ④ 中間對應的圖片,可以通過eq(index)方法去選擇。

    ⑤ 顯示元素show0隱藏元素hide()。

    JS代碼:

    三、tab欄切換

    思路:

    ①點擊上部的li。當前li添加current類,其余兄弟移除類。

    ②點擊的同時,得到當前li的索引號

    ③讓下部里面相應索引號的item顯示,其余的item隱藏

    JS代碼:

    四、王者榮耀手風琴效果

    思路:

    ①鼠標經過某個小li有兩步操作。

    ②當前小li寬度變為224px ,同時里面的小圖片淡出,大圖片淡入。

    ③其余兄弟小li寬度變為69px ,小圖片淡入,大圖片淡出。

    HTML代碼(部分):

    (初始顯示小圖,隱藏大圖,小圖定位到大圖上,鼠標到哪組圖,顯示大圖隱藏小圖)

    JS 代碼:

    五、全選功能

    思路:

    ① 全選思路:里面3個小的復選框按鈕( j-checkbox )選中狀態( checked )跟著全選按鈕( checkall )走。

    ② 因為checked是復選框的固有屬性,此時我們需要利用prop0方法獲取和設置該屬性。

    ③ 把全選按鈕狀態賦值給多小復選框就可以了。

    ④當我們每次點擊小的復選框按鈕,就來判斷:

    ⑤如果小復選框被選中的個數等于復選框個數就應該把全選按鈕選上,否則全選按鈕不選。

    ⑥:checked 選擇器:checked 查找被選中的表單元素。

    HTML 代碼:

    JS 代碼:


    六、購物車模塊

    6.1、購物車增減商品

    思路:

    ① 核心思路:首先聲明一個變量,當我們點擊+號( increment) , 就讓這個值++ ,然后賦值給文本框。

    ② 注意1 :只能增加本商品的數量,就是當前+號的兄弟文本框( itxt )的值。

    ③ 修改表單的值是val()方法。

    ④ 注意2:這個變量初始值應該是這個文本框的值,在這個值的基礎上++。要獲取表單的值。

    ⑤減號( decrement )思路同理,但是如果文本框的值是1 ,就不能再減了。

    JS代碼:

    6.2、購物車修改商品小計

    思路:

    ①核心思路:每次點擊+號或者號,根據文本框的值剩以當前商品的價格就是商品的小計

    ②注意1 :只能增加本商品的小計,就是當前商品的小計模塊( p-sum )

    ③修改普通元素的內容是text()方法

    ④注意2:當前商品的價格,要把¥符號去掉再相乘 截取字符串substr(1)

    JS 代碼:

    優化版:

    ⑤ parents( '選擇器’ ) 可以返回指定祖先元素。

    ⑥最后計算的結果如果想要保留2位小數通過**toFixed(2)**方法

    修復BUG(手動輸入不會更改總價)版:

    ⑦ 用戶也可以直接修改表單里面的值,同樣要計算小計。用表單change事件。

    ⑧ 用最新的表單內的值乘以單價即可但是還是當前商品小計。

    6.3、總計模塊

    思路:

    ① 核心思路:把所有文本框里面的值相加就是總計數量。總額同理。

    ② 文本框里面的值不相同,如果想要相加需要用到each遍歷。聲明一個變量,相加即呵。

    ③ 點擊+號-號,會改變總計和總額,如果用戶修改了文本框里面的值同樣會改變總計和總額。

    ④ 因此可以封裝yi個函數求總計和總額的,以上2個操作調用這個函數即可。

    ⑤ 注意1 :總計是文本框里面的值相加用val() 總額是普通元su的內容用text()。


    (再點擊或手動修改后直接調用就行)

    6.4、刪除商品模塊

    思路:

    ① 核心思路:把商品remove0刪除元素即可。

    ② 有三個地方需要刪除: 1. 商品后面的刪除按鈕2.刪除選中的商品3.清理購物車。

    ③ 商品后面的刪除按鈕: -定是刪除當前的商品,所以從$(this)出發。

    ④刪除選中的商品:先判斷小的復選框按鈕是否選中狀態,如果是選中,則刪除對應的商品。

    JS代碼:

    6.5、給選中商品添加背景

    思路:

    ① 核心思路:選中的商品添加背景,不選中移除背景即可。

    ② 全選按鈕點擊:如果全選是選中的,則所有的商品添加背景,否則移除背景。

    ③ 小的復選框點擊:如果是選中狀態,則當前商品添加背景,否則移除背景。

    ④ 這個背景,可以通過類名修改,添加類和刪除類。

    JS代碼:


    七、發布微博案例

    思路:

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

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

    HTML 代碼:

    JS 代碼:

    八、帶有動畫的返回頂部

    思路:

    ①核心原理:使用animate動畫返回頂部。

    ②animate動畫函數里面有個scrollTop屬性,可以設置位置。

    ③但是只有可以元素做動畫,因此$( “body,html” ).animate(scrollTop: 0})

    九、電梯導航案例

    思路:

    ①當我們滾動到今日推薦模塊,就讓電梯導航顯示出來。

    ②點擊電梯導航頁面可以滾動到相應內容區域。

    ③核心算法:因為電梯導航模塊和內容區模塊一對應的。

    ④當我們點擊電梯導航某個小模塊,就可以拿到當前小模塊的索引號。

    ⑤就可以把animate要移動的距離求出來:當前索引號內容區模塊它的offst).top。

    ⑥然后執行動畫即可。

    JS代碼:

    顯示隱藏優化版:



    ① 當我們點擊電梯導航某個小i,當前小i添加current類,兄弟移除類名。

    ② 當我們頁面滾動到內容區域某個模塊,左側電梯導航,相對應的小i模塊,也會添加current類,兄弟移除current類。

    ③ 觸發的事件是頁面滾動,因此這個功能要寫到頁面滾動事件里面。

    ④ 需要用到each ,遍歷內容區域大模塊。each里面能拿到內容區域每一個模塊元素和索引號。

    ⑤ 判斷的條件:被卷去的頭部大于等于內容區域里面每個模塊的offset().top。

    ⑥ 就利用這個索引號找到相應的電梯導航小li添加類。

    ⑦ 節流閥(互斥鎖)。

總結

以上是生活随笔為你收集整理的jQuery的介绍与应用的全部內容,希望文章能夠幫你解決所遇到的問題。

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