JavaScript

JavaScript腳本
使用:
    <script language="javascript">
        。。。。。js代碼
    </script>

引入外部js文件:
    <script language="javascript" src="1.js"></script>

直接嵌入到HTML標籤中:
    <input type="button" value="SayHello" onclick="javascript:alert('Hello1');alert('Hello2');"/>

註釋:
    單行 // 註釋內容
    多行 /*註釋內容*/

標識符:
    第一個字符必須是字母、下劃線(_)或美元符號($),其他字符可以使用字母、數字、下劃線或美元符號
    標識符不能和JavaScript的關鍵字同名
    JavaScript中標識符是區分大小寫的

變量:
    var age = 10;
    var name = "jack"; //字符串雙引號可以
    var ename = ‘KING’; //字符串單引號也可以
    var empno=7369,sal=800,deptno=10; //一行上可以同時定義多個變量
    var job; //先聲明
    job = "CEO"; //再賦值
    var deptname; //如果只聲明沒有賦值則是undefined

    <script language="javascript">
        var ename1 = "SMITH";//全局變量
        function testVar1(){//這是一個函數
            var ename2 = "KING";//局部變量
            dname = "ACCOUNT"; //不帶有var關鍵字的變量一定是全局變量
        }
    </script>

函數初步:
    第一種方式:
    function 函數名(形式參數列表){ //形參是局部變量
        函數體由js語句構成;
    }
    調用函數:
      函數名(實參);

    第二種方式:
    函數名 = function(形式參數列表){
        函數體由js語句構成;
    }
    注:參數個數不匹配也可以調用,參數多或少都可以

<form name="form1">
<input type="text" name="username"/> 
<!--
要獲取form表單中的一個標籤的value? form的名字.標籤的名字.value
-->
<input type="button"value="sayHello"onclick="sayHello(form1.username.value);"/>
</form>

function sayHello(username){
    //alert(username + ",你好!");
    //document是JS中的DOM的頂層對象
    //document內置對象中有一個write方法,可以向瀏覽器輸出HTML代碼。
    //document.write(username + ",你好!");
    document.write("<center><font color='blue' size='7'>" + username + ",你好!</font></center>");
}

//JS中的函數也可以有返回值,也可以沒有。
//JS函數最後可以編寫return語句,也可以不寫。
function validateName(username){
    //字符串length屬性用來獲取字符串的長度。
    if(username.length<6){
        return false;
    }
        return true;
}

<!--
失去焦點事件:blur
失去焦點事件句柄:onblur
以下程序中的this表示當前對象,當前對象是input框。
this.value是input框的值。
-->
<input type="text" name="username" onblur="alert(validateName(this.value)?'合法':'不合法');"/>

<script language="javascript">
    /*
    js中函數聲明的時候,不僅是一個函數的聲明,還是一種類型的定義。
    JS中類的定義和構造方法於一體。
    */
    //這裏的Dept不但是一個函數名,還是一個類名。
    Dept = function(deptno,dname,loc){
        alert("能執行嗎?");
        //this表示當前對象。
        //屬性
        this.deptno = deptno;
        this.dname = dname;
        this.loc = loc;
        //動作
        this.print = function(){
            document.write("部門編號:" + this.deptno + ",部門名:" + this.dname + ",部門地理位置:" + this.loc);
        }
        alert("end-->能執行嗎?");
    }
    //創建對象
    var d1 =  new Dept(10,"SALES","NEW YORK");
    d1.print();// 調用對象的方法

    alert(d1.deptno);//調用對象的屬性
    alert(d1.dname);
    alert(d1.loc);

    //這裏不會創建對象,這只是普通方法調用。
    Dept(20,"MYSALES","BEIJING");
</script>

