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

编程问答

本地存储和移动端js框架及bootstrap简介

發布時間：2024/4/11 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了本地存储和移动端js框架及bootstrap简介小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本地存儲和移動端js框架

文章目錄

本地存儲和移動端js框架
- 一、本地存儲
- - 1.cookie
  - 2.localStorage
  - 3.sessionStorage
- 二、jquery UI
- 三、移動端js事件
- - 1.觸摸事件包含4個接口。
  - 2.事件類型：
  - 3.事件屬性：
  - 4.觸摸事件跟鼠標事件的觸發先后順序：
- 四、Zepto
- 五swiper
- 六、bootstrap
- - 1.bootstrap 容器
  - 2.bootstrap響應式查詢區間：
  - 3.bootstrap 柵格系統
  - 4.列偏移
  - 5.bootstrap 按鈕
  - 6.bootstrap 表單
  - 7.bootstrap 圖片
  - 8.bootstrap 字體圖標
  - 9.bootstrap 導航條
  - 10.路徑導航
  - 11.bootstrap 模態框
  - 12.bootstrap 下拉菜單
  - 13.bootstrap 隱藏類

一、本地存儲

1.cookie

定義：
存儲在本地，容量最大4k，在同源的http請求時攜帶傳遞，損耗帶寬；
可設置訪問路徑，只有此路徑及此路徑的子路徑才能訪問此cookie，存在有效的時間。
注意點：
cookie的訪問需要服務器環境，直接在本地文件訪問無效；
cookie的訪問和設置需要導入jquery.cookie.js文件；
瀏覽器對每一個訪問的地址下可添加的cookie是有限制的；同時每個瀏覽器可添加的cookie個數也存在限制。
作用：
儲存用戶的痕跡信息，如用戶名，ID號，密碼等，是服務器腳本發送給瀏覽器的加密數據，便于下次訪問時用戶可以直接登錄等；

運用代碼

//訪問cookie，mycolor代表鍵 var $cook = $.cookie("mycolor");//設置cookie $.cookie("mycolor", "red"}); $.cookie("mycolor", "red", { expires: 7, path: '/' });//增加了有效時間和訪問路徑//刪除cookie,傳遞null值 $.cookie("mycolor", null});

說明：

'mycolor'參數相當于cookie存儲數據的鍵，即數據的名字，通過名字訪問；
cookie的設置有三個參數，第一為設置數據的鍵，第二個為設置數據的值，第三個expires表示有效時間，單位為天，path為訪問路徑，"/"表示當前文件路徑，在網站中表示根目錄。
注意：如果不設置路徑，默認情況下只有設置cookie的網頁才可以訪問此cookie；如果想網站的網頁可以共享cookie，將路徑設為根目錄。
注意：cookie就相當于一個能存儲數據的微型本地數據庫，"mycolor"相當于每條數據的key。

2.localStorage

定義：一個本地的小型數據文件
存儲在本地，容量為5M或者更大，不會在請求時候攜帶傳遞；
數據在所有同源窗口中共享，一直有效，除非人為刪除，可作為長期數據。
注意點：
localStorage數據不需要依賴服務器環境訪問，可以直接在本地文件訪問；不需要額外的文件支持。
同源窗口指的是同一個域名下或者是index.html所在的文件夾下的文件路徑。

代碼運用

//設置： localStorage.setItem("mycolor", "456"); localStorage.mycolor= '456';//獲取： var $color = localStorage.getItem("mycolor"); var $color = localStorage.mycolorvar $color = localStorage.key(0);//獲取第一個鍵，按角標獲取 var $color = localStorage.key("");//獲取最后一個鍵var $length = localStorage.length;//獲取數據的長度//刪除 localStorage.removeItem("mycolor");//清空 localStorage.clear();//將所有保存的數據刪除

