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这个强大组件的功能, 如下:

1scriptsrc=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">
6functionGetElement()
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元素
12alert(tb.value);
13
14//<summary>通过class属性获取元素的客户端Dom对象</summary>
15div1=$(".KingClass")[0];
16alert(div1.innerText);
17
18//<summary>通过Html标签获取元素的客户端Dom对象</summary>
19div1=$("div")[1];
20alert(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">
6functionChangeObjectType()
7{
8//调用Dom对象方法
9tb_dom=document.getElementById('');
10alert(tb_dom.innerHTML);
11
12//用$方法把Dom对象转换为jQuery对象,再调用jQuery对象方法
13tb_jQuery=$(tb_dom);
14alert(tb_jQuery.html());
15
16//取jQuery对象中的Dom对象
17tb_dom2=tb_jQuery[0];
18alert(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">
6functionVisitInnerElement()
7{
8//取得Div中第二个P元素
9p=$("#P").eq(1);//等号左边的p对象为p对象集合
10alert(p.html());
11
12//取得Div中第一个P元素
13p=$("#P:first").eq(0);//first为关键字
14alert(p.html());
15
16//取得Div中第二个P元素
17p=$("#P:last").eq(0);//last为关键字
18alert(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">
6functionHideElement()
7{
8p=$("#P").eq(0);
9p.hide();//隐藏方法
10}
11functionShowElement()
12{
13p=$("#P").eq(0);
14p.show();//显示方法
15}
16functionHideSecondSegment()
17{
18$("p:eq(1)").hide();//指定p集合中的元素
19}
20functionHideVisibleDivElement()
21{
22$("div:visible").hide();//根据div的状态选择可见的div集合
23}
24functionShowHideDivElement()
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
7functionGetLiElementHtml()
8{
9liS=$("ulli");
10//遍历元素
11for(vari=0;iliS.length;i++)
12{
13alert(liS.eq(i).html());
14}
15}
16//获取ul中的li,且li的class="k"
17functionGetLiElementHtmlWithClassIsK()
18{
19liS=$("ulli.k");
20//遍历元素
21for(vari=0;iliS.length;i++)
22{
23alert(liS.eq(i).html());
24}
25}
26//取得含有name属性的元素的值
27functionGetElementValueWithNameProperty()
28{
29alert($("input[@name]").eq(1).val());
30alert($("input[@name]").eq(2).val());
31}
32//根据属性值获取元素
33functionGetTextBoxValue()
34{
35alert($("input[@name=TextBox1]").val());
36}
37//根据属性类型和状态获取元素
38functionGetSelectRadioValue()
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();"