數據類型:
    JavaScript中有5種數據類型:4種原始類型(基本數據類型)Undefined、Boolean、Number、String。
    1種引用數據類型—Object,自定義的函數也是一種引用數據類型,這個類默認繼承Object類型。所以Function也屬於引用數據類型。

    typeof運算符的運算結果一定是"String"類型
    對一個值使用typeof操作符可能返回下列某個字符串:
        "undefined"——如果這個值未定義;
        "boolean"——如果這個值是布爾值;
        "string"——如果這個值是字符串;
        "number"——如果這個值是數值;
        "object"——如果這個值是對象或null;
        "function"——如果這個值是函數;

    語法有三種寫法:
    1.typeof 變量名
    2.typeof(變量名)
    3.typeof 函數名

    //Object類是一種引用數據類型
    //Object是JS中內置的。
    //Object既是一個函數的名字,也是一個類名。
    var o = new Object();
    alert(typeof(o)); //"object"

    //User類中有一個屬性username
    User = function(a){
    this.username = a;
    }
    o = new User("SMITH");
    alert(typeof(o)); //"object"
    alert(typeof(User)); //"function"

    JavaScript中所有類型的值都有與這兩個Boolean值等價的值。
    要將一個值轉換爲其對應的Boolean值,可以調用類型轉換函數Boolean()
    例如:
    var message = 'Hello World';
    var messageAsBoolean = Boolean(message);

    數據類型         轉換爲true的值                          轉換爲false的值
    Boolean                  true                                            false
    String              任何非空字符串                           ""(空字符串)
    Number           任何非零數字值(包括無窮大)         0和NaN
    Object             任何對象                                            null
    Undefined          n/a(不適用)                                 undefined

    v1 = Infinity; //無窮大

    //關於if語句 和java語法結果相同。區別在於if(這裏的數據如果不是Boolean
    //類型,系統會自動調用Boolean函數進行類型的轉換)
    var a = "ABCDEF";
    if(a){
        alert(a);
    }else{
        alert("空字符串");
    }

    NaN與任何值都不相等,包括NaN本身
    alert(NaN == NaN);//false
    
    重點:isNaN函數
    語法:isNaN(變量)  判斷該變量是否是一個數字。
    "is not a number"
    isNaN的運算結果是true、false
    true:不是一個數字
    false:是一個數字
    alert(isNaN(NaN));   //true
    alert(isNaN(10));    //false(10是一個數值)
    alert(isNaN("10"));  //false(可能被轉換爲數值10)
    alert(isNaN("blue"));//true(不能被轉換爲數值)
    alert(isNaN(true));  //false(可能被轉換爲數值1)

    Number類型包括以下值:
    整數(0,1,2,3.....)
    浮點數(1.0,2.0,3.0.....)
    NaN (這就是一個值,屬於Number類型,表示"不是一個數字",Not a Number)
    Infinity (這就是一個值,屬於Number類型,表示無窮大)
    //除數是0的時候運算結果是無窮大Infinity

    有3個函數可以把非數值轉換爲數值:Number()、parseInt()和parseFloat()。
    第一個函數,即轉型函數Number()可以用於任何數據類型,
    而另外兩個函數則專門用於把字符串轉換成數值。
    這3個函數對於同樣的輸入會返回不同的結果。

    Number()函數的轉換規則如下:
        如果是Boolean值,true和false將分別被替換爲1和0
        如果是數字值,只是簡單的傳入和返回
        如果是null值,返回0
        如果是undefined,返回NaN
        如果是字符串,遵循下列規則:
       如果字符串中只包含數字,則將其轉換爲十進制數值,即"1"會變成1,"123"會變成123,而"011"會變成11(前導的0被忽略)
        如果字符串中包含有效的浮點格式,如"1.1",則將其轉換爲對應的浮點數(同樣,也會忽略前導0)
        如果字符串中包含有效的十六進制格式,例如"0xf",則將其轉換爲相同大小的十進制整數值
        如果字符串是空的,則將其轉換爲0
        如果字符串中包含除了上述格式之外的字符,則將其轉換爲NaN
       如果是對象,則調用對象的valueOf()方法,然後依照前面的規則轉換返回的值。如果轉換的結果是NaN,則調用對象的toString()方法,然後再依次按照前面的規則轉換返回的字符串值。
        var num1 = Number("Hello World");   //NaN
        var num2 = Number("");              //0
        var num3 = Number("000011");        //11
        var num4 = Number(true);            //1

    由於Number()函數在轉換字符串時比較複雜而且不夠合理,因此在處理整數的時候更常用的是parseInt()函數。
    parseInt()函數在轉換字符串時,更多的是看其是否符合數值模式。它會忽略字符串前面的空格,直至找到第
    一個非空格字符。如果第一個字符串不是數字字符或者負號,parseInt()會返回NaN;也就是說,用parseInt()
    轉換空字符串會返回NaN。如果第一個字符是數字字符,praseInt()會繼續解析第二個字符,直到解析完所有
    後續字符或者遇到了一個非數字字符。
    例如,"1234blue"會被轉換爲1234,"22.5"會被轉換爲22,因爲小數點並不是有效的數字字符。

    如果字符串中的第一個字符是數字字符,parseInt()也能夠識別出各種整數格式(即十進制、八進制、十六進制)。
    爲了更好的理解parseInt()函數的轉換規則,下面給出一些例子

    var num1 = parseInt("1234blue");    //1234
    var num2 = parseInt("");                   //NaN
    var num3 = parseInt("0xA");            //10(十六進制)
    var num4 = parseInt("22.5");           //22
    var num5 = parseInt("070");            //56(八進制)
    var num6 = parseInt("70");              //70

    var num7 = parseInt("10",2);           //2(按二進制解析)
    var num8 = parseInt("10",8);           //8(按八進制解析)
    var num9 = parseInt("10",10);         //10(按十進制解析)
    var num10 = parseInt("10",16);       //16(按十六進制解析)
    var num12 = parseInt("AF",16);      //175

    與parseInt()函數類似,parseFloat()也是從第一個字符(位置0)開始解析每個字符。而且也是一直解析到
    字符串末尾,或者解析到遇見一個無效的浮點數字字符爲止。也就是說,字符串中的第一個小數點是有效的,
    而第二個小數點就是無效的了,因此它後面的字符串將被忽略。例如,"22.34.5"將會被轉換成22.34。
    parseFloat()和parseInt()的第二個區別在於它始終都會忽略前導的零。由於parseFloat()只能解析十進制值,
    因此它沒有用第二個參數指定基數的用法。

    var num1 = parseFloat("1234blue");   //1234
    var num2 = parseFloat("0xA");           //0
    var num3 = parseFloat("22.5");          //22.5
    var num4 = parseFloat("22.34.5");     //22.34
    var num5 = parseFloat("0908.5");      //908.5

    String類型用於表示由零或多個16位Unicode字符組成的字符序列,即字符串。字符串可以由單引號(')或雙引號(")表示
    任何字符串的長度都可以通過訪問其length屬性取得
    字符串有 prototype屬性,用來給字符串類型動態擴展屬性和方法
    //給字符串類多態擴展屬性和方法,該屬性和方法可以作用到所有字符串對象上。
    String.prototype.trim = function(){
        return this.replace(/^\s+/,"").replace(/\s+$/,"");
    }
    把一個值轉換爲一個字符串有兩種方式。第一種是使用幾乎每個值都有的toString()方法。
    數值、布爾值、對象和字符串值都有toString()方法。但null和undefined值沒有這個方法

    多數情況下,調用toString()方法不必傳遞參數。但是,在調用數值的toString()方法時,可以傳遞一個參數:輸出數值的基數
    var num = 10;
    alert(num.toString());      //"10"
    alert(num.toString(2));     //"1010"
    alert(num.toString(8));     //"12"
    alert(num.toString(10));    //"10"
    alert(num.toString(16));    //"a"

    在不知道要轉換的值是不是null或undefined的情況下,還可以使用轉型函數String(),這個函數能夠將任何
    類型的值轉換爲字符串。String()函數遵循下列轉換規則:
        如果值有toString()方法,則調用該方法(沒有參數)並返回相應的結果
        如果值是null,則返回"null"    
        如果值是undefined,則返回"undefined"

    Object的每個實例都具有下列屬性和方法:
        constructor——保存着用於創建當前對象的函數
        prototype--------給類型動態擴展屬性(類級別),將作用到所有對象上。(類名.)方式訪問
        hasOwnProperty(propertyName)——用於檢查給定的屬性在當前對象實例中(而不是在實例的原型中)是否存在。其中,作爲參數的屬性名(propertyName)必須以字符串形式指定(例如:o.hasOwnProperty("name"))
        isPrototypeOf(object)——用於檢查傳入的對象是否是另一個對象的原型
        propertyIsEnumerable(propertyName)——用於檢查給定的屬性是否能夠使用for-in語句來枚舉
        toString()——返回對象的字符串表示
        valueOf()——返回對象的字符串、數值或布爾值表示。通常與toString()方法的返回值相同。

     Object類是JS中內置的
     //創建Object對象
     var o1 = new Object();

     //JS中的對象都有toString方法
     alert(o1);
     alert(o1.toString());

     //關於constructor屬性,用來獲取創建該對象的構造函數
     alert(o1.constructor);

     //關於prototype屬性,用來給類型動態擴展屬性以及方法
     Emp = function(ename,sal){
         this.ename = ename;
         this.sal = sal;

         /**/
         this.toString = function(){
             return this.ename + "--->" + this.sal;
         }
     }

     var e1 = new Emp("KING",5000);

     //Error
     //e1.printInfo();

     //動態擴展
     Emp.prototype.printInfo = function(){
         document.write(this.ename + "," + this.sal);
     }

     //調用方法
     e1.printInfo();
     alert(e1);
     alert(e1.toString());
     alert(e1.constructor);

運算符:
 
算術運算符     
    +       (加法) 將兩個數相加。 
    ++     (自增) 將表示數值的變量加一(可以返回新值或舊值)。 
    -        (求相反數,減法) 作爲求相反數操作符時返回參數的相反數。作爲二進制操作符時,將兩個數相減。 
    --       (自減) 將表示數值的變量減一(可以返回新值或舊值)。 
    *        (乘法) 將兩個數相乘。 
    /        (除法) 將兩個數相除。 
    %      (求餘) 求兩個數相除的餘數。 

字符串運算符     
    +       (字符串加法) 連接兩個字符串。 
    +=     連接兩個字符串,並將結果賦給第一個字符串。 

邏輯運算符     
    &&     (邏輯與) 如果兩個操作數都是真的話則返回真。否則返回假。 
     ||       (邏輯或) 如果兩個操作數都是假的話則返回假。否則返回真。 
     !        (邏輯非) 如果其單一操作數爲真,則返回假。否則返回真。 

位運算符     
    &       (按位與) 如果兩個操作數對應位都是 1 的話則在該位返回 1。 
    ^        (按位異或) 如果兩個操作數對應位只有一個 1 的話則在該位返回 1。 
    |         (按位或) 如果兩個操作數對應位都是 0 的話則在該位返回 0。 
    ~        (求反) 反轉操作數的每一位。 
    <<      (左移) 將第一操作數的二進制形式的每一位向左移位,所移位的數目由第二操作數指定。右面的空位補零。 
    >>      (算術右移) 將第一操作數的二進制形式的每一位向右移位,所移位的數目由第二操作數指定。忽略被移出的位。 
    >>>    (邏輯右移) 將第一操作數的二進制形式的每一位向右移位,所移位的數目由第二操作數指定。忽略被移出的位,左面的空位補零。 

賦值運算符     
    =          將第二操作數的值賦給第一操作數。 
    +=        將兩個數相加,並將和賦給第一個數。 
    -=         將兩個數相減,並將差賦給第一個數。 
    *=         將兩個數相乘,並將積賦給第一個數。 
    /=         將兩個數相除,並將商賦給第一個數。 
    %=       計算兩個數相除的餘數,並將餘數賦給第一個數。 
    &=        執行按位與,並將結果賦給第一個操作數。 
    ^=         執行按位異或,並將結果賦給第一個操作數。 
    |=          執行按位或,並將結果賦給第一個操作數。 
    <<=       執行左移,並將結果賦給第一個操作數。 
    >>=       執行算術右移,並將結果賦給第一個操作數。 
    >>>=     執行邏輯右移,並將結果賦給第一個操作數。 

比較運算符     
    ==     如果操作數相等的話則返回真。 
    !=      如果操作數不相等的話則返回真。 
    >       如果左操作數大於右操作數的話則返回真。 
    >=     如果左操作數大於等於右操作數的話則返回真。 
    <       如果左操作數小於右操作數的話則返回真。 
    <=     如果左操作數小於等於右操作數的話則返回真。 

特殊運算符     
    ?:     執行一個簡單的"if...else"語句。 
    ,       計算兩個表達式,返回第二個表達式的值。 
    delete     允許你刪除一個對象的屬性或數組中指定的元素。 
    new        允許你創建一個用戶自定義對象類型或內建對象類型的實例。 
    this         可用於引用當前對象的關鍵字。 
    typeof     返回一個字符串,表明未計算的操作數的類型。 
    void        該操作符指定了要計算一個表達式但不返回值。 

    對字符串是不能進行乘法運算的,"a" * "b" 是不合法的,但是,在可能的情況下,
    javascript會把表達式轉換成正確的類型,因此,表達式 "3" * "5" 是合法的,javascript將字符串轉
    換成數字執行運算,結果返回的是數字15,而不是字符串"15
    關於+運算符,只要+兩邊的算子都是數字則做加法運算,只要+兩邊的算子其中有一個是字符串類型則做字符串連接運算
    注意運算符的結合性,有些運算符從左到右的結合性;有些從右到左結合性。
    例如:w = a + b + c 等同於 w = (a + b) + c;
    Var c = 10;  w = a = b = c 等同於 w= ( a = ( b = c ));
    在javascript中,只有一種數字類型,那就是浮點類型,所有的數字都是浮點類型。
    由於所有的數都是浮點數,除法的結果都是浮點數,5 / 2 = 2.5 ;除數爲0的結果爲正負無窮;0/0爲NaN

    等同運算符(= =)和全同運算符(= = =)的區別
        (一)、"=="等同運算符:比較2個運算數,返回一個布爾值。比較數值、字符串、布爾值使用的都是量值。當且僅當兩個變                  量存放的值相等的時候,他們才相等。比較對象、數組、函數的時候,使用的是引用,只有2個變量引用的是同一個對                  象時,他們纔是相等的。兩個不同的數組是完全不同的,即使他們具有完全相同的元素。對於存放對象、數組、函數的                引用的變量來說,只有當他們引用的是同一個對象、數組、函數的時候,他們才相等。注意應遵循的原則:
                  當兩個運算數的類型不同時:將他們轉換成相同的類型,
                       1)一個數字與一個字符串,字符串轉換成數字之後,進行比較。
                       2)true轉換爲1、false轉換爲0,進行比較。
                       3)一個對象、數組、函數 與 一個數字或字符串,對象、數組、函數轉換爲原始類型的值,然後進行比較。(先使用valueOf,如果不行就使用toString)
                       4)其他類型的組合不相等。
                  當兩個運算數類型相同,或轉換成相同類型後:
                       1)2個字符串:同一位置上的字符相等,2個字符串就相同。
                       2)2個數字:2個數字相同,就相同。如果一個是NaN,或兩個都是NaN,則不相同。
                       3)2個都是true,或者2個都是false,則相同。
                      4)2個引用的是同一個對象、函數、數組,則他們相等,如果引用的不是同一個對象、函數、數組,則不相同,即使這2個對象、函數、數組可以轉換成完全相等的原始值。
                       5)2個null,或者2個都是未定義的(undefined),那麼他們相等。
                       "!="非等同運算符:與等同運算符檢測的結果相反。
        (二)"= = ="全同運算符:遵循等同運算符的比較規則,但是它不對運算數進行類型轉換,當兩個運算數的類型不同時,返回                false;只有當兩個運算數的類型相同的時候,才遵循等同運算符的比較規則進行比較。"!= = ="非全同運算符與全同運算                  符比較的結果相反。如果兩個運算數的類型或者值不同的時候,返回true。
    
    結論:
    ==   a如果可以看做b,不比較數據類型,可以使用該運算符
    === 既比較兩個變量中的值,有比較兩個變量的數據類型。

    delete 刪除一個對象的屬性或者數組中特定位置的元素
    delete 對象名稱.屬性名   //刪除對象某個屬性
    delete 數組名[下標]  //刪除數組中某個元素
    delete 屬性 //該語法只適合在with語句中使用

    javascript:void(表達式);
    javascript:void 表達式   //括號可以省略
    <a href="javascript:void(0);" >我雖然是一個超級鏈接,但是點擊我沒有任何效果</a>
    <a href="javascript:void(document.form.submit())">點擊我可以提交網頁中的表單</a>
    href="#"這種形式會整體刷新頁面,而 href="javascript:void(0)" 則不會

    未定義的值和定義未賦值的爲undefined,null是一種特殊的object,NaN是一種特殊的number

    null和undefined 可以被認爲值相等,類型不同