說明：
設置數據格式類似鍵值對，"mycolor"代表key,"456"代表值。
數據是有排序的，后加入的角標靠前，最后加入的角標為0.
注意：localStorage相當于將數據保存在磁盤，是永久的，但是其針對的是固定的域名下的文件，打開其他的域名下的網頁，localStorage不會顯示。

3.sessionStorage

定義：一個本地的小型數據庫
存儲在本地，容量為5M或者更大;
不會在請求時候攜帶傳遞，在同源的當前窗口關閉前有效。
注意點：
sessionStorage同樣不需要再服務器的環境下運行；
不需要額外的文件支持；
sessionStorage數據設置后即使頁面進行重載也不會清除；但當該窗口關閉后，里面的數據就會清除，再打開沒有數據。相當于將數據保存在內存中。

代碼運用

//設置： sessionStorage.setItem("mycolor", "456"); sessionStorage.mycolor= '456';//獲取： var $color = sessionStorage.getItem("mycolor"); var $color = sessionStorage.mycolorvar $color = sessionStorage.key(0);//獲取第一個鍵，按角標獲取 var $color = sessionStorage.key("");//獲取最后一個鍵var $length = sessionStorage.length;//獲取數據的長度//刪除 sessionStorage.removeItem("mycolor");//清空 sessionStorage.clear();//將所有保存的數據刪除

說明：
sessionStorage的使用方法和localStorage一樣。
數據是有排序的，后加入的角標靠前，最后加入的角標為0.

二、jquery UI

jQuery UI是以 jQuery 為基礎的代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件。我們可以直接用它來構建具有很好交互性的web應用程序。

jqueryUI 網址

設置數值的滑動條

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>drag</title><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript">$(function(){$('.dragbar').draggable({axis:'x',containment:'parent',//containment:[0,0,600,0]//設置拖動時候的透明度opacity:0.6,drag:function(ev,ui){//console.log(ui.position.left);//獲取拖動的距離 var nowleft = ui.position.left;$('.progress').css({width:nowleft});$('.slide_count').val(parseInt(nowleft*100/570));}});})</script><style type="text/css">.slidebar_con{width:650px;height:32px;margin:50px auto 0;}.slidebar{width:600px;height:30px;border:1px solid #ccc; float:left;position:relative;}.slidebar .dragbar{width:30px;height:30px;background-color:gold;cursor:pointer;position:absolute;left:0;top:0;}.slidebar .progress{width:0px;height:30px;background-color:#f0f0f0;position:absolute;left:0;top:0;}.slide_count{padding:0;float:right;width:40px;height:30px;border:1px solid #ccc;text-align:center;font-size:16px;}</style> </head> <body><div class="slidebar_con"><div class="slidebar"><div class="progress"></div><div class="dragbar"></div></div><input type="text" name="" value="0" class="slide_count"></div> </body> </html>

