JavaScript的總結部落格

JavaScript的總結部落格

一、尋找HTML元素

　　通常，通過 JavaScript，您需要操作 HTML 元素。

　　1、通過 id 找到 HTML 元素

　　2、通過標籤名找到 HTML 元素

　　3、通過類名找到 HTML 元素

提示：通過類名尋找 HTML 元素在 IE 5,6,7,8 中無效。

var x=document.getElementById("intro");var y=document.getElementsByTagName("p");

 

①、改變 HTML 元素的內容 (innerHTML)

document.getElementById(id).innerHTML=new HTML

 

②、改變 HTML 屬性

document.getElementById(id).attribute=new valuedocument.getElementById("image").src="landscape.jpg";

 

③、改變 HTML 樣式

document.getElementById(id).style.property=new style<script>document.getElementById("p2").style.color="blue";</script>

 

④、添加或刪除 HTML 元素

二、DOM 事件

1、Js中的事件

行為,結構,樣式分離的頁面

一般事件 onclick 滑鼠點擊時觸發此事件

ondblclick 滑鼠雙擊時觸發此事件
onmousedown 按下滑鼠時觸發此事件
onmouseup 滑鼠按下後鬆開滑鼠時觸發此事件
onmouseover 當滑鼠移動到某物件範圍的上方時觸發此事件
onmousemove 滑鼠移動時觸發此事件
onmouseout 當滑鼠離開某物件範圍時觸發此事件
onkeypress 當鍵盤上的某個鍵被按下並且釋放時觸發此事件.
onkeydown 當鍵盤上某個按鍵被按下時觸發此事件
onkeyup 當鍵盤上某個按鍵被按放開時觸發此事件

①、綁定事件的3種方式

1: 直接寫在html標籤內聲明

 

 

這種寫法最古老,相容性最強.屬於DOM的lev0級的標準.這個效果,等同於在點擊div的時候,執行"t();"這一語句,

在全域範圍內執行,因此,t函數內部的this指代全域對象-->window想操作被點擊的DOM對象,用this就不行了.

第2種綁定方式:

DOM對象.onclick = function () {}

這種綁定是把一個DOM對象onclick屬性賦值為一個函數,

因此,函數內部的this直接指向該DOM對象.

在這種綁定方式中,只能給一個事件,綁定一個處理函數

即 .onclick = fn1; .onclick = fn2;

最終的效果, 是.onclick = fn2;

如果用函數來調用其他函數的形式

例.onclick = function () {fn1(),fn2()}

那麼此時，　fn1,fn2中的this又指向window．

如何綁定多個函數，　並令this指向DOM對象

第三種綁定事件的方法:

DOM lev3的事件綁定標準

添加和去除監聽事件.

addEventListener('事件',函數); // 第一個參數事件參數, 沒有首碼"on", w3c的標準,IE不支援

注意點1: 如果添加了多個事件處理函數, 按"添加時的先後順序來執行"

注意佔2: 事件處理函數中的this 指代 DOM節點自身 (w3c標準)

注意點3: 第一個事件參數,一律把事件名稱的'on'去掉 (w3c標準)

 

去除綁定

removeEventListener('事件',函數)

IE下綁定事件與解除事件的方法

attachEvent('事件',函數) // 注意: 事件 要加on

detachEvent('事件',函數) // 事件依然要加on

總結一下:

W3c addEventListener 與IE的attachEvent()的不同

1: 函數名不同

2: 事件名不同, IE下要加on,w3c不加on

3: 加事件後的執行順序不同, w3c按綁定事件的順序來執行, 而IE6,7,8,是後綁定的事件先發生.

4: this的指向, w3c中,綁定函數中的this指向 DOM對象, 而IE6,7,8中,指向window對象

 

===================================================================================================================================================================================

 

 

事件觸發總結：

1、onmousedown
定義：onmousedown事件會在滑鼠按鍵被按下時發生

2、onmouseup
定義：onmouseup事件會在滑鼠按鍵被鬆開時發生

3、onmousemove
定義：onmousemove事件會在滑鼠指標移動時發生
支援該事件的js對象：document
但是onmousemove預設情況下沒有任何對象的一個事件；
因為滑鼠移動頻繁發生。

4、onmouseover
定義：onmouseover事件會在滑鼠指標移動到指定的對象上時發生

5、onmouseout
定義：onmouseout事件會在滑鼠指標移出指定的對象時發生

6、onclick單擊事件
定義：onclick事件和onmousedown不同。單擊事件是在同一元素上發生了
滑鼠按下時間之後發生了滑鼠放開時間是發生的。
理解：滑鼠按下抬起以後事件才發生。

