AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)

2017-11-26 1249
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：


(一).概述

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

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>

4. 显示/隐藏元素
 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 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         <!--将jQuery引用进来-->
 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>QQ</th>
59                 <th>Email</th>
60               </tr>
61             </thead>
62             <tbody>
63               <tr>
64                 <td>张三</td>
65                 <td>20</td>
66                 <td>00000</td>
67                 <td>******</td>
68               </tr>
69               <tr>
70                 <td>李四</td>
71                 <td>20</td>
72                 <td>00000</td>
73                 <td>******</td>
74               </tr>
75               <tr>
76                 <td>小刘</td>
77                 <td>20</td>
78                 <td>00000</td>
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("<div class='wrap'></div>" );
 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 Method</title>
 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('<div class="Content"></div>' ); 
 7          });      
 8          
 9         $('div.roundbox').prepend('<div class="Head"></div>' )
10         .append('<div class="Foot"></div>' );
11     </script>  
12 </head>
13 <body>
14     <form id="form1" runat="server">         
15         <div class="Head">Head</div>
16         <div class="roundbox">
17             <br />
18              正文内容       
19             <br />
20              正文内容       
21             <br />
22              正文内容       
23             <br />
24             <br />        
25        </div>
26        <div class="Foot">Foot</div>
27     </form>
28 </body>

20.操作集合示例
 1 <head runat="server">
 2     <title>操作集合</title>
 3     <script src=Resources\js\jquery-1.2.1.js></script>
 4     <script language=jscript>
 5          function SetColorToThreePMark()
 6          {
 7             $("p" ).each(function(i)
 8                  { this.style.color=['gray','blue','green','red' ][i]; }
 9                )  
10          }
11          function SetSwitchCllor()
12          {
13             $("p").each(function(i){this.style.color=['green','blue'][i%2 ]})  
14          }
15     </script>
16       
17 </head>
18 <body>
19     <form id="form1" runat="server">
20     <div>
21         <p>Hi! King.</p>     
22         <p>Hi! Rose.</p>     
23         <p>Hi! James.</p>        
24         <p>Hi! ChengKing.</p>        
25     </div>
26     <br />
27     <input id="btn" type=button value="依次为P指定不同颜色" onclick="SetColorToThreePMark();" />
28     <input id="Button1" type=button value="设置交替颜色" onclick="SetSwitchCllor();" />
29     </form>
30 </body>

21. 扩展jQuery系统方法
 1 <head runat="server">
 2     <title>扩展JQuery系统方法</title>
 3         <script src=Resources\js\jquery-1.2.1.js></script>     
 4     <script type="text/javascript">     
 5           $(document).ready(function() {
 6                  $.extend({
 7                   min: function(a, b){return a < b? a:b; },
 8                   max: function(a, b){return a > b? a:b; } 
 9                  });
10          }); 
11          function Compute(type)
12          {
13             switch (type)
14              {
15                 case 'max': alert('最大值为:' + $.max(3,5)); break ;
16                 case 'min': alert('最小值为:' + $.min(3,5)); break ;
17              }
18          }  
19     </script>  
20 </head>
21 <body>
22     <form id="form1" runat="server">
23     <div>
24         <input id="Button1" type=button value="执行max(3,5)" onclick="Compute('max');" />
25         <input id="Button2" type=button value="执行min(3,5)" onclick="Compute('min');" />
26     </div>
27     </form>
28 </body>

22. 触发元素事件示例
 1 <head runat="server">
 2     <title>触发元素事件示例</title>
 3     <script src=Resources\js\jquery-1.2.1.js></script>     
 4 </head>
 5 <body>
 6     <form id="form1" runat="server">
 7     <div>
 8         <input type=button value="按钮1" onclick="alert('执行按钮1单击事件');" />     
 9         <input type=button value="按钮2" onclick="alert('执行按钮2单击事件');" />     
10         <input type=button value="按钮3" onclick="alert('执行按钮3单击事件');" />      
11         <br />
12         <input onclick="$('input').trigger('click');" type="button" value="触发三个按钮的事件" />
13     </div>
14     </form>
15 </body>