自定義滾動條

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>自定義滾動條</title><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript">$(function(){var h = $('.paragraph').outerHeight();//整體文本的高度減去外面容器的高度var hide = h-500;$('.scroll_bar').draggable({axis:'y',containment:'parent',opacity:0.6,drag:function(ev,ui){var nowtop = ui.position.top;var nowscroll = parseInt(nowtop/290*hide);$('.paragraph').css({top:-nowscroll});}});})</script><style type="text/css">.scroll_con{width:400px;height:500px;border:1px solid #ccc;margin:50px auto 0;position:relative;overflow:hidden;}.paragraph{width:360px;position:absolute;left:0;top:0;padding:10px 20px;font-size:14px;font-family:'Microsoft Yahei';line-height:32px;text-indent:2em;}.scroll_bar_con{width:10px;height:490px;position:absolute;right:5px;top:5px;}.scroll_bar{width:10px;height:200px;background-color:#ccc;position:absolute;left:0;top:0;cursor:pointer;border-radius:5px;} </style> </head> <body><div class="scroll_con"><div class="paragraph">2005年以后，互聯網進入Web2.0時代，各種類似桌面軟件的Web應用大量涌現，網站的前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術實現的。以前會Photoshop和Dreamweaver就可以制作網頁，現在只掌握這些已經遠遠不夠了。無論是開發難度上，還是開發方式上，現在的網頁制作都更接近傳統的網站后臺開發，所以現在不再叫網頁制作，而是叫Web前端開發。Web前端開發在產品開發環節中的作用變得越來越重要，而且需要專業的前端工程師才能做好，這方面的專業人才近幾年來備受青睞。Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。掌握HTML是網頁的核心，是一種制作萬維網頁面的標準語言，是萬維網瀏覽器使用的一種語言，它消除了不同計算機之間信息交流的障礙。因此，它是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言，學好HTML是成為Web開發人員的基本條件。學好CSS是網頁外觀的重要一點，CSS可以幫助把網頁外觀做得更加美觀。學習JavaScript的基本語法，以及如何使用JavaScript編程將會提高開發人員的個人技能。了解Unix和Linux的基本知識雖然這兩點很基礎，但是開發人員了解Unix和Linux的基本知識是有益無害的。了解Web服務器當你對Apache的基本配置，htaccess配置技巧有一些掌握的話，將來必定受益，而且這方面的知識學起來也相對容易。</div><div class="scroll_bar_con"><div class="scroll_bar"></div></div></div> </body> </html>

三、移動端js事件

1.觸摸事件包含4個接口。

TouchEvent

代表當觸摸行為在平面上變化的時候發生的事件.

Touch

代表用戶手指與觸摸平面間的一個接觸點.

TouchList

代表一系列的Touch; 一般在用戶多個手指同時接觸觸控平面時使用這個接口.

DocumentTouch

包含了一些創建 Touch對象與TouchList對象的便捷方法.

TouchEvent接口可以響應基本觸摸事件（如單個手指點擊），它包含了一些具體的事件，

2.事件類型：

touchstart : 觸摸開始（手指放在觸摸屏上）touchmove : 拖動（手指在觸摸屏上移動）touchend : 觸摸結束（手指從觸摸屏上移開）touchenter ：移動的手指進入一個dom元素。touchleave ：移動的手指離開一個dom元素。還有一個touchcancel，是在拖動中斷時候觸發。

3.事件屬性：

altKey : 該屬性返回一個布爾值，表示在指定的事件發生時，Alt 鍵是否處于按下狀態， event.altKey=true|false|1|0type : 觸摸時觸發的事件類型，比如touchstart

每個觸摸事件都包括了三個觸摸屬性列表：

touches：當前位于屏幕上的所有手指觸摸點的一個列表。

targetTouches：當前元素對象上所有觸摸點的列表。

changedTouches：涉及當前事件的觸摸點的列表。

它們都是一個數組，每個元素代表一個觸摸點。

每個觸摸點對應的Touch都有三對重要的屬性，clientX/clientY、pageX/pageY、screenX/screenY。

其中screenX/screenY代表事件發生的位置對于屏幕的偏移量
clientX/clienYt和pageX/pageY都代表事件發生位置對應對象的偏移量
區別是clientX/clientY不包括對象滾動而隱藏的偏移量，而pageX/pageY包括對象滾動而隱藏的偏移量。
移開屏幕的那個觸摸點，只會包含在changedTouches列表中，而不會包含在touches 和targetTouches 列表中，所以changedTouches在項目當中會比較常用。

示例：

<body onload="start();"> <style type="text/css"> #dom {width:500px;height:500px;background:black; } </style> <div id="dom"></div> <script type="text/javascript"> function onTouchStart(e){console.log(e); } function start(){var dom = document.getElementById('dom');dom.addEventListener('touchstart', onTouchStart, false); } </script> </body>

4.觸摸事件跟鼠標事件的觸發先后順序：

Touchstart > toucheend > mousemove > mousedown > mouseup > click

