JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载](一)

(一).概述

现在有好多比较优秀的客户端脚本语言组件, 如: 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         
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         
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         
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>

4. 显示/隐藏元素

1 <head runat="server">
2     <title>显示/隐藏元素</title>
3     <script src=Resources\js\jquery-1.2.1.js type="text/javascript"></script>
4         
5         <script type="text/javascript">
6         function HideElement()
7         {
8             p = $("#<%= div1.ClientID %> P").eq(0);
9             p.hide();  //隐藏方法
10         }
11         function ShowElement()
12         {
13             p = $("#<%= div1.ClientID %> P").eq(0);
14             p.show();  //显示方法
15         }
16         function HideSecondSegment()
17         {
18             $("p:eq(1)").hide();  //指定p集合中的元素
19         }
20         function HideVisibleDivElement()
21         {
22             $("div:visible").hide(); //根据div的状态选择可见的div集合
23         }
24         function ShowHideDivElement()
25         {
26             $("div:hidden").show();  //根据div的状态选择不可见的div集合
27         }
28     </script>
29 </head>
30 <body>
31     <form id="form1" runat="server">
32         <div id="div1" runat=server>
33             <p>段1: Hello! ChengKing.</p>
34             <p>段2: Hello! Rose.</p>
35             <p>段3: Hello! King.</p>
36         </div>
37         <input type="button" value="隐藏第一段" onclick="HideElement();" />
38         <input type="button" value="显示第一段" onclick="ShowElement();" />
39         <input type="button" value="隐藏第二段" onclick="HideSecondSegment();" />
40         <input type="button" value="隐藏显示的Div" onclick="HideVisibleDivElement();" />
41         <input type="button" value="显示隐藏的Div" onclick="ShowHideDivElement();" />
42     </form>
43 </body>

5. 根据条件查询对象元素集合

1 <head runat="server">
2     <title>根据条件获取页面中的元素对象集合</title>
3     <script src=Resources\js\jquery-1.2.1.js type="text/javascript"></script>
4         
5         <script type="text/javascript">
6         //获取ul中的li
7         function GetLiElementHtml()
8         {
9             liS = $("ul li");
10             //遍历元素
11             for(var i = 0; i < liS.length; i++)
12             {
13                 alert(liS.eq(i).html());
14             }
15         }
16         //获取ul中的li, 且li的class="k"
17         function GetLiElementHtmlWithClassIsK()
18         {
19             liS = $("ul li.k");
20             //遍历元素
21             for(var i = 0; i < liS.length; i++)
22             {
23                 alert(liS.eq(i).html());
24             }
25         }
26         //取得含有name属性的元素的值
27         function GetElementValueWithNameProperty()
28         {
29             alert($("input[@name]").eq(1).val());
30             alert($("input[@name]").eq(2).val());
31         }
32         //根据属性值获取元素
33         function GetTextBoxValue()
34         {
35             alert($("input[@name=TextBox1]").val());
36         }
37         //根据属性类型和状态获取元素
38         function GetSelectRadioValue()
39         {
40             alert($("input[@type=radio][@checked]").val());
41         }
42         </script>
43 </head>
44 <body>
45     <form id="form1" runat="server">
46     <div>
47         <ul>
48             <li>Hello! ChengKing.</li>
49             <li class="k">Hello! Rose.</li>
50             <li class="k">Hello! King.</li>
51
52         </ul>
53         <input type="button" value="获取所有li元素内容" onclick="GetLiElementHtml();" />
54         <input type="button" value="获取所有li元素[且它的class='k']内容" onclick="GetLiElementHtmlWithClassIsK();" />
55         <br /><br /><br />
56         <input name="TextBox1" type=text value="Hello, King!" />
57         <input name="Radio1" type=radio value="Hello, Rose!" checked=checked />
58         <br />
59         <input type="button" value="取得含有name属性的元素的值" onclick="GetElementValueWithNameProperty();" />
60         <input type="button" value="取得name=TextBox1的文本框的值" onclick="GetTextBoxValue();" />
61         <input type="button" value="取得选中的单选框的值" onclick="GetSelectRadioValue();" />
62
63     </div>
64     </form>
65 </body>

转载于:https://www.cnblogs.com/hacker84/archive/2008/01/14/1038217.html