現在有好多比較優秀的客戶端腳本語言組件, 如: Prototype、YUI、jQuery、mootools、Bindows, Scriptaculous, FCKEditor 等, 都非常不錯, 最近研究了一下 jQuery,在學習時順便整理了一個教程, 後面會有示例代碼下載鏈接.
jQuery是Javascript語言的一個新的資源庫(框架) ,它能快速,簡潔的使用Html documents, handle events, perform animations,並且能把AJax交互應用到網頁,jQuery能夠改變你書寫JavaScript的方式.
(二).預備條件
本文章中所有示例都是基於ASP.Net 2.0運行環境.
不需要安裝操作, 只需要把jQuery腳本文本引入頁面, 即可使用jQuery這個強大組件的功能, 如下:
1 <script src=Resources\js\jquery-1.2.1.JS type="text/Javascript"></script>
(三).代碼示例
1. 訪問頁面元素
1 <head runat="server">
2 <title>訪問元素</title>
3 <script src=Resources\js\jquery-1.2.1.JS type="text/Javascript"></script>
4 <!--將jQuery引用進來-->
5 <script type="text/Javascript">
6 function GetElement()
7 {
8 //<summary>通過ID獲取元素TextBox1的客戶端Dom對象</summary>
9 tb = $("#<%= TextBox1.ClIEntID %>")[0]; //1. 通過索引獲取Dom對象
10 tb = $("#<%= TextBox1.ClIEntID %>").eq(0)[0]; //2. 通過eq, eq(0)獲取的是JQuery對象, 再通過索引獲取Dom對象.
11 tb = $("#<%= TextBox1.ClIEntID %>").get(0); //3. 通過get方法獲取Dom元素
12 alert(tb.value);
13
14 //<summary>通過class屬性獲取元素的客戶端Dom對象</summary>
15 div1 = $(".KingClass")[0];
16 alert(div1.innerText);
17
18 //<summary>通過Html標簽獲取元素的客戶端Dom對象</summary>
19 div1 = $("div")[1];
20 alert(div1.innerText);
21 }
22 </script>
23 </head>
24 <body>
25 <form id="form1" runat="server">
26 <div>
27 <asp:TextBox ID="TextBox1" runat="server" Text="Hello! ChengKing."></ASP:TextBox>
28 <div class="KingClass">Hello! Rose</div> <br />
29 <input type = button value="獲取元素" onclick = "GetElement();" />
30 </div>
31 </form>
32 </body>
2. Dom對象和jQuery對象轉換示例
1 <head runat="server">
2 <title>Dom和jQuery對象轉換示例</title>
3 <script src=Resources\js\jquery-1.2.1.JS type="text/Javascript"></script>
4 <!--將jQuery引用進來-->
5 <script type="text/Javascript">
6 function ChangeObjectType()
7 {
8 //調用Dom對象方法
9 tb_dom = document.getElementById(’’<%= div1.ClIEntID %>’’);
10 alert(tb_dom.innerHtml);
11
12 //用$方法把Dom對象轉換為jQuery對象, 再調用jQuery對象方法
13 tb_jQuery = $(tb_dom);
14 alert(tb_jQuery.Html());
15
16 //取jQuery對象中的Dom對象
17 tb_dom2 = tb_jQuery[0];
18 alert(tb_dom2.innerHtml);
19
20 }
21 </script>
22 </head>
23 <body>
24 <form id="form1" runat="server">
25 <div>
26 <div id="div1" runat=server>
27 Hello! ChengKing.
28 </div>
29 <input type = button value="對象轉換" onclick = "ChangeObjectType();" />
30 </div>
31 </form>
32 </body>
