JavaScript组件之JQuery，A~Z教程

2024-05-14 11:45•javascript•阅读 1311

(一).概述

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

(三).代码示例

1. 访问页面元素

1 <head runat="server">

2 <title>访问元素</title>

3 <script src=Resources\js\jquery-1.2.1.js type="text/javascript"></script>

4 

5 <script type="text/javascript">

6function GetElement()

8 //< summary>通过ID获取元素TextBox1的客户端Dom对象</summary>

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元素

12alert(tb.value);

14 //< summary>通过class属性获取元素的客户端Dom对象</summary>

15 div1 = $(".KingClass")[0];

16alert(div1.innerText);

18 //< summary>通过Html标签获取元素的客户端Dom对象</summary>

19 div1 = $("div")[1];

20alert(div1.innerText);

21}

22 </script>

23 </head>

24 <body>

25 <form runat="server">

26 <div>

27 <asp:TextBox runat="server" Text="Hello! ChengKing."></asp:TextBox>

28 <div class="KingClass">Hello! Rose</div> <br />

29 <input type = button value="获取元素" onclick = "GetElement();" />

30 </div>

31 </form>

32 </body>

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

1 <head runat="server">

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">

6function ChangeObjectType()

8 //调用Dom对象方法

9 tb_dom = document.getElementById('<%= div1.ClientID %>');

10alert(tb_dom.innerHTML);

12 //用$方法把Dom对象转换为jQuery对象, 再调用jQuery对象方法

13 tb_jQuery =$(tb_dom);

14alert(tb_jQuery.html());

16 //取jQuery对象中的Dom对象

17 tb_dom2 = tb_jQuery[0];

18alert(tb_dom2.innerHTML);

20}

21 </script>

22 </head>

23 <body>

24 <form runat="server">

25 <div>

26 <div runat=server>

27 Hello!ChengKing.

28 </div>

29 <input type = button value="对象转换" onclick = "ChangeObjectType();" />

30 </div>

31 </form>

32 </body>

3. 访问对象内部元素

1 <head runat="server">

2 <title>访问内部元素</title>

3 <script src=Resources\js\jquery-1.2.1.js type="text/javascript"></script>

4 

5 <script type="text/javascript">

6function VisitInnerElement()

8 //取得Div中第二个P元素

9 p = $("#<%= div1.ClientID %> P").eq(1); //等号左边的p对象为p对象集合

10alert(p.html());

12 //取得Div中第一个P元素

13 p = $("#<%= div1.ClientID %> P:first").eq(0); //first为关键字

14alert(p.html());

16 //取得Div中第二个P元素

17 p = $("#<%= div1.ClientID %> P:last").eq(0); //last为关键字

18alert(p.html());

20}

21 </script>

22 </head>

23 <body>

24 <form runat="server">

25 <div>

26 <div 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>

4. 显示/隐藏元素

1 <head runat="server">

2 <title>显示/隐藏元素</title>

3 <script src=Resources\js\jquery-1.2.1.js type="text/javascript"></script>

4 

5 <script type="text/javascript">

6function HideElement()

8 p = $("#<%= div1.ClientID %> P").eq(0);

9 p.hide(); //隐藏方法

10}

11function ShowElement()

12{

13 p = $("#<%= div1.ClientID %> P").eq(0);

14 p.show(); //显示方法

15}

16function HideSecondSegment()

17{

18 $("p:eq(1)").hide(); //指定p集合中的元素

19}

20function HideVisibleDivElement()

21{

22 $("div:visible").hide(); //根据div的状态选择可见的div集合

23}

24function ShowHideDivElement()

25{

26 $("div:hidden").show(); //根据div的状态选择不可见的div集合

27}

28 </script>

29 </head>

30 <body>

31 <form runat="server">

32 <div 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>

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

1 <head runat="server">

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

7function GetLiElementHtml()

9 liS = $("ul li");

10 //遍历元素

11 for(var i = 0; i < liS.length; i++)

12{

13alert(liS.eq(i).html());

14}

15}

16 //获取ul中的li, 且li的class="k"

17function GetLiElementHtmlWithClassIsK()

18{

19 liS = $("ul li.k");

20 //遍历元素

21 for(var i = 0; i < liS.length; i++)

22{

23alert(liS.eq(i).html());

24}

25}

26 //取得含有name属性的元素的值

27function GetElementValueWithNameProperty()

28{

29 alert($("input[@name]").eq(1).val());

30 alert($("input[@name]").eq(2).val());

31}

32 //根据属性值获取元素

33function GetTextBoxValue()

34{

35 alert($("input[@name=TextBox1]").val());

36}

37 //根据属性类型和状态获取元素

38function GetSelectRadioValue()

39{

40 alert($("input[@type=radio][@checked]").val());

41}

42 </script>

43 </head>

44 <body>

45 <form runat="server">

46 <div>

47 <ul>

48 <li>Hello! ChengKing.</li>

49 <li class="k">Hello! Rose.</li>

50 <li class="k">Hello! King.</li>

52 </ul>

53 <input type="button" value="获取所有li元素内容" onclick="GetLiElementHtml();" />

54 <input type="button" value="获取所有li元素[且它的class='k']内容" onclick="GetLiElementHtmlWithClassIsK();" />

55 <br /><br /><br />

56 <input name="TextBox1" type=text value="Hello, King!" />

57 <input name="Radio1" type=radio value="Hello, Rose!" checked=checked />

58 <br />

59 <input type="button" value="取得含有name属性的元素的值" onclick="GetElementValueWithNameProperty();" />

60 <input type="button" value="取得name=TextBox1的文本框的值" onclick="GetTextBoxValue();" />

61 <input type="button" value="取得选中的单选框的值" onclick="GetSelectRadioValue();" />

63 </div>

64 </form>

65 </body>

上一篇 »jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程
下一篇 »JQuery笔记

JavaScript组件之JQuery，A~Z教程

相关推荐

【摘】50个jQuery代码段帮助你成为一个更好的JavaScript开发者

[Html] Jquery那些事

jQuery的属性与样式之样式操作.css，

常见的dom操作----原生JavaScript与jQuery

《精通Javascript+jQuery》视频教程

JavaScript基础教程2--变量,函数,事件等等

*JavaScript标准参考教程 - 阮一峰

js、jQuery创建html元素的方法