书签分享收藏举报版权申诉 / 21

立即下载加入VIP,免费下载

当前位置：首页 > 高等教育 > 教育学 > JQuery框架教程基于ASPNET运行环境.docx

JQuery框架教程基于ASPNET运行环境.docx

文档编号：4143471
上传时间：2022-11-28
格式：DOCX
页数：21
大小：23.51KB

《JQuery框架教程基于ASPNET运行环境.docx》由会员分享，可在线阅读，更多相关《JQuery框架教程基于ASPNET运行环境.docx（21页珍藏版）》请在冰豆网上搜索。

JQuery框架教程基于ASPNET运行环境.docx

JQuery框架教程基于ASPNET运行环境

JavaScript组件之JQuery（A~Z）框架教程

——基于ASP.NET运行环境

郑健

1．概述

现在有好多比较优秀的客户端脚本语言组件，如:

Prototype，YUI，JQuery，mootools，Bindows，Scriptaculous，FCKEditor等，都非常不错。

最近我研究了一下JQuery,在学习时顺便整理了一个教程，后面会有示例代码下载链接。

JQuery是JavaScript语言的一个新的资源库（框架），它能快速、简洁地使用HTMLdocuments，handleevents，performanimations，并且能把Ajax交互应用到网页，JQuery能够改变你书写JavaScript的方式.

2.预备条件

本文档中所有示例都是基于ASP.NET2.0运行环境。

不需要安装任何其他任何东西，只需要把JQuery脚本文本引入页面，即可使用JQuery这个强大组件的功能，如下:

1

3.代码示例

（1）访问页面元素

1

2访问元素

3

4

--将jQuery引用进来-->

5

6functionGetElement（）

7{

8//

通过ID获取元素TextBox1的客户端Dom对象

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

12alert（tb.value）;

13

14//

通过class属性获取元素的客户端Dom对象

15div1=$（".KingClass"）[0];

16alert（div1.innerText）;

17

18//

通过Html标签获取元素的客户端Dom对象

19div1=$（"div"）[1];

20alert（div1.innerText）;

21}

22

23

24

25

26

27

TextBoxID="TextBox1"runat="server"Text="Hello!

ChengKing.">

TextBox>

28Hello!

Rose

29

30

31

32

（2）Dom对象和JQuery对象转换示例

1

2Dom和jQuery对象转换示例

3

4

--将jQuery引用进来-->

5

6functionChangeObjectType（）

7{

8//调用Dom对象方法

9tb_dom=document.getElementById（'<%=div1.ClientID%>'）;

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}

21

22

23

24

25

26

27Hello!

ChengKing.

28

29

30

31

32

（3）访问对象内部元素

1

2访问内部元素

3

4

--将jQuery引用进来-->

5

6functionVisitInnerElement（）

7{

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

9p=$（"#<%=div1.ClientID%>P"）.eq

（1）;//等号左边的p对象为p对象集合

10alert（p.html（））;

11

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

13p=$（"#<%=div1.ClientID%>P:

first"）.eq（0）;//first为关键字

14alert（p.html（））;

15

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

17p=$（"#<%=div1.ClientID%>P:

last"）.eq（0）;//last为关键字

18alert（p.html（））;

19

20}

21

22

23

24

25

26

27

Hello!

ChengKing.

28

Hello!

Rose.

29

30

31

32

33

（4）显示/隐藏元素

1

2显示/隐藏元素

3

4

--将jQuery引用进来-->

5

6functionHideElement（）

7{

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

9p.hide（）;//隐藏方法

10}

11functionShowElement（）

12{

13p=$（"#<%=div1.ClientID%>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}

28

29

30

31

32

33

段1:

Hello!

ChengKing.

34

段2:

Hello!

Rose.

35

段3:

Hello!

King.

36

37

38

39

40

41

42

43

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

1

2根据条件获取页面中的元素对象集合

3

4

--将jQuery引用进来-->

5

6//获取ul中的li

7functionGetLiElementHtml（）

8{

9liS=$（"ulli"）;

10//遍历元素

11for（vari=0;i

12{

13alert（liS.eq（i）.html（））;

14}

15}

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

17functionGetLiElementHtmlWithClassIsK（）

18{

19liS=$（"ulli.k"）;

20//遍历元素

21for（vari=0;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}

42

43

44

45

46

47

48

Hello!
ChengKing.

49Hello!

Rose.

50Hello!

King.

51

52

53

54

55

56

"/>

57

"checked=checked/>

58

59

60

61

62

63

64

65

（6）Document.Ready方法示例

1

2Document.Ready方法示例

3

4

5functionInit1（）

6{

7alert（'Document.body.onload事件执行!

'）;

8}

9functionInit2（）

10{

11alert（'$（document）.ready事件执行!

'）;

12}

13

14

15

16

17

18

19

20//ready方法完整写法

21$（document）.ready（function（）

22{

23Init2（）;

24}）;

25//ready方法简写

26//$（function（）{

27//Init2（）;

28//}）;

29document.body.onload=Init1;

30

31

32

33

（7）Html方法示例

1

2使用Html方法

3

4

5$（document）.ready（function（）

6{

7$（"ul"）.find（"li"）.each（function（i）

8{

9$（this）.html（"Thisis"+i+"!

"）;

10}）;

11}）

12functionGetLisValue（）

13{

14liS=$（"ulli"）;

15//遍历元素

16for（vari=0;i

17{

18alert（liS.eq（i）.html（））;

19}

20}

21

22

23

24

25

26

27

28

29

30

31

32

33

（8）元素事件注册以及实现示例

1

2给元素注册事件及实现事件

3

4

5$（document）.ready（function（）

6{

7$（"#button1"）.click（function（）{

8alert（'ButtonElementClienEventRunned.'）;

9}）;

10}）

11

12

13

14

15

16

17

"/>

18

19

20

（9）Filter和no方法使用示例

1

2FilterandNo方法使用

3

4

5functionChangeBorder（）

6{

7$（"ul"）.not（"[li]"）.css（"border","1pxsolidblue"）;

8}

9

10

11

12

13

14

15

HiKing!

16

HiRose!

17

18

19

20

21

22

23

（10）一个很有用的方法:

Css方法使用示例

1

2使用Css方法,比较有用的一个方法

3

4

5functionSetBorderStyle（）

6{

7$（"ul"）.css（"border","1pxsolidblue"）;

8$（"ulli"）.css（"border","1pxsolidred"）;

9}

10

11

12

13

14

15

16

17

18

19

20

21

22

23

（11）滑动显示/隐藏元素

1

2滑动显示隐藏元素

3

4

5$（document）.ready（function（）{

6$（'#faq'）.find（'.pic'）.hide（）.end（）.find（'.display'）.click（function（）{

7varanswer=$（this）.next（）;

8if（answer.is（':

visible'））{

9answer.slideUp（）;

10}else{

11answer.slideDown（）;

12}

13}）;

14}）;

15

16

17

18

19

20

21

22

23

24

（12）操作父元素

1

2操作父元素

3

4

5

6$（document）.ready（function（）{

7$（"a"）.hover（function（）{

8$（this）.parents（"p"）.addClass（"BackColor"）;

9},function（）{

10$（this）.parents（"p"）.removeClass（"BackColor"）;

11}）;

12}）;

13

14

15

16

17

18

19Hi!

Rose.

20

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: JQuery 框架教程基于 ASPNET 运行环境

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：JQuery框架教程基于ASPNET运行环境.docx
链接地址：https://www.bdocx.com/doc/4143471.html

JQuery框架教程基于ASPNET运行环境.docx

热门标签