js.php
<script> function message() { alert("该提示框是通过 onload 事件调用的。") } </script> </head> <body onload="message()"> <p><button onclick="FunctionA()">覆盖</button></p> <div id="a">原内容A</div> <div id="b">原内容B</div> <p><button onclick="FunctionB()">替换</button></p> <p id="c"></p> <p><button onclick="FunctionC('参数一','参数二')">调用带参数的函数</button></p> <p><button onclick="FunctionC('第二次参数一','第二次参数二')">第二次调用带参数的函数</button></p> <form action="0805/test.php" onsubmit="return validate_form(this)" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="提交"> </form> </body> </html> <script> document.write("生成文本，这些写在/html之后")//生成文本 document.write("<h1>生成普通文本和标签</h1>")//生成普通文本和标签 function FunctionA() { document.write("如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖："); } function FunctionB() { document.getElementById("a").innerHTML="替换后A"; document.getElementById("b").innerHTML="替换后B"; } function FunctionC(name,job) { alert("Welcome " + name + ", the " + job); } var ab="附的值"; document.getElementById("c").innerHTML=ab; function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") {alert(alerttxt);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false} } } </script>
jquery.php
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function getElements() { var x=document.getElementsByName("myInput"); alert(x.length); } function createNewDoc() { var newDoc=document.open("text/html","replace"); var txt="<html><body>学习 DOM 非常有趣！</body></html>"; newDoc.write(txt); newDoc.close(); } </script> </head> <body> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <input type="button" onClick="getElements()" value="名为 'myInput' 的元素有多少个？" /><br><br> <input type="button" value="打开并写入一个新文档" onClick="createNewDoc()"><br><br> <a name="first">第一个锚</a><br /> <a name="second">第二个锚</a><br /> <a name="third">第三个锚</a><br /> 文档中锚的数目： <script type="text/javascript"> document.write(document.anchors.length) </script> <br><br> <a name="first">第一个锚</a><br /> <a name="second">第二个锚</a><br /> <a name="third">第三个锚</a><br /> 本文档中第一个锚的 InnerHTML 是： <script type="text/javascript"> document.write(document.anchors[0].innerHTML) </script> <br><br> <form name="Form1"></form> <form name="Form2"></form> <form name="Form3"></form> <script type="text/javascript"> document.write("文档包含： " + document.forms.length + " 个表单。") </script> <br><br> <form id="Form1" name="Form1"> 您的姓名：<input type="text"> </form> <form id="Form2" name="Form2"> 您的汽车：<input type="text"> </form> <script type="text/javascript"> document.write("<p>要访问集合中的项目，你既可以使用项目编号：" + document.forms[0].name + "</p>") document.write("<p>要访问集合中的项目，也可以使用项目名称：" + document.getElementById("Form1").name + "</p>") </script>
ajax.php
<script type="text/javascript"> function showCustomer(str) { var xmlhttp; if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form action="" style="margin-top:15px;"> <label>请选择一位客户： <select name="customers" onChange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;"> <option value="APPLE">Apple Computer, Inc.</option> <option value="BAIDU ">BAIDU, Inc</option> <option value="Canon">Canon USA, Inc.</option> <option value="Google">Google, Inc.</option> <option value="Nokia">Nokia Corporation</option> <option value="SONY">Sony Corporation of America</option> </select> </label> </form> <br /> <div id="txtHint">客户信息将在此处列出 ...</div>
json.php
<h2>在 JavaScript 中创建 JSON 对象</h2> <p> Name: <span id="jname"></span><br /> Age: <span id="jage"></span><br /> Address: <span id="jstreet"></span><br /> Phone: <span id="jphone"></span><br /> </p> <script type="text/javascript"> var JSONObject= { "name":"Bill Gates", "street":"Fifth Avenue New York 666", "age":56, "phone":"555 1234567"}; document.getElementById("jname").innerHTML=JSONObject.name document.getElementById("jage").innerHTML=JSONObject.age document.getElementById("jstreet").innerHTML=JSONObject.street document.getElementById("jphone").innerHTML=JSONObject.phone </script>