JAVA AJAX教程第二章-JAVASCRIPT基礎知識

開篇:JAVASCRIPTAJAX技術中不可或缺的一部分,所以想學好AJAX以及現在流行的AJAX框架,學好JAVASCRIPT是最重要的。這章我給大家整理了一些JAVASCRIPT的基礎知識、常用代碼和事件彙總。

 

一、基礎知識:

1.document.write(""); 輸出語句
2.JS
中的註釋爲//
3.
傳統的HTML文檔順序是
:document->html->(head,body)
4.
一個瀏覽器窗口中的DOM順序是
:window->(navigator,screen,history,location,document)
5.
得到表單中元素的名稱和值:document.getElementById("表單中元素的ID").name(
value)
6.
一個小寫轉大寫的
JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase();
7.JS
中的值類型
:String,Number,Boolean,Null,Object,Function
8.JS
中的字符型轉換成數值型
:parseInt(),parseFloat()
9.JS
中的數字轉換成字符型:(""+變量
)
10.JS
中的取字符串長度是
:(length)
11.JS
中的字符與字符相連接使用+
.
12.JS
中的比較操作符有:==等於,!=不等於
,>,>=,<.<=
13.JS
中聲明變量使用:var來進行聲明

14.JS
中的判斷語句結構:if(condition){}else{}
15.JS
中的循環結構
:for([initial expression];[condition];[upadte expression]) {inside loop}
16.
循環中止的命令是
:break
17.JS
中的函數定義
:function functionName([parameter],...){statement[s]}
18.
當文件中出現多個form表單時.可以用document.forms[0],document.forms[1]來代替
.
19.
窗口:打開窗口window.open(), 關閉一個窗口:window.close(), 窗口本身
:self
20.
狀態欄的設置:window.status="字符
";
21.
彈出提示信息:window.alert("字符
");
22.
彈出確認框
:window.confirm();
23.
彈出輸入提示框
:window.prompt();
24.
指定當前顯示鏈接的位置
:window.location.href="URL"
25.
取出窗體中的所有表單的數量
:document.forms.length
26.
關閉文檔的輸出流
:document.close();
27.
字符串追加連接符
:+=
28.
創建一個文檔元素
:document.createElement(),document.createTextNode()
29.
得到元素的方法
:document.getElementById()
30.
設置表單中所有文本型的成員的值爲空:

var form = window.document.forms[0]
for (var i = 0; i<form.elements.length;i++){
      if (form.elements[i].type == "text"){
          form.elements[i].value = "";
      }
}


31.
複選按鈕在JS中判斷是否選中:document.forms[0].checkThis.checked (checked屬性代表爲是否選中返回TRUEFALSE)
32.
單選按鈕組(單選按鈕的名稱必須相同):取單選按鈕組的長度
document.forms[0].groupName.length
33.
單選按鈕組判斷是否被選中也是用
checked.
34.
下拉列表框的值:document.forms[0].selectName.options[n].value (n有時用下拉列表框名稱加上.selectedIndex來確定被選中的值
)
35.
字符串的定義
:var myString = new String("This is lightsword");
36.
字符串轉成大寫:string.toUpperCase(); 字符串轉成小寫
:string.toLowerCase();
37.
返回字符串2在字符串1中出現的位置:String1.indexOf("String2")!=-1則說明沒找到
.
38.
取字符串中指定位置的一個字符
:StringA.charAt(9);
39.
取出字符串中指定起點和終點的子字符串
:stringA.substring(2,6);
40.
數學函數:Math.PI(返回圓周率),Math.SQRT2(返回開方),Math.max(value1,value2)返回兩個數中的最在值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四捨五入函數,Math.floor(Math.random()*(n+1))返回隨機數

41.
定義日期型變量:var today = new Date();
42.
日期函數列表:dateObj.getTime()得到時間,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期幾,dateObj.getHours()得到小時,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒,dateObj.setTime(value)設置時間,dateObj.setYear(val)設置年,dateObj.setMonth(val)設置月,dateObj.setDate(val)設置日,dateObj.setDay(val)設置星期幾,dateObj.setHours設置小時,dateObj.setMinutes(val)設置分,dateObj.setSeconds(val)設置秒   [注意:此日期時間從0開始計
]
43.FRAME
的表示方式
: [window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName
44.parent
代表父親對象,top代表最頂端對象

45.
打開子窗口的父窗口爲:opener
46.
表示當前所屬的位置
:this
47.
當在超鏈接中調用JS函數時用:(javascript:)來開頭後面加函數名

48.
在老的瀏覽器中不執行此JS:<!--       //-->
49.
引用一個文件式的
JS:<script type="text/javascript" src="aaa.js"></script>
50.
指定在不支持腳本的瀏覽器顯示的
HTML:<noscript></noscript>
51.
當超鏈和ONCLICK事件都有時,則老版本的瀏覽器轉向a.html,否則轉向b.html.
:<a href="a.html" οnclick="location.href='b.html';return false">dfsadf</a>
52.JS
的內建對象有
:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,URIError
53.JS
中的換行
:/n
54.
窗口全屏大小
:<script>function fullScreen(){ this.moveTo(0,0);this.outerWidth=screen.availWidth;this.outerHeight=screen.availHeight;}window.maximize=fullScreen;</script>
55.JS
中的all代表其下層的全部元素

56.JS
中的焦點順序:document.getElementByid("表單元素
").tabIndex = 1
57.innerHTML
的值是表單元素的值:<p id="para">"how are <em>you</em>"</p>,innerHTML的值就是
:how are <em>you</em>
58.innerTEXT
的值和上面的一樣,只不過不會把<em>這種標記顯示出來
.
59.contentEditable
可設置元素是否可被修改,isContentEditable返回是否可修改的狀態
.
60.isDisabled
判斷是否爲禁止狀態.disabled設置禁止狀態

61.length
取得長度,返回整型數值
62.addBehavior()
是一種JS調用的外部函數文件其擴展名爲.htc
63.window.focus()
使當前的窗口在所有窗口之前
.
64.blur()
指失去焦點.FOCUS()相反
.
65.select()
指元素爲選中狀態
.
66.
防止用戶對文本框中輸入文本
:οnfοcus="this.blur()"
67.
取出該元素在頁面中出現的數量:document.all.tags("div(或其它HTML標記符
)").length
68.JS
中分爲兩種窗體輸出:模態和非模態
.window.showModaldialog(),window.showModeless()
69.
狀態欄文字的設置:window.status='文字',默認的狀態欄文字設置:window.defaultStatus = '文字
.';
70.
添加到收藏夾
:external.AddFavorite("http://www.dannyg.com","jaskdlf");
71.JS
中遇到腳本錯誤時不做任何操作:window.onerror = doNothing; 指定錯誤句柄的語法爲
:window.onerror = handleError;
72.JS
中指定當前打開窗口的父窗口:window.opener,支持opener.opener...的多重繼續
.
73.JS
中的self指的是當前的窗口

74.JS
中狀態欄顯示內容:window.status="內容"
75.JS
中的top指的是框架集中最頂層的框架

76.JS
中關閉當前的窗口:window.close();
77.JS
中提出是否確認的框
:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");}
78.JS
中的窗口重定向
:window.navigate("http://www.sina.com.cn");
79.JS
中的打印
:window.print()
80.JS
中的提示輸入框
:window.prompt("message","defaultReply");
81.JS
中的窗口滾動條
:window.scroll(x,y)
82.JS
中的窗口滾動到位置
:window.scrollby
83.JS
中設置時間間隔:setInterval("expr",msecDelay)setInterval(funcRef,msecDelay)
setTimeout
84.JS
中的模態顯示在IE4+,NN中不行
:showModalDialog("URL"[,arguments][,features]);
85.JS
中的退出之前使用的句柄
:function verifyClose(){event.returnValue="we really like you and hope you will stay longer.";}}   window.οnbefοreunlοad=verifyClose;
86.
當窗體第一次調用時使用的文件句柄
:onload()
87.
當窗體關閉時調用的文件句柄
:onunload()
88.window.location
的屬性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname("/a/a.html"),hash("#giantGizmo",指跳轉到相應的錨記),href(全部的信息
)
89.window.location.reload()
刷新當前頁面
.
89-1.parent.location.reload()
刷新父親對象(用於框架)

89-2.opener.location.reload()
刷新父窗口對象(用於單開窗口)
89-3.top.location.reload()
刷新最頂端對象(用於多開窗口)
90.window.history.back()
返回上一頁,window.history.forward()返回下一頁,window.history.go(返回第幾頁,也可以使用訪問過的URL)
91.document.write()
不換行的輸出,document.writeln()換行輸出

92.document.body.noWrap=true;
防止鏈接文字折行.
93.
變量名.charAt(第幾位),取該變量的第幾位的字符
.
94."abc".charCodeAt(
第幾個),返回第幾個字符的ASCii碼值
.
95.
字符串連接:string.concat(string2),或用+=進行連接

96.
變量.indexOf("字符",起始位置),返回第一個出現的位置(0開始計算)
97.string.lastIndexOf(searchString[,startIndex])
最後一次出現的位置
.
98.string.match(regExpression),
判斷字符是否匹配
.
99.string.replace(regExpression,replaceString)
替換現有字符串
.
100.string.split(
分隔符)返回一個數組存儲值
.
101.string.substr(start[,length])
取從第幾位到指定長度的字符串
.
102.string.toLowerCase()
使字符串全部變爲小寫
.
103.string.toUpperCase()
使全部字符變爲大寫
.
104.parseInt(string[,radix(
代表進制)])強制轉換成整型
.
105.parseFloat(string[,radix])
強制轉換成浮點型
.
106.isNaN(
變量):測試是否爲數值型
.
107.
定義常量的關鍵字:const,定義變量的關鍵字:var

 

二、我們先來學習JAVASCRIPT常用代碼:

1 創建腳本塊

程序代碼

<script language=”JavaScript”>

JavaScript 代碼寫在這裏面

</script> 

2 隱藏腳本代碼

程序代碼

<script language=”JavaScript”>

<!--

document.write(“Hello”);

// -->

</script>

在不支持JavaScript的瀏覽器中將不執行相關代碼

3 瀏覽器不支持的時候顯示

程序代碼

<noscript>

Hello to the non-JavaScript browser.

</noscript>

4 鏈接外部腳本文件

程序代碼

<script language=”JavaScript” src="/”filename.js"”></script> 

5 註釋腳本

程序代碼

// This is a comment

document.write(“Hello”); // This is a comment

/*

All of this

is a comment

*/ 

6 輸出到瀏覽器

程序代碼

document.write(“<strong>Hello</strong>”); 

7 定義變量

程序代碼

var myVariable = “some value”; 

8 字符串相加

程序代碼

var myString = “String1” + “String2”; 

9 字符串搜索

程序代碼

<script language=”JavaScript”>

<!--

var myVariable = “Hello there”;

var therePlace = myVariable.search(“there”);

document.write(therePlace);

// -->

</script> 

10 字符串替換

程序代碼

thisVar.replace(“Monday”,”Friday”); 

11 格式化字串

程序代碼

<script language=”JavaScript”>

<!--

var myVariable = “Hello there”;

document.write(myVariable.big() + “<br>”);

document.write(myVariable.blink() + “<br>”);

document.write(myVariable.bold() + “<br>”);

document.write(myVariable.fixed() + “<br>”);

document.write(myVariable.fontcolor(“red”) + “<br>”);

document.write(myVariable.fontsize(“18pt”) + “<br>”);

document.write(myVariable.italics() + “<br>”);

document.write(myVariable.small() + “<br>”);

document.write(myVariable.strike() + “<br>”);

document.write(myVariable.sub() + “<br>”);

document.write(myVariable.sup() + “<br>”);

document.write(myVariable.toLowerCase() + “<br>”);

document.write(myVariable.toUpperCase() + “<br>”);

var firstString = “My String”;

var finalString = firstString.bold().toLowerCase().fontcolor(“red”);

// -->

</script> 

12 創建數組

程序代碼

<script language=”JavaScript”>

<!--

var myArray = new Array(5);

myArray[0] = “First Entry”;

myArray[1] = “Second Entry”;

myArray[2] = “Third Entry”;

myArray[3] = “Fourth Entry”;

myArray[4] = “Fifth Entry”;

var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);

// -->

</script>

13 數組排序
程序代碼
<script language=”JavaScript”>
<!--
var myArray = new Array(5);
myArray[0] = “z”;
myArray[1] = “c”;
myArray[2] = “d”;
myArray[3] = “a”;
myArray[4] = “q”;
document.write(myArray.sort());
// -->
</script>
14
分割字符串
程序代碼
<script language=”JavaScript”>
<!--
var myVariable = “a,b,c,d”;
var stringArray = myVariable.split(“,”);
document.write(stringArray[0]);
document.write(stringArray[1]);
document.write(stringArray[2]);
document.write(stringArray[3]);
// -->
</script> 
15
彈出警告信息
程序代碼
<script language=”JavaScript”>
<!--
window.alert(“Hello”);
// -->
</script>
16
彈出確認框
程序代碼
<script language=”JavaScript”>
<!--
var result = window.confirm(“Click OK to continue”);
// -->
</script>
17
自定義函數
程序代碼
<script language=”JavaScript”>
<!--
function multiple(number1,number2) {
var result = number1 * number2;
return result;
}
// -->
</script>
18
調用JS
函數
程序代碼
<a href=”#” onClick=”functionName()”>Link text</a>
<a href="/”javascript :functionName"()”>Link text</a>
19
在頁面加載完成後執行函數
程序代碼
<body onLoad=”functionName();”>
Body of the page
</body>
20
條件判斷
程序代碼
<script>
<!--
var userChoice = window.confirm(“Choose OK or Cancel”);
var result = (userChoice == true) ? “OK” : “Cancel”;
document.write(result);
// -->
</script>
21
指定次數循環
程序代碼
<script>
<!--
var myArray = new Array(3);
myArray[0] = “Item 0”;
myArray[1] = “Item 1”;
myArray[2] = “Item 2”;
for (i = 0; i < myArray.length; i++) {
document.write(myArray[i] + “<br>”);
}
// -->
</script>
22
設定將來執行
 
程序代碼

<script>
<!--
function hello() {
window.alert(“Hello”);
}
window.setTimeout(“hello()”,5000);
// -->
</script> 
23
定時執行函數
程序代碼
<script>
<!--
function hello() {
window.alert(“Hello”);
window.setTimeout(“hello()”,5000);
}
window.setTimeout(“hello()”,5000);
// -->
</script>
24
取消定時執行
程序代碼
<script>
<!--
function hello() {
window.alert(“Hello”);
}
var myTimeout = window.setTimeout(“hello()”,5000);
window.clearTimeout(myTimeout);
// -->
</script>

25 在頁面卸載時候執行函數
程序代碼
<body onUnload=”functionName();”>
Body of the page
</body>
JavaScript
就這麼回事2:瀏覽器輸出

26
訪問document對象
程序代碼
<script language=”JavaScript”>
var myURL = document.URL;
window.alert(myURL);
</script>
27
動態輸出HTML
程序代碼
<script language=”JavaScript”>
document.write(“<p>Here’s some information about this document:</p>”);
document.write(“<ul>”);
document.write(“<li>Referring Document: “ + document.referrer + “</li>”);
document.write(“<li>Domain: “ + document.domain + “</li>”);
document.write(“<li>URL: “ + document.URL + “</li>”);
document.write(“</ul>”);
</script>
28
輸出換行
程序代碼
document.writeln(“<strong>a</strong>”);
document.writeln(“b”);
29
輸出日期
程序代碼
<script language=”JavaScript”>
var thisDate = new Date();
document.write(thisDate.toString());
</script>
30
指定日期的時區
程序代碼
<script language=”JavaScript”>
var myOffset = -2;
var currentDate = new Date();
var userOffset = currentDate.getTimezoneOffset()/60;
var timeZoneDifference = userOffset - myOffset;
currentDate.setHours(currentDate.getHours() + timeZoneDifference);
document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString());
</script> 
31
設置日期輸出格式  
程序代碼
<script language=”JavaScript”>
var thisDate = new Date();
var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();
var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();
document.write(thisTimeString + “ on “ + thisDateString);
</script>
32
讀取URL參數
程序代碼
<script language=”JavaScript”>
var urlParts = document.URL.split(“?”);
var parameterParts = urlParts[1].split(“&”);
for (i = 0; i < parameterParts.length; i++) {
var pairParts = parameterParts[i].split(“=”);
var pairName = pairParts[0];
var pairValue = pairParts[1];
document.write(pairName + “
“ +pairValue );
}
</script>
你還以爲HTML是無狀態的麼?

