(一).概述
现在有好多比较优秀的客户端脚本语言组件, 如: 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. 访问页面元素 2. Dom对象和jQuery对象转换示例
3. 访问对象内部元素
4. 显示/隐藏元素
5. 根据条件查询对象元素集合
2 title>访问元素title>
3 script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4
5 script type="text/javascript">
6 function GetElement()
7 {
8 //
9 tb = $("#")[0]; //1. 通过索引获取Dom对象
10 tb = $("#").eq(0)[0]; //2. 通过eq, eq(0)获取的是JQuery对象, 再通过索引获取Dom对象.
11 tb = $("#").get(0); //3. 通过get方法获取Dom元素
12 alert(tb.value);
13
14 //
15 div1 = $(".KingClass")[0];
16 alert(div1.innerText);
17
18 //
19 div1 = $("div")[1];
20 alert(div1.innerText);
21 }
22 script>
23 head>
24 body>
25 form id="form1" runat="server">
26 div>
27 asp:TextBox ID="TextBox1" runat="server" Text="Hello! ChengKing.">asp:TextBox>
28 div class="KingClass">Hello! Rosediv> br />
29 input type = button value="获取元素" onclick = "GetElement();" />
30 div>
31 form>
32 body>
2 title>Dom和jQuery对象转换示例title>
3 script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4
5 script type="text/javascript">
6 function ChangeObjectType()
7 {
8 //调用Dom对象方法
9 tb_dom = document.getElementById('');
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 script>
22 head>
23 body>
24 form id="form1" runat="server">
25 div>
26 div id="div1" runat=server>
27 Hello! ChengKing.
28 div>
29 input type = button value="对象转换" onclick = "ChangeObjectType();" />
30 div>
31 form>
32 body>
2 title>访问内部元素title>
3 script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4
5 script type="text/javascript">
6 function VisitInnerElement()
7 {
8 //取得Div中第二个P元素
9 p = $("# P").eq(1); //等号左边的p对象为p对象集合
10 alert(p.html());
11
12 //取得Div中第一个P元素
13 p = $("# P:first").eq(0); //first为关键字
14 alert(p.html());
15
16 //取得Div中第二个P元素
17 p = $("# P:last").eq(0); //last为关键字
18 alert(p.html());
19
20 }
21 script>
22 head>
23 body>
24 form id="form1" runat="server">
25 div>
26 div id="div1" runat=server>
27 p>Hello! ChengKing.p>
28 p>Hello! Rose.p>
29 div>
30 input type = button value="访问内部元素" onclick = "VisitInnerElement();" />
31 div>
32 form>
33 body>
2 title>显示/隐藏元素title>
3 script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4
5 script type="text/javascript">
6 function HideElement()
7 {
8 p = $("# P").eq(0);
9 p.hide(); //隐藏方法
10 }
11 function ShowElement()
12 {
13 p = $("# 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 script>
29 head>
30 body>
31 form id="form1" runat="server">
32 div id="div1" runat=server>
33 p>段1: Hello! ChengKing.p>
34 p>段2: Hello! Rose.p>
35 p>段3: Hello! King.p>
36 div>
37 input type="button" value="隐藏第一段" onclick="HideElement();" />
38 input type="button" value="显示第一段" onclick="ShowElement();" />
39 input type="button" value="隐藏第二段" onclick="HideSecondSegment();" />
40 input type="button" value="隐藏显示的Div" onclick="HideVisibleDivElement();" />
41 input type="button" value="显示隐藏的Div" onclick="ShowHideDivElement();" />
42 form>
43 body>
2 title>根据条件获取页面中的元素对象集合title>
3 script src=Resources/js/jquery-1.2.1.js type="text/javascript">script>
4
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