天天看點

JavaScript學習筆記5(.net)

document.getElementsByTagName()方法

document.getElementsByTagName()方法是取 一些HTML标簽名為“...”的方法,即傳回值為一個數組,例:

JavaScript學習筆記5(.net)

var sel = document.getElementsByTagName( " INPUT " );           // 取标簽為<input …>的項

JavaScript學習筆記5(.net)

for (var i = 0 ;i < sel.length;i ++ )

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

  ... {

JavaScript學習筆記5(.net)

             if(sel[i].type=="radio" && sel[i].checked)      //input項類型為radio的并且選中

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

                 ...{

JavaScript學習筆記5(.net)

                              alert(sel[i].value);

JavaScript學習筆記5(.net)

                 }

JavaScript學習筆記5(.net)

}

這種方法常和 for循環連用。

下面讓我們介紹一下javascript關于類的一些知識:

類的定義:

function 類名 () {...}

定義方法:

1.function 方法名() {...}

2.this.方法名 = function () {...}

下面有個綜合的例子,請看:

.js頁面:

JavaScript學習筆記5(.net)

// *********************************************

JavaScript學習筆記5(.net)

//  定義Pet(寵物)對象

JavaScript學習筆記5(.net)

// *********************************************

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

function Pet()  ... {

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

    this.name = null;//名稱       定義成員變量

JavaScript學習筆記5(.net)

    this.color = null;//顔色

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

    this.getName = function() ...{

JavaScript學習筆記5(.net)

        return this.name;

JavaScript學習筆記5(.net)

    }//擷取名稱

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

    this.setName = function(newName) ...{           

JavaScript學習筆記5(.net)

        this.name = newName;

JavaScript學習筆記5(.net)

    }//設定名稱   定義帶參數的方法

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

    this.getColor = function() ...{

JavaScript學習筆記5(.net)

        return this.color;

JavaScript學習筆記5(.net)

    }//擷取顔色   定義不帶參數的方法

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

    this.setColor = function(newColor) ...{

JavaScript學習筆記5(.net)

        this.color = newColor;

JavaScript學習筆記5(.net)

    }//設定顔色

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

    this.getFood = null;//定義一個需要實作的方法

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

    this.toString = function() ...{

JavaScript學習筆記5(.net)

        return "The pet is " + this.name +",it's "+this.color+",and it likes "+this.getFood()+".";

JavaScript學習筆記5(.net)

    }//擷取寵物的描述資訊

JavaScript學習筆記5(.net)

}

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

// *********************************************

JavaScript學習筆記5(.net)

//  定義Cat(貓)對象

JavaScript學習筆記5(.net)

// *********************************************

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

function Cat()  ... {

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

    this.getFood = function() ...{

JavaScript學習筆記5(.net)

        return "fish";

JavaScript學習筆記5(.net)

    }//實作Pet中定義的getFood方法

JavaScript學習筆記5(.net)

}

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

Cat.prototype  =   new  Pet; // 聲明Cat的原型,繼承父類Pet,類的繼承寫法

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

// *********************************************

JavaScript學習筆記5(.net)

//  定義PersianCat(波斯貓)對象

JavaScript學習筆記5(.net)

// *********************************************

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

function PersianCat()  ... {

JavaScript學習筆記5(.net)

}

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

PersianCat.prototype  =   new  Cat; // 聲明PersianCat的原型,繼承父類Cat

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

PersianCat.prototype.toString  =  function()  ... {

JavaScript學習筆記5(.net)

    return "It's just a persian cat.";

JavaScript學習筆記5(.net)

} // 覆寫Pet的toString方法

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

// *********************************************

JavaScript學習筆記5(.net)

//  定義Dog(狗)對象

JavaScript學習筆記5(.net)

// *********************************************

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

function Dog()  ... {

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

    this.getFood = function() ...{

JavaScript學習筆記5(.net)

        return "bone";

JavaScript學習筆記5(.net)

    }//實作Pet中定義的getFood方法

JavaScript學習筆記5(.net)

}

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

