轻松学习JavaScript四:JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
来源:互联网 发布:windows mysql 客户端 编辑:程序博客网 时间:2024/05/16 14:34
我们开始解释JS在HTML中作用。对于因特网和视窗操作系统,JavaScript都意味着未来。
(1)JavaScript:写入HTML输出
实例代码:
运行结果为:
提示:您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。
(2)JavaScript:对事件作出反应
实例代码:
点击按钮之后:
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。onclick 事件只是您即将在本教程中学到的
众多事件之一。
(3)JavaScript:改变HTML内容
使用JavaScript来处理HTML内容是非常强大的功能。
实例代码:
点击之前:
点击之后:
您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。DOM(文档对象模
型)是用以访问HTML元素的正式 W3C 标准。
(4)JavaScript:改变HTML图像
本例会动态地改变HTML<image>的来源(src):
The Light bulb
点击灯泡就可以打开或关闭这盏灯
实例代码:
未点击之前:
点击之后:
再次点击之后:
JavaScript能够改变任意HTML元素的大多数属性,而不仅仅是图片。这是最炫酷的一个实例,也是经典的样
例!!
(5)JavaScript:改变HTML样式
改变HTML元素的样式,属于改变HTML属性的变种。
实例代码:
运行结果为:
点击按钮后:
(7)JavaScript:验证输入
JavaScript 常用于验证用户的输入。
实例代码:
输入lian之后的结果为:
(7)操作HTML元素
如需从JavaScript访问某个HTML元素,您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素:
例子:通过指定的 id 来访问 HTML 元素,并改变其内容:
运行的结果为:
JavaScript由web浏览器来执行。在这种情况下,浏览器将访问 id="demo" 的 HTML 元素,并把它的内容
(innerHTML)替换为 "My First JavaScript"。
(8)警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
实例代码:
点击按钮之后:
转载自:http://blog.csdn.net/erlian1992/article/details/49911787
- 轻松学习JavaScript四:JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
- 轻松学习JavaScript四:JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
- js特效-开关灯泡
- js学习小结(四)2014.4.21(在HTML中使用Javascript)
- JS,JavaScript HTML页面特效
- 轻松学习JavaScript十九:DOM编程学习之在HTML文档什么位置编写JS代码
- JS_点亮或熄灭灯
- 轻松学习JavaScript十九:DOM编程之在HTML文档什么位置编写JS代码
- JS特效 -- 网页图片飞起来
- javascript简单特效,js学习
- javascpirt + HTML实现点亮灯泡
- JS图像映射的应用,在一个图片点击或移动到不同位置有不同响应
- JS图像映射的应用,在一个图片点击或移动到不同位置有不同响应
- 网页特效-JS特效1
- 网页特效-JS特效2
- 网页特效-JS特效3
- Javascript、js 查找匹配网页html中图片url
- 【网页学习】HTML + CSS + JS
- 面试时,请勿提以下的问题!
- WIFI视频传输方案
- UITextView根据内容适应大小
- yii2 表单错误提示
- (并查集) NYOJ 1022 合纵连横
- 轻松学习JavaScript四:JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
- Set接口
- 第十四周项目3-是否二叉排序树
- plSQL复制数据的方法
- SP2-0618和_SP2-0611错误处理(转)
- Mutex::AutoLock
- onCreateOptionsMenu中menu.add参数解析
- libsvm在matlab中的使用方法
- 第九周项目四:广义表算法库及应用(1)