23. 为元素绑定和移除事件
 1 <head runat="server">
 2     <title>为元素绑定和移除事件</title>
 3     <script src=Resources\js\jquery-1.2.1.js></script>    
 4 </head>
 5 <body>
 6     <form id="form1" runat="server">
 7     <div>
 8         <input class="c" type=button value="按钮1" title="执行按钮1单击事件"   />     
 9         <input class="c"  type=button value="按钮2" title="执行按钮2单击事件"  />     
10         <input class="c"  type=button value="按钮3" title="执行按钮3单击事件"  />      
11         <br /><br />
12         <input onclick="$('.c').trigger('click');" type="button" value="触发上面三个按钮的事件" />
13         <input onclick="$('.c').bind('click', function(){alert($(this)[0].title);});" type="button" value="绑定上面三个按钮的事件" />
14         <input onclick="$('.c').unbind('click')" type="button" value="移除上面三个按钮的事件" />         
15     </div>
16     </form>
17 </body>

24. each方法用法
 1 <head runat="server">
 2     <title>Each用法</title>
 3     <script src=Resources\js\jquery-1.2.1.js></script>    
 4     <script language=jscript>
 5      function UseEach1()
 6      {
 7         $.each( [6,7,8], function(i, n){ alert( "索引:" + i + ": " +  n ); }); 
 8      }
 9      function UseEach2()
10      {
11         $.each( { name: "Rose", sex: "woman" }, function(i, value){ alert( "PropertyName: " + i + ", Value: " +  value ); });
12      }
13     </script>
14 </head>
15 <body>
16     <form id="form1" runat="server">
17     <div>
18         <input class="c" type=button value="Each用法1" onclick="UseEach1();" />         
19         <input class="c" type=button value="Each用法2" onclick="UseEach2();" />         
20     </div>
21     </form>
22 </body>

25. 检查浏览器能力(打开jQuery.js源代码, 发现组件本身已经支持多种浏览器了!)
 1 <head runat="server">
 2     <title>检查浏览器能力</title>
 3     <script src=Resources\js\jquery-1.2.1.js></script>    
 4     <script language=jscript>
 5      function Check()
 6      {
 7          alert($.browser.msie);        
 8          alert($.browser.safari);
 9          alert($.browser.opera);        
10          alert($.browser.mozilla);       
11      }
12     </script>
13 </head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <input type=button value="检查浏览器能力"  onclick="Check();" />     
18     </div>
19     </form>
20 </body>

26. 解决$符被jQuery占用问题, prototype类库也有$方法
 1 <head runat="server">
 2     <title>解决$符被jQuery占用问题</title>
 3     <script src=Resources\js\jquery-1.2.1.js></script>    
 4     <script language=jscript>
 5      function Run1()
 6      {    
 7         //调用jquery类库的$()方法    
 8         alert($("p" ).html());   
 9      }
10      function Run2()
11      {    
12         //如果此时引入了prototype.js, 则将调用prototype类库中的$()方法
13         alert(jQuery("p" ).html());      
14      }
15      function Switch()
16      {
17          jQuery.noConflict();
18      }
19     </script>
20 </head>
21 <body>
22     <form id="form1" runat="server">
23     <div>
24         <p>Hi! Rose.</p>
25         <input type=button value="使用$方法执行"  onclick="Run1();" />     
26         <input type=button value="使用jQuery方法执行"  onclick="Run2();" />     
27         <input type=button value="切换: 用jQuery代替$符号功能"  onclick="Switch();" />     
28     </div>
29     </form>
30 </body>



(四). 其它jQuery相关网站链接


     1. http://wiki.jquery.org.cn/doku.php

     2. http://www.k99k.com/jQuery_getting_started.html

     3. http://hi.baidu.com/xie_jin/blog/item/fa822bd9b9e8fb2f11df9bf7.html

     4. http://visualjquery.com/1.1.2.html

     5. http://jquery.org.cn/api/cn/api_11.xml

     6. http://docs.jquery.com/DOM/Traversing/Selectors

 