7、onfocus游標移入事件
定義：onfocus事件在對象獲得焦點時發生

8、onblur游標移出事件
定義：onblur事件會在對象失去焦點時發生

9、oncontextmenu右鍵事件
滑鼠按下右鍵的時候發生

10、onsubmit
onsubmit事件會在表單中的確認按鈕（submit）被
點擊是發生。

11、onkeydown
onkeydown事件會在使用者按下一個鍵盤按鍵時發生

12、onkeyup
obkeyup事件會在鍵盤按鍵被鬆開時發生

13、onload
onload事件會在頁面或映像載入完成後立即發生

14、onscroll
onscroll事件拖動捲軸時發生

15、onresize
onresize事件會在視窗或架構被調整大小時發生

16、onmousewheel
onmousewheel事件ie、chrome下滑鼠滾輪滾動時發生

17、DOMMouseScroll
DOMMouseScroll事件是標準下（ff)滑鼠滾輪事件，
滑鼠滾輪滾動時發生

18、onreadystatechange
onreadystatechange事件：當請求被發送到伺服器時；
我們需要執行一些基於響應的任務。每當readyState
改變時，就會觸發onreadystatechange事件。
readyState屬性存有XMLHttpRequest的狀態資訊。
在onreadystatechange事件中，我們規定當伺服器響應
已做好被處理的準備時所執行的任務。

19、attachEvent綁定事件
ie下的綁定事件，2個參數，第一個什麼事件，第二個執
行函數（倒序執行）。注意this指向
如：obj。attachEvent（‘onclick’，aaa）
function aaa（）{}

20、addEventListener綁定事件
標準下的綁定事件，3個參數。1什麼事件（不加ON），
2執行函數 3、一個布爾值。true是捕獲階段，false是
冒泡階段

21、event對象指事件的狀態

簡單的：一個 存了 事件詳細資料的東西

網上較專業的：Event對象代表事件的狀態，比如事件在其中發生的元素
鍵盤按鍵的狀態，滑鼠的位置，滑鼠按鍵的狀態，通常
與函數結合使用。

22、clientX、clientY
在Event對象下擷取滑鼠位置

23、cancelBubble =true
在Event對象下取消冒泡事件

24、keyCode
在Event對象下擷取使用者按下鍵盤的哪個按鍵

25、preventDefault（）
阻止預設預設事件的綁定寫法

26、return false
阻止預設時間的普通寫法

 

二、DOM 27-46
27、getElementById
通過id擷取某一個元素

28、getElementsByTagName
通過標籤名擷取一組元素的集合

29、childNodes
擷取子節點，但是標準下會擷取空白節點
擷取第一級子項目的節點

30、nodeType
節點類型
1）元素節點（標籤）2）文本節點（空白節點）

31、children
擷取子節點，但是沒有相容性問題
擷取第一級子項目的節點

32、firstElementChild || firstChild
標準下：firstElementChild ie不支援
ie下是 firstChild
擷取子項目裡的第一個

33、lastElementChild || lastChild
標準下：lastElementChild ie不支援
ie下是 lastChild
擷取子項目裡的最後一個

34、nextElementSibling || nextSibling
標準下：nextElementSibling ie不支援
ie下 nextSibling
擷取子指定元素的下一個兄弟節點

35、previousElementSibling || previousSibling
標準下： previousElementSibling ie不支援
id：previousSibling
擷取指定元素的上一個兄弟節點

36、parentNode
擷取父節點

37、offsetParent
擷取有定位的父節點，都沒有定位的話父節點就是body

38、offsetWidth-----有問題
擷取元素的實際寬度（width+padding+border）

39、offsetHeight
擷取元素的高度（height+padding+border）

40、clientWidth
擷取元素的內部寬度（width+padding）

41、clientHeight
擷取元素的內部高度（height+padding）

42、createElement（標籤名）
建立一個節點

43、appendchild（節點）
追加一個節點

44、insertBefore（節點，原有節點）
在已有的元素前面插入

45、removeChild（節點）
刪除一個節點

46、replaceChild（節點，已有節點）
替換已有的節點

 

三、BOM操作： 47-53
47、window。open（）
開啟視窗

48、window。close（）
關閉視窗,標準下不支援

49、window。location
擷取瀏覽器地址

50、window。location。href
擷取整體的網址

51、window。location。search
擷取問號？後面的內容，包括問號

52、window。location。hash
擷取警號#後面的內容，包括警號

