JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)二
2008-12-15 15:10
645 查看
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(ByChengKing)
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(ByChengKing)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)六
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- 【转】JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)(转)
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)一
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)转
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)三
- JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载](一)