javascript深層解釋。

 

 

1、查找HTML元素javascript

  一般,經過 JavaScript,您須要操做 HTML 元素。html

  一、經過 id 找到 HTML 元素前端

  二、經過標籤名找到 HTML 元素java

  三、經過類名找到 HTML 元素node

提示:經過類名查找 HTML 元素在 IE 5,6,7,8 中無效。web

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

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

document.getElementById(id).innerHTML=new HTML

②、改變 HTML 屬性chrome

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

③、改變 HTML 樣式編程

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

④、添加或刪除 HTML 元素json

2、DOM 事件

一、Js中的事件

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

通常事件 onclick 鼠標點擊時觸發此事件

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

①、綁定事件的3種方式

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

<div id="school" onclick="t();">

這種寫法最古老,兼容性最強.屬於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對象

3、事件的捕捉與冒泡模型

在w3c的模型中,

addEventListener 支持 第3個參數來聲明事件的模型爲冒泡仍是捕捉.

若是聲明爲 true,則爲捕捉方式

若是聲明爲false, 或者不聲明, 則爲冒泡方式

注意: IE的attchEvent 沒有第3個參數,不支持捕捉模型

事件對象的概念:

當事件對應的函數被觸發時, 函數會接收到一個事件參數, // w3c標準

例 xx.onclick = function (ev) {alert(ev)}

點擊後,ev 參數就表明單擊那一瞬間的"各個參數",以一個對象的方式傳過去.

對於IE, 當事件發生的瞬間,事件對象賦值給window.event屬性

 4、事件的中斷

如何中斷事件的傳播???????

在w3c:  事件.stopPropagation();

在IE中,  事件對象.cancelBubble = true;

cancelBubble = true //IE取消冒泡

stopPropagation(); // w3c取消冒泡

 returnValue = false; // IE取消事件效果

preventDefautl() ;// w3c取消事件效果

取消事件的默認效果

事件對象.preventDefault();  // 阻止事件的默認效果, w3c方法

事件對象.returnValue = false; // 設置returnValue 的屬性值爲false;

5、Js 做用域鏈(是指AO鏈)

1:參數

2:局部變量聲明

3:函數聲明

* 函數聲明與函數表達式的區別

表達式必有返回值,把返回值(即匿名函數)賦給了一個變量.

此時 就是普通的賦值過程.

①、js並非一句一句順序執行的,先進行詞法分析

This, 與 arguments

當一個函數運行的時候,函數內部能引用的變量有這麼幾種

AO、arguments、this

對於 arguments和this, 每一個函數都有本身獨有的arguments和this, 且不進行鏈式查找

arguments是什麼?

答:1:arguments是收到的實參副本

2:收到實參收集起來,放到一個arguments對象裏

在詞法分析中, 首先按形參造成AO的屬性,值爲undefined

當實參傳來時, 再修改AO的相應屬性.

t(a,b,c){}, 

調用時: t(1,2,3,4,5) 個參數

此時 , AO屬性只有a,bc,3個屬性, arguments裏有1,3,3,4,5, 全部的值

對於超出形參個數以外的實參, 能夠經過arguments來得到

3:arguments 的索引 從 0, 1,2,....遞增,與實參逐個對應

4:arguments.length 屬性表明實參的個數

5:Arguments必定不是數組, 是長的比較像數組的一個對象,雖然也有length屬性

6:Arguments每一個函數都會有,所以,arguemnts只會在內部找自身的arguments,

沒法引用到外層的arguments

This是誰

This是指調用上下文

針對函數的應用場景來討論

函數的4種調用方式

1:函數方式

直接調用函數名,或函數表達式的返回值,

This指代全局對象,window

2:屬性方式(對象方法方式)

This指代該對象(方法的屬主)

3:構造器方式

經過 new 函數     名() , 來建立對象

在js裏, 構造函數與對象的關係比較鬆散,

對象就是"屬性->值"的集合

