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

来源：互联网发布：java web项目案例书籍编辑：程序博客网时间：2024/05/11 23:08

(一).概述

现在有好多比较优秀的客户端脚本语言组件, 如: 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             //
通过ID获取元素TextBox1的客户端Dom对象

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             //
通过class属性获取元素的客户端Dom对象

15             div1 = $(".KingClass")[0];
16             alert(div1.innerText);
17
18             //
通过Html标签获取元素的客户端Dom对象

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! Rosediv> <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>

6. Document.Ready方法示例

1 <head runat="server">
2     <title>Document.Ready方法示例title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4     <script language="javascript">
5         function Init1()
6         {
7             alert('Document.body.onload事件执行!');
8         }
9         function Init2()
10         {
11             alert('$(document).ready事件执行!');
12         }
13
14     script>
15 head>
16 <body>
17     <form id="form1" runat="server">
18     <div>
19         <script language="javascript">
20             //ready方法完整写法
21             $(document).ready(function()
22             {
23                 Init2();
24             });
25             //ready方法简写
26 //            $(function() {
27 //                Init2();
28 //            });
29             document.body.onload=Init1;
30         script>
31     div>
32     form>
33 body>

7. Html方法示例

1 <head runat="server">
2     <title>使用Html方法title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4     <script language=jscript>
5         $(document).ready(function()
6         {
7             $("ul").find("li").each(function(i)
8             {
9                 $(this).html( "This is " + i + "!");
10             });
11         })
12         function GetLisValue()
13         {
14              liS = $("ul li");
15             //遍历元素
16             for(var i = 0; i < liS.length; i++)
17             {
18                 alert(liS.eq(i).html());
19             }
20         }
21     script>
22 head>
23 <body>
24     <form id="form1" runat="server">
25     <div>
26         <ul>
27             <li>li>
28             <li>li>
29         ul>
30         <input type=button value="得到所有li的值" onclick="GetLisValue();" />
31     div>
32     form>
33 body>

8. 元素事件注册以及实现示例

1 <head runat="server">
2     <title>给元素注册事件及实现事件title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4     <script language=jscript>
5         $(document).ready(function()
6         {
7             $("#button1").click(function() {
8                 alert('Button Element ClienEvent Runned.');
9             });
10         })
11
12     script>
13 head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <input id="button1" type=button value="单击, 此按钮被设置了单击事件!" />
18     div>
19     form>
20 body>

9. Filter和no方法使用示例

1 <head runat="server">
2     <title>Filter and No方法使用title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4     <script language=jscript>
5         function ChangeBorder()
6         {
7             $("ul").not("[li]").css("border", "1px solid blue");
8         }
9     script>
10 head>
11 <body>
12     <form id="form1" runat="server">
13     <div>
14          <ul>
15                 <li>Hi King!li>
16                 <li>Hi Rose!li>
17         ul>
18         <br />
19         <ul>ul>
20         <input type=button onclick = "ChangeBorder();" value="改变边框" />
21     div>
22     form>
23 body>

10. 一个很有用的方法: Css方法使用示例

1 <head runat="server">
2     <title>使用Css方法, 比较有用的一个方法title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4         <script language=jscript>
5             function SetBorderStyle()
6             {
7                 $("ul").css("border", "1px solid blue");
8                 $("ul li").css("border", "1px solid red");
9             }
10         script>
11 head>
12 <body>
13     <form id="form1" runat="server">
14     <div>
15         <ul>
16             <li>li>
17             <li>li>
18             <li>li>
19         ul>
20         <input type=button value="设置边框" onclick="SetBorderStyle();" />
21     div>
22     form>
23 body>

11. 滑动显示/隐藏元素

1 <head runat="server">
2     <title>滑动显示隐藏元素title>
3        <script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4         <script language=jscript>
5                         $(document).ready(function() {
6                 $('#faq').find('.pic').hide().end().find('.display').click(function() {
7                      var answer = $(this).next();
8                      if (answer.is(':visible')) {
9                          answer.slideUp();
10                      } else {
11                          answer.slideDown();
12                      }
13                  });
14             });
15         script>
16 head>
17 <body>
18     <form id="form1" runat="server">
19     <div id="faq">
20         <input class="display" type=button value="Slide显示/隐藏"  />
21         <input class="pic" type=image src="http://p.blog.csdn.net/images/p_blog_csdn_net/chengking/160914/t_GIRL.GIF" style="width: 227px; height: 174px" />
22     div>
23     form>
24 body>

