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。

  示例 

var myName = prompt("输入您的名字");
if(myName != null && myName != ''){
    document.write("welcome to " + myName);
}else{
    document.write("welcome to my friend.");
}
View Code

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 语句 

switch(n) {
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        n 与 case 1 和 case 2 不同时执行的代码
View Code

语法解释:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

default 关键词来规定匹配不存在时做的事情。

2.3 for 循环

如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么这时使用循环会很方便的完成您的需求,下面讲解for循环的用法和示例。

语法:

  1. for (语句 1; 语句 2; 语句 3) {
  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

示例:

<html>
<body>
 
<p id="p1">Hello World!</p>
 
    <script>
        document.getElementById("p1").innerHTML="New text!";
    </script>
</body>
</html>
View Code

3.2.2 改变 HTML 属性

语法: document.getElementById(id).attribute=new value 

示例:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <input id="changes" type="text" value="改变标签的属性" />
    <script>
        //把input的属性type值改变为button
        document.getElementById("changes").type="button";
    </script>
</body>
</html>
View Code

3.2.3 改变HTML样式

语法:document.getElementById(id).style.property=new style

property参数列表

 

 <script>
    //改变id="p1"的p元素的文本颜色。
    document.getElementById("p2").style.color="red";
</script>
 
View Code

 

posted @ 2017-01-26 11:18  fuzzier  阅读(141)  评论(0编辑  收藏  举报