1.區(qū)域模塊分解 :
按照空間區(qū)域,對(duì)復(fù)雜的案例效果,分解為幾個(gè)較簡(jiǎn)單的模塊部分。目的是:更方便的理解案例原理。
2.VCD分解:
???????????????????? view??? ? ? ? ? ? ? ? ? ? ? 視覺(jué)? ?? HTML+CSS ? ? ?? 基本界面模板
???????????????????? controller??????????????? 控制?????? Javascript??????? 內(nèi)容處理、事件處理
???????????????????? Data???????????????????????? 數(shù)據(jù)???????? data.js????????????? 非必須,助于理解
3.onselectstart="return?? false"????
可以直接加在body的行間,用于:如果頁(yè)面有點(diǎn)選的操作,防止文字被選中。
4.-webkit-font-smoothing: antialiased? ??
? css3中用于webkit引擎(如chrome)中設(shè)置字體的抗鋸齒或者說(shuō)光滑度的屬性。有3個(gè)屬性:none用于小像素的文本、subpixel-antialiased瀏覽器默認(rèn)的、antialiased反鋸齒。
5.
把字母統(tǒng)一變成小寫(xiě)toLowerCase()
把字母統(tǒng)一變成大寫(xiě)toUpperCase()
6.
alert里面用\n換行
alert("您好\nhello")
7.localStorage
在客戶端存儲(chǔ)數(shù)據(jù),HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法:localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ),localStorage 方法存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后,數(shù)據(jù)依然可用。
這個(gè)特性主要是用來(lái)作為本地存儲(chǔ)來(lái)使用的,解決了cookie存儲(chǔ)空間不足的問(wèn)題(cookie中每條cookie的存儲(chǔ)空間為4k),localStorage中一般瀏覽器支持的是5M大小,這個(gè)在不同的瀏覽器中l(wèi)ocalStorage會(huì)有所不同。
localStorage 與sessionStorage相似。不同之處在于,存儲(chǔ)在 localStorage 里面的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間(expiration time),而存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)會(huì)在瀏覽器會(huì)話(browsing session)結(jié)束時(shí)被清除,即瀏覽器關(guān)閉時(shí)。
應(yīng)該注意的是,無(wú)論是 localStorage 還是 sessionStorage 中保存的數(shù)據(jù)都僅限于該頁(yè)面的協(xié)議。
語(yǔ)法:myStorage=localStorage;
返回值:一個(gè)Storage對(duì)象
面的代碼訪問(wèn)當(dāng)前域名下的 localStorage對(duì)象,并使用Storage.setItem()方法往里面添加一個(gè)數(shù)據(jù)項(xiàng)。
localStorage.setItem('myCat','Tom');
首先在使用localStorage的時(shí)候,我們需要判斷瀏覽器是否支持localStorage這個(gè)屬性:
if(!window.localStorage){
alert("瀏覽器不支持localstorage");
return ? ? false;
}else{
//主邏輯業(yè)務(wù)
}
//localStorage的寫(xiě)入和讀取
if(!window.localStorage){
alert("瀏覽器不支持localstorage");
return ? ?false;
}else{
var ? storage=window.localStorage;
//localStorage的寫(xiě)入
//寫(xiě)入a字段,方式一
storage["a"]=1;
//寫(xiě)入b字段,方式二
storage.b=2;
//寫(xiě)入c字段,方式三
storage.setItem("c",3);
console.log(typeof ? storage["a"]);
console.log(typeof ? storage["b"]);
console.log(typeof ? ?storage["c"]);
//localStorage的讀取
//第一種方法讀取
var ? ?a=storage.a;
console.log(a);?
//第二種方法讀取
var ? ?b=storage["b"];
console.log(b);//第三種方法讀取
var ? ?c=storage.getItem("c");
console.log(c);
}
最后在控制臺(tái)上面打印出來(lái)的結(jié)果是:string,剛剛存儲(chǔ)進(jìn)去的是int類(lèi)型,但是打印出來(lái)卻是string類(lèi)型,這個(gè)與localStorage本身的特點(diǎn)有關(guān),localStorage只支持string類(lèi)型的存儲(chǔ)。
這里要特別說(shuō)明一下localStorage的使用也是遵循同源策略的,所以不同的網(wǎng)站直接是不能共用相同的localStorage
這里面是三種對(duì)localStorage的讀取,其中官方推薦的是getItem\setItem這兩種方法對(duì)其進(jìn)行存取。
localStorage的刪、改
if(!window.localStorage){
alert("瀏覽器不支持localstorage");
return ? ?false;
}else{
var ? storage=window.localStorage;
storage["a"]=1;
storage.b=2;
storage.setItem("c",3);
//將a改為4
storage.a=4;
console.log(storage.a);
}
將localStorage的所有內(nèi)容清除
var ? storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
將localStorage中的某個(gè)鍵值對(duì)刪除
var ? storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);
localStorage的鍵獲取,使用key()方法,向其中出入索引即可獲取對(duì)應(yīng)的鍵
var ?storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var ? i=0;i<storage.length;i++){
var ? ?key=storage.key(i);
console.log(key);
}
一般我們會(huì)將JSON存入localStorage中,但是在localStorage會(huì)自動(dòng)將localStorage轉(zhuǎn)換成為字符串形式,這個(gè)時(shí)候我們可以使用JSON.stringify()這個(gè)方法,來(lái)將JSON轉(zhuǎn)換成為JSON字符串.
if(!window.localStorage){
alert("瀏覽器不支持localstorage");
}else{
var ? storage=window.localStorage;
var ?data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var ? ? d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
讀取之后要將JSON字符串轉(zhuǎn)換成為JSON對(duì)象,使用JSON.parse()方法:
var ? ?storage=window.localStorage;
var ? data={
name:'xiecanyong',
sex:'man',
hobby:'program'};
var ? ?d=JSON.stringify(data);
storage.setItem("data",d);
//將JSON字符串轉(zhuǎn)換成為JSON對(duì)象輸出
var ?json=storage.getItem("data");
var ? jsonObj=JSON.parse(json);
console.log(typeof ? ?jsonObj);
8.HTML標(biāo)簽marquee實(shí)現(xiàn)滾動(dòng)效果
<marquee>要進(jìn)行滾動(dòng)的內(nèi)容</marquee>,可以實(shí)現(xiàn)多種滾動(dòng)效果,無(wú)需js控制。
margquee可以移動(dòng)文字,圖片,表格等。
1.滾動(dòng)方向direction(包括4個(gè)值:up、 down、 left和 right)
2.滾動(dòng)方式behavior(scroll:循環(huán)滾動(dòng),默認(rèn)效果; slide:只滾動(dòng)一次就停止; alternate:來(lái)回交替進(jìn)行滾動(dòng))
3.滾動(dòng)速度scrollamount(滾動(dòng)速度是設(shè)置每次滾動(dòng)時(shí)移動(dòng)的長(zhǎng)度,以像素為單位)
4.滾動(dòng)延遲scrolldelay(設(shè)置滾動(dòng)的時(shí)間間隔,單位是毫秒)
5.滾動(dòng)循環(huán)loop(默認(rèn)值是-1,滾動(dòng)會(huì)不斷的循環(huán)下去)
6.滾動(dòng)范圍width、height
7.滾動(dòng)背景顏色bgcolor
8.空白空間hspace、vspace
<marquee? direction="滾動(dòng)方向"? behavior="滾動(dòng)方式"? scrollamount="5"? scrolldelay="100"? ? loop="2" ? width="1000"??? height="50"??? bgcolor="#0099FF" hspace="10"? vspace="10">··············</marquee>
9.
手機(jī)點(diǎn)擊瀏覽網(wǎng)頁(yè)上的input標(biāo)簽時(shí),會(huì)自動(dòng)彈出軟鍵盤(pán),如何來(lái)阻止呢
<input????? type="text"????? readonly="readonly"/>