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>