53、window。location。reload（）
自動重新整理，定時器配合

53、window。navigator。userAgent
擷取瀏覽器資訊

 

四、js基礎： 54-126
54、if else 如果。。。。否則。。。

55、switch 如果

56、？： 三木，就是如果。。。否則。。。

57、for（）{} for迴圈

58、for in

59、while=for

60、continue 終止本次迴圈
if（i=2）continue 跳過這個條件

61、break 終止當前迴圈
if(i=3)break 結束本次

62、undefined 未定義

63、null=========？

64、=== 只比較，不轉換類型

65、== 不僅比較，而且還會將兩個東西轉換成相同的類型

66、= 賦值

67、！ 就是 不 的意思

68、setTimeout
設定定時器，2秒鐘後，執行一次，並且只執行一次，---定時炸彈

69、clearTimerout
清楚定時器，清理setTimerout

70、setInterval
設定定時器，每兩秒執行一次

71、clearInterval
清楚定時器，清理setInterval

72、arguments
實參的元素集合

73、call
改變this取向
fn名.call（this，‘black’）第一個參數是函數之行的環境，
從第二個參數開始，才是函數的真正參數

oDiv.onclick = function(){
toChange.call(this,'black');
};
function toChange(sColor){
this.style.background = sColor;
}

74、apply
改變this取向，
function show(a, b)
{
alert('this是：'+this+'\na是：'+a+'\nb是：'+b);
}
show(12, 8);
show.apply(document, [12, 8]);
第二個參數是以數組形勢存在的

75、callee ===============？調用這個函數自身的

76、var arr=【】； 聲明一個數組

77、var arr=new Array（） 聲明一個數組

78、push
向數組的末尾添加一個或更多元素，並返回新的長度

79、pop
刪除數組最後一個元素，並返回這個元素

80、shift
刪除數組第一個元素，並返回這個元素

81、unshift
向數組的開頭添加一個或多個元素，並返回新的長度

82、splice
刪除元素，並向數組添加新的元素

83、join（）
把數組的所有元素放入一個字串。元素通過指定
的分隔字元進行分隔

84、sort（）
對數組的元素進行排序

85、concent----concat（）？
串連兩個數組或者多個數組，並返回結果

86、split
分割字串，獲得數組

87、substring
擷取字串
包括開始不包括結束

88、indexOf
從前往後檢索字串

89、charAt
擷取某個字元

90、var re=//； 聲明一個正則對象

91、var re=new RegExp() 聲明一個正則對象

92、search 尋找一個字串，只找第一次出現的位置

93、month ===============？
match-匹配符合正則的東西，挑東西返回數組

94、test 用正則檢驗字串是否符合它所規定的規則

95、replace 替換，把符合規則的東西替換成字串

96、量詞：{n，m}至少出現n次，最多出現m次
+許多
* {0,} 0到任意次
？零次或者一次{0,1}
{n，}最少n次，最多不限
{，m}最少不限最多m次
{n}正好n次

97、字元類：
1[abc]2 1和2中間出現a或b或c
[^0-9]排除數字以外所有都可以
[a-z]所有的英文
[0-9]所有的數字

98、標識： i 忽略大小寫 g 全域匹配

99、首尾： ^ $

100、轉義：
\d 尋找數字 [0-9]
\D 除了數字[^0-9]
\s 空白
\b 單詞邊界
\w 數字字母底線--使用者名稱
. 任一字元
\. 代表.本身

101、var oDate= new Date（） 擷取目前時間

102、getHours（） 擷取小時

103、getMinutes（） 擷取分鐘

104、getSeconds（） 擷取秒

105、getFullYear（） 擷取年

106、getDay（） 擷取星期

107、getDate（） 擷取當前的時間日期

108、setDate（） 設定一個月的某一天

109、var oImg=new Image（） 建立一個image對象

110、什麼叫ajax
通過XMLHttpRequest與伺服器通訊，進行無重新整理操作

ajax採用的是非同步請求

111、同步與非同步區別

同步就是同一時間做一件事
非同步就是同一時間做多件事

112、ajax的互動方式
1）發送資料並返回 （）（註冊）
2）只發送不返回 （）========？例子
3）不發送只返回 （股票）

113、post與get的區別
1）發送方式不一樣：get載入網址問好後面的
post把資料放在一個傳輸體中發送上去的

2）安全不一樣
post相對安全，get不安全

3）網址長度不一樣
ie下get網址超過2048位元組將被截斷
post沒有上限

