JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]

<iframe align="top" marginwidth="0" marginheight="0" src="http://www.zealware.com/46860.html" frameborder="0" width="468" scrolling="no" height="60"></iframe>

(一).概述

现在有好多比较优秀的客户端脚本语言组件, 如: 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 scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript">script>

(三).代码示例

1. 访问页面元素

1headrunat="server">
2title>访问元素title>
3scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript">script>
4<!--</span><span style="COLOR: #000000">将jQuery引用进来</span><span style="COLOR: #000000">-->
5scripttype="text/javascript">
6 functionGetElement()
7 {
8//<summary>通过ID获取元素TextBox1的客户端Dom对象</summary>
9tb=$("#")[0];//1.通过索引获取Dom对象
10tb=$("#").eq(0)[0];//2.通过eq,eq(0)获取的是JQuery对象,再通过索引获取Dom对象.
11tb=$("#").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 }
22script>
23head>
24body>
25formid="form1"runat="server">
26div>
27asp:TextBoxID="TextBox1"runat="server"Text="Hello!ChengKing.">asp:TextBox>
28divclass="KingClass">Hello!Rosediv>br/>
29inputtype=buttonvalue="获取元素"onclick="GetElement();"/>
30div>
31form>
32body>

2. Dom对象和jQuery对象转换示例

1headrunat="server">
2title>Dom和jQuery对象转换示例title>
3scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript">script>
4<!--</span><span style="COLOR: #000000">将jQuery引用进来</span><span style="COLOR: #000000">-->
5scripttype="text/javascript">
6 functionChangeObjectType()
7 {
8//调用Dom对象方法
9tb_dom=document.getElementById('' );
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 }
21script>
22head>
23body>
24formid="form1"runat="server">
25div>
26divid="div1"runat=server>
27Hello! ChengKing.
28div>
29inputtype=buttonvalue="对象转换"onclick="ChangeObjectType();"/>
30div>
31form>
32body>

3. 访问对象内部元素

1headrunat="server">
2title>访问内部元素title>
3scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript">script>
4<!--</span><span style="COLOR: #000000">将jQuery引用进来</span><span style="COLOR: #000000">-->
5scripttype="text/javascript">
6 functionVisitInnerElement()
7 {
8//取得Div中第二个P元素
9p=$("#P").eq(1);//等号左边的p对象为p对象集合
10 alert(p.html());
11
12//取得Div中第一个P元素
13p=$("#P:first").eq(0);//first为关键字
14 alert(p.html());
15
16//取得Div中第二个P元素
17p=$("#P:last").eq(0);//last为关键字
18 alert(p.html());
19
20 }
21script>
22head>
23body>
24formid="form1"runat="server">
25div>
26divid="div1"runat=server>
27p>Hello!ChengKing.p>
28p>Hello!Rose.p>
29div>
30inputtype=buttonvalue="访问内部元素"onclick="VisitInnerElement();"/>
31div>
32form>
33body>

4. 显示/隐藏元素

1headrunat="server">
2title>显示/隐藏元素title>
3scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript">script>
4<!--</span><span style="COLOR: #000000">将jQuery引用进来</span><span style="COLOR: #000000">-->
5scripttype="text/javascript">
6 functionHideElement()
7 {
8p=$("#P").eq(0 );
9p.hide();//隐藏方法
10 }
11 functionShowElement()
12 {
13p=$("#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 }
28script>
29head>
30body>
31formid="form1"runat="server">
32divid="div1"runat=server>
33p>段1:Hello!ChengKing.p>
34p>段2:Hello!Rose.p>
35p>段3:Hello!King.p>
36div>
37inputtype="button"value="隐藏第一段"onclick="HideElement();"/>
38inputtype="button"value="显示第一段"onclick="ShowElement();"/>
39inputtype="button"value="隐藏第二段"onclick="HideSecondSegment();"/>
40inputtype="button"value="隐藏显示的Div"onclick="HideVisibleDivElement();"/>
41inputtype="button"value="显示隐藏的Div"onclick="ShowHideDivElement();"/>
42form>
43body>

5. 根据条件查询对象元素集合

1headrunat="server">
2title>根据条件获取页面中的元素对象集合title>
3scriptsrc=Resources\js\jquery-1.2.1.jstype="text/javascript">script>
4<!--</span><span style="COLOR: #000000">将jQuery引用进来</span><span style="COLOR: #000000">-->
5scripttype="text/javascript">
6//获取ul中的li
7 functionGetLiElementHtml()
8 {
9liS=$("ulli" );
10//遍历元素
11for(vari=0;iliS.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;iliS.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 }
42script>
43head>
44body>
45formid="form1"runat="server">
46div>
47ul>
48li>Hello!ChengKing.li>
49liclass="k">Hello!Rose.li>
50liclass="k">Hello!King.li>
51
52ul>
53inputtype="button"value="获取所有li元素内容"onclick="GetLiElementHtml();"colo

分享到：

Asp.net 2.0 自定义控件开发[开发一个图表 ... | LINQ

• 2007-12-18 22:06
• 浏览 217
• 评论(0)
• 相关推荐

评论

发表评论

您还没有登录,请您登录后再发表评论