33
打開一個新的document對象
程序代碼
<script language=”JavaScript”>
function newDocument() {
document.open();
document.write(“<p>This is a New Document.</p>”);
document.close();
}
</script>
34
頁面跳轉
程序代碼
<script language=”JavaScript”>
window.location = “http://www.x-force.cn/”;
</script> 
35
添加網頁加載進度窗口
程序代碼
<html>
<head>
<script language='javaScript'>
var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
</script>
<title>The Main Page</title>
</head>
<body onLoad='placeHolder.close()'>
<p>This is the main page</p>
</body>
</html> 
JavaScript
就這麼回事3:圖像
 
36
讀取圖像屬性
程序代碼
<img src="/”image1.jpg"” name=”myImage”>
<a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>

 

三、JAVASCRIPT事件彙總

javascript事件列表解說

事件

瀏覽器支持

解說

一般事件

onclick

IE3N2

鼠標點擊時觸發此事件

ondblclick

IE4N4

鼠標雙擊時觸發此事件

onmousedown

IE4N4

按下鼠標時觸發此事件

onmouseup

IE4N4

鼠標按下後鬆開鼠標時觸發此事件

onmouseover

IE3N2

當鼠標移動到某對象範圍的上方時觸發此事件

onmousemove

IE4N4

鼠標移動時觸發此事件