構造器的做用,是製造一個對象,把this指向該對象,

4:call,apply方式

函數自己便是對象,對象就有方法

函數名.call(對象,參數1,參數2,參數3);

以fn.call(obj,'a','b');

實際效果至關於

1:fn內部的this指向了obj

2:fn('a','b');

Apply的效果與call同樣, 只不過傳參時,把全部參數包裝在數組裏,傳過去.

例 fn.call(obj,'a',' b')  ===> fn.apply(obj,['a','b']);

還有一種改變this的方法

With 語句

With(對象) {

語句1

語句2

.....

}

在with內部的語句,就把參數中的對象當成的上下文環境.

6、詞法分析

js執行順序
1:詞法分析階段
先把接收到的參數放到激活對象上
 
再對函數體中代碼做分析
a: var xx = yy;
作法:聲明一個xx屬性在激活對象上,
但不賦值,若是已經有xx,則不無動做.
b:function ttt() {
}
作法:直接聲明ttt屬性,
且內容是函數體
 
2:執行語句階段
 

6、Js面向對象

 屬性,方法-->對象

"類"能作到封裝,繼承,多態,

"類"的靜態方法

1: js中的對象是什麼?

答:js的對象就是鍵值對的無序集合

2:種建立對象的方法

①、經過字面量來建立對象

例:{age:22,hei:180}

{}->空對象,沒有屬性

②、經過 new Object([value]);

經過構造函數來建立對象(和第2種沒區別,由於Object就是系統內建的構造函數)

7、Js面向對象中的封裝

javascript語言中,沒有現成的私有屬性/方法機制,
但能夠經過做用域來模擬私有屬性,私有方法
 

對象的屬性外界是可讀可寫的, 如何來達到封裝的目的?

答:經過閉包+局部變量來完成

在構造函數內部聲明局部變量, 和普通方法,

由於做用域的關係,只有構造函數內的方法,才能訪問到局部變量.

而方法對於外界是開放的,所以能夠經過方法來訪問局部變量.

 

下面參考的是前端小個的博客js總結

 

事件觸發總結:

一、onmousedown
定義:onmousedown事件會在鼠標按鍵被按下時發生

二、onmouseup
定義:onmouseup事件會在鼠標按鍵被鬆開時發生

三、onmousemove
定義:onmousemove事件會在鼠標指針移動時發生
支持該事件的js對象:document
可是onmousemove默認狀況下沒有任何對象的一個事件;
由於鼠標移動頻繁發生。

四、onmouseover
定義:onmouseover事件會在鼠標指針移動到指定的對象上時發生

五、onmouseout
定義:onmouseout事件會在鼠標指針移出指定的對象時發生

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

七、onfocus光標移入事件
定義:onfocus事件在對象得到焦點時發生

八、onblur光標移出事件
定義:onblur事件會在對象失去焦點時發生

九、oncontextmenu右鍵事件
鼠標按下右鍵的時候發生

十、onsubmit
onsubmit事件會在表單中的確認按鈕(submit)被
點擊是發生。

十一、onkeydown
onkeydown事件會在用戶按下一個鍵盤按鍵時發生

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

1三、onload
onload事件會在頁面或圖像加載完成後當即發生

1四、onscroll
onscroll事件拖動滾動條時發生

1五、onresize
onresize事件會在窗口或框架被調整大小時發生

1六、onmousewheel
onmousewheel事件ie、chrome下鼠標滾輪滾動時發生

1七、DOMMouseScroll
DOMMouseScroll事件是標準下(ff)鼠標滾輪事件,
鼠標滾輪滾動時發生

1八、onreadystatechange
onreadystatechange事件:當請求被髮送到服務器時;
咱們須要執行一些基於響應的任務。每當readyState
改變時,就會觸發onreadystatechange事件。
readyState屬性存有XMLHttpRequest的狀態信息。
在onreadystatechange事件中,咱們規定當服務器響應
已作好被處理的準備時所執行的任務。


