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

来源：互联网发布：算法英语翻译编辑：程序博客网时间：2024/06/08 15:41

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(ByChengKing)