onmouseout

IE4N3

當鼠標離開某對象範圍時觸發此事件

onkeypress

IE4N4

當鍵盤上的某個鍵被按下並且釋放時觸發此事件.

onkeydown

IE4N4

當鍵盤上某個按鍵被按下時觸發此事件

onkeyup

IE4N4

當鍵盤上某個按鍵被按放開時觸發此事件

頁面相關事件

onabort

IE4N3

圖片在下載時被用戶中斷

onbeforeunload

IE4N

當前頁面的內容將要被改變時觸發此事件

onerror

IE4N3

出現錯誤時觸發此事件

onload

IE3N2

頁面內容完成時觸發此事件

onmove

IEN4

瀏覽器的窗口被移動時觸發此事件

onresize

IE4N4

當瀏覽器的窗口大小被改變時觸發此事件

onscroll

IE4N

瀏覽器的滾動條位置發生變化時觸發此事件

onstop

IE5N

瀏覽器的停止按鈕被按下時觸發此事件或者正在下載的文件被中斷

onunload

IE3N2

當前頁面將被改變時觸發此事件

表單相關事件

onblur

IE3N2

當前元素失去焦點時觸發此事件

onchange

IE3N2

當前元素失去焦點並且元素的內容發生改變而觸發此事件

onfocus

