目錄
一、常見的 HTML 事件
| 屬性 | 此事件發生在何時... |
|---|---|
| onabort | 圖像的加載被中斷。 |
| onblur | 元素失去焦點。 |
| onchange | 域的內容被改變。 |
| onclick | 當用戶點擊某個對象時調用的事件句柄。 |
| ondblclick | 當用戶雙擊某個對象時調用的事件句柄。 |
| onerror | 在加載文檔或圖像時發生錯誤。 |
| onfocus | 元素獲得焦點。 |
| onkeydown | 某個鍵盤按鍵被按下。 |
| onkeypress | 某個鍵盤按鍵被按下並鬆開。 |
| onkeyup | 某個鍵盤按鍵被鬆開。 |
| onload | 一張頁面或一幅圖像完成加載。 |
| onmousedown | 鼠標按鈕被按下。 |
| onmousemove | 鼠標被移動。 |
| onmouseout | 鼠標從某元素移開。 |
| onmouseover | 鼠標移到某元素之上。 |
| onmouseup | 鼠標按鍵被鬆開。 |
| onreset | 重置按鈕被點擊。 |
| onresize | 窗口或框架被重新調整大小。 |
| onselect | 文本被選中。 |
| onsubmit | 確認按鈕被點擊。 |
| onunload | 用戶退出頁面。 |
幾個例子：
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
</head>
<body>
輸入您的姓名：
<!--使用 onchange 事件在用戶改變輸入域的內容時執行 JavaScript 代碼-->
<input type="text" id="fname" onchange="upperCase(this.id)" />
<br/>
<!--onclick-->
Field1: <input type="text" id="field1" value="Hello World!">
<br />
Field2: <input type="text" id="field2">
<br /><br />
點擊下面的按鈕，把 Field1 的內容拷貝到 Field2 中：
<br />
<button onclick="copy()">Copy Text</button>
<br />
<!--onmouseover事件-->
<img src="img/1.gif" alt="mouse" onmouseover="alert('您的鼠標在圖片上！')" />
<br /> <br />
<img src="img/1.gif" alt="mouse"onmousemove="alert('您的鼠標剛纔離開了圖片！')" />
<br /> <br />
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
alert(y);
}
function copy(){
document.getElementById('field2').value=document.getElementById('field1').value;
}
</script>
</body>
</html>
二、JavaScript 字符串方法
String 對象方法
| 方法 | 描述 |
|---|---|
| anchor() | 創建 HTML 錨。 |
| big() | 用大號字體顯示字符串。 |
| blink() | 顯示閃動字符串。 |
| bold() | 使用粗體顯示字符串。 |
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 編碼。 |
| concat() | 連接字符串。 |
| fixed() | 以打字機文本顯示字符串。 |
| fontcolor() | 使用指定的顏色來顯示字符串。 |
| fontsize() | 使用指定的尺寸來顯示字符串。 |
| fromCharCode() | 從字符編碼創建一個字符串。 |
| indexOf() | 檢索字符串。 |
| italics() | 使用斜體顯示字符串。 |
| lastIndexOf() | 從後向前搜索字符串。 |
| link() | 將字符串顯示爲鏈接。 |
| localeCompare() | 用本地特定的順序來比較兩個字符串。 |
| match() | 找到一個或多個正則表達式的匹配。 |
| replace() | 替換與正則表達式匹配的子串。 |
| search() | 檢索與正則表達式相匹配的值。 |
| slice() | 提取字符串的片斷，並在新的字符串中返回被提取的部分。 |
| small() | 使用小字號來顯示字符串。 |
| split() | 把字符串分割爲字符串數組。 |
| strike() | 使用刪除線來顯示字符串。 |
| sub() | 把字符串顯示爲下標。 |
| substr() | 從起始索引號提取字符串中指定數目的字符。 |
| substring() | 提取字符串中兩個指定的索引號之間的字符。 |
| sup() | 把字符串顯示爲上標。 |
| toLocaleLowerCase() | 把字符串轉換爲小寫。 |
| toLocaleUpperCase() | 把字符串轉換爲大寫。 |
| toLowerCase() | 把字符串轉換爲小寫。 |
| toUpperCase() | 把字符串轉換爲大寫。 |
| toSource() | 代表對象的源代碼。 |
| toString() | 返回字符串。 |
| valueOf() | 返回某個字符串對象的原始值。 |
提取部分字符串
- slice(start, end)
- substring(start, end)
- substr(start, length)
<script>
function str(s){
var str = "The full name of China is the People's Republic of China.";
// 字符串長度
var len=str.length;
// 正序查找
var pos = str.lastIndexOf("China");
// 倒敘查找
var pos2 = str.lastIndexOf("China");
var str2 = "Apple, Banana, Mango";
// slice() 提取字符串的某個部分並在新字符串中返回被提取的部分。
var res = str2.slice(-13,-7);
// substring() 類似於 slice()。不同之處在於 substring() 無法接受負的索引。
var res2 = str2.substring(7,13);
// substr() 類似於 slice()。不同之處在於第二個參數規定被提取部分的長度。
var res3 = str2.substr(7,6);
// replace() 方法用另一個值替換在字符串中指定的值：
//replace() 方法不會改變調用它的字符串。它返回的是新字符串.默認地，replace() 只替換首個匹配：
var n = str2.replace("Mango", "Pear");
var a =str+" 長度是："+len+" chain出現的位置： "+pos+" chain倒敘出現的位置： "+pos2
+str2+" 提取"+res+" /"+ res2+" /"+res3+ " 替換"+n;
document.getElementById('str').innerHTML=a;
}
</script>
把字符串轉換爲數組
可以通過 split() 將字符串轉換爲數組：
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗號分隔
txt.split(" "); // 用空格分隔
txt.split("|"); // 用豎線分隔
具體參考：https://www.w3school.com.cn/jsref/jsref_obj_string.asp
https://www.w3school.com.cn/js/js_string_methods.asp