(五). 示例教程代码下载

     http://files.cnblogs.com/MVP33650/JQuery(ByChengKing).rar




本文转自钢钢博客园博客，原文链接：http://www.cnblogs.com/xugang/archive/2007/12/12/991664.html，如需转载请自行联系原作者

 

文章标签：
JavaScript
前端开发
.NET
索引
API
开发框架
关键词：
jQuery Javascript
JavaScript组件
JavaScript教程
JavaScript jquery
ASP.NET教程
老朱教授
目录
相关文章
土木林森
|
3月前
|
开发框架 JavaScript 前端开发
揭秘：如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语，再引发服务器端魔法！
【8月更文挑战第16天】在ASP.NET开发中，处理客户端与服务器交互时，常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件，但难以插入客户端逻辑。本文对比此法与改进方案：利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交，增强了灵活性和用户体验，同时确保了服务器端逻辑的执行。
土木林森
48 5
乐多_L
|
3月前
|
JavaScript
鼠标事件（点击换色）分别使用js和jQuery代码实现
鼠标事件（点击换色）分别使用js和jQuery代码实现
乐多_L
40 1
神明木佑
|
25天前
|
JavaScript 前端开发 开发者
jQuery：JavaScript库的瑰宝
jQuery：JavaScript库的瑰宝
神明木佑
39 3
神明木佑
|
27天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
神明木佑
24 4
小王老师呀
|
12天前
.NET 4.0下实现.NET4.5的Task类相似功能组件
【10月更文挑战第29天】在.NET 4.0 环境下，可以使用 `BackgroundWorker` 类来实现类似于 .NET 4.5 中 `Task` 类的功能。`BackgroundWorker` 允许在后台执行耗时操作，同时不会阻塞用户界面线程，并支持进度报告和取消操作。尽管它有一些局限性，如复杂的事件处理模型和不灵活的任务管理方式，但在某些情况下仍能有效替代 `Task` 类。
小王老师呀
23 0
Star时光
|
22天前
|
JavaScript 前端开发 API
深入了解jQuery：快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery：快速、高效的JavaScript库
Star时光
8 0
cqtianxin1
|
1月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
cqtianxin1
38 0
cqtianxin1
|
1月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
cqtianxin1
10 0
派大鑫的工作室
|
1月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
派大鑫的工作室
15 0
派大鑫的工作室
|
1月前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法
派大鑫的工作室
13 0

热门文章

最新文章

  • 1
    在JavaScript面向对象编程中使用继承(3)
  • 2
    web worker 是运行在后台的 JavaScript，不会影响页面的性能。
  • 3
    HTML，javascript，Json数据在线格式化工具
  • 4
    纯JS控制textarea的maxLength
  • 5
    一看就会的Next.js App Router版 -- Routing（上）（一）
  • 6
    《JavaScript应用程序设计》一一2.9 方法API的设计
  • 7
    3.Ext JS 程序中使用路由
  • 8
    YY游戏云的angular js实践总结
  • 9
    javascript类型系统之Array
  • 10
    js: 删除node的所有child
  • 1
    C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作
    67
  • 2
    安装ASP.NET AJAX (一安装)
    86
  • 3
    kik-net、peer、yjk、pkpm、midas、sac地震波格式互相转换
    162
  • 4
    保姆级：Windows Server 2012上安装.NET Framework 3.5
    1091
  • 5
    .Net4.0 Web.config 配置实践
    59
  • 6
    分享几个.NET开源的AI和LLM相关项目框架
    90
  • 7
    C#/.NET快速上手学习资料集（让现在的自己不再迷茫）
    184
  • 8
    七天.NET 8操作SQLite入门到实战 - （2）第七天Blazor班级管理页面编写和接口对接
    128
  • 9
    .NET开源、功能强大、跨平台的图表库
    81
  • 10
    一个库帮你轻松的创建漂亮的.NET控制台应用程序
    116

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • jQuery开发教程
  • HTML5 新特性教程
  • Vue.js完全自学手册图文教程
  • Ajax入门

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • WEB网页编程实战
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    DataWorks智能数据建模全面公测开始啦！