12. 操作父元素

1 <head runat="server">
2     <title>操作父元素title>
3     <link rel="stylesheet" type="text/css" href="Resources/CSS/StyleSheet1.css" title="blue" />
4     <script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
5         <script language=jscript>
6             $(document).ready(function() {
7                 $("a").hover(function() {
8                     $(this).parents("p").addClass("BackColor");
9                 }, function() {
10                     $(this).parents("p").removeClass("BackColor");
11                 });
12             });
13         script>
14 head>
15 <body>
16     <form id="form1" runat="server">
17     <div>
18         <p>
19             Hi! Rose.<br />
20             <a href="#">你好a>
21         p>
22     div>
23     form>
24 body>

13. Toggle方法使用示例

1 <head runat="server">
2     <title>Toggle方法使用title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4         <script language=jscript>
5                $(document).ready(function() {
6                 $("#btn").toggle(function() {
7                     $(".pic").show('slow');
8                 }, function() {
9                     $(".pic").hide('fast');
10                 });
11             });
12     script>
13 head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <input id="btn" type=button value="toggle事件测试" />
18         <input class="pic" type=image src="http://p.blog.csdn.net/images/p_blog_csdn_net/chengking/160914/t_GIRL.GIF" style="width: 227px; height: 174px; display:none;" />
19     div>
20     form>
21 body>

14. Animate方法使用示例

1 <head runat="server">
2     <title>Animate方法示例title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4         <script language=jscript>
5                       $(document).ready(function() {
6                 $("#btn").toggle(function() {
7                     $(".pic").animate({
8                         height: 'show',
9                         opacity: 'show'
10                     }, 'slow');
11                 }, function() {
12                     $(".pic").animate({
13                         height: 'hide',
14                         opacity: 'hide'
15                     }, 'slow');
16                 });
17             });
18     script>
19 head>
20 <body>
21     <form id="form1" runat="server">
22     <div>
23         <input id="btn" type=button value="Animate事件测试" />
24         <input class="pic" type=image src="http://p.blog.csdn.net/images/p_blog_csdn_net/chengking/160914/t_GIRL.GIF" style="width: 227px; height: 174px; display:none;" />
25     div>
26     form>
27 body>

15. 改变表格行为(by calss property)

1 <head runat="server">
2     <title>改变表格行为title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4         <script type="text/javascript">
5         $(document).ready(function(){
6                 $(".stripe tr").mouseover(function(){
7                         //如果鼠标移到class为stripe的表格的tr上时，执行函数
8                         $(this).addClass("悬浮");}).mouseout(function(){
9                                         //给这行添加class值为over，并且当鼠标一出该行时执行函数
10                         $(this).removeClass("悬浮");})  //移除该行的class
11                 $(".stripe tr:even").addClass("偶数");
12                     //给class为stripe的表格的偶数行添加class值为:偶数
13                 $(".stripe tr:odd").addClass("奇数");
14                     //给class为stripe的表格的偶数行添加class值为:奇数
15         });
16         script>
17         <style>
18         th {
19                 background:#0066FF;
20                 color:#FFFFFF;
21                 line-height:20px;
22                 height:30px;
23         }
24
25         td {
26                 padding:6px 11px;
27                 border-bottom:1px solid #95bce2;
28                 vertical-align:top;
29                 text-align:center;
30         }
31
32         td * {
33                 padding:6px 11px;
34         }
35
36         tr.奇数 td {
37                 background:#ecf6fc;  /*设置奇数行颜色*/
38         }
39         tr.偶数 td {
40                 background:#ecf6ee;  /*设置偶数行颜色*/
41         }
42
43         tr.悬浮 td {
44                 background:#6699ff;  /*这个将是鼠标高亮行的背景色*/
45         }
46
47         style>
48
49 head>
50 <body>
51     <form id="form1" runat="server">
52     <div>
53         <table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
54             <thead>
55               <tr>
56                 <th>姓名th>
57                 <th>年龄th>
58                 <th>QQth>
59                 <th>Emailth>
60               tr>
61             thead>
62             <tbody>
63               <tr>
64                 <td>张三td>
65                 <td>20td>
66                 <td>00000td>
67                 <td>******td>
68               tr>
69               <tr>
70                 <td>李四td>
71                 <td>20td>
72                 <td>00000td>
73                 <td>******td>
74               tr>
75               <tr>
76                 <td>小刘td>
77                 <td>20td>
78                 <td>00000td>
79                 <td>*****td>
80               tr>
81             tbody>
82         table>
83
84     div>
85     form>
86 body>

