本文介绍了一系列jQuery技巧，包括动态修改控件外观、动态切换CSS样式、使用Prepend-Wrap-Append组合方法、操作集合、扩展jQuery系统方法等。通过具体示例展示了如何在网页中灵活运用这些技巧。
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(ByChengKing)
扫一扫
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
