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

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

    技术2022-05-11  21

     

     

    (一).概述 

    现在有好多比较优秀的客户端脚本语言组件, 如: 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! 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> 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="https://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="https://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="https://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(" "); 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(' ');  7         });       8          9         $('div.roundbox').prepend(' ')10         .append(' ');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://www.cnblogs.com/Files/MVP33650/JQuery(ByChengKing).rar 

     

    .

     如果个别语句不明白, 您可以在下面留言.

    Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1919265

    专利

    最新回复(0)