4）緩衝問題
get可以緩衝網址，post不會緩衝網址

5）用途不一樣
get：查詢資料，post修改資料

114、發送資料是什麼樣的？
串聯化資料：key1=value1&key2=value2

115、返回資料是什麼樣的？
返回的是字串

116、跨域：jsonp？
（利用script標籤跨域）
在頭部建立個script標籤，
改變script標籤中src

117、ajax的編寫步驟？
1）建立ajax對象（要有手機）
2）連結的伺服器open（撥號）
3）監聽資料返回onreadystatechange（聽）
4）發送資料send（說）
5）close（忽略）（掛了）

118、json怎麼取？=========？
通過串聯化資料

119、什麼是對象？
對象是一個整體，對外提供一些操作。||
黑盒子，看不到內部的樣子，
能看到表面的按鈕

120、什麼是物件導向？
使用對象時，只關注對象提供的功能，
不關注其內部細節，比如jQuery ||
使用一個東西的時候，不去管內部是
怎麼做的，只用好它的功能

下面是整理出來的一些函數，方便大家的學習和使用

/**function obj$(id)                       根據id得到對象function val$(id)                       根據id得到對象的值function trim(str)                      刪除左邊和右邊空格function ltrim(str)                     刪除左邊空格function rtrim (str)                    刪除右邊空格function isEmpty(str)                   字串是否有值function equals(str1, str2)             比較兩字串是否相等function equalsIgnoreCase(str1, str2)   忽略大小寫比較兩個字串是否相等function isChinese(str)                 判斷是否中文function isEmail(strEmail)              是否電子郵件function isImg(str)                     是否是一個圖片格式的檔案jpg|jpeg|swf|giffunction isInteger(str)                 是否是一個整數function isFloat                        是否是一個浮點數function isPost(str)                     是否郵編(1位至6位function isMobile(str)                  是否是手機號function isPhone(str)                   是否是電話號碼必須包含區號,可以含有分機號function isQQ(str)                      是否合法的QQ號碼          function isIP(str)                      是否是合法的IPfunction isDate(str)                     是否日期類型(例:2005-12-12)function isIdCardNo(idNumber)           是否是合法的社會安全號碼**/ /** * 替換 * @param {Object} str * @param {Object} oldStr * @param {Object} newStr * @return {TypeName}  */ function repalce(str, oldStr, newStr) {     var reg = eval_r("/" + oldStr + "/g");     return str.replace(reg, newStr); }  /** * 左邊截取 * @param {Object} str * @param {Object} n * @return {TypeName}  */ function left(str, n) {     if (str.length > 0) {         if (n > str.length)             n = str.length;         return str.substr(0, n);     } else {         return;     } }  /** * 右邊截取 * @param {Object} str * @param {Object} n * @return {TypeName}  */ function right(str, n) {     if (str.length > 0) {         if (n >= str.length)             return str;         return str.substr(str.length - n, n);     } else {         return;     } }    function strip(str) {     if (typeof str == 'string')         return str.replace(/^\s+/, '').replace(/(^\s*)|(\s*$)/g, ''); }  function stripTags(str) {     if (typeof str == 'string')         return str.replace(/<\/?[^>]+>/gi, '').replace(/(^\s*)|(\s*$)/g, ''); } /** * 判斷某個字元的長度在s和l之間 * @param {Object} str * @param {Object} s * @param {Object} l * @return {TypeName}  */ function isLen(str, s, l) {     str = Trim(str)     if (str.length > s && str.length < l) {         return true;     } else {         return false;     } }  /** * 是否為數字 * @param {Object} str * @return {TypeName}  */ function isNumber(str){     if (/^\d+$/.test(str)){         return true;     }else{         return false;     } }    function isLetters(str){     if (/^[A-Za-z0-9]+$/.test(str)){         return true;     }else{         return false;     } }  function isLetter(str){     if (/^[A-Za-z]+$/.test(str)){         return true;     }else{         return false;     } }  function isUpper(str){     if (/^[A-Z]+$/.test(str)){         return true;     }else{         return false;     } }  function isLower(str){     if (/^[a-z]+$/.test(str)){         return true;     }else{         return false;     } }   /***根據對象的id得到對象*id:對象的id*/ function obj(id) {     return document.getElementById(id); }  /***根據對象的id得到對象的值*id:對象的id*/ function val(id) {     var obj = document.getElementById(id);     if(obj !== null)     {         return obj.value;     }     return null; }  /***去掉字串的前後空格*str:將要除去空格的字串*/ function trim(str) {     return str.replace(/(^\s*)|(\s*$)/g, ''); }  /***去掉字串前的空格*str:將要除去空格的字串*/ function ltrim(str) {     return str.replace(/^\s*/g,''); }  /***去掉字串後的空格*str:將要除去空格的字串*/ function rtrim(str) {     return str.replace(/\s*$/,''); }  /***字串是否有值*str:要檢測的字串*/ function isEmpty(str) {     if(str != null && str.length > 0)     {         return true;     }     return false; }  /***比較兩個字串是否相等*str1:要比較的字串1*str2:要比較的字串2*/ function equals(str1, str2) {     if(str1 == str2)     {         return true;     }     return false; }  /***忽略大小寫比較兩個字串是否相等*str1:要比較的字串1*str2:要比較的字串2*/ function equalsIgnoreCase(str1, str2) {     if(str1.toUpperCase() == str2.toUpperCase())     {         return true;     }     return false; }  /***是否是中文*str:要檢測的字串*/ function isChinese(str) {    var str = str.replace(/(^\s*)|(\s*$)/g,'');    if (!(/^[\u4E00-\uFA29]*$/.test(str)            && (!/^[\uE7C7-\uE7F3]*$/.test(str))))    {       return false;    }    return true; }  /***是否是Email*str:要檢測的字串*/ function isEmail(str) {     if(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str))     {         return true     }     return false; }  /***是否是圖片格式檔案*str:要測試的檔案名稱*/ function isImg(str) {     var objReg = new RegExp("[.]+(jpg|jpeg|swf|gif){1}quot;, "gi");     if(objReg.test(str))     {         return true;     }     return false; }  /***是否是一個整數*str:要檢測的字串*/ function isInteger(str) {     if(/^-?\d+$/.test(str))     {         return true;     }     return false; }  /***是否是一個浮點數*str:要檢測的字串*/ function isFloat(str) {     if(/^(-?\d+)(\.\d+)?$/.test(str))     {         return true;     }     return false; }  /***是否是郵編*str:要檢測的字串*/ function isPost(str) {     if(/^\d{1,6}$/.test(str))     {         return true;     }     return false; }  /***是否是手機號碼*str:要檢測的字串*/ function isMobile(str) {     if(/^1[35]\d{9}/.test(str))       {           return true;       }     return false; }  /***是否是電話號碼*str:要檢測的字串*電話號碼必須有區號,可以有分機號*/ function isPhone(str) {     if(/^(0[1-9]\d{1,2}-)\d{7,8}(-\d{1,8})?/.test(str))     {         return true;     }     return false; }  /***是否是合法的QQ號碼*str:要檢測的字串*/ function isQQ(str){     if(/^\d{5,9}$/.test(str))     {         return true;     }     return false; }  /***是否是合法的IP*str:要檢測的字串*/ function isIP(str){     var reg = /^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$/;     if(reg.test(str))     {         return true;     }     return false; }  /***是否是一合法日期*str:要檢測的字串*/ function isDate(str) {     var reg = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/;     if(reg.test(str))     {         return true;     }     return false;    } 

現在已經你已經學習了 JavaScript，接下來該學習什麼呢？

下一步應該學習 HTML DOM 和 DHTML。

jQuery

jQuery 是一個 JavaScript 庫。

jQuery 極大地簡化了 JavaScript 編程。

jQuery 很容易學習。

 

jQuery Mobile

jQuery Mobile 是一個為觸控最佳化的架構，用於建立移動 web 應用程式。

jQuery 適用於所有流行的智能手機和平板電腦。

jQuery Mobile 構建於 jQuery 庫之上，這使其更易學習，如果您通曉 jQuery 的話。

它使用 HTML5、CSS3、JavaScript 和 AJAX 通過儘可能少的代碼來完成對頁面的布局。

 

HTML DOM

HTML DOM 定義了訪問和操作 HTML 文檔的標準方法。

HTML DOM 獨立於平台和語言，可被任何程式設計語言使用，比如 Java、JavaScript 和 VBscript。

 

AJAX

AJAX = 非同步 JavaScript 和 XML。

AJAX 不是一種新的程式設計語言，而是一種使用現有標準的新方法。

通過與伺服器進行資料交換，AJAX 可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

有很多使用 AJAX 的應用程式案例：新浪微博、Google 地圖、開心網等等。

 

JSON

JSON：JavaScript 物件標記法（JavaScript Object Notation）。

JSON 是儲存和交換文本資訊的文法。類似 XML。

JSON 比 XML 更小、更快，更易解析。