很多情況下觸摸事件跟鼠標事件會同時觸發（目的是為了讓沒有對觸摸設備優化的代碼仍然可以在觸摸設備上正常工作），如果使用了觸摸事件，可以調用event.preventDefault()來阻止鼠標事件被觸發。
而手指在屏幕上移動touchmove則不會觸發鼠標事件和單擊事件,在touchmove事件中加入preventDefault, 可以禁止瀏覽器滾動屏幕，也不會影響單擊事件的觸發。
以上事件，都系統內置的，可以直接使用，通過這些內置事件，可以組合成很多非原生的多點觸摸手勢touch手勢。

四、Zepto

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫，它與jquery有著類似的api。如果你會用jquery，那么你也會用zepto。Zepto的一些可選功能是專門針對移動端瀏覽器的；它的最初目標是在移動端提供一個精簡的類似jquery的js庫。

zepto官網：zepto官網
zepto中文api：zepto中文api
zepto包含很多模塊，默認下載版本包含的模塊有Core, Ajax, Event, Form, IE模塊，如果還需要其他的模塊，可以自定義構建。
zepto自定義構建地址：zepto自定義構建地址
Zepto.js API 中文版 (1.2.0)Zepto.js API 中文版 (1.2.0)

五swiper

swiper.js是一款成熟穩定的應用于PC端和移動端的滑動效果插件，一般用來觸屏焦點圖、觸屏整屏滾動等效果。 swiper分為2.x版本和3.x版本，2.x版本支持低版本瀏覽器(IE7)，3.x放棄支持低版本瀏覽器，適合應用在移動端。

2.x版本中文網址：2.x版本中文網址
3.x版本中文網地址：3.x版本中文網地址

swiper使用方法：

......<link rel="stylesheet" type="text/css" href="css/swiper.min.css"> ......<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">slider1</div><div class="swiper-slide">slider2</div><div class="swiper-slide">slider3</div></div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div> </div><script> var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',prevButton: '.swiper-button-prev',nextButton: '.swiper-button-next',initialSlide :1,paginationClickable: true,loop: true,autoplay:3000,autoplayDisableOnInteraction:false }); </script>

swiper使用參數：

1、initialSlide：初始索引值，從0開始 2、direction：滑動方向 horizontal | vertical 3、speed：滑動速度，單位ms 4、autoplay：設置自動播放及播放時間 5、autoplayDisableOnInteraction：用戶操作swipe后是否還自動播放，默認是true，不再自動播放 6、pagination：分頁圓點 7、paginationClickable：分頁圓點是否點擊 8、prevButton：上一頁箭頭 9、nextButton：下一頁箭頭 10、loop：是否首尾銜接

六、bootstrap

簡單、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。來自Twitter，是目前很受歡迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的，讓書寫代碼更容易。移動優先，響應式布局開發。

bootstrap中文網址：bootstrap中文網址

1.bootstrap 容器

container-fluid 流體
container
1170
970
750
100%

<div class="container-fluid">流體容器</div> <div class="container">響應式固定容器</div>

2.bootstrap響應式查詢區間：

1、大于等于768
2、大于等于992
3、大于等于1200

3.bootstrap 柵格系統

bootstrap將頁面橫向分為12等分，按照12等分定義了適應不同寬度等分的樣式類，這些樣式類組成了一套響應式、移動設備優先的流式柵格系統：

1、col-lg- 大于1200排成一行，小于1200分別占一行
2、col-md- 大于992排成一行，小于992分別占一行
3、col-sm- 大于768排成一行，小于768分別占一行
4、col-xs- 始終排列成一行

4.列偏移

1、col-lg-offset-
2、col-md-offset-
3、col-sm-offset-
4、col-xs-offset-

5.bootstrap 按鈕

1、btn 聲明按鈕
2、btn-default 默認按鈕樣式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 寬度是父級寬100%的按鈕
13、active
14、disabled
15、btn-group 定義按鈕組

