js基础
首先声明本次随笔大部分来源于huizhi网,单纯用于自己记笔记
1 基本概念:
1.1 变量声明
语法:var 变量名;
1.2 语句
末尾别忘记加分号;
1.3 数据类型
1.4 注释
1.4.1 单行注释 //你要注释的内容
1.4.2 多行注释 /*
你要注释的内容
*/
1.5 常用函数
1.5.1 基本输出 document.write(字符串或变量或对象);
1.5.2 发出警报 语法:alert(字符串或变量);
1.5.3 确认选择 语法:confirm(str);
str: 在消息对话框中要显示的文本,返回的是布尔值。当点击“确定”按钮时,会返回true,点击“取消”按钮时,返回的是false。
1.5.4 提示
语法:prompt(str1, str2);
参数说明:
str1:要显示在消息对话框中的文本,不能修改
str2:文本框中的内容,可以修改
点击确定按钮,文本框中的内容将作为函数返回值,点击取消按钮将返回null。
示例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var myName = prompt("输入您的名字"); if(myName != null && myName != ''){ document.write("welcome to " + myName); }else{ document.write("welcome to my friend."); }
1.5.5 打开新页面 语法:window.open(URL, 窗口名称);
示例 window.open("http://www.baidu.com","_blank");
2 流程控制
2.1 if..else.. 语句
特别的是
If...else if...else 语句
使用 if....else if...else 语句来选择多个代码块之一来执行。注意 如果有else 多个if需要改写成else if.
2.2 switch 语句
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case 1 和 case 2 不同时执行的代码
语法解释:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
default 关键词来规定匹配不存在时做的事情。
2.3 for 循环
如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么这时使用循环会很方便的完成您的需求,下面讲解for循环的用法和示例。
语法:
- for (语句 1; 语句 2; 语句 3) {
- 被执行的代码块
- }
参数解释:
- 语句 1 在循环(代码块)开始前执行
- 语句 2 定义运行循环(代码块)的条件
- 语句 3 在循环(代码块)已被执行之后执行
2.4 while 循环
2.5 break 和 continue 语句
break 语句用于跳出本次循环。continue 用于跳过循环中的一个迭代。
2.6 异常处理
2.6.1 try...catch...语句
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。
语法:
try { //在这里运行代码 }catch(err) { //在这里处理错误 }
2.6.2 throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是:创建或抛出异常(exception)。
如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。
语法:throw exception
参数:exception 可以是 JavaScript 字符串、数字、逻辑值或对象。
function myFunc(){ try{ //这是是获取id为test的输入框中的值,详细用处会在DOM操作中讲解 var test = document.getElementById("test").value; if (x == ""){ throw "值为空"; } if (x > 5){ throw "值小了"; } if (x < 10){ throw "值大了"; } } catch (err){ alert("错误:" + err + "。"); } }
3 dom操作
3.1 查找html元素
- 1.通过id 查找HTML元素
- 2.通过标签名查找HTML元素
3.1.1 通过id查找
//查找到id="email"的元素 var i = document.getElementById("email");
如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。如果未找到该元素,则 x 将包含 null。
3.1.2 通过标签名查找html元素
//查找到标签为a的元素 var y=x.getElementsByTagName("a");
3.2 改变html
3.2.1 改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
语法:document.getElementById(id).innerHTML=new HTML
示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="New text!"; </script> </body> </html>
3.2.2 改变 HTML 属性
语法: document.getElementById(id).attribute=new value
示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head></head> <body> <input id="changes" type="text" value="改变标签的属性" /> <script> //把input的属性type值改变为button document.getElementById("changes").type="button"; </script> </body> </html>
3.2.3 改变HTML样式
语法:document.getElementById(id).style.property=new style
property参数列表:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> //改变id="p1"的p元素的文本颜色。 document.getElementById("p2").style.color="red"; </script>