七、深入JavaScript的DOM(三)

网友投稿 581 2022-05-30

@Author:Runsen

@Date:2109/03/23

javaScript基础分为三个部分:

ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

DOM:文档对象模型(Document object Model),操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

BOM:浏览器对象模型,操作浏览器部分功能的API。比如让浏览器自动滚动。

文章目录

DOM

实现上下图片

显示隐藏图片

点击下面的图片,大图就显示出来

DOM

DOM是 JavaScript 操作 HTML 的接口(这里只讨论属于前端范畴的 HTML DOM),属于前端的入门知识,同样也是核心内容,因为大部分前端功能都需要借助 DOM 来实现,比如:监听点击、提交事件;

加载一些脚本或样式文件;

元素对象有一个attributes属性,比如id,class,tagname。因此可以通过下面的方法获取元素对象。

方法都是获取事件源和相关的元素,.绑定事件,写 事件的驱动程序

实现上下图片

讲的多,还不如直接来干,比如,实现上下图片的切换,,一共有10张图片

一个img。两个按钮都给定对应的id,然后通过DOM操作,如果是9,下一张就要重新开始,代码如下,自己摸索,去年我也是这么来的

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

显示隐藏图片

点击隐藏就隐藏图片

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

点击下面的图片,大图就显示出来

点击下面的图片上面两个都换成对应的,难度是比较大的,第一就是布局,大图

蒲公英

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

案例下载:https://download.csdn.net/download/weixin_44510615/12475811

JavaScript web前端

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:【 FPGA 】FIR 滤波器结构和优化(二)之系数填充(Coefficient Padding)
下一篇:基于TI C6678 DSP + Xilinx Kintex-7 FPGA评估板|DSP RTOS案例开发——总目录
相关文章