JavaScript基础学习
1. JavaScript可以直接写入HTML输出流
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 5 </head> 6 <body> 7 <p>JavaScript能够直接写如HTML输出流中：</p> 8 <script> 9 document.write("<h1>This is a heading.</h1>"); 10 document.write("<p>This is a paragraph.</p>"); 11 </script> 12 </body> 13 </html>
2. JavaScript能够对事件做出响应
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 5 </head> 6 <body> 7 <h1>我的第一段 JavaScript</h1> 8 <p>JavaScript能够对事件做出反应。比如按钮的点击：</p> 9 <button type="button" onclick="alert('welcome!')">点击这里</button> 10 </body> 11 </html>
3.JavaScript能改变HTML内容
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 5 </head> 6 <body> 7 <h1>我的第一段JavaScript</h1> 8 <p id = "demo"> 9 JavaScript能改变HTML元素内容 10 </p> 11 <script> 12 function myFunction() { 13 x = document.getElementById("demo");//查找元素 14 x.innerHTML = "Hello,JavaScript!"; 15 } 16 </script> 17 <button type="button" onclick="myFunction()">点击这里</button> 18 </body> 19 </html>
4.JavaScript能改变HTML图片
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 5 </head> 6 <body> 7 <script> 8 function changeImage() { 9 pic = document.getElementById('myImage'); 10 if (pic.src.match("flower")) { 11 pic.src = "../res/tree.jpg"; 12 } else { 13 pic.src = "../res/flower.jpg"; 14 } 15 } 16 </script> 17 <img id = "myImage" onclick="changeImage()" src = "../res/flower.jpg"/> 18 <p>点击图片可以实现替换图片</p> 19 </body> 20 </html>
5.JavaScript能改变HTML元素的样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 5 </head> 6 <body> 7 <h1>我的第一段JavaScript</h1> 8 <p id = "demo">JavaScript能改变HTML元素的样式</p> 9 <script> 10 function myFunction() { 11 x = document.getElementById("demo"); 12 x.style.color = "#ff0000"; 13 } 14 </script> 15 <button type="button" onclick="myFunction()">点击这里</button> 16 </body> 17 </html>
6.JavaScript能检查数据
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 5 </head> 6 <body> 7 <h1>Hello,JavaScript!</h1> 8 <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p> 9 <input id = "demo" type = "text"/> 10 <script> 11 function myFunction() { 12 var x = document.getElementById("demo").value; 13 <!-- JavaScript中isNaN() 函数用于检查其参数是否是非数字值--> 14 if (x == "" || isNaN(x)) { 15 alert("Not Numeric"); 16 } 17 } 18 </script> 19 <button type="button" onclick="myFunction()">点击这里</button> 20 </body> 21 </html>
7.JavaScript能添加HTML元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 5 </head> 6 <body> 7 <div id = "div1"> 8 <p id = "p1">这是一个段落。</p> 9 <p id = "p2">这是另一个段落。</p> 10 </div> 11 <script> 12 var para = document.createElement("p"); 13 var node = document.createTextNode("这是新段落。"); 14 para.appendChild(node); 15 16 document.getElementById("div1").appendChild(para); 17 </script> 18 </body> 19 </html>
8.JavaScript能删除已有HTML元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 5 </head> 6 <body> 7 <div id = "div1"> 8 <p id = "p1">这是一个段落。</p> 9 <p id = "p2">这是另一个段落。</p> 10 </div> 11 <script> 12 var parent = document.getElementById("div1"); 13 var child = document.getElementById("p1"); 14 parent.removeChild(child); 15 </script> 16 </body>