本地存儲:
本地存儲分為cookie鉴逞,以及H5新增的 localStorage 和? sessionStorage ;
本地儲存分三種恶耽,有什么區(qū)別蛹含?
1、cookie 存儲在本地撒踪,容量最大4k过咬,在同源的http請求時攜帶傳遞,損耗帶寬制妄,可設(shè)置訪問路徑掸绞,只有此路徑及此路徑的子路徑才能訪問此cookie,在設(shè)置的過期時間之前有效耕捞。
2衔掸、localStorage 存儲在本地,容量為5M或者更大砸脊,不會在請求時候攜帶傳遞具篇,在所有同源窗口中共享,數(shù)據(jù)一直有效凌埂,除非人為刪除驱显,可作為長期數(shù)據(jù)。
3瞳抓、sessionStorage 存儲在本地埃疫,容量為5M或者更大,不會在請求時候攜帶傳遞孩哑,在同源的當(dāng)前窗口關(guān)閉前有效栓霜。
localStorage 和 sessionStorage 合稱為Web Storage , Web Storage支持事件通知機(jī)制,可以將數(shù)據(jù)更新的通知監(jiān)聽者横蜒,Web Storage的api接口使用更方便胳蛮。
iPhone的無痕瀏覽不支持Web Storage销凑,只能用cookie。
jqueryUI
jQuery UI是以 jQuery 為基礎(chǔ)的代碼庫仅炊。包含底層用戶交互斗幼、動畫、特效和可更換主題的可視控件抚垄。我們可以直接用它來構(gòu)建具有很好交互性的web應(yīng)用程序蜕窿。
移動端js事件:
移動端的操作方式和PC端是不同的,移動端主要用手指操作呆馁,所以有特殊的touch事件桐经,touch事件包括如下幾個事件:
1、touchstart: //手指放到屏幕上時觸發(fā)
2浙滤、touchmove: //手指在屏幕上滑動式觸發(fā)
3阴挣、touchend: //手指離開屏幕時觸發(fā)
4、touchcancel: //系統(tǒng)取消touch事件的時候觸發(fā)瓷叫,比較少用
移動端一般有三種操作屯吊,點(diǎn)擊送巡、滑動摹菠、拖動,這三種操作一般是組合使用上面的幾個事件來完成的骗爆,所有上面的4個事件一般很少單獨(dú)使用次氨,一般是封裝使用來實(shí)現(xiàn)這三種操作,可以使用封裝成熟的js庫摘投。
zeptojs
Zepto是一個輕量級的針對現(xiàn)代高級瀏覽器的JavaScript庫煮寡, 它與jquery有著類似的api
它的最初目標(biāo)是在移動端提供一個精簡的類似jquery的js庫。
zepto包含很多模塊犀呼,默認(rèn)下載版本包含的模塊有Core, Ajax, Event, Form, IE模塊幸撕,如果還需要其他的模塊,可以自定義構(gòu)建外臂。
touch模塊封裝了針對移動端常用的事件坐儿,可使用此模塊進(jìn)行移動端特定效果開發(fā),這些事件有:
tap 元素tap的時候觸發(fā)宋光,此事件類似click貌矿,但是比click快。
longTap 當(dāng)一個元素被按住超過750ms觸發(fā)罪佳。
swipe, swipeLeft, swipeRight, swipeUp, swipeDown 當(dāng)元素被劃過時觸發(fā)逛漫。(可選擇給定的方向)
swiper
swiper.js是一款成熟穩(wěn)定的應(yīng)用于PC端和移動端的滑動效果插件,一般用來觸屏焦點(diǎn)圖赘艳、觸屏整屏滾動等效果酌毡。 swiper分為2.x版本和3.x版本克握,2.x版本支持低版本瀏覽器(IE7),3.x放棄支持低版本瀏覽器枷踏,適合應(yīng)用在移動端玛荞。
swiper使用參數(shù):
1、initialSlide:初始索引值呕寝,從0開始
2勋眯、direction:滑動方向 horizontal | vertical
3、speed:滑動速度下梢,單位ms
4客蹋、autoplay:設(shè)置自動播放及播放時間
5、autoplayDisableOnInteraction:用戶操作swipe后是否還自動播放孽江,默認(rèn)是true讶坯,不再自動播放
6、pagination:分頁圓點(diǎn)
7岗屏、paginationClickable:分頁圓點(diǎn)是否點(diǎn)擊
8辆琅、prevButton:上一頁箭頭
9、nextButton:下一頁箭頭
10这刷、loop:是否首尾銜接
11婉烟、onSlideChangeEnd:回調(diào)函數(shù),滑動結(jié)束時執(zhí)行暇屋;
swiper制作實(shí)例:
1似袁、swiper制作移動端焦點(diǎn)圖實(shí)例
2、swiper制作整頁滾動效果