Javascript筆記（轉）

·字元串

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-????),一般都要用full，防止FF出錯

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;

判斷IE浏覽器版本：if（navigator.userAgent.indexOf("MSIE6.0")>0）{…} // "MSIE7.0" "MSIE"

2.浏覽器版本

var 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 //是否顯示狀态欄

//例子

function openDialog(myForm) {

var result = window.showModalDialog("new.html",myForm,"center");

}

</script>

</form>

//另一個頁面new.html

window.dialogArguments.btnChk.enabled = false; //将父視窗中的按鈕設定為不可用

//do something to check the Id.

window.write("使用者ID: " + window.dialogArguments.txtId.value + " 可使用!");

//擷取文本框的值

</script>

//-----------------------------------------------------------------------

·管理架構網頁( frames )

1.建立一個架構架構網頁

<html>

</frameset>

</html>

//a.html頁面background:url(a.gif) transparent no-repeate 2px 9px; //iframe頁面背景透明

2.通路架構網頁

window.frames[i]

window.frames["frameName"]

window.frameName

window.frames["frameName"].frames["frameName2"]

parent.frames["frameName"]

top.frames["frameName"]

3.将某一頁面定向到某架構

<frame name="main" src="main.html">//架構首頁index.html

//架構内容頁面

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的文本框在頁面加載時自動獲得焦點,并選中目前文本框的值

3.通用的文本框驗證函數

//驗證是否為空

function isEmpty(obj){

if(obj.value == null || obj.value == "") alert("此字段不能為空");

}

//驗證是否為數字

function isNumber(obj){

var val = obj.value;

var r = /"w[0-9]{1,}/;

if( !r.test(val) ) alert("此字段必須為數字")

}

//驗證是否長度符合

function isLen7(obj){

if(obj.value.length != 7) alert("此字段長度必須為7位");

}

//驗證有效E-Mail位址

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.阻止表單送出

function checkValue(){

//do something to check the value.

return false;

}

5.改變表單送出的頁面

fucntion chooseAction(){

if(document.myForm.myCheckBox.checked) document.myForm.action ="a.asp";

else document.myForm.action = "b.asp";

}

6.阻止向文本框輸入某些字元

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.回車後焦點跳到另一個輸入控件

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 οnlοad="funName(); funName2();">調用多個函數<body οnlοad="functionName(); a(); b(); c();">

window.onload = funName;

5.确定與點選事件相比對的事件

//9.3和9.4 比較複雜.且不清楚事件是JS API還是自定義的

6.防止重複執行兩次點選事件

//當第一次點選按鈕後,将表單送出回伺服器,然後submitForm()函數便指向blockIt()函數.

//除非頁面重新加載..否則點選無效(無作用)

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>

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.利用下拉框跳轉頁面

<option value="">Choose a Destination:</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 οnunlοad="saveData()"> //要儲存資料的頁面

<body οnlοad="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.三種嵌入樣式表的方法:

//在頭部統一聲明樣式

//從外部嵌入一樣式表檔案

//直接在元素屬性裡定義

2. 配置設定樣式規則給某一進制素

</style>

3. 自定義一種樣式供一類元素使用

.myStyle { font-size:9pt; }

4. 自定義一種樣式供單一進制素使用

#myId { font-size:9pt; }

5. 頁面加載後動态修改頁面樣式表連結

document.getElementById("basicStyle").href = "newstyle.css";

6. 打開/關閉某個樣式表

document.styleSheets[1].disabled = false;

7. 動态設定/更改某一進制素的樣式

document.getElementById("myElement").className = "myStyle";

8. 元素樣式的優先級

Element << class << id << style

// 原則上來講,浏覽器會使用最後的一種樣式(就近原則)

// 當同時給一進制素設定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

9.css 選擇符

子對象選擇符 > //版本ie7+，隻有直系兒子起作用

Eg ：#test1 > p //對id是test1的div，它内部的屬性标簽是p的内容起作用。

相鄰選擇符 + //隻對鄰居有效果，對鄰居的鄰居無效果

Eg ：#test5+p//對屬性标簽是p，對test的下一個如<p id="test6">的有效果

屬性選擇符 < a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="連結到其他頁面">

Eg ：a[href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ]{……} a[title="連結到其他頁面"]{……}

外站連結target="_blank" <a href="xx.html" target="_blank" rel="external nofollow" title="outlink">outlink</a>

a[target="_blank"]{background:url() no-repeat center right}

[att^=val] 開頭包含 [att*=val]任何位置包含 [att$=val]結尾包含

a[href$=".zip"] a[href^="mailto"] a[href*="http://www.kx1d.com"]

僞類僞對象

Eg：a:link,a:visited,a:hover,a:active{………}

#text a:link, #text a:visited, #text a:hover, #text a:active{…}//text是大div

#childtext:link, #childtext:visited, #childtext:hover, #childtext:active{…}//小div

#style1:first-line{……}

#style1:first-letter{……}

10.hover對所有元素OK使用 // IE不要不支援，FF和Google浏覽器支援

Eg：.divtest{background：…}

.divtest：hover{background：…}

//-----------------------------------------------------------------------

·動态更改對象的視覺效果

1.更改對象的字型樣式

document.getElementById("myElement").style.color = "#EEEEEE";

document.getElementById("myElement").src = "**.html";

document.getElementById("myElement").className = "menu";

onmouseover="javascript:this.className=style2" οnmοuseοut="javascript:this.className=style1"

//相應的屬性

color : 字型的顔色

font : 字型的全局設定

fontfamily : 字型名稱

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";//visible

document.getElementById("myElement").style.display = "none";

4.細調對象的透明度

document.getElementById("myElement").style.filter = "alpha(opacity=80)";

透明度寫法filter:alpha(opacity=50); //IE opacity:0.5;//FF Google

//-----------------------------------------------------------------------

·布置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.頁面加載時動态建立内容

現在是：<script>var d = new Date(); document.write(d.toLocaleTimeString());</script>

2. 動态重畫頁面

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>

Javascript筆記（轉）

繼續閱讀

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

無元件上傳圖檔到資料庫中，最完整解決方案

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條