1九、attachEvent綁定事件
ie下的綁定事件,2個參數,第一個什麼事件,第二個執
行函數(倒序執行)。注意this指向
如:obj。attachEvent(‘onclick’,aaa)
function aaa(){}

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

2一、event對象指事件的狀態

簡單的:一個 存了 事件詳細信息的東西


網上較專業的:Event對象表明事件的狀態,好比事件在其中發生的元素
鍵盤按鍵的狀態,鼠標的位置,鼠標按鈕的狀態,一般
與函數結合使用。

2二、clientX、clientY
在Event對象下獲取鼠標位置

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

2四、keyCode
在Event對象下獲取用戶按下鍵盤的哪一個按鍵

2五、preventDefault()
阻止默認默認事件的綁定寫法

2六、return false
阻止默認時間的普通寫法

 

2、DOM 27-46
2七、getElementById
經過id獲取某一個元素

2八、getElementsByTagName
經過標籤名獲取一組元素的集合

2九、childNodes
獲取子節點,可是標準下會獲取空白節點
獲取第一級子元素的節點

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

3一、children
獲取子節點,可是沒有兼容性問題
獲取第一級子元素的節點

3二、firstElementChild || firstChild
標準下:firstElementChild ie不支持
ie下是 firstChild
獲取子元素裏的第一個

3三、lastElementChild || lastChild
標準下:lastElementChild ie不支持
ie下是 lastChild
獲取子元素裏的最後一個

3四、nextElementSibling || nextSibling
標準下:nextElementSibling ie不支持
ie下 nextSibling
獲取子指定元素的下一個兄弟節點

3五、previousElementSibling || previousSibling
標準下: previousElementSibling ie不支持
id:previousSibling
獲取指定元素的上一個兄弟節點

3六、parentNode
獲取父節點

3七、offsetParent
獲取有定位的父節點,都沒有定位的話父節點就是body

3八、offsetWidth-----有問題
獲取元素的實際寬度(width+padding+border)

3九、offsetHeight
獲取元素的高度(height+padding+border)

40、clientWidth
獲取元素的內部寬度(width+padding)

4一、clientHeight
獲取元素的內部高度(height+padding)

4二、createElement(標籤名)
建立一個節點

4三、appendchild(節點)
追加一個節點

4四、insertBefore(節點,原有節點)
在已有的元素前面插入

4五、removeChild(節點)
刪除一個節點

4六、replaceChild(節點,已有節點)
替換已有的節點

 

3、BOM操做: 47-53
4七、window。open()
打開窗口

4八、window。close()
關閉窗口,標準下不支持

4九、window。location
獲取瀏覽器地址

50、window。location。href
獲取總體的網址

5一、window。location。search
獲取問號?後面的內容,包括問號

5二、window。location。hash
獲取警號#後面的內容,包括警號

5三、window。location。reload()
自動刷新,定時器配合

5三、window。navigator。userAgent
獲取瀏覽器信息

 

4、js基礎: 54-126
5四、if else 若是。。。。不然。。。

5五、switch 若是

5六、?: 三木,就是若是。。。不然。。。

5七、for(){} for循環

5八、for in

5九、while=for

60、continue 終止本次循環 
if(i=2)continue 跳過這個條件

6一、break 終止當前循環 
if(i=3)break 結束本次

6二、undefined 未定義

6三、null=========?

6四、=== 只比較,不轉換類型

6五、== 不只比較,並且還會將兩個東西轉換成相同的類型

6六、= 賦值

6七、! 就是 不 的意思

6八、setTimeout 
設置定時器,2秒鐘後,執行一次,而且只執行一次,---定時炸彈

6九、clearTimerout
清楚定時器,清理setTimerout

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

7一、clearInterval
清楚定時器,清理setInterval

7二、arguments
實參的元素集合

7三、call
改變this取向
fn名.call(this,‘black’)第一個參數是函數之行的環境,
從第二個參數開始,纔是函數的真正參數

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

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

