博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
005 DOM02
阅读量:4659 次
发布时间:2019-06-09

本文共 3363 字,大约阅读时间需要 11 分钟。

  在上一篇DOM的基础上,继续案例的实践。

一:案例

1.禁用文本框

1  2  3  4     
5 Title 6 7 8 9 10 16 17

  效果:

  

 

2.点击超链接,在下面出现一个大图

1  2  3  4     
5 Title 6 7 8 9 10
11 12 18 19

  效果:

  

 

3.相册

1  2  3  4     
5 Title 6 12 13 14 15 11116 17 18 19 20 21 22 23 24 25 26 27
28 29

选择一个图片

30 31 32 42 43

  效果:

  

 

4.隔行变色

1  2  3  4     
5 Title 6 11 12 13 14
    15
  • 色白板擦
  • 16
  • 无色的农维年费
  • 17
  • 列为可能粉扑舞IE牛排
  • 18
  • 明晚地玻尿酸单车呢
  • 19
  • 依然未必
  • 20
  • 美津浓你后悔
  • 21
  • 不能说地方居委会吃
  • 22
  • <问客服部农委非农>
  • 23
24 38 39

  效果:

  

 

5.鼠标经过变色

  这里这要是鼠标的事件。

1  2  3  4     
5 Title 6 11 12 13 14
    15
  • 色白板擦
  • 16
  • 无色的农维年费
  • 17
  • 列为可能粉扑舞IE牛排
  • 18
  • 明晚地玻尿酸单车呢
  • 19
  • 依然未必
  • 20
  • 美津浓你后悔
  • 21
  • 不能说地方居委会吃
  • 22
  • <问客服部农委非农>
  • 23
24 42 43

  效果:

  

 

6.鼠标经过二维码的展示与离开

1  2  3  4     
5 Title 6 32 33 34
35
36
37
38
39
40 49 50

  效果:

  

 

7.根据表单标签的name值,获取value

  有一个新的函数

1  2  3  4     
5 Title 6 7 8
9
10
11
12
13 22 23

  效果:

  

 

8.根据类的样式来获取元素

  有新函数,但是兼容性需要考虑,因为属于H5的

1  2  3  4     
5 Title 6 20 21 22

额佛典欧恩

23

么破门委们

24 读课文你发我呢
25 拍农产品
26
27 23233223ljhfnpoweijfn28
29 30 42 43

  效果:

  

 

9.根据选择器获取元素

  这个是根据id来获取。

  也属于H5的。

1  2  3  4     
5 Title 6 7 8 9 15 16

  效果:

  

 

10.获取焦点与失去焦点

  主要是失去焦点与获取焦点的事件

1  2  3  4     
5 Title 6 7 8 9 10 25 26

 

11.innerText,textContext,与兼容代码

  说明在代码中。

1  2  3  4     
5 Title 6 13 14 15 16
17 39 40

  效果:

  

 

12.innerHtml

  所有的浏览器都支持。

  所以,推荐使用。

  主要的功能是在标签中设置新的html标签内容,有显示效果。

  

二:自定义属性

1.获取li的自定义属性

  获取自定义属性,使用getAttribute函数。直接点是不能获取的。

1  2  3  4     
5 Title 6 12 13 14
    15
  • 数学
  • 16
  • 英语
  • 17
  • 语文
  • 18
  • 体育
  • 19
20 28 29

  效果:

  

 

2.给标签添加自定义属性

  使用setAttribute函数。

1  2  3  4     
5 Title 6 12 13 14
    15
  • 数学
  • 16
  • 英语
  • 17
  • 语文
  • 18
  • 体育
  • 19
20 30 31

 

3.移除自定义属性

  使用removeAttribute函数。

1  2  3  4     
5 Title 6 13 14 15 16
17 22 23

  移除类样式:

    这种方式,看效果后,知道是清除不干净的。

1  2  3  4     
5 Title 6 13 14 15 16
17 22 23

  效果:

  

  

4.删除自带的属性

  可以继续使用removeAttribute函数。

  这样清除属性更加干净。

1  2  3  4     
5 Title 6 13 14 15 16
17 22 23

 

三:tab切换案例

1.程序

1  2  3  4     
5 Title 6 51 52 53
54
55
体育56
娱乐57
新闻58
综合59
60
61
    62
  • 我是体育模块
  • 63
  • 我是娱乐模块
  • 64
  • 我是新闻模块
  • 65
  • 我是综合模块
  • 66
67
68
69 97 98

  效果:

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

 

  

 

转载于:https://www.cnblogs.com/juncaoit/p/11221530.html

你可能感兴趣的文章
随机点名器
查看>>
React Native入门 认识Flexbox布局
查看>>
LINUX平台可以用GDB进行反汇编和调试。
查看>>
kvm 虚拟化的使用
查看>>
一个删除磁盘文件的恶意软件分析
查看>>
Maven中的dependencyManagement 意义
查看>>
Target runtime com.genuitec.runtime.generic.jee60 is not defined
查看>>
理解T-SQL: 脚本和批处理
查看>>
六、通知机制
查看>>
《Code Complete》ch.24 重构
查看>>
解决Android studio占C盘空间的方法
查看>>
LintCode: Flatten Binary Tree to Linked List
查看>>
Python装饰器
查看>>
关于RBAC权限设计实例
查看>>
LCA——最近公共祖先
查看>>
Aspose.cells 导出Excel
查看>>
JavaScript , BOM&DOM
查看>>
Spring Boot消息队列应用实践
查看>>
java_数组copy
查看>>
CSS Id 和 Class选择器
查看>>