<div class="btn-group"><input type="button" name="" value="按鈕一" class="btn btn-primary"><input type="button" name="" value="按鈕二" class="btn btn-warning"><input type="button" name="" value="按鈕三" class="btn btn-danger"> </div> <div class="btn-group btn-group-justified"><div class="btn-group"><input type="button" name="" value="按鈕一" class="btn btn-primary"></div><div class="btn-group"><input type="button" name="" value="按鈕二" class="btn btn-warning"></div><div class="btn-group"><input type="button" name="" value="按鈕三" class="btn btn-danger"></div> </div> <div class="btn-group btn-group-justified"><a href="#" class="btn btn-primary">按鈕一</a><a href="#" class="btn btn-default">按鈕二</a><a href="#" class="btn btn-default">按鈕三</a> </div>

6.bootstrap 表單

1、form 聲明一個表單域
2、form-inline 內聯表單域
3、form-horizontal 水平排列表單域
4、form-group 表單組、包括表單文字和表單控件
5、form-control 文本輸入框、下拉列表控件樣式
6、checkbox checkbox-inline 多選框樣式
7、radio radio-inline 單選框樣式
8、input-group 表單控件組
9、input-group-addon 表單控件組物件樣式
10、input-group-btn 表單控件組物件為按鈕的樣式
11、form-group-lg 大尺寸表單
12、form-group-sm 小尺寸表單

<form role="form"><div class="form-group form-group-lg"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button> </form> <div class="input-group"><input type="text" class="form-control"><span class="input-group-addon">@</span> </div> <div class="input-group"><input type="text" class="form-control"><span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span> </div>

7.bootstrap 圖片

img-responsive 聲明響應式圖片

8.bootstrap 字體圖標

通過字體代替圖標，font文件夾需要和css文件夾在同一目錄

9.bootstrap 導航條

1、navbar 聲明導航條
2、navbar-default 聲明默認的導航條樣式
3、navbar-inverse 聲明反白的導航條樣式
4、navbar-static-top 去掉導航條的圓角
5、navbar-fixed-top 固定到頂部的導航條
6、navbar-fixed-bottom 固定到底部的導航條
7、navbar-header 申明logo的容器
8、navbar-brand 針對logo等固定內容的樣式
11、nav navbar-nav 定義導航條中的菜單
12、navbar-form 定義導航條中的表單
13、navbar-btn 定義導航條中的按鈕
14、navbar-text 定義導航條中的文本
15、navbar-left 菜單靠左
16、navbar-right 菜單靠右

<div class="navbar navbar-inverse navbar-static-top "><div class="container"><div class="navbar-header"><button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">LOGO</a></div><div class="collapse navbar-collapse" id="mymenu"><ul class="nav navbar-nav"><li class="active"><a href="#">首頁</a></li><li><a href="#">公司新聞</a></li><li><a href="#">行業動態</a></li></ul><form class="navbar-form navbar-right"><div class="form-group"><div class="input-group"><input type="text" class="form-control"><span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span></div> </div></form></div></div> </div>

10.路徑導航

<ol class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">Library</a></li><li class="active">Data</li> </ol> 巨幕 <div class="jumbotron"><div class="container">...</div> </div>

11.bootstrap 模態框

1、modal 聲明一個模態框
2、modal-dialog 定義模態框尺寸
3、modal-lg 定義大尺寸模態框
4、modal-sm 定義小尺寸模態框
5、modal-header
6、modal-body
7、modal-footer

<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">大彈出框按鈕</button><div class="modal fade" id="mymodal"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header">大尺寸彈出框</div><div class="modal-body">模態框主體</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div> </div>

12.bootstrap 下拉菜單

1、dropdown-toggle
2、dropdown-menu

13.bootstrap 隱藏類

1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg

總結

以上是生活随笔為你收集整理的本地存储和移动端js框架及bootstrap简介的全部內容，希望文章能夠幫你解決所遇到的問題。

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