JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
目录
(一).概述
(二).预备条件
(三).代码示例
2.Dom对象和jQuery对象转换示例
3.访问对象内部元素
4.显示/隐藏元素
5.根据条件查询对象元素集合
6.Document.Ready方法示例
7.Html方法示例
8.元素事件注册以及实现示例
9.Filter和no方法使用示例
10.一个很有用的方法:Css方法使用示例
11.滑动显示/隐藏元素
12.操作父元素
13.Toggle方法使用示例
14.Animate方法使用示例
15.改变表格行为(bycalssproperty)
16.操作jQuery属性示例
17.利用Wrap方法动态的修改控件外观
18.动态切换Css样式
19.Prepend-Wrap-Append组合方法示例
20.操作集合示例
21.扩展jQuery系统方法
22.触发元素事件示例
23.为元素绑定和移除事件
24.each方法用法
25.检查浏览器能力
26.解决$符被jQuery占用问题,prototype类库也有$方法
(一).概述
现在有好多比较优秀的客户端脚本语言组件, 如: Prototype、YUI、jQuery、mootools、Bindows, Scriptaculous, FCKEditor 等, 都非常不错, 最近研究了一下 jQuery,在学习时顺便整理了一个教程, 后面会有示例代码下载链接.
jQuery是JavaScript语言的一个新的资源库(框架) ,它能快速,简洁的使用HTML documents, handle events, perform animations,并且能把Ajax交互应用到网页,jQuery能够改变你书写JavaScript的方式.
Author:【夜战鹰】【ChengKing(ZhengJian)】
(二).预备条件
本文章中所有示例都是基于Asp.net 2.0运行环境.
不需要安装操作, 只需要把jQuery脚本文本引入页面, 即可使用jQuery这个强大组件的功能, 如下:
1
<
scriptsrc
=
Resources\js\jquery
-
1.2
.
1
.jstype
=
"
text/javascript
"
></
script
>
(三).代码示例
1. 访问页面元素
1<headrunat="server">
2<title>访问元素</title>
3<scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript"></script>
4<!--将jQuery引用进来-->
5<scripttype="text/javascript">
6 functionGetElement()
7 {
8//<summary>通过ID获取元素TextBox1的客户端Dom对象</summary>
9tb=$("#<%=TextBox1.ClientID%>")[0];//1.通过索引获取Dom对象
10tb=$("#<%=TextBox1.ClientID%>").eq(0)[0];//2.通过eq,eq(0)获取的是JQuery对象,再通过索引获取Dom对象.
11tb=$("#<%=TextBox1.ClientID%>").get(0);//3.通过get方法获取Dom元素
12 alert(tb.value);
13
14//<summary>通过class属性获取元素的客户端Dom对象</summary>
15div1=$(".KingClass")[0 ];
16 alert(div1.innerText);
17
18//<summary>通过Html标签获取元素的客户端Dom对象</summary>
19div1=$("div")[1 ];
20 alert(div1.innerText);
21 }
22</script>
23</head>
24<body>
25<formid="form1"runat="server">
26<div>
27<asp:TextBoxID="TextBox1"runat="server"Text="Hello!ChengKing."></asp:TextBox>
28<divclass="KingClass">Hello!Rose</div><br/>
29<inputtype=buttonvalue="获取元素"onclick="GetElement();"/>
30</div>
31</form>
32</body>
2<title>访问元素</title>
3<scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript"></script>
4<!--将jQuery引用进来-->
5<scripttype="text/javascript">
6 functionGetElement()
7 {
8//<summary>通过ID获取元素TextBox1的客户端Dom对象</summary>
9tb=$("#<%=TextBox1.ClientID%>")[0];//1.通过索引获取Dom对象
10tb=$("#<%=TextBox1.ClientID%>").eq(0)[0];//2.通过eq,eq(0)获取的是JQuery对象,再通过索引获取Dom对象.
11tb=$("#<%=TextBox1.ClientID%>").get(0);//3.通过get方法获取Dom元素
12 alert(tb.value);
13
14//<summary>通过class属性获取元素的客户端Dom对象</summary>
15div1=$(".KingClass")[0 ];
16 alert(div1.innerText);
17
18//<summary>通过Html标签获取元素的客户端Dom对象</summary>
19div1=$("div")[1 ];
20 alert(div1.innerText);
21 }
22</script>
23</head>
24<body>
25<formid="form1"runat="server">
26<div>
27<asp:TextBoxID="TextBox1"runat="server"Text="Hello!ChengKing."></asp:TextBox>
28<divclass="KingClass">Hello!Rose</div><br/>
29<inputtype=buttonvalue="获取元素"onclick="GetElement();"/>
30</div>
31</form>
32</body>
2. Dom对象和jQuery对象转换示例
1<headrunat="server">
2<title>Dom和jQuery对象转换示例</title>
3<scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript"></script>
4<!--将jQuery引用进来-->
5<scripttype="text/javascript">
6 functionChangeObjectType()
7 {
8//调用Dom对象方法
9tb_dom=document.getElementById('<%=div1.ClientID%>' );
10 alert(tb_dom.innerHTML);
11
12//用$方法把Dom对象转换为jQuery对象,再调用jQuery对象方法
13tb_jQuery= $(tb_dom);
14 alert(tb_jQuery.html());
15
16//取jQuery对象中的Dom对象
17tb_dom2=tb_jQuery[0 ];
18 alert(tb_dom2.innerHTML);
19
20 }
21</script>
22</head>
23<body>
24<formid="form1"runat="server">
25<div>
26<divid="div1"runat=server>
27Hello! ChengKing.
28</div>
29<inputtype=buttonvalue="对象转换"onclick="ChangeObjectType();"/>
30</div>
31</form>
32</body>
2<title>Dom和jQuery对象转换示例</title>
3<scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript"></script>
4<!--将jQuery引用进来-->
5<scripttype="text/javascript">
6 functionChangeObjectType()
7 {
8//调用Dom对象方法
9tb_dom=document.getElementById('<%=div1.ClientID%>' );
10 alert(tb_dom.innerHTML);
11
12//用$方法把Dom对象转换为jQuery对象,再调用jQuery对象方法
13tb_jQuery= $(tb_dom);
14 alert(tb_jQuery.html());
15
16//取jQuery对象中的Dom对象
17tb_dom2=tb_jQuery[0 ];
18 alert(tb_dom2.innerHTML);
19
20 }
21</script>
22</head>
23<body>
24<formid="form1"runat="server">
25<div>
26<divid="div1"runat=server>
27Hello! ChengKing.
28</div>
29<inputtype=buttonvalue="对象转换"onclick="ChangeObjectType();"/>
30</div>
31</form>
32</body>
3. 访问对象内部元素
1<headrunat="server">
2<title>访问内部元素</title>
3<scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript"></script>
4<!--将jQuery引用进来-->
5<scripttype="text/javascript">
6 functionVisitInnerElement()
7 {
8//取得Div中第二个P元素
9p=$("#<%=div1.ClientID%>P").eq(1);//等号左边的p对象为p对象集合
10 alert(p.html());
11
12//取得Div中第一个P元素
13p=$("#<%=div1.ClientID%>P:first").eq(0);//first为关键字
14 alert(p.html());
15
16//取得Div中第二个P元素
17p=$("#<%=div1.ClientID%>P:last").eq(0);//last为关键字
18 alert(p.html());
19
20 }
21</script>
22</head>
23<body>
24<formid="form1"runat="server">
25<div>
26<divid="div1"runat=server>
27<p>Hello!ChengKing.</p>
28<p>Hello!Rose.</p>
29</div>
30<inputtype=buttonvalue="访问内部元素"onclick="VisitInnerElement();"/>
31</div>
32</form>
33</body>
2<title>访问内部元素</title>
3<scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript"></script>
4<!--将jQuery引用进来-->
5<scripttype="text/javascript">
6 functionVisitInnerElement()
7 {
8//取得Div中第二个P元素
9p=$("#<%=div1.ClientID%>P").eq(1);//等号左边的p对象为p对象集合
10 alert(p.html());
11
12//取得Div中第一个P元素
13p=$("#<%=div1.ClientID%>P:first").eq(0);//first为关键字
14 alert(p.html());
15
16//取得Div中第二个P元素
17p=$("#<%=div1.ClientID%>P:last").eq(0);//last为关键字
18 alert(p.html());
19
20 }
21</script>
22</head>
23<body>
24<formid="form1"runat="server">
25<div>
26<divid="div1"runat=server>
27<p>Hello!ChengKing.</p>
28<p>Hello!Rose.</p>
29</div>
30<inputtype=buttonvalue="访问内部元素"onclick="VisitInnerElement();"/>
31</div>
32</form>
33</body>
4. 显示/隐藏元素
1<headrunat="server">
2<title>显示/隐藏元素</title>
3<scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript"></script>
4<!--将jQuery引用进来-->
5<scripttype="text/javascript">
6 functionHideElement()
7 {
8p=$("#<%=div1.ClientID%>P").eq(0 );
9p.hide();//隐藏方法
10 }
11 functionShowElement()
12 {
13p=$("#<%=div1.ClientID%>P").eq(0 );
14p.show();//显示方法
15 }
16 functionHideSecondSegment()
17 {
18$("p:eq(1)").hide();//指定p集合中的元素
19 }
20 functionHideVisibleDivElement()
21 {
22$("div:visible").hide();//根据div的状态选择可见的div集合
23 }
24 functionShowHideDivElement()
25 {
26$("div:hidden").show();//根据div的状态选择不可见的div集合
27 }
28</script>
29</head>
30<body>
31<formid="form1"runat="server">
32<divid="div1"runat=server>
33<p>段1:Hello!ChengKing.</p>
34<p>段2:Hello!Rose.</p>
35<p>段3:Hello!King.</p>
36</div>
37<inputtype="button"value="隐藏第一段"onclick="HideElement();"/>
38<inputtype="button"value="显示第一段"onclick="ShowElement();"/>
39<inputtype="button"value="隐藏第二段"onclick="HideSecondSegment();"/>
40<inputtype="button"value="隐藏显示的Div"onclick="HideVisibleDivElement();"/>
41<inputtype="button"value="显示隐藏的Div"onclick="ShowHideDivElement();"/>
42</form>
43</body>
2<title>显示/隐藏元素</title>
3<scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript"></script>
4<!--将jQuery引用进来-->
5<scripttype="text/javascript">
6 functionHideElement()
7 {
8p=$("#<%=div1.ClientID%>P").eq(0 );
9p.hide();//隐藏方法
10 }
11 functionShowElement()
12 {
13p=$("#<%=div1.ClientID%>P").eq(0 );
14p.show();//显示方法
15 }
16 functionHideSecondSegment()
17 {
18$("p:eq(1)").hide();//指定p集合中的元素
19 }
20 functionHideVisibleDivElement()
21 {
22$("div:visible").hide();//根据div的状态选择可见的div集合
23 }
24 functionShowHideDivElement()
25 {
26$("div:hidden").show();//根据div的状态选择不可见的div集合
27 }
28</script>
29</head>
30<body>
31<formid="form1"runat="server">
32<divid="div1"runat=server>
33<p>段1:Hello!ChengKing.</p>
34<p>段2:Hello!Rose.</p>
35<p>段3:Hello!King.</p>
36</div>
37<inputtype="button"value="隐藏第一段"onclick="HideElement();"/>
38<inputtype="button"value="显示第一段"onclick="ShowElement();"/>
39<inputtype="button"value="隐藏第二段"onclick="HideSecondSegment();"/>
40<inputtype="button"value="隐藏显示的Div"onclick="HideVisibleDivElement();"/>
41<inputtype="button"value="显示隐藏的Div"onclick="ShowHideDivElement();"/>
42</form>
43</body>
5. 根据条件查询对象元素集合
1<headrunat="server">
2<title>根据条件获取页面中的元素对象集合</title>
3<scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript"></script>
4<!--将jQuery引用进来-->
5<scripttype="text/javascript">
6//获取ul中的li
7 functionGetLiElementHtml()
8 {
9liS=$("ulli" );
10//遍历元素
11for(vari=0;i<liS.length;i++ )
12 {
13 alert(liS.eq(i).html());
14 }
15 }
16//获取ul中的li,且li的class="k"
17 functionGetLiElementHtmlWithClassIsK()
18 {
19liS=$("ulli.k" );
20//遍历元素
21for(vari=0;i<liS.length;i++ )
22 {
23 alert(liS.eq(i).html());
24 }
25 }
26//取得含有name属性的元素的值
27 functionGetElementValueWithNameProperty()
28 {
29alert($("input[@name]").eq(1 ).val());
30alert($("input[@name]").eq(2 ).val());
31 }
32//根据属性值获取元素
33 functionGetTextBoxValue()
34 {
35alert($("input[@name=TextBox1]" ).val());
36 }
37//根据属性类型和状态获取元素
38 functionGetSelectRadioValue()
39 {
40alert($("input[@type=radio][@checked]" ).val());
41 }
42</script>
43</head>
44<body>
45<formid="form1"runat="server">
46<div>
47<ul>
48<li>Hello!ChengKing.</licolor: #000
2<title>根据条件获取页面中的元素对象集合</title>
3<scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript"></script>
4<!--将jQuery引用进来-->
5<scripttype="text/javascript">
6//获取ul中的li
7 functionGetLiElementHtml()
8 {
9liS=$("ulli" );
10//遍历元素
11for(vari=0;i<liS.length;i++ )
12 {
13 alert(liS.eq(i).html());
14 }
15 }
16//获取ul中的li,且li的class="k"
17 functionGetLiElementHtmlWithClassIsK()
18 {
19liS=$("ulli.k" );
20//遍历元素
21for(vari=0;i<liS.length;i++ )
22 {
23 alert(liS.eq(i).html());
24 }
25 }
26//取得含有name属性的元素的值
27 functionGetElementValueWithNameProperty()
28 {
29alert($("input[@name]").eq(1 ).val());
30alert($("input[@name]").eq(2 ).val());
31 }
32//根据属性值获取元素
33 functionGetTextBoxValue()
34 {
35alert($("input[@name=TextBox1]" ).val());
36 }
37//根据属性类型和状态获取元素
38 functionGetSelectRadioValue()
39 {
40alert($("input[@type=radio][@checked]" ).val());
41 }
42</script>
43</head>
44<body>
45<formid="form1"runat="server">
46<div>
47<ul>
48<li>Hello!ChengKing.</licolor: #000
分享到：
评论