7五、callee ===============?調用這個函數自身的


7六、var arr=【】; 聲明一個數組

7七、var arr=new Array() 聲明一個數組

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

7九、pop
刪除數組最後一個元素,並返回這個元素

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

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

8二、splice
刪除元素,並向數組添加新的元素

8三、join()
把數組的全部元素放入一個字符串。元素經過指定
的分隔符進行分隔

8四、sort()
對數組的元素進行排序

8五、concent----concat()?
鏈接兩個數組或者多個數組,並返回結果

8六、split
分割字符串,得到數組

8七、substring
獲取字符串
包括開始不包括結束

8八、indexOf
從前日後檢索字符串

8九、charAt
獲取某個字符

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

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

9二、search 查找一個字符串,只找第一次出現的位置

9三、month ===============?
match-匹配符合正則的東西,挑東西返回數組


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

9五、replace 替換,把符合規則的東西替換成字符串

9六、量詞:{n,m}至少出現n次,最多出現m次
+許多 
* {0,} 0到任意次
?零次或者一次{0,1}
{n,}最少n次,最多不限
{,m}最少不限最多m次
{n}正好n次

9七、字符類:
1[abc]2 1和2中間出現a或b或c
[^0-9]排除數字之外全部均可以
[a-z]全部的英文
[0-9]全部的數字

9八、標識: i 忽略大小寫 g 全局匹配

9九、首尾: ^ $

100、轉義:
\d 查找數字 [0-9]
\D 除了數字[^0-9]
\s 空白
\b 單詞邊界
\w 數字字母下劃線--用戶名
. 任意字符
\. 表明.自己

10一、var oDate= new Date() 獲取當前時間

10二、getHours() 獲取小時

10三、getMinutes() 獲取分鐘

10四、getSeconds() 獲取秒

10五、getFullYear() 獲取年

10六、getDay() 獲取星期

10七、getDate() 獲取當前的時間日期

10八、setDate() 設置一個月的某一天

10九、var oImg=new Image() 建立一個image對象

1十、什麼叫ajax
經過XMLHttpRequest與服務器通訊,進行無刷新操做

ajax採用的是異步請求

1十一、同步與異步的區別

同步就是同一時間作一件事
異步就是同一時間作多件事

1十二、ajax的交互方式
1)發送數據並返回 ()(註冊)
2)只發送不返回 ()========?例子
3)不發送只返回 (股票)

11三、post與get的區別
1)發送方式不同:get加載網址問好後面的
post把數據放在一個傳輸體中發送上去的

2)安全不同
post相對安全,get不安全

3)網址長度不同
ie下get網址超過2048字節將被截斷
post沒有上限

4)緩存問題
get能夠緩存網址,post不會緩存網址

5)用途不同
get:查詢數據,post修改數據

11四、發送數據是什麼樣的?
串聯化數據:key1=value1&key2=value2

11五、返回數據是什麼樣的?
返回的是字符串

11六、跨域:jsonp?
(利用script標籤跨域)
在頭部建立個script標籤,
改變script標籤中src

11七、ajax的編寫步驟?
1)建立ajax對象(要有手機)
2)連接服務器open(撥號)
3)監聽數據返回onreadystatechange(聽)
4)發送數據send(說)
5)close(忽略)(掛了)

11八、json怎麼取?=========?
經過串聯化數據

11九、什麼是對象?
對象是一個總體,對外提供一些操做。||
黑盒子,看不到內部的樣子,
能看到表面的按鈕

120、什麼是面向對象?
使用對象時,只關注對象提供的功能,
不關注其內部細節,好比jQuery ||
使用一個東西的時候,不去管內部是
怎麼作的,只用好它的功能

下面是整理出來的一些函數,方便你們的學習和使用

 

