js基础语句

2019-11-07 23:58:10

字体：大中小

来源：转载

供稿：网友

整理一下学习js过程中的基础知识，陆续的会深入学习并记录~<!DOCTYPE html><html><body><p>javaScript 能够直接写入 HTML 输出流中：</p><script>document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");</script><p>您只能在 HTML 输出流中使用 <strong>document.write</strong>。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。</p></body></html>Javascript：对事件作出反应<button type="button" onclick="alert('Welcome!')">点击这里</button>JavaScript：改变 HTML 内容<script>function myFunction(){x=document.getElementById("demo"); // 找到元素x.innerHTML="Hello JavaScript!"; // 改变内容}</script><button type="button" onclick="myFunction()">点击这里</button>JavaScript：改变 HTML 图像点击灯泡就可以打开或关闭这盏灯<script>function changeImage(){element=document.getElementById('myimage')if (element.src.match("bulbon")){element.src="/i/eg_bulboff.gif";}else{element.src="/i/eg_bulbon.gif";}}</script><img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif"><p>点击灯泡来点亮或熄灭这盏灯</p>JavaScript：改变 HTML 样式<script>function myFunction(){x=document.getElementById("demo") // 找到元素x.style.color="#ff0000"; // 改变样式}</script><button type="button" onclick="myFunction()">点击这里</button>JavaScript：验证输入<input id="demo" type="text"><script>function myFunction(){var x=document.getElementById("demo").value;if(x==""||isNaN(x)){alert("Not Numeric");}}</script><button type="button" onclick="myFunction()">点击这里</button><head> 或 <body> 中的 JavaScript通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：<script src="myScript.js"></script>JavaScript 对大小写敏感。JavaScript 会忽略多余的空格可以在文本字符串中使用反斜杠对代码行进行换行document.write("Hello /World!");JavaScript 注释（同java）// 输出标题：document.getElementById("myH1").innerHTML="Welcome to my Homepage";// 输出段落：document.getElementById("myP").innerHTML="This is my first paragraph.";单行注释以 // 开头。多行注释以 /* 开始，以 */ 结尾。使用注释来阻止执行在行末使用注释变量是存储信息的容器。变量必须以字母开头变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）变量名称对大小写敏感（y 和 Y 是不同的变量）一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。JavaScript 拥有动态类型var x// x 为 undefinedvar x = 6;// x 为数字var x = "Bill";// x 为字符串极大或极小的数字可以通过科学（指数）计数法来书写：var y=123e5;// 12300000var z=123e-5;// 0.00123JavaScript 对象var person={firstname:"Bill", lastname:"Gates", id:5566};var person={firstname : "Bill",lastname : "Gates",id : 5566};对象属性有两种寻址方式：name=person.lastname;name=person["lastname"];条件运算符JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。greeting=(visitor=="PRES")?"Dear President ":"Dear ";如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。JavaScript 表单验证必填（或必选）项目下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：<html><head><script type="text/javascript">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></head><body><form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">Email: <input type="text" name="email" size="30"><input type="submit" value="Submit"> </form></body></html>E-mail 验证输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：<html><head><script type="text/javascript">function validate_email(field,alerttxt){with (field){apos=value.indexOf("@")dotpos=value.lastIndexOf(".")if (apos<1||dotpos-apos<2) {alert(alerttxt);return false}else {return true}}}function validate_form(thisform){with (thisform){if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false}}}</script></head><body><form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">Email: <input type="text" name="email" size="30"><input type="submit" value="Submit"> </form></body></html>HTML DOM （文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。JavaScript%20能够改变页面中的所有%20HTML%20元素JavaScript%20能够改变页面中的所有%20HTML%20属性JavaScript%20能够改变页面中的所有%20CSS%20样式JavaScript%20能够对页面中的所有事件做出反应通过%20id%20找到%20HTML%20元素var%20x=document.getElementById("intro");通过标签名找到%20HTML%20元素var%20x=document.getElementById("main");%20var%20y=x.getElementsByTagName("p");通过类名找到%20HTML%20元素通过类名查找%20HTML%20元素在%20IE%205,6,7,8%20中无效。修改%20HTML%20内容的最简单的方法时使用%20innerHTML%20属性。document.getElementById("p1").innerHTML="New%20text!";修改html的属性值document.getElementById("image").src="landscape.jpg";改变元素的样式<button type="button" onclick="document.getElementById('id1').style.color='red'">点击这里</button>对事件做出反应HTML 事件的例子：当用户点击鼠标时<html><head><script>function changetext(id){id.innerHTML="谢谢!";}</script></head><body><h1onclick="changetext(this)">请点击该文本</h1></body></html>当网页已加载时当图像已加载时当鼠标移动到元素上时当输入字段被改变时当提交 HTML 表单时当用户触发按键时onload 和 onunload 事件onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。<body onload="checkCookies()"><script>function checkCookies(){if (navigator.cookieEnabled==true){alert("已启用 cookie")}else{alert("未启用 cookie")}}</script><p>提示框会告诉你，浏览器是否已启用 cookie。</p></body>onchange 事件onchange 事件常结合对输入字段的验证来使用。onmouSEOver 和 onmouseout 事件onmousedown、onmouseup 以及 onclick 事件首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。添加和删除节点向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div><script>var para=document.createElement("p");var node=document.createTextNode("这是新段落。");para.appendChild(node);var element=document.getElementById("div1");element.appendChild(para);</script>

上一篇：如何使用repo/git提交代码

下一篇：使用UIAlertControllerStyleActionSheet IPAD崩溃 swift