無類型對象(JSON):
    var obj={}; //等同於var obj=new Object();
    var user={
        name:"jack", //定義了name屬性,初始化爲jack
        favoriteColor:["red","green","black","white"],//定義了顏色喜好數組
        hello:function(){ //定義了方法hello
            alert("hello,"+this.name);
        },
        sex:"male" //定義了性別屬性sex,初始化爲sex
    }
    //調用user 對象的方法hello
    user.hello();

    使用這種方式來定義對象,還可以使用字符串作爲屬性(方法)名:
    var u = {"username":"jack",password:"123"};
    alert(u["username"]); 
    alert(u["password"]);
    alert(u.password);


控制語句:
    if(){} 語句
    switch()case 語句
    do{...}while() 語句
    while(){} 語句
    for(){} 語句
    for(...in...){} 語句
    break 和continue 語句
    with() 語句

    使用for…in語句迭代數組
    <script language="javascript">
        var colors = ["紅色","綠色","藍色"];
        // index是數組的索引
        for(var index in colors){
            alert(colors[index]);
        }
    </script>
    for...in 語句是一種精準的迭代語句,可以用來枚舉對象的屬性
    function Product(pno,pname,price){
        this.pno = pno;
        this.pname = pname;
        this.price = price;
    }

    var p = new Product(100,"西瓜",2.5);
    for(var propertyName in p){
        //alert(typeof(propertyName)); //string
        alert(p[propertyName]);
    }

    with(obj)作用就是將後面的{}中的語句塊中的缺省對象設置爲obj,那麼在其後面的{}語句塊中引用obj的方
    法或屬性時可以省略"obj."的輸入而直接使用方法或屬性的名稱
    function Employee(empno,ename){
        this.empno = empno;
        this.ename = ename;
        this.work = function(){
            alert(this.ename + " is working!");
        }
    }
    var e = new Employee(7369,"SMITH");

    //不使用with
    alert(e.empno);
    alert(e.ename);
    e.work();
    
    //使用with,可以直接調用對象的屬性和方法,而不需要使用obj.屬性格式了
    with(e){
        alert(empno);
        alert(ename);
        work();
    }

