·字符串(String)
1.聲明
var myString = new String("Every good boy does fine.");
var myString = "Every good boy does fine.";
2.字符串連接
var myString = "Every " + "good boy " + "does fine.";
var myString = "Every "; myString += "good boy does fine.";
3.截取字符串
//截取第 6 位開始的字符
var myString = "Every good boy does fine.";
var section = myString.substring(6); //結果: "good boy does fine."
//截取第 0 位開始至第 10 位為止的字符
var myString = "Every good boy does fine.";
var section = myString.substring(0,10); //結果: "Every good"
//截取從第 11 位到倒數第 6 位為止的字符
var myString = "Every good boy does fine.";
var section = myString.slice(11,-6); //結果: "boy does"
//從第 6 位開始截取長度為 4 的字符
var myString = "Every good boy does fine.";
var section = myString.substr(6,4); //結果: "good"
4.轉換大小寫
var myString = "Hello";
var lcString = myString.toLowerCase(); //結果: "hello"
var ucString = myString.toUpperCase(); //結果: "HELLO"
5.字符串比較
var aString = "Hello!";
var bString = new String("Hello!");
if( aString == "Hello!" ){ } //結果: true
if( aString == bString ){ } //結果: true
if( aString === bString ){ } //結果: false (兩個對象不同,盡管它們的值相同)
6.檢索字符串
var myString = "hello everybody.";
// 如果檢索不到會返回-1,檢索到的話返回在該串中的起始位置
if( myString.indexOf("every") > -1 ){ } //結果: true
7.查找替換字符串
var myString = "I is your father.";
var result = myString.replace("is","am"); //結果: "I am your father."
8.特殊字符:
\b : 后退符 \t : 水平制表符
\n : 換行符 \v : 垂直制表符
\f : 分頁符 \r : 回車符
\" : 雙引號 \' : 單引號
\\ : 反斜桿
9.將字符轉換成Unicode編碼
var myString = "hello";
var code = myString.charCodeAt(3); //返回"l"的Unicode編碼(整型)
var char = String.fromCharCode(66); //返回Unicode為66的字符
10.將字符串轉換成URL編碼
var myString = "hello all";
var code = encodeURI(myString); //結果: "hello%20all"
var str = decodeURI(code); //結果: "hello all"
//相應的還有: encodeURIComponent() decodeURIComponent()
11.將字符串轉換成base64編碼
// base64Encode() base64Decode() 用法同上
//-----------------------------------------------------------------------
·數字型(Number)
1.聲明
var i = 1;
var i = new Number(1);
2.字符串與數字間的轉換
var i = 1;
var str = i.toString(); //結果: "1"
var str = new String(i); //結果: "1"
i = parseInt(str); //結果: 1
i = parseFloat(str); //結果: 1.0
//注意: parseInt,parseFloat會把一個類似于"32G"的字符串,強制轉換成32
3.判斷是否為有效的數字
var i = 123; var str = "string";
if( typeof i == "number" ){ } //true
//某些方法(如:parseInt,parseFloat)會返回一個特殊的值NaN(Not a Number)
//請注意第2點中的[注意],此方法不完全適合判斷一個字符串是否是數字型!!
i = parseInt(str);
if( isNaN(i) ){ }
4.數字型比較
//此知識與[字符串比較]相同
5.小數轉整數
var f = 1.5;
var i = Math.round(f); //結果:2 (四舍五入)
var i = Math.ceil(f); //結果:2 (返回大于f的最小整數)
var i = Math.floor(f); //結果:1 (返回小于f的最大整數)
6.格式化顯示數字
var i = 3.14159;
//格式化為兩位小數的浮點數
var str = i.toFixed(2); //結果: "3.14"
//格式化為五位數字的浮點數(從左到右五位數字,不夠補零)
var str = i.toPrecision(5); //結果: "3.1415"
7.X進制數字的轉換
//不是很懂 -.-
var i = parseInt("0x1f",16);
var i = parseInt(i,10);
var i = parseInt("11010011",2);
8.隨機數
//返回0-1之間的任意小數
var rnd = Math.random();
//返回0-n之間的任意整數(不包括n)
var rnd = Math.floor(Math.random() * n)
//-----------------------------------------------------------------------
·Math對象
1. Math.abs(num) : 返回num的絕對值
2. Math.acos(num) : 返回num的反余弦值
3. Math.asin(num) : 返回num的反正弦值
4. Math.atan(num) : 返回num的反正切值
5. Math.atan2(y,x) : 返回y除以x的商的反正切值
6. Math.ceil(num) : 返回大于num的最小整數
7. Math.cos(num) : 返回num的余弦值
8. Math.exp(x) : 返回以自然數為底,x次冪的數
9. Math.floor(num) : 返回小于num的最大整數
10.Math.log(num) : 返回num的自然對數
11.Math.max(num1,num2) : 返回num1和num2中較大的一個
12.Math.min(num1,num2) : 返回num1和num2中較小的一個
13.Math.pow(x,y) : 返回x的y次方的值
14.Math.random() : 返回0到1之間的一個隨機數
15.Math.round(num) : 返回num四舍五入后的值
16.Math.sin(num) : 返回num的正弦值
17.Math.sqrt(num) : 返回num的平方根
18.Math.tan(num) : 返回num的正切值
19.Math.E : 自然數(2.718281828459045)
20.Math.LN2 : 2的自然對數(0.6931471805599453)
21.Math.LN10 : 10的自然對數(2.302585092994046)
22.Math.LOG2E : log 2 為底的自然數(1.4426950408889634)
23.Math.LOG10E : log 10 為底的自然數(0.4342944819032518)
24.Math.PI : π(3.141592653589793)
25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476)
26.Math.SQRT2 : 2的平方根(1.4142135623730951)
//-----------------------------------------------------------------------
·日期型(Date)
1.聲明
var myDate = new Date(); //
系統當前時間
var myDate = new Date(yyyy, mm, dd, hh, mm, ss);
var myDate = new Date(yyyy, mm, dd);
var myDate = new Date("monthName dd, yyyy hh:mm:ss");
var myDate = new Date("monthName dd, yyyy");
var myDate = new Date(epochMilliseconds);
2.獲取時間的某部份
var myDate = new Date();
myDate.getYear(); //獲取當前年份(2位)
myDate.getFullYear(); //獲取完整的年份(4位,1970-????)
myDate.getMonth(); //獲取當前月份(0-11,0代表1月)
myDate.getDate(); //獲取當前日(1-31)
myDate.getDay(); //獲取當前星期X(0-6,0代表星期天)
myDate.getTime(); //獲取當前時間(從1970.1.1開始的毫秒數)
myDate.getHours(); //獲取當前小時數(0-23)
myDate.getMinutes(); //獲取當前分鐘數(0-59)
myDate.getSeconds(); //獲取當前秒數(0-59)
myDate.getMilliseconds(); //獲取當前毫秒數(0-999)
myDate.toLocaleDateString(); //獲取當前日期
myDate.toLocaleTimeString(); //獲取當前時間
myDate.toLocaleString( ); //獲取日期與時間
3.計算之前或未來的時間
var myDate = new Date();
myDate.setDate(myDate.getDate() + 10); //當前時間加10天
//類似的方法都基本相同,以set開頭,具體參考第2點
4.計算兩個日期的偏移量
var i = daysBetween(beginDate,endDate); //返回天數
var i = beginDate.getTimezoneOffset(endDate); //返回分鐘數
5.檢查有效日期
//checkDate() 只允許"mm-dd-yyyy"或"mm/dd/yyyy"兩種格式的日期
if( checkDate("2006-01-01") ){ }
//正則表達式(自己寫的檢查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四種)
var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/;
if( r.test( myString ) ){ }
//-----------------------------------------------------------------------
·數組(Array)
1.聲明
var arr = new Array(); //聲明一個空數組
var arr = new Array(10); //聲明一個10個長度的數組
var arr = new Array("Alice", "Fred", "Jean"); //用值初始化數組
var arr = ["Alice", "Fred", "Jean"]; //用值初始化數組
var arr = [["A","B","C"][1,2,3]]; //聲明一個二(多)維數組
2.數組的訪問
arr[0] = "123"; //賦值
var str = arr[0]; //獲取
arr[0][0] = "123"; //多維數組賦值
3.數組與字符串間的轉換
var arr = ["A","B","C","D"]; //聲明
//數組按分隔符轉換成字符串
var str = arr.join("|"); //結果: "A|B|C|D"
//字符串切割成數組
arr = str.split("|");
4.遍歷數組
for( var i=0; i<arr.length; i++ ){ alert(arr[i]); }
5.排序
var arr = [12,15,8,9];
arr.sort(); //結果: 8 9 12 15
6.組合與分解數組
var arr1 = ["A","B","C","D"];
var arr2 = ["1","2","3","4"];
//獎兩個數組組合成一個新的數組
var arr = arr1.concat(arr2); //結果: ["A","B","C","D","1","2","3","4"]
//將一個數組切成兩個數組(參數1:起始索引,參數2:切割長度)
var arr3 = arr.splice(1,3); //結果: arr3:["B","C","D"] arr["A","1","2","3","4"]
//將一個數組切成兩個數組,并在原數組補新值
var arr4 = arr.splice(1,3,"AA"); //結果: arr4:["B","C","D"] arr["A","AA","1","2","3","4"]
//-----------------------------------------------------------------------
·自定義對象
1.聲明:
function myUser(uid,pwd){
this.uid = uid;
this.pwd = pwd || "000000"; //默認值
this.show = showInfo; //方法
}
//下面的函數不是自定義對象,是自定義對象的方法.繼續看下去就明白了
function showInfo(){
alert("用戶名:" + this.uid + ",密碼:" + this.pwd)
}
2.實例化:
var user = new myUser("user","123456");
var user = {uid:"user",pwd:"123456"};
3.獲取與設置
alert("用戶名是:" + user.uid); //get
user.uid = "newuser"; //set
user.show(); //調用show()方法
//-----------------------------------------------------------------------
·變量 函數 流程控制
1.變量
var i = 1;
var i = 1, str = "hello";
2.函數
function funName(){
//do something.
}
function funName(param1[,paramX]){
//do something.
}
3.嵌套函數
//某種情況,你需要創建一個函數本身所獨有的函數.
function myFunction(){
//do something.
privateFunction();
function privateFunction(){
//do something.
}
}
4.匿名函數
var tmp = function(){ alert("only test."); }
tmp();
5.延遲函數調用
var tId = setTimeout("myFun()",1000); //延遲1000毫秒后再調用myFun()函數
fucntion myFun(){
//do something
clearTimeout(tId); //銷毀對象
}
6.流程控制
if( condition ){ }
if( condition ){ } else{ }
if( condition ){ } else if( condition ){ } else{ }
switch( expression ){
case valA : statement; break;
case valB : statement; break;
default : statement; break;
}
7.異常捕獲
try{ expression } catch(e){ } finally{ }
//不處理任何異常
window.onerror = doNothing;
function doNothing(){ return true; }
//異常類可用的屬性
description : 異常描述(IE,NN)
fileName : 異常頁面URI(NN)
lineNumber : 異常行數(NN)
message : 異常描述(IE,NN)
name : 錯誤類型(IE,NN)
number : 錯誤代碼(IE)
//錯誤信息(兼容所有瀏覽器)
try{ }
catch(e){
var msg = (e.message) ? e.message : e.description;
alert(msg);
}
8.加快腳本的執行速度
-避免使用 eval() 函數
-避免使用 with 關鍵字
-將重復的表達式賦值精簡到最小
-在較大的對象中使用索引來查找數組
-減少 document.write() 的使用
//-----------------------------------------------------------------------
·瀏覽器特征( navigator )
1.瀏覽器名稱
//IE : "Microsoft Internet Explorer"
//NS : "Netscape"
var browserName = navigator.appName;
2.瀏覽器版本
bar browserVersion = navigator.appVersion;
3.客戶端操作系統
var isWin = ( navigator.userAgent.indexOf("Win") != -1 );
var isMac = ( navigator.userAgent.indexOf("Mac") != -1 );
var isUnix = ( navigator.userAgent.indexOf("X11") != -1 );
4.判斷是否支持某對象,方法,屬性
//當一個對象,方法,屬性未定義時會返回undefined或null等,這些特殊值都是false
if( document.images ){ }
if( document.getElementById ){ }
5.檢查瀏覽器當前語言
if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); }
6.檢查瀏覽器是否支持Cookies
if( navigator.cookieEnabled ){ }
//-----------------------------------------------------------------------
·控制瀏覽器窗口( window )
1.設置瀏覽器的大小
window.resizeTo(800, 600); //將瀏覽器調整到800X600大小
window.resizeBy(50, -10); //在原有大小上改變增大或減小窗口大小
2.調整瀏覽器的位置
window.moveTo(10, 20); //將瀏覽器的位置定位到X:10 Y:20
window.moveBy(0, 10); //在原有位置上移動位置(偏移量)
3.創建一個新的窗口
var win = window.open("about.htm","winName","height=300,width=400");
//參數
alwaysLowered //始終在其它瀏覽器窗口的后面(NN)
alwaysRaised //始終在其它瀏覽器窗口的前面(NN)
channelMode //是否為導航模式(IE)
copyhistory //復制歷史記錄至新開的窗口(NN)
dependent //新窗口隨打開它的主窗口關閉而關閉(NN)
fullscreen //全屏模式(所有相關的工具欄都沒有)(IE)
location //是否顯示地址欄(NN,IE)
menubar //是否顯示菜單欄(NN,IE)
scrollbars //是否顯示滾動條(NN,IE)
status //是否顯示狀態欄(NN,IE)
toolbar //是否顯示工具欄(NN,IE)
directories //是否顯示鏈接欄(NN,IE)
titlebar //是否顯示標題欄(NN)
hotkeys //顯示菜單快捷鍵(NN)
innerHeight //內容區域的高度(NN)
innerWidth //內容區域的寬度(NN)
resizable //是否可以調整大小(NN,IE)
top //窗口距離桌面上邊界的大小(NN,IE)
left //窗口距離桌面左邊界的大小(NN,IE)
height //窗口高度(NN,IE)
width //瀏覽器的寬度
4.與新窗口通訊
win.focus(); //讓新窗口獲得焦點
win.document.write("abc"); //在新窗口上操作
win.document.close(); //結束流操作
opener.close();
5.模式窗口
window.showModalDialog("test.htm",dialogArgs,"param"); //傳遞對象
window.showModelessDialog("test.htm",myFunction,"param"); //傳遞函數
window.dialogArguments //對話框訪問父窗口傳遞過來的對象
window.returnValue //父窗口獲取對話框返回的值
//參數
center //窗口居中屏幕
dialogHeight //窗口高度
dialogWidth //窗口寬度
dialogTop //窗口距離屏幕的上邊距
dialogLeft //窗口距離屏幕的左邊距
edge //邊框風格(raised|sunken)
help //顯示幫助按鈕
resizable //是否可以改變窗口大小
status //是否顯示狀態欄
//例子
<script>
function openDialog(myForm) {
var result = window.showModalDialog("new.html",myForm,"center");
}
</script>
<form action="#" onsubmit="return false">
<input type="text" id="txtId">
<input type="button" id="btnChk" value="驗證是否可用" onclick="openDialog(this.form);">
</form>
//另一個頁面new.html
<script>
window.dialogArguments.btnChk.enabled = false; //將父窗口中的按鈕設置為不可用
//do something to check the Id.
window.write("用戶ID: " + window.dialogArguments.txtId.value + " 可使用!"); //獲取文本框的值
</script>
//-----------------------------------------------------------------------
·管理框架網頁( frames )
1.創建一個框架架構網頁
<html>
<frameset rows="50, *">
<frame name="header" src="header.html">
<frame name="main" src="main.html">
</frameset>
</html>
2.訪問框架網頁
window.frames[i]
window.frames["frameName"]
window.frameName
window.frames["frameName"].frames["frameName2"]
parent.frames["frameName"]
top.frames["frameName"]
3.將某一頁面定向到某框架
<a href="new.html" target="main">
location = "new.html";
parent.frameName.location.href = "new.html";
top.frameName.location = "new.html";
4.強制不讓其它框架引用某頁面
if (top != self) {
top.location.href = location.href;
}
5.更改框架的大小
document.framesetName.rows = "50,*";
document.framesetName.cols = "50,*";
6.動態創建框架網頁
var frag = document.createDocumentFragment( );
var newFrame= document.createElement("frame");
newFrame.id = "header";
newFrame.name = "header";
newFrame.src="header.html"
frag.appendChild(newFrame);
newFrame = document.createElement("frame");
newFrame.id = "main";
newFrame.name = "main";
newFrame.src="main.html"
frag.appendChild(newFrame);
document.getElementById("masterFrameset").rows = "50,*";
//-----------------------------------------------------------------------
·表單( forms )
1.訪問表單
document.forms[0]
document.forms["myForm"]
document.myForm
document.all.myForm
document.getElementById("myForm")
document.forms[0].elements[0]
document.forms["myForm"].elements["myElement"]
document.myForm.myElement
2.讓文本框自動獲得焦點
//讓名為myText的文本框在頁面加載時自動獲得焦點,并選中當前文本框的值
<body onload="document.myForm.myText.focus(); document.myForm.myText.select();">
3.通用的文本框驗證函數
//驗證是否為空
<input type="text" onchange="isEmpty(this)">
function isEmpty(obj){
if(obj.value == null || obj.value == "") alert("此字段不能為空");
}
//驗證是否為數字
<input type="text" onchange="isNumber(this)">
function isNumber(obj){
var val = obj.value;
var r = /\w[0-9]{1,}/;
if( !r.test(val) ) alert("此字段必須為數字")
}
//驗證是否長度符合
<input type="text" onchange="isLen7(this)">
function isLen7(obj){
if(obj.value.length != 7) alert("此字段長度必須為7位");
}
//驗證有效E-Mail地址
<input type="text" onchange="isEmail(this)">
function isEmail(obj){
var val = obj.value;
var r = /^\w[0-9a-zA-Z.\-]{3,}@\w[0-9a-zA-Z.\-]{2,}.\w[a-zA-Z.]{2,4}$/;
if( !r.test(val) ) alert("請輸入有效的E-Mail地址");
}
4.阻止表單提交
<form action="#" onsubmit="return checkValue()"></form>
function checkValue(){
//do something to check the value.
return false;
}
5.改變表單提交的頁面
<form action="#" onsubmit="chooseAction()"></form>
fucntion chooseAction(){
if(document.myForm.myCheckBox.checked) document.myForm.action = "a.asp";
else document.myForm.action = "b.asp";
}
6.阻止向文本框輸入某些字符
<input type="text" onkeydown="checkKeyCode(event)">
fucntion checkKeyCode(evt){
evt = (evt) ? evt : event;
var c = (evt.charCode) ? evt.charCode : evt.keyCode;
if(c < 48 || c > 57){
alert("此字段只允許輸入數字");
return false;
}
else return true;
}
7.回車后焦點跳到另一個輸入控件
<input id="txt1" type="text" onkeypress="return focusNext(this,'txt2',event)">
<input id="txt2" type="text">
function focusNext(form,name,evt){
evt = (evt) ? evt : event;
var c = (evt.charCode) ? evt.charCode : evt.keyCode;
if(c == 13 || c == 3){
form.elements[name].focus();
return false;
}
else return true;
}
8.使某一控件不可用
document.myForm.myElement.disabled = true;
9.隱藏/顯示某一控件
document.myForm.myElement.style.display = "block"; //顯示
document.myForm.myElement.style.display = "none"; //隱藏
10.控制下拉框
//清空下拉框中的項
document.myForm.mySelect.options.length = 0;
//添加下拉框中的項
var item = new Option("myText","myValue");
document.myForm.mySelect.add(item);
//獲取下拉框當前選中的值
var val = document.myForm.mySelect.value;
//-----------------------------------------------------------------------
·事件( Event )
1.事件介紹:
onabort //當用戶阻止發送圖片至客戶端時觸發
onblur //當控件失去焦點時觸發
onchange //當控件失去焦點并且內容發生了改變時觸發
onclick //當用戶點擊某控件時觸發
ondblclick //當用戶雙擊某控件時觸發
onerror //當執行某腳本發生異常時觸發
onfocus //當某控件獲得焦點時觸發
onkeydown //當用戶按下鍵盤某個鍵時觸發
onkeypress //當用戶按下并松開鍵盤某個鍵時觸發
onkeyup //當用戶松開鍵盤某個鍵時觸發
onload //用頁面被加載完成后觸發
onmousedown //當用戶按下鼠標時觸發
onmousemove //當用戶移動鼠標時觸發
onmouseout //當用戶將鼠標移出某控件時觸發
onmouseover //當用戶將鼠標移入某控件時觸發
onmouseup //當用戶松開鼠標時觸發
onmove //當用戶移動瀏覽器窗口時觸發
onreset //當用戶點擊表單"重置"按鈕時觸發
onresize //當用戶改變瀏覽器窗口的大小時觸發
onselect //當用戶選中文本框內容時觸發
onsubmit //當用戶點擊表單"提交"按鈕時觸發
onunload //當用戶關閉瀏覽器時觸發
//以下為IE獨有的方法
onbeforecopy //當用戶使用"復制"功能前觸發
onbeforecut //當用戶使用"剪切"功能前觸發
onbeforepaste //當用戶使用"粘貼"功能前觸發
onbeforeprint //當用戶使用"打印"功能前觸發
oncontextmenu //當用戶調出上下文菜單時觸發
oncopy //當用戶使用"復制"功能時觸發(未復制)
oncut //當用戶使用"剪切"功能時觸發(未剪切)
ondrag //當用戶拖動某控件前觸發
ondragend //當用戶拖動某控件后觸發
ondragenter //當用戶拖動某控件到當前控件上面后觸發
ondragleave //當用戶將某控件拖出當前控件時觸發
ondragover //當用戶將某控件拖出當前控件上面時觸發
ondrop //當用戶將某控件拖到當前控件后觸發
2.瀏覽器事件兼容性
function funName(evt){
evt = (evt) ? evt : event;
if(evt){ //to do something }
}
3.動態為控件添加事件
document.getElementById("myControl").addEventListener("click",funName,false);
document.getElementById("myControl").onclick = funName;
4.頁面加載后調用某函數
<body onload="funName(); funName2();">
window.onload = funName;
5.確定與點擊事件相匹配的事件
//9.3和9.4 比較復雜.且不清楚事件是JS API還是自定義的
6.防止重復執行兩次點擊事件
//當第一次點擊按鈕后,將表單提交回服務器,然后submitForm()函數便指向blockIt()函數.
//除非頁面重新加載..否則點擊無效(無作用)
<input type="button" value="提交" onclick="submitForm()">
function submitForm(){
document.forms["myForm"].submit();
submitForm = blockIt;
reutrn false;
}
function blockIt(){
return false;
}
7.阻止用戶點擊鼠標右鍵或中鍵
function myFun(evt){
evt = (evt) ? evt : event;
if(evt.button || evt.button == 1 || evt.button == 2){ return false; }
else{ //do something }
}
8.阻止用戶鍵入某些字符
function myFun(evt){
evt = (evt) ? evt : event;
var c = (evt.charCode) ? evt.charCode : evt.keyCode;
if(c < 48 || c > 57){ return false; }
else reutrn true;
}
9.獲取當前鼠標指向的對象
function myFun(evt){
evt = (evt) ? evt : event;
var elem = (evt.target) ? evt.target : evt.srcElement;
//do something
}
10.特殊功能鍵
evt.ctrlKey evt.altKey evt.shiftKey
11.播放媒體文件
<object id="hiPing" width="1" height="1"
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="#Version=6,0,0,0">
<param name="FileName" value="hi.wav">
<param name="AutoStart" value="false">
</object>
function playSound(id){
if(document.all[id].FileName){ document.all[id].Play(); }
}
//-----------------------------------------------------------------------
·頁面導航
1.跳轉至另一個頁面
location = "newPage.html";
location.href = "newPage.html";
2.不記錄歷史記錄的頁面跳轉
location.replace("newPage.html");
3.利用下拉框跳轉頁面
<select name="chooser" id="chooser" onchange="redirect()">
<option value="">Choose a Destination:</option>
<option value="index.html">Home</option>
<option value="products.html">Products</option>
<option value="support.html">Support</option>
<option value="contact.html">Contact Us</option>
</select>
function redirect(){
var t = document.all.chooser.value;
if(t){ location = t; }
}
4.利用Cookies保存用戶數據
<body onunload="saveData()"> //要保存數據的頁面
<body onload="readData()"> //新頁面
function saveData(){
var data = document.forms[0].userName.value;
var expDate = getExpDate(180, 0, 0);
setCookie("userName", data, expDate);
}
function readData( ) {
var data = getCookie("userName");
document.forms[0].userName.value = data;
}
5.利用URL來保存用戶數據
function goNext(url){
var data = document.forms[0].userName.value;
location.href = url + "?" + escape(data);
}
function readData( ) {
var srchString = unescape(location.search.substring(1, location.search.length));
if (srchString.length > 0){ document.forms[0].userName.value = srchString; }
}
6.創建一個自定義右鍵菜單
//菜單就自己畫了,這里只說方法
function initContextMenus(){
if (document.body.addEventListener){
document.body.addEventListener("contextmenu", showContextMenu, true);
document.body.addEventListener("click", hideContextMenus, true);
}
else {
document.body.oncontextmenu = showContextMenu;
}
setContextTitles( );
}
//-----------------------------------------------------------------------
·管理樣式 ( CSS )
1.三種嵌入樣式表的方法:
//在頭部統一聲明樣式
<style type="text/css"> body{ font-size:9pt; } </style>
//從外部嵌入一樣式表文件
<link rel="stylesheet" type="text/css" href="myStyleSheet.css">
//直接在元素屬性里定義
<p style="font-size:9pt"></p>
2.分配樣式規則給某一元素
<style type="text/css">
<!-- tagName {styleProperty1:value1; styleProperty2:value2; ...} -->
</style>
3.自定義一種樣式供一類元素使用
.myStyle { font-size:9pt; }
<p class="myStyle"></p>
4.自定義一種樣式供單一元素使用
#myId { font-size:9pt; }
<p id="myId"></p>
5.頁面加載后動態修改頁面樣式表鏈接
<link id="basicStyle" rel="stylesheet" type="text/css" href="styles.normal.css">
document.getElementById("basicStyle").href = "newstyle.css";
6.打開/關閉某個樣式表
document.styleSheets[1].disabled = false;
7.動態設置/更改某一元素的樣式
document.getElementById("myElement").className = "myStyle";
8.元素樣式的優先級
//原則上來講,瀏覽器會使用最后的一種樣式(就近原則)
//當同時給一元素設置id和class兩種樣式時,id的樣式優先于class
//當同時給一元素設置class和style兩種樣式時,style優先于class
//當同時給一元素設置style和id兩種樣式時,style優先于id
<style>
.myStyle { font-size:10pt; }
#myId { font-size:11pt; }
</style>
<p id="myId" class="myStyle" style="font-size:12pt">123</p>
//-----------------------------------------------------------------------
·動態更改對象的視覺效果
1.更改對象的字體樣式
document.getElementById("myElement").style.color = "#EEEEEE";
//相應的屬性
color : 字體的顏色
font : 字體的全局設置
fontf : 字體名稱
fontSize : 字體大小(pt, px)
fontStretch : 字符間隔(px)
fontStyle : 字體的樣式(normal, italic)
fontVariant : 字母大小常量(normal, small-caps)
fontWeight : 字體粗細(bold, bolder, lighter, normal)
textDecoration : 字體裝飾(blink, line-through, none, overline, underline)
textTransform : 字母大小寫(capitalize, lowercase, none, uppercase)
2.更改頁面背景樣式
document.body.background = "url(bg.gif) repeat fixed";
//相應的屬性
background : 背景的全局設置
backgroundAttachment : 背景是否隨滾動條滾動而滾動(fixed, scroll)
backgroundColor : 背景顏色
backgroundImage : 背景圖片
backgroundPosition : 背景圖片的位置(bottom, center, left, right, top)
backgroundRepeat : 背景圖片是否重復或拉伸(no-repeat, repeat, repeat-x, repeat-y)
3.顯示/隱藏某對象
document.getElementById("myElement").style.visibility = "hidden";
document.getElementById("myElement").style.display = "none";
4.細調對象的透明度
document.getElementById("myElement").style.filter = "alpha(opacity=80)";
//-----------------------------------------------------------------------
·布置HTML對象的位置
1.動態更改對象的位置
<div id="myDiv" style="position:absolute; left:100px; top:100px">Content Here</div>
document.getElementById("myDiv").style.top = "200px";
2.設置對象在頁面上的層次關系
//值越大對象越前面
document.getElementById("myElement").style.zIndex = 123;
//-----------------------------------------------------------------------
·動態創建內容
1.頁面加載時動態創建內容
<p>現在是：<script>var d = new Date(); document.write(d.toLocaleTimeString());</script></p>
2.動態重畫頁面
<input type="text" id="txtName"><input type="button" value="確定" onclick="rewritePage()">
<scritp>
function rewritePage(){
var user = document.getElementById("txtName").value;
var html = "<html><head><title>歡迎</title></head>";
html += "<body>歡迎您！" + user + "</body></html>";
document.write(html);
document.close();
}
</script>