JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
2008-04-10 14:04
1041 查看
(一).概述 现在有好多比较优秀的客户端脚本语言组件, 如: 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
(三).代码示例
1. 访问页面元素
1
2访问元素
3
4
5
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
23
24
25
26
27
28
29
30
31
32
2. Dom对象和jQuery对象转换示例
1
2Dom和jQuery对象转换示例
3
4
5
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
22
23
24
25
26
27 Hello! ChengKing.
28
29
30
31
32
3. 访问对象内部元素
1
2访问内部元素
3
4
5
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
22
23
24
25
26
27
28
29
30
31
32
33
4. 显示/隐藏元素
1
2显示/隐藏元素
3
4
5
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
5. 根据条件查询对象元素集合
1
2根据条件获取页面中的元素对象集合
3
4
5
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
43
44
45
46
47
48Hello! ChengKing.
49Hello! Rose.
50Hello! King.
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
6. Document.Ready方法示例
1
2Document.Ready方法示例
3
4
5 function Init1()
6 {
7 alert('Document.body.onload事件执行!');
8 }
9 function Init2()
10 {
11 alert('$(document).ready事件执行!');
12 }
13
14
15
16
17
18
19
20 //ready方法 完整写法
21 $(document).ready(function()
22 {
23 Init2();
24 });
25 //ready方法 简写
26 // $(function() {
27 // Init2();
28 // });
29 document.body.onload=Init1;
30
31
32
33
7. Html方法示例
1
2使用Html方法
3
4
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
22
23
24
25
26
27
28
29
30
31
32
33
8. 元素事件注册以及实现示例
1
2给元素注册事件及实现事件
3
4
5 $(document).ready(function()
6 {
7 $("#button1").click(function() {
8 alert('Button Element ClienEvent Runned.');
9 });
10 })
11
12
13
14
15
16
17
18
19
20
9. Filter和no方法使用示例
1
2Filter and No方法使用
3
4
5 function ChangeBorder()
6 {
7 $("ul").not("[li]").css("border", "1px solid blue");
8 }
9
10
11
12
13
14
15Hi King!
16Hi Rose!
17
18
19
20
21
22
23
10. 一个很有用的方法: Css方法使用示例
1
2使用Css方法, 比较有用的一个方法
3
4
5 function SetBorderStyle()
6 {
7 $("ul").css("border", "1px solid blue");
8 $("ul li").css("border", "1px solid red");
9 }
10
11
12
13
14
15
16
17
18
19
20
21
22
23
11. 滑动显示/隐藏元素
1
2滑动显示隐藏元素
3
4
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
16
17
18
19
20
21
22
23
24
12. 操作父元素
1
2操作父元素
3
4
5
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
14
15
16
17
23
24
13. Toggle方法使用示例
1
2Toggle方法使用
3
4
5 $(document).ready(function() {
6 $("#btn").toggle(function() {
7 $(".pic").show('slow');
8 }, function() {
9 $(".pic").hide('fast');
10 });
11 });
12
13
14
15
16
17
18
19
20
21
14. Animate方法使用示例
1
2Animate方法示例
3
4
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
19
20
21
22
23
24
25
26
27
15. 改变表格行为(by calss property)
1
2改变表格行为
3
4
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
17
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
48
49
50
51
52
53
83
84
85
86
16. 操作jQuery属性示例
1
2操作元素属性
3
4 .blue {
5 background:#6699FF;
6 color:#FFFFFF;
7 line-height:20px;
8 height:30px;
9 }
10
11
12
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
34
35
36
37
38
39
40
41
42
17. 利用Wrap方法动态的修改控件外观
1
2Wrap方法
3
4
5 $(document).ready(function(){
6 $("p").wrap("");
7 });
8
9
10 .wrap {
11 background:#0066FF;
12 color:#FFFFFF;
13 line-height:20px;
14 height:30px;
15 }
16
17
18
19
20
21
22
23
24
18. 动态切换Css样式
1
2动态切换样式
3
4
5
6
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
25
26
27
28
29
31
32
33
34
35
19. Prepend-Wrap-Append 组合方法示例
1
2Use Prepend-Wrap-Append Method
3
4
5
6 $(document).ready(function(){ $("div.roundbox") .wrap('');
7 });
8
9 $('div.roundbox').prepend('')
10 .append('');
11
12
13
14
15
16
17
18 正文内容
19
20 正文内容
21
22 正文内容
23
24
25
26
27
28
20.操作集合示例
1
2操作集合
3
4
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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
21. 扩展jQuery系统方法
1
2扩展JQuery系统方法
3
4
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
20
21
22
23
24
25
26
27
28
22. 触发元素事件示例
1
2触发元素事件示例
3
4
5
6
7
8
9
10
11
12
13
14
15
23. 为元素绑定和移除事件
1
2为元素绑定和移除事件
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
24. each方法用法
1
2Each用法
3
4
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
14
15
16
17
18
19
20
21
22
25. 检查浏览器能力(打开jQuery.js源代码, 发现组件本身已经支持多种浏览器了!)
1
2检查浏览器能力
3
4
5 function Check()
6 {
7 alert($.browser.msie);
8 alert($.browser.safari);
9 alert($.browser.opera);
10 alert($.browser.mozilla);
11 }
12
13
14
15
16
17
18
19
20
26. 解决$符被jQuery占用问题, prototype类库也有$方法
1
2解决$符被jQuery占用问题
3
4
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
20
21
22
23
24
25
26
27
28
29
30
(四). 其它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
.
如果个别语句不明白, 您可以在下面留言.
jQuery是JavaScript语言的一个新的资源库(框架) ,它能快速,简洁的使用HTML documents, handle events, perform animations,并且能把Ajax交互应用到网页,jQuery能够改变你书写JavaScript的方式.
(二).预备条件本文章中所有示例都是基于Asp.net 2.0运行环境.
不需要安装操作, 只需要把jQuery脚本文本引入页面, 即可使用jQuery这个强大组件的功能, 如下:1
(三).代码示例
1. 访问页面元素
1
2
3
4
5
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
23
24
25
26
27
28
Hello! Rose
29
30
31
32
2. Dom对象和jQuery对象转换示例
1
2
3
4
5
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
22
23
24
25
26
27 Hello! ChengKing.
28
29
30
31
32
3. 访问对象内部元素
1
2
3
4
5
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
22
23
24
25
26
27
Hello! ChengKing.
28
Hello! Rose.
29
30
31
32
33
4. 显示/隐藏元素
1
2
3
4
5
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
29
30
31
32
33
段1: Hello! ChengKing.
34
段2: Hello! Rose.
35
段3: Hello! King.
36
37
38
39
40
41
42
43
5. 根据条件查询对象元素集合
1
2
3
4
5
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
6. Document.Ready方法示例
1
2
3
4
5 function Init1()
6 {
7 alert('Document.body.onload事件执行!');
8 }
9 function Init2()
10 {
11 alert('$(document).ready事件执行!');
12 }
13
14
15
16
17
18
19
20 //ready方法 完整写法
21 $(document).ready(function()
22 {
23 Init2();
24 });
25 //ready方法 简写
26 // $(function() {
27 // Init2();
28 // });
29 document.body.onload=Init1;
30
31
32
33
7. Html方法示例
1
2
3
4
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
22
23
24
25
26
27
28
29
30
31
32
33
8. 元素事件注册以及实现示例
1
2
3
4
5 $(document).ready(function()
6 {
7 $("#button1").click(function() {
8 alert('Button Element ClienEvent Runned.');
9 });
10 })
11
12
13
14
15
16
17
18
19
20
9. Filter和no方法使用示例
1
2
3
4
5 function ChangeBorder()
6 {
7 $("ul").not("[li]").css("border", "1px solid blue");
8 }
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
10. 一个很有用的方法: Css方法使用示例
1
2
3
4
5 function SetBorderStyle()
6 {
7 $("ul").css("border", "1px solid blue");
8 $("ul li").css("border", "1px solid red");
9 }
10
11
12
13
14
15
16
17
18
19
20
21
22
23
11. 滑动显示/隐藏元素
1
2
3
4
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
16
17
18
19
20
21
22
23
24
12. 操作父元素
1
2
3
4
5
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
14
15
16
17
23
24
13. Toggle方法使用示例
1
2
3
4
5 $(document).ready(function() {
6 $("#btn").toggle(function() {
7 $(".pic").show('slow');
8 }, function() {
9 $(".pic").hide('fast');
10 });
11 });
12
13
14
15
16
17
18
19
20
21
14. Animate方法使用示例
1
2
3
4
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
19
20
21
22
23
24
25
26
27
15. 改变表格行为(by calss property)
1
2
3
4
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
17
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
48
49
50
51
52
53
姓名 | 年龄 | ||
---|---|---|---|
张三 | 20 | 00000 | ****** |
李四 | 20 | 00000 | ****** |
小刘 | 20 | 00000 | ***** |
83
84
85
86
16. 操作jQuery属性示例
1
2
3
4 .blue {
5 background:#6699FF;
6 color:#FFFFFF;
7 line-height:20px;
8 height:30px;
9 }
10
11
12
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
34
35
36
37
38
39
Hi King! |
40
41
42
17. 利用Wrap方法动态的修改控件外观
1
2
3
4
5 $(document).ready(function(){
6 $("p").wrap("");
7 });
8
9
10 .wrap {
11 background:#0066FF;
12 color:#FFFFFF;
13 line-height:20px;
14 height:30px;
15 }
16
17
18
19
20
21
Test Paragraph.
22
23
24
18. 动态切换Css样式
1
2
3
4
5
6
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
25
26
27
28
29
注意看一下我的背景色
30
30
31
32
33
34
35
19. Prepend-Wrap-Append 组合方法示例
1
2
3
4
5
6 $(document).ready(function(){ $("div.roundbox") .wrap('');
7 });
8
9 $('div.roundbox').prepend('')
10 .append('');
11
12
13
14
15
Head
16
17
18 正文内容
19
20 正文内容
21
22 正文内容
23
24
25
26
Foot
27
28
20.操作集合示例
1
2
3
4
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
16
17
18
19
20
21
Hi! King.
22
Hi! Rose.
23
Hi! James.
24
Hi! ChengKing.
25
26
27
28
29
30
21. 扩展jQuery系统方法
1
2
3
4
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
20
21
22
23
24
25
26
27
28
22. 触发元素事件示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
23. 为元素绑定和移除事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
24. each方法用法
1
2
3
4
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
14
15
16
17
18
19
20
21
22
25. 检查浏览器能力(打开jQuery.js源代码, 发现组件本身已经支持多种浏览器了!)
1
2
3
4
5 function Check()
6 {
7 alert($.browser.msie);
8 alert($.browser.safari);
9 alert($.browser.opera);
10 alert($.browser.mozilla);
11 }
12
13
14
15
16
17
18
19
20
26. 解决$符被jQuery占用问题, prototype类库也有$方法
1
2
3
4
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
20
21
22
23
24
Hi! Rose.
25
26
27
28
29
30
(四). 其它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
.
如果个别语句不明白, 您可以在下面留言.
相关文章推荐
- 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运行环境)[示例代码下载]