系統函數eval:
    eval()函數可以把一個字符串當作一個JavaScript表達式一樣去執行它。

    eval("var temp = 1;");
    alert(temp);
    案例:
    <html>
        <head>
            <title>執行JS</title>
            <script language="javascript">
            function executeJs(){
                eval(document.getElementById("jsCode").value);
            }
            </script>
        </head>
        <body>
            <textarea cols="60" rows="10" id="jsCode" name="jsCode"></textarea>
            <input type="button" value="執行JS腳本" onclick="executeJs()"/>
        </body>
    </html>


常用內置對象:
    String
        創建字符串對象:
            var s1 = new String("abcdef");
            var s2 = "abcdef";
        屬性:
            length 屬性 字符串對象通過調用該屬性獲取字符串長度
            prototype 屬性 字符串對象通過調用該屬性動態添加屬性或方法
        常用函數:
            charAt 返回指定索引處的char值. 
            concat 連接兩個字符串生成一個新字符串. 
            indexOf 返回指定字符串在此字符串中第一處出現的索引 
            lastIndexOf 返回指定字符串在此字符串最後一次出現處的索引.  
            link 給此字符串添加熱鏈接.
                document.write("百度".link("http://www.baidu.com"));
            replace 將此字符串中符合正則表達式的子字符串替換成其他字符串. 
                document.write("javaoraclec++javaphp".replace(/java/gi,"我"));
                g :表示全局替換 ;i表示忽略大小寫
            search 返回此字符串中符合正則表達式的字符串的下標,如果沒有符合的返回-1.  
                document.write("javaoraclec++javaphp".search(/java/gi));
            split 分割字符串. 
                var arrayDate = "2012-10-1".split("-");
                var str = "How are you doing today?";
                document.write(str.split(" ") + "<br />");// 按照空格切分
                document.write(str.split("") + "<br />"); // 按照字符切分
                document.write(str.split(" ", 3));// 按照空格切法,只保留前三個
            substr 截取子字符串
                "abcdef".substr(2); //cdef 從下標2開始
                "abcdef".substr(2,3);  //cde 從下標2開始,截取長度3
            substring 截取子字符串
                "abcdef".substring(2); //cdef 從下標2開始
                "abcdef".substring(2,3); //c 從下標2開始,到下標3結束(不包含下標3)
            toLowerCase 轉換成小寫. 
            toUpperCase 轉換成大寫.
            爲String對象動態添加trim函數:
                String.prototype.trim = function() {
                    //return this.replace(/^\s+|\s+$/g,"");
                    return this.replace(/^\s+/,"").replace(/\s+$/,"");
                }

    Array
        創建數組對象:
            var a1 = new Array(3);
            var a2 = new Array("A","B",100);
            var a3 = ["D","E",90];
        常用屬性:
            length 獲取數組的長度
            prototype 動態給數組對象添加屬性或者方法
        常用方法:
            concat(另一個數組) 連接兩個數組成一個新數組.  
            join(特殊字符) 將數組中所有的元素以特殊字符連接起來生成一個字符串. 
            pop() 彈出數組中最後一個元素. 
            push(ele1,ele2….) 向數組末尾添加多個元素 
            reverse() 反轉數組. 
            slice(從哪個下標開始) 從指定下標開始向右截取子數組. 
            splice(從哪個下標開始,元素個數,newEle1,newEle2…). 添加或者刪除數組中某些元素 
            sort 對數組升序排. 
            toString 將數組轉換成字符串.

    Date
        創建日期對象:
            var t1 = new Date();
            var t2 = new Date(y,m,d);
            var t3 = new Date(y,m,d,h,mi,s);
        屬性:
            prototype 日期對象動態擴展屬性和方法
        常用方法:
            getDate 獲取日期的"幾號"
            getDay 獲取日期是星期幾. 
            getHours 獲取日期的小時 
            getMinutes 獲取日期的分鐘. 
            getMonth 獲取日期的月份. 
            getSeconds 獲取日期的秒數. 
            getTime 獲取自1970年1月1日到指定時間的毫秒數
                var nowTime = new Date();
                var timeStamp = nowTime.getTime(); 
                獲取時間戳,在AJAX中解決瀏覽器緩存問題
          getYear 獲取日期的年. (很少使用)
          getFullYear 獲取日期的完整年份(推薦使用,避免千年蟲問題)
          setDate 修改日期的"幾號". 
          setHours 修改日期的"小時". 
          setMinutes 修改日期的"分鐘". 
          setMonth 修改日期的"月份".
          setSeconds 修改日期的"秒". 
          setTime 修改時間,該方法參數是毫秒數(自1970年1月1日00:00:00的毫秒數). 
          setYear 修改日期的年份. 
          toGMTString 將日期轉換成字符串(以GMT(格林威治時間)格式轉換). 
          toLocaleString 將日期轉換成字符串,以本地計算機環境爲基礎。. 
          UTC 獲取自1970年1月1日到指定時間的毫秒數(國際標準時間)
              Date.UTC(2012,1,1,0,0,0);

    Math
        常用方法:
            abs 求絕對值
            random 獲取一個從0到1的隨機數
            round 四捨五入
            sqrt 求平方根
    Number
        常用屬性:
            prototype 爲Number類型動態擴展屬性或方法
        常用方法:
            toString() 將數字轉換成字符串

    RegExp
        創建正則表達式對象:
            var regExp = new RegExp("ab+c","i"); //顯示創建
            var regExp = /ab+c/i;          //隱式創建
            g:global match
            i:ignore case
            gi:both global match and ignore case
            m:多行搜索
        常用方法:
            test(字符串); 判斷給定的字符串是否符合正則表達式。 
        常用正則表達式:
            匹配中文字符的正則表達式: [\u4e00-\u9fa5]
            評註:匹配中文還真是個頭疼的事,有了這個表達式就好辦了
            var str = "按照空格切法";
            var re = "[\u4e00-\u9fa5]";
            var regExp  = new RegExp(re);
            alert(regExp.test(str));
            匹配雙字節字符(包括漢字在內):[^\x00-\xff]
            評註:可以用來計算字符串的長度(一個雙字節字符長度計2,ASCII字符計1)

            匹配空白行的正則表達式:\n\s*\r
            評註:可以用來刪除空白行

            匹配HTML標記的正則表達式:<(\S*?)[^>]*>.*?</\1>|<.*? />
            評註:網上流傳的版本太糟糕,上面這個也僅僅能匹配部分,對於複雜的嵌套標記依舊無能爲力

            匹配首尾空白字符的正則表達式:^\s*|\s*$
            評註:可以用來刪除行首行尾的空白字符(包括空格、製表符、換頁符等等),非常有用的表達式

            匹配Email地址的正則表達式:
            /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
            評註:表單驗證時很實用
            var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
            var res = emailReg.test("wusz050163.com");
            alert(res);

            匹配網址URL的正則表達式:[a-zA-z]+://[^\s]*
            評註:網上流傳的版本功能很有限,上面這個基本可以滿足需求

            匹配帳號是否合法(字母開頭,允許5-16字節,允許字母數字下劃線):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
            評註:表單驗證時很實用

            匹配國內電話號碼:\d{3}-\d{8}|\d{4}-\d{7}
            評註:匹配形式如 0511-4405222 或 021-87888822

            匹配騰訊QQ號:[1-9][0-9]{4,}
            評註:騰訊QQ號從10000開始

            匹配中國郵政編碼:[1-9]\d{5}(?!\d)
            評註:中國郵政編碼爲6位數字

            匹配身份證:\d{15}|\d{18}
            評註:中國的身份證爲15位或18位

            匹配ip地址:\d+\.\d+\.\d+\.\d+
            評註:提取ip地址時有用

            匹配特定數字:
            ^[1-9]\d*$    //匹配正整數
            ^-[1-9]\d*$   //匹配負整數
            ^-?[1-9]\d*$   //匹配整數
            ^[1-9]\d*|0$  //匹配非負整數(正整數 + 0)
            ^-[1-9]\d*|0$   //匹配非正整數(負整數 + 0)
            ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$   //匹配正浮點數
            ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$  //匹配負浮點數
            ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$  //匹配浮點數
            ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$   //匹配非負浮點數(正浮點數 + 0)
            ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$  //匹配非正浮點數(負浮點數 + 0)
            評註:處理大量數據時有用,具體應用時注意修正

            匹配特定字符串:
            ^[A-Za-z]+$  //匹配由26個英文字母組成的字符串
            ^[A-Z]+$  //匹配由26個英文字母的大寫組成的字符串
            ^[a-z]+$  //匹配由26個英文字母的小寫組成的字符串
            ^[A-Za-z0-9]+$  //匹配由數字和26個英文字母組成的字符串
            ^\w+$  //匹配由數字、26個英文字母或者下劃線組成的字符串
            評註:最基本也是最常用的一些表達式

  window對象常用屬性和函數
      self屬性“與window對象完全相同,self通常用於確認就是在當前的窗體內”
      parent屬性
      top屬性
      open函數“開啓一個新窗口,原窗口和新窗口是父子關係,該函數的返回值是新窗口對象”
          window.open(“http://www.baidu.com”);
          window.open(“http://www.baidu.com”,”target”);
      opener屬性“獲取當前窗口的開啓者,通常負責父子窗口通訊”
      close函數“關閉窗口”
          當使用火狐的時候關閉close沒有起作用所以我需要
          在火狐的地址欄輸入:about:config
          然後找到dom.allow_scripts_to_close_windows;把false改爲true
          火狐默認狀態window.close是無效的
      confirm函數“彈出確認框”
      alert函數“彈出消息對話框”
      setInterval函數“每隔特定時間執行某個函數”
          window.setInterval(codes,間隔毫秒數);
          codes參數是函數名,或者“字符串的代碼段”

  window對象的子對象location對象
      location對象既是window對象的屬性又是document對象的屬性,所以用
      window.location和document.location是一樣的。
         location對象的常用屬性和函數
              href屬性“返回或者設置當前文檔的URL”
                  alert(window.location.href); //獲取當前文檔URL
                  window.location.href = “http://www.baidu.com”; //設置當前文檔的URL
              reload函數“重新加載當前文檔”
                  window.location.reload(); 從瀏覽器緩存中重新加載該文檔
                  window.location.reload(false); 從瀏覽器緩存中重新加載該文檔
                  window.location.reload(true); 從服務器中重新加載該文檔

  window對象的子對象history對象
      history對象常用函數
          go函數“前進或者後退指定的頁數”
              <a href=”javascript:window.history.go(-1);”>後退</a>
              <a href=”javascript:window.history.go(1);”>前進</a>
          back函數“等同點擊瀏覽器的後退按鈕”
              <a href=”javascript:window.history.back();”>後退</a>

  window對象的子對象document對象(DOM)
      document對象包含一個節點對象,此對象包含每個單獨頁面的所有HTML元素,這就是W3C的DOM對象
          document對象常用屬性和函數
          forms屬性“獲取整個文檔中的所有form,返回一個數組”
              document.forms[0].submit();
              document.forms[1].reset();
              document.form的name或者id.submit();
      getElementById函數“通過標籤的id獲取某個文檔中的元素”
      getElementsByName函數“通過標籤name屬性的值獲取元素(數組)”
      getElementsByTagName函數“通過標籤名獲取元素(數組)”
      write函數“向文檔中寫入HTML代碼”
      createElement函數“創建新元素”
      appendChild函數“在某元素末尾添加新元素”

      createElement和appendChild函數聯合應用

      示例1:
        <html>
            <head>
                <title>js</title>
                <script type="text/javascript">
                    function add(){
                        var board = document.getElementById("board");
                        var e = document.createElement("input");
                        e.type = "button";
                        e.value = "這是測試加載的小例子";
                        var object = board.appendChild(e);
                    }

                </script>
            </head>
            <body>
                <div id="board"></div>
                <a href="javascript:add();">add</a>
            </body>
        </html>

      示例2:
        <html>
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                <title>js</title>
                <script type="text/javascript">
                    function add(){
                        var board = document.getElementById("board");
                        var e2 = document.createElement("select");
                        e2.options[0] = new Option("加載項1", "");
                        e2.options[1] = new Option("加載項2", "");
                        e2.size = "1";
                        var object = board.appendChild(e2);
                    }
                 </script>
            </head>
            <body>
                <div id="board"></div>
                <a href="javascript:add();">add</a>
            </body>
        </html>
      示例3:
        <html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>js</title>
                <script type="text/javascript">
                    function add(){
                        var board = document.getElementById("board");           
                        var e4 = document.createElement("input");
                        e4.setAttribute("type", "text");
                        e4.setAttribute("name", "q");
                        e4.setAttribute("value", "使用setAttribute");
                        e4.setAttribute("onclick", "javascript:alert('This is a test!');");           
                        var object = board.appendChild(e4);
                    }
                </script>
            </head>
            <body>
                <div id="board"></div>
                <a href="javascript:add();">add</a>
            </body>
        </html>


事件:
    事件                事件句柄               事件發生的條件…… 
    blur                  onBlur                  失去焦點. 
    change            onChange            select,text,textarea失去焦點並且內容改變. 
    click                 onClick                鼠標單擊. 
    dblclick            onDblClick           鼠標雙擊
    focus               onFocus               window,frame,frameset,form的input獲取焦點
    keydown          onKeyDown         按下鍵. 
    keypress          onKeyPress         按下又彈起. 
    keyup               onKeyUp             鍵彈起. 
    load                  onLoad                頁面加載完畢馬上發生. 
    mousedown     onMouseDown     按下鼠標. 
    mousemove     onMouseMove     鼠標移動. 
    mouseout         onMouseOut        鼠標離開區域. 
    mouseover       onMouseOver      鼠標經過. 
    mouseup          onMouseUp         鼠標釋放. 
    reset                 onReset               重置form. 
    select               onSelect               選擇input/textarea中的文本. 
    submit              onSubmit             提交form. (return true/false;)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章