IE3 N2

當某個元素獲得焦點時觸發此事件

onreset

IE4 N3

當表單中RESET的屬性被激發時觸發此事件

onsubmit

IE3 N2

一個表單被遞交時觸發此事件

滾動字幕事件

onbounce

IE4N

Marquee內的內容移動至Marquee顯示範圍之外時觸發此事件

onfinish

IE4N

Marquee元素完成需要顯示的內容後觸發此事件

onstart

IE4 N

Marquee元素開始顯示內容時觸發此事件

編輯事件

onbeforecopy

IE5N

當頁面當前的被選擇內容將要複製到瀏覽者系統的剪貼板前觸發此事件

onbeforecut

IE5 N

當頁面中的一部分或者全部的內容將被移離當前頁面[剪貼]並移動到瀏覽者的系統剪貼板時觸發此事件

onbeforeeditfocus

IE5N

當前元素將要進入編輯狀態

onbeforepaste

IE5 N

內容將要從瀏覽者的系統剪貼板傳送[粘貼]到頁面中時觸發此事件

onbeforeupdate

IE5 N

當瀏覽者粘貼系統剪貼板中的內容時通知目標對象

oncontextmenu

IE5N

當瀏覽者按下鼠標右鍵出現菜單時或者通過鍵盤的按鍵觸發頁面菜單時觸發的事件