Dog.prototype  =   new  Pet; // 聲明Dog的原型,繼承父類Pet

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

// 定義一個Cat對象

JavaScript學習筆記5(.net)

var cat  =   new  Cat();

JavaScript學習筆記5(.net)

cat.setName( " MiMi " );

JavaScript學習筆記5(.net)

cat.setColor( " white " );

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

// 定義一個Dog對象

JavaScript學習筆記5(.net)

var dog  =   new  Dog();

JavaScript學習筆記5(.net)

dog.setName( " WangWang " );

JavaScript學習筆記5(.net)

dog.setColor( " yellow " );

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

// 定義一個PersianCat對象

JavaScript學習筆記5(.net)

var persianCat  =   new  PersianCat();

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

// 定義數組,儲存上面的三個對象

JavaScript學習筆記5(.net)

var pets  =   new  Array( 3 );

JavaScript學習筆記5(.net)

pets[ 0 ]  =  cat;

JavaScript學習筆記5(.net)

pets[ 1 ]  =  dog;

JavaScript學習筆記5(.net)

pets[ 2 ]  =  persianCat;

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

// 測試程式

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

function Show_Message() ... {

JavaScript學習筆記5(.net)

    var txtId=document.getElementById(txtID);//取id為txtID的文本框

JavaScript學習筆記5(.net)

    for(var i=0;i<pets.length;i++)

JavaScript學習筆記5(.net)

        txtId.value+=pets[i].toString();//循環輸出cat.toString(),dog.toString(),persianCat.toString(),

JavaScript學習筆記5(.net)

                                                            //把值傳送到文本框裡,在文本框裡顯示出來

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

    } .aspx頁面:

JavaScript學習筆記5(.net)

<% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Default.aspx.cs "  Inherits = " _Default "   %>

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

< html xmlns = " http://www.w3.org/1999/xhtml "   >

JavaScript學習筆記5(.net)

< head runat = " server " >

JavaScript學習筆記5(.net)

     < title > Class extend </ title >

JavaScript學習筆記5(.net)

     < script language = " javascript "  src = " JScript.js " ></ script >

JavaScript學習筆記5(.net)

     < script language = " javascript " >

JavaScript學習筆記5(.net)

    var txtID = ' <%=TextBox1.ClientID %> ' ;

JavaScript學習筆記5(.net)

     </ script >

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

</ head >

JavaScript學習筆記5(.net)

< body >

JavaScript學習筆記5(.net)

     < form id = " form1 "  runat = " server " >

JavaScript學習筆記5(.net)

     < div >

JavaScript學習筆記5(.net)

         < table style = " width: 595px; height: 184px " >

JavaScript學習筆記5(.net)

         < tr >

JavaScript學習筆記5(.net)

             < td style = " height: 26px; width: 56px; " >

                          < asp:Label ID = " Label1 "  runat = " server "  Text = " Label " ></ asp:Label >

                </ td >

JavaScript學習筆記5(.net)

          < td ><asp:TextBox ID="TextBox1" runat="server" Height="142px" Width="519px"></asp:TextBox>

             </td>

JavaScript學習筆記5(.net)

        </tr>

JavaScript學習筆記5(.net)

        <tr>

JavaScript學習筆記5(.net)

          <td><asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Show_Message()"/>

           </td> 

JavaScript學習筆記5(.net)

        </tr>

JavaScript學習筆記5(.net)

        </table>

JavaScript學習筆記5(.net)

    </div>

JavaScript學習筆記5(.net)
JavaScript學習筆記5(.net)

    </form>

JavaScript學習筆記5(.net)

</body>

JavaScript學習筆記5(.net)

</html>

上面這個例子涉及到類的定義方法,類中的成員,還有繼承關系,這個是從網上摘下的例子,不錯,自己改動一下,再加上點注釋,呵呵,比較完美了

JavaScript學習筆記5(.net)

繼續閱讀