16. 操作jQuery属性示例

1 <head runat="server">
2     <title>操作元素属性title>
3     <style>
4         .blue {
5                 background:#6699FF;
6                 color:#FFFFFF;
7                 line-height:20px;
8                 height:30px;
9         }
10     style>
11     <script src=Resources/js/jquery-1.2.1.js>script>
12     <script type="text/javascript">
13         function ChangeElementStyleAndProperty()
14         {
15             if( i == 0 )
16                 $("#tb").css("background","#6699ff")                 //设定元素背景色
17             if( i == 1 )
18                 $("#tb").height(300);                                //设定高度
19             if( i == 2 )
20                 $("#tb").width(200);                                 //设定宽度
21             if( i == 3 )
22                 $("#tb").css({ color: "black", background: "blue" });//设置我个属性
23             if( i == 4 )
24                 $("#tb").addClass("blue");                           //添加class
25             if( i == 5 )
26                 $("#tb").removeClass("blue");                        //删除class
27             if( i == 6 )
28                 $("#tb").toggleClass("blue");                        //交替添加class或删除class.
29             i++;
30             if( i == 6 ) i = 0;
31         }
32         var i = 0;
33     script>
34 head>
35 <body>
36     <form id="form1" runat="server">
37     <div>
38          <input id="btn" type=button value="Animate事件测试" onclick="ChangeElementStyleAndProperty();" />
39          <table id="tb"><tr><td>Hi King!td>tr>table>
40     div>
41     form>
42 body>

17. 利用Wrap方法动态的修改控件外观

1 <head runat="server">
2     <title>Wrap方法title>
3     <script src=Resources/js/jquery-1.2.1.js>script>
4     <script type="text/javascript">
5         $(document).ready(function(){
6             $("p").wrap("

");
7         });
8     script>
9     <style>
10         .wrap {
11                 background:#0066FF;
12                 color:#FFFFFF;
13                 line-height:20px;
14                 height:30px;
15         }
16     style>
17 head>
18 <body>
19     <form id="form1" runat="server">
20     <div>
21         <p>Test Paragraph.p>
22     div>
23     form>
24 body>

18. 动态切换Css样式

1 <head runat="server">
2     <title>动态切换样式title>
3     <link rel="stylesheet" type="text/css" href="Resources/CSS/StyleSheet1.css" title="blue" />
4     <link rel="stylesheet" type="text/css" href="Resources/CSS/StyleSheet2.css" title="gray" />
5     <script src=Resources/js/jquery-1.2.1.js>script>
6     <script type="text/javascript">
7         $(document).ready(function()
8         {
9             $('.styleswitch').click(function()
10             {
11                 switchStylestyle(this.getAttribute("title"));
12                 return false;
13             });
14         });
15
16         function switchStylestyle(styleName)
17         {
18             $('link[@rel*=style]').each(function(i)
19             {
20                 this.disabled = true;
21                 if (this.getAttribute('title') == styleName) this.disabled = false;
22             });
23         }
24     script>
25 head>
26 <body>
27     <form id="form1" runat="server">
28     <div>
29         <div class="BackColor" id="div1">注意看一下我的背景色<br />
30         div>
31         <input class="styleswitch" title="blue" type=button value="切换到: 蓝色背景" />
32         <input class="styleswitch" title="gray" type=button value="切换到: 灰色背景" />
33     div>
34     form>
35 body>

19. Prepend-Wrap-Append 组合方法示例

1 <head runat="server">
2     <title>Use Prepend-Wrap-Append Methodtitle>
3     <link href="Resources/CSS/StyleSheet3.css" rel="stylesheet" type="text/css" />
4     <script src=Resources/js/jquery-1.2.1.js>script>
5     <script type="text/javascript">
6         $(document).ready(function(){ $("div.roundbox") .wrap('

');
7         });
8
9         $('div.roundbox').prepend('

')
10 .append('