編程人員對于JQuery框架性能評論說明
作者：佚名
JQuery框架是JavaScript語言的一個新的資源庫，它是一種輕量級的數據交換格式，易于閱讀和編寫，同時也易于機器解析和生成，是基于ECMA262語言規范中JavaScript編程語言的一個子集。
JQuery框架是JavaScript語言的一個新的資源庫 ,它***的性能：快速,簡潔的使用HTML documents, handle events, perform animations,而且還可以能把Ajax交互應用到網頁,這樣就能夠改變你書寫的方式與格式。
現在有好多比較優秀的客戶端腳本語言組件, 如: Prototype、YUI、jQuery、mootools、Bindows, Scriptaculous, FCKEditor 等, 都非常不錯, 最近研究了一下 jQuery,在學習時順便整理了一個教程, 后面會有示例代碼下載鏈接. #t#
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>
3. 訪問對象內部元素
- 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 VisitInnerElement()
- 7 {
- 8 //取得Div中第二個P元素
- 9 p = $("#<%= div1.ClientID %> P").eq(1); //等號左邊的p對象為p對象集合
- 10 alert(p.html());
- 11
- 12 //取得Div中***個P元素
- 13 p = $("#<%= div1.ClientID %> P:first").eq(0); //first為關鍵字
- 14 alert(p.html());
- 15
- 16 //取得Div中第二個P元素
- 17 p = $("#<%= div1.ClientID %> P:last").eq(0); //last為關鍵字
- 18 alert(p.html());
- 19
- 20 }
- 21 </script>
- 22 </head>
- 23 <body>
- 24 <form id="form1" runat="server">
- 25 <div>
- 26 <div id="div1" runat=server>
- 27 <p>Hello! ChengKing.</p>
- 28 <p>Hello! Rose.</p>
- 29 </div>
- 30 <input type = button value="訪問內部元素" onclick = "VisitInnerElement();" />
- 31 </div>
- 32 </form>
- 33 </body>
責任編輯：chenqingxiang
來源：
CSDN