oncopy

IE5N

當頁面當前的被選擇內容被複制後觸發此事件

oncut

IE5N

當頁面當前的被選擇內容被剪切時觸發此事件

ondrag

IE5N

當某個對象被拖動時觸發此事件 [活動事件]

ondragdrop

IEN4

一個外部對象被鼠標拖進當前窗口或者幀

ondragend

IE5N

當鼠標拖動結束時觸發此事件,即鼠標的按鈕被釋放了

ondragenter

IE5N

當對象被鼠標拖動的對象進入其容器範圍內時觸發此事件

ondragleave

IE5N

當對象被鼠標拖動的對象離開其容器範圍內時觸發此事件

ondragover

IE5N

當某被拖動的對象在另一對象容器範圍內拖動時觸發此事件

ondragstart

IE4N

當某對象將被拖動時觸發此事件

ondrop

IE5N

在一個拖動過程中,釋放鼠標鍵時觸發此事件

onlosecapture

IE5N

當元素失去鼠標移動所形成的選擇焦點時觸發此事件

onpaste

IE5N

當內容被粘貼時觸發此事件

onselect

IE4N

當文本內容被選擇時的事件

onselectstart

IE4N

當文本內容選擇將開始發生時觸發的事件

數據綁定

onafterupdate

IE4N

