点击按钮的时候设置img标签的src属性 !DOCTYPE htmlhtmlheadmeta charset="utf
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
1.DOM的观点
* JavaScript分三部分
- ECMAScript标准:JS的根基语法
- DOM：Document object Model 文档东西模型--操纵页面的元素
- BOM：Browser Object Model 浏览器东西模型--操纵的是浏览器
* DOM文档东西模型--操纵页面元素
- 文档document：把一个html文件当作一个文档，由于万物皆东西，所以把这个文档当作是一个东西
- 元素element：html页面的每个标签，都是一个元素，每个元素都可以当作一个东西
- 节点node：页面中所有的内容都是节点，标签，属性，文本
- 属性
2、为元素注册事件
* 事件：就是一件事，有触发、响应、事件源
按钮被点击，弹出对话框
按钮-->事件源
点击-->事件名字
被点了-->触发了
弹框了-->响应
* 点击按钮，弹出对话框，代码1：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <input type="button" value="弹框"/> </body> </html>
* 点击按钮，弹出对话框，代码2：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <input type="button" value="弹框"/> <script type="text/javascript"> function fun(){ alert("嘎嘎嘎~"); } </script> </body> </html>
* 点击按钮，弹出对话框，代码3：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <input type="button" value="弹框"/> <script type="text/javascript"> document.getElementById("btn").onclick = function(){ alert("呵呵呵~"); }; </script> </body> </html>
3、案例：点击按钮显示图片及设置宽高
点击按钮显示图片, 点击按钮的时候设置img标签的src属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <input type="button" value="按钮"/> <img src=""/> <script type="text/javascript"> document.getElementById("btn").onclick=function(){ var ele = document.getElementById("imgId"); ele.src="http://www.mamicode.com/a.jpg"; ele.width="300";//注意，img标签的width的值300没有单位px ele.height="280"; }; </script> </body> </html>
4、案例：点击按钮设置p标签的文本内容
通常成对的标签，中间的文本内容，设置的时候，都使用innerText属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <input type="button" value="按钮"/> <p></p> <script type="text/javascript"> document.getElementById("btn").onclick=function(){ var ele = document.getElementById("pId"); ele.innerText="文本"; }; </script> </body> </html>
5、案例：点击按钮改削超链接的地点及热点文字
热点文字：即<a>热点文字</>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <input type="button" value="按钮"/> <a href=""></a> <script type="text/javascript"> document.getElementById("btn").onclick=function(){ var ele = document.getElementById("aId"); ele.href="http://www.baidu.com"; //注意http不成以省略 ele.innerText="百度"; }; </script> </body> </html>
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31711.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")