zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    数据类型
    一些骚操作
    re
    多任务
    监听按钮点击事件
    监听按钮点击事件
    监听按钮点击事件
    将博客搬至博客园
    将博客搬至博客园
    将博客搬至博客园
  • 原文地址:https://www.cnblogs.com/fuzzier/p/6351398.html
Copyright © 2011-2022 走看看