當數據完成由數據源到對象的傳送時觸發此事件

oncellchange

IE5N

當數據來源發生變化時

ondataavailable

IE4N

當數據接收完成時觸發事件

ondatasetchanged

IE4N

數據在數據源發生變化時觸發的事件

ondatasetcomplete

IE4N

當來子數據源的全部有效數據讀取完畢時觸發此事件

onerrorupdate

IE4N

當使用onBeforeUpdate事件觸發取消了數據傳送時,代替onAfterUpdate事件

onrowenter

IE5N

當前數據源的數據發生變化並且有新的有效數據時觸發的事件

onrowexit

IE5N

當前數據源的數據將要發生變化時觸發的事件

onrowsdelete

IE5N

當前數據記錄將被刪除時觸發此事件

onrowsinserted

IE5N

當前數據源將要插入新數據記錄時觸發此事件

外部事件

onafterprint

IE5N

當文檔被打印後觸發此事件

onbeforeprint

IE5N

當文檔即將打印時觸發此事件

onfilterchange

IE4N

當某個對象的濾鏡效果發生變化時觸發的事件

onhelp

IE4N

當瀏覽者按下F1或者瀏覽器的幫助選擇時觸發此事件

onpropertychange

IE5N

當對象的屬性之一發生變化時觸發此事件

onreadystatechange

IE4N

當對象的初始化屬性值發生變化時觸發此事件

 

 

這些是JAVASCRIPT的基本知識,如果是新手的話,我覺得這些不夠你們學習,你可以去找些資料完整的學習下JAVASCRIPT。這些對於已經有一些JAVASCRIPT基礎的朋友,可以先瀏覽下這些知識,或許其中有你已經遺忘的或者遺漏的,回憶下JAVASCRIPT對你後面繼續深入學下AJAX有很大的幫助。

 

歡迎各位朋友大家一起交流,很希望能認識各位,歡迎聯繫QQ:540528747

發佈了32 篇原創文章 · 獲贊 34 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章