JavaScript自学笔记 第6次
1. HTML DOM可以使JavaScript 能够改变HTML元素、HTML属性、CSS属性以及可以对事件做出反应。
2.改变HTML元素内容：
<!DOCTYPE html> <html> <body>
<h1 id="header">Old Header</h1> <!--元素h1的id为"header"--> <button onClick="changeH1()">changeH1</button>
<script> function changeH1() { var element=document.getElementById("header"); //通过id获取h1元素 element.innerHTML="New Header"; //更改h1元素内容 } </script>
</body> </html> |
3.改变HTML属性，顺便做了一下切换图片的练习：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head>
<body> <p><img id="image" src="http://www.w3school.com.cn/i/shanghai_lupu_bridge.jpg" /></p> <button onclick="changeImg()">点我更改图片</button>
<script> function changeImg() { if (image.src.match("bridge")) //match很有意思，可以用来搜索元素的属性来进行真假判断。 { //通过ID获取了image元素，然后更改了该元素的src属性 document.getElementById("image").src="http://www.w3school.com.cn/i/eg_tulip.jpg"; } else { document.getElementById("image").src="http://www.w3school.com.cn/i/shanghai_lupu_bridge.jpg"; } } </script>
</body> </html> |
4.改变HTML元素的样式：除了调用，也可以将Function直接写在botton里。
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head>
<body> <p id="p1">通过JS更改文字的样式style</p> <!—变成蓝色，调用Function--> <button type="button" onclick="changeFontColorBlue()">蓝色</button> <!—变成红色，直接写在button的事件里，注意双引号内使用单引号。--> <button type="button" onclick="document.getElementById('p1').style.color='red'">红色</button>
<script> function changeFontColorBlue() { document.getElementById("p1").style.color="blue"; } </script> </body> </html> |
5.请始终为请始终为button规定 type 属性。因为不同浏览器对于button的默认值不一样。
6.visibility显示或隐藏元素。hidden，visible。
<!DOCTYPE html> <html> <body>
<p id="p1">这是一段文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" /> <input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
</body> </html> |
7.对HTML事件做出反应。事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> function changeText(id) { id.innerHTML="谢谢!"; id.style.color="red"; } </script> </head>
<body> <p style="color:red;">当用户点击鼠标时，直接写在onclick事件里</p> <h1 onclick="this.innerHTML='谢谢!';this.style.color='blue'">请点击该文本</h1> <p style="color:red;">调用函数的做法，this表示当前元素,changeText(id)是一个带参数的Function</p> <h1 onclick="changeText(this)">请点击该文本</h1> </body> </html> |
8.HTML调用，与HTML DOM调用的区别。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> function changeText(id) { id.innerHTML="谢谢!"; id.style.color="red"; } </script> </head>
<body> <p style="color:red;">当用户点击鼠标时，直接写在onclick事件里</p> <h1 onclick="this.innerHTML='谢谢!';this.style.color='blue'">请点击该文本</h1> <p style="color:red;">调用函数的做法，this表示当前元素,changeText(id)是一个带参数的Function</p> <h1 onclick="changeText(this)">请点击该文本</h1> </body> </html> |