[javascript]  view plain copy
 
  1. /** 
  2. function obj$(id)                       根據id獲得對象 
  3. function val$(id)                       根據id獲得對象的值 
  4. function trim(str)                      刪除左邊和右邊空格 
  5. function ltrim(str)                     刪除左邊空格 
  6. function rtrim (str)                    刪除右邊空格 
  7. function isEmpty(str)                   字串是否有值 
  8. function equals(str1, str2)             比較兩字符串是否相等 
  9. function equalsIgnoreCase(str1, str2)   忽略大小寫比較兩個字符串是否相等 
  10. function isChinese(str)                 判斷是否中文 
  11. function isEmail(strEmail)              是否電子郵件 
  12. function isImg(str)                     是不是一個圖片格式的文件jpg|jpeg|swf|gif 
  13. function isInteger(str)                 是不是一個整數 
  14. function isFloat                        是不是一個浮點數 
  15. function isPost(str)                     是否郵編(1位至6位 
  16. function isMobile(str)                  是不是手機號 
  17. function isPhone(str)                   是不是電話號碼必須包含區號,能夠含有分機號 
  18. function isQQ(str)                      是否合法的QQ號碼           
  19. function isIP(str)                      是不是合法的IP 
  20. function isDate(str)                     是否日期類型(例:2005-12-12) 
  21. function isIdCardNo(idNumber)           是不是合法的身份證號 
  22. **/   
  23. /** 
  24.  * 替換 
  25.  * @param {Object} str 
  26.  * @param {Object} oldStr 
  27.  * @param {Object} newStr 
  28.  * @return {TypeName}  
  29.  */   
  30. function repalce(str, oldStr, newStr) {   
  31.     var reg = eval_r("/" + oldStr + "/g");   
  32.     return str.replace(reg, newStr);   
  33. }   
  34.    
  35. /** 
  36.  * 左邊截取 
  37.  * @param {Object} str 
  38.  * @param {Object} n 
  39.  * @return {TypeName}  
  40.  */   
  41. function left(str, n) {   
  42.     if (str.length > 0) {   
  43.         if (n > str.length)   
  44.             n = str.length;   
  45.         return str.substr(0, n);   
  46.     } else {   
  47.         return;   
  48.     }   
  49. }   
  50.    
  51. /** 
  52.  * 右邊截取 
  53.  * @param {Object} str 
  54.  * @param {Object} n 
  55.  * @return {TypeName}  
  56.  */   
  57. function right(str, n) {   
  58.     if (str.length > 0) {   
  59.         if (n >= str.length)   
  60.             return str;   
  61.         return str.substr(str.length - n, n);   
  62.     } else {   
  63.         return;   
  64.     }   
  65. }   
  66.    
  67.    
  68.    
  69. function strip(str) {   
  70.     if (typeof str == 'string')   
  71.         return str.replace(/^\s+/, '').replace(/(^\s*)|(\s*$)/g, '');   
  72. }   
  73.    
  74. function stripTags(str) {   
  75.     if (typeof str == 'string')   
  76.         return str.replace(/<\/?[^>]+>/gi, '').replace(/(^\s*)|(\s*$)/g, '');   
  77. }   
  78. /** 
  79.  * 判斷某個字符的長度在s和l之間 
  80.  * @param {Object} str 
  81.  * @param {Object} s 
  82.  * @param {Object} l 
  83.  * @return {TypeName}  
  84.  */   
  85. function isLen(str, s, l) {   
  86.     str = Trim(str)   
  87.     if (str.length > s && str.length < l) {   
  88.         return true;   
  89.     } else {   
  90.         return false;   
  91.     }   
  92. }   
  93.    
  94. /** 
  95.  * 是否爲數字 
  96.  * @param {Object} str 
  97.  * @return {TypeName}  
  98.  */   
  99. function isNumber(str){   
  100.     if (/^\d+$/.test(str)){   
  101.         return true;   
  102.     }else{   
  103.         return false;   
  104.     }   
  105. }   
  106.    
  107.    
  108.    
  109. function isLetters(str){   
  110.     if (/^[A-Za-z0-9]+$/.test(str)){   
  111.         return true;   
  112.     }else{   
  113.         return false;   
  114.     }   
  115. }   
  116.    
  117. function isLetter(str){   
  118.     if (/^[A-Za-z]+$/.test(str)){   
  119.         return true;   
  120.     }else{   
  121.         return false;   
  122.     }   
  123. }   
  124.    
  125. function isUpper(str){   
  126.     if (/^[A-Z]+$/.test(str)){   
  127.         return true;   
  128.     }else{   
  129.         return false;   
  130.     }   
  131. }   
  132.    
  133. function isLower(str){   
  134.     if (/^[a-z]+$/.test(str)){   
  135.         return true;   
  136.     }else{   
  137.         return false;   
  138.     }   
  139. }   
  140.    
  141.    
  142. /** 
  143. *根據對象的id獲得對象 
  144. *id:對象的id 
  145. */   
  146. function obj(id)   
  147. {   
  148.     return document.getElementById(id);   
  149. }   
  150.    
  151. /** 
  152. *根據對象的id獲得對象的值 
  153. *id:對象的id 
  154. */   
  155. function val(id)   
  156. {   
  157.     var obj = document.getElementById(id);   
  158.     if(obj !== null)   
  159.     {   
  160.         return obj.value;   
  161.     }   
  162.     return null;   
  163. }   
  164.    
  165. /** 
  166. *去掉字符串的先後空格 
  167. *str:將要除去空格的字符串 
  168. */   
  169. function trim(str)   
  170. {   
  171.     return str.replace(/(^\s*)|(\s*$)/g, '');   
  172. }   
  173.    
  174. /** 
  175. *去掉字符串前的空格 
  176. *str:將要除去空格的字符串 
  177. */   
  178. function ltrim(str)   
  179. {   
  180.     return str.replace(/^\s*/g,'');   
  181. }   
  182.    
  183. /** 
  184. *去掉字符串後的空格 
  185. *str:將要除去空格的字符串 
  186. */   
  187. function rtrim(str)   
  188. {   
  189.     return str.replace(/\s*$/,'');   
  190. }   
  191.    
  192. /** 
  193. *字符串是否有值 
  194. *str:要檢測的字符串 
  195. */   
  196. function isEmpty(str)   
  197. {   
  198.     if(str != null && str.length > 0)   
  199.     {   
  200.         return true;   
  201.     }   
  202.     return false;   
  203. }   
  204.    
  205. /** 
  206. *比較兩個字符串是否相等 
  207. *str1:要比較的字符串1 
  208. *str2:要比較的字符串2 
  209. */   
  210. function equals(str1, str2)   
  211. {   
  212.     if(str1 == str2)   
  213.     {   
  214.         return true;   
  215.     }   
  216.     return false;   
  217. }   
  218.    
  219. /** 
  220. *忽略大小寫比較兩個字符串是否相等 
  221. *str1:要比較的字符串1 
  222. *str2:要比較的字符串2 
  223. */   
  224. function equalsIgnoreCase(str1, str2)   
  225. {   
  226.     if(str1.toUpperCase() == str2.toUpperCase())   
  227.     {   
  228.         return true;   
  229.     }   
  230.     return false;   
  231. }   
  232.    
  233. /** 
  234. *是不是中文 
  235. *str:要檢測的字符串 
  236. */   
  237. function isChinese(str)   
  238. {   
  239.    var str = str.replace(/(^\s*)|(\s*$)/g,'');   
  240.    if (!(/^[\u4E00-\uFA29]*$/.test(str)   
  241.            && (!/^[\uE7C7-\uE7F3]*$/.test(str))))   
  242.    {   
  243.       return false;   
  244.    }   
  245.    return true;   
  246. }   
  247.    
  248. /** 
  249. *是不是Email 
  250. *str:要檢測的字符串 
  251. */   
  252. function isEmail(str)   
  253. {   
  254.     if(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str))   
  255.     {   
  256.         return true   
  257.     }   
  258.     return false;   
  259. }   
  260.    
  261. /** 
  262. *是不是圖片格式文件 
  263. *str:要測試的文件名 
  264. */   
  265. function isImg(str)   
  266. {   
  267.     var objReg = new RegExp("[.]+(jpg|jpeg|swf|gif){1}quot;, "gi");   
  268.     if(objReg.test(str))   
  269.     {   
  270.         return true;   
  271.     }   
  272.     return false;   
  273. }   
  274.    
  275. /** 
  276. *是不是一個整數 
  277. *str:要檢測的字符串 
  278. */   
  279. function isInteger(str)   
  280. {   
  281.     if(/^-?\d+$/.test(str))   
  282.     {   
  283.         return true;   
  284.     }   
  285.     return false;   
  286. }   
  287.    
  288. /** 
  289. *是不是一個浮點數 
  290. *str:要檢測的字符串 
  291. */   
  292. function isFloat(str)   
  293. {   
  294.     if(/^(-?\d+)(\.\d+)?$/.test(str))   
  295.     {   
  296.         return true;   
  297.     }   
  298.     return false;   
  299. }   
  300.    
  301. /** 
  302. *是不是郵編 
  303. *str:要檢測的字符串 
  304. */   
  305. function isPost(str)   
  306. {   
  307.     if(/^\d{1,6}$/.test(str))   
  308.     {   
  309.         return true;   
  310.     }   
  311.     return false;   
  312. }   
  313.    
  314. /** 
  315. *是不是手機號碼 
  316. *str:要檢測的字符串 
  317. */   
  318. function isMobile(str)   
  319. {   
  320.     if(/^1[35]\d{9}/.test(str))   
  321.       {   
  322.           return true;   
  323.       }   
  324.     return false;   
  325. }   
  326.    
  327. /** 
  328. *是不是電話號碼 
  329. *str:要檢測的字符串 
  330. *電話號碼必須有區號,能夠有分機號 
  331. */   
  332. function isPhone(str)   
  333. {   
  334.     if(/^(0[1-9]\d{1,2}-)\d{7,8}(-\d{1,8})?/.test(str))   
  335.     {   
  336.         return true;   
  337.     }   
  338.     return false;   
  339. }   
  340.    
  341. /** 
  342. *是不是合法的QQ號碼 
  343. *str:要檢測的字符串 
  344. */   
  345. function isQQ(str){   
  346.     if(/^\d{5,9}$/.test(str))   
  347.     {   
  348.         return true;   
  349.     }   
  350.     return false;   
  351. }   
  352.    
  353. /** 
  354. *是不是合法的IP 
  355. *str:要檢測的字符串 
  356. */   
  357. function isIP(str){   
  358.     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])$/;   
  359.     if(reg.test(str))   
  360.     {   
  361.         return true;   
  362.     }   
  363.     return false;   
  364. }   
  365.    
  366. /** 
  367. *是不是一合法日期 
  368. *str:要檢測的字符串 
  369. */   
  370. function isDate(str)   
  371. {   
  372.     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-))$/;   
  373.     if(reg.test(str))   
  374.     {   
  375.         return true;   
  376.     }   
  377.     return false;      
  378. }   

 

 

如今已經你已經學習了 JavaScript,接下來該學習什麼呢?

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

jQuery

jQuery 是一個 JavaScript 庫。

jQuery 極大地簡化了 JavaScript 編程。

jQuery 很容易學習。

 

jQuery Mobile

jQuery Mobile 是一個爲觸控優化的框架,用於建立移動 web 應用程序。

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

jQuery Mobile 構建於 jQuery 庫之上,這使其更易學習,若是您通曉 jQuery 的話。

它使用 HTML五、CSS三、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 更小、更快,更易解析。

相關文章
相關標籤/搜索