JavaScript

JavaScript是一种网页编程技术，向HTML添加交互行为，是一种基于对象和事件驱动的解释性脚本语言，不需要预编译，直接嵌入HTML园中，由浏览器解释执行

  • 特点
    • 可以用任何文本工具进行编译，浏览器负责执行
    • 不需要实现预编译，逐行编译执行
    • 基于对象和事件驱动，内置大量对象，不需要创建对象
    • 适用于客户端表单合法性验证，数据计算，浏览器事件触发，网页特殊显示效果
  • 组成
    • ECMAScript：语法规范，定义了核心语法，关键字，运算符，数据类型等标准
    • DOM：文档对象模型，将一个HTML页面的节点看成一个文档对象
    • BOM：浏览器对象模型，对浏览器窗口进行访问和操作。开发者可以移动窗口，改变状态栏中的文本以及执行与该页面窗口不直接相关的操作
      • 弹出新的浏览器窗口
      • 移动、关闭、缩放窗口大小
      • 提供web浏览器详细信息的定位对象
      • 提供用户屏幕分辨率详细信息的屏幕对象
      • 支持cookie
      • IE扩展了BOM，加入了 ActiveXObject 类 ，通过JavaScript实例化ActiveX对象，实现a'ja'x局部刷新技术

一.HTML与JavaScript的结合方式

  • 行内脚本： 直接在开始标签内设置属性，如 onclick="alert('xxx')"
  • 内部脚本： 用<script> js内容 </script> 包裹即可，可以放在该HTML的任意位置，一般放在head和body之间，摆放的前后决定了js的执行顺序
  • 外部脚本： 外部定义js文件， 用<script src="js文件路径"> </script>即可，可以放在该HTML的任意位置，一般放在head和body之间，摆放的前后决定了js的执行顺序
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!--外部脚本，可以放在html文件下的任意位置，放在前面就先解释执行-->
<script src='js/test01.js'></script>
<!--内部脚本，可以放在html文件下的任意位置，放在前面就先解释执行-->
<script>
    alert('内部弹窗测试');
</script>
<body>
    <!--行内脚本-->
    <h1 onclick="alert('弹窗')">我爱你中国</h1>
</body>
</html>

二. JavaScript的使用

1. 变量

  • js是弱类型语言，在定义变量时一律用var 变量名= 变量值
  • 数值类型
    • number， 不区分浮点型和整型，所有数值都采用64位浮点格式存储，类似于double
    • 字符串类型： string ，用双引号或单引号引起，注意转义字符
    • 布尔型：Boolean，true=1;false=0;与字符串在一起就是true和false，与数值类型计算就是1或0
  • 自动类型转换
    • 数值+字符串--字符串
    • 数值+布尔--数值
    • 布尔+字符串--字符串
    • 布尔+布尔=数值
  • 强制数值类型转换
    • 转成整型 parseInnt(x)
    • 转成浮点型 parseFloat(x)
    • 查询当前变量类型： typeOf(x),返回number，String, Boolean, object
  • null与undefined
    • null代表对象为空，可以用来清除变量内容，空值或无对象
    • undefined代表对象已经声明了但未被引用，或者对象属性不存在
  • 算术运算 + - * / 自加自减； 注意加法可以用于拼接，减法可以用作负号
  • 逻辑运算：操作数均为布尔类型，包括 非！；与&&； 或||
  • 控制语句
    • 条件分支：if else ; switch  case
    • 循环：while ； for
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script>
    //数值类型
    var a=1;
    console.log(a);
    var b=2.0;
    console.log(b);
    var c='hell\'o';
    console.log(c);
    var d= true;
    console.log(d);
    //自动转换
    console.log(a+'b');  //1b
    console.log(a+b); //3
    console.log(d+a); //2
    console.log(d+c);//truehell\'o
    //强制转换
    console.log(parseInt("123")); //123
    console.log(parseInt("hello"));//NaN
    console.log(parseFloat("6.6"));//6.6
    console.log(parseFloat("12"));//12
    console.log('hek');//NaN
    //严格关系
    console.log(a==="1");//false
    console.log(a=="1.0");//true
    //算术运算
    console.log(a+6.32);//7.32
    //逻辑运算
    console.log(a||1.0==1);//1
    console.log(2==="2.0"||1.0==1);//true
    console.log(!a==1.0);//false
    console.log(true&&a==='1.0');//false
    //循环
    //if else
    var e=39;
    if(e>20) console.log("success");
    else console.log("fail");
    //switch case
    var f=1;
    switch(f){
        case 1: console.log("第一名");break;
        case 2: console.log("第二名");break;
        case 3: console.log("第三名");break;
        default: console.log("不及格");
    }
    //for
    for(var i=1;i<=10;i++){
        console.log(i);
    }
    //while
    var j=10;
    while (j>0){
        console.log(j);
        j--;
    }
</script>
<body>
    
</body>
</html>

 

2. 字符串API

  • length:获取字符串的长度（字符串中字符的个数） 属性，没有小括号
  • toUpperCase/toLowerCase :转大小写
  • charAt(下标) ： 返回某个下标上的字符
  • indexof(字符)：查找字符串中字符出现的首次下标
  • lastIndexof(字符)：查找字符串中字符最后一次出现的下标
  • substring(开始,结束)：截取字符串中一部分（结束是不包含的）
  • replace(旧的,新的)：将字符串中的旧字符替换成新字符
  • split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script>
 //字符串长度
 var str1="absdfhk";
 console.log(str1.length); //7
 //字符串大小写转换
 var str2="afISAsndkfnSA";
 console.log(str2.toUpperCase()); //AFISASNDKFNSA
 console.log(str2.toLowerCase()); //afisasndkfnsa
 //字符串索引查找单个字符
 var str3="owi4安徽东湖owie";
 console.log(str3.charAt(5));//徽
 console.log(str3.indexOf('o'));//第一次出现是在下标0
 console.log(str3.lastIndexOf('o'));//最后一次出现是在8
 //字符串截取
 console.log(str3.substring(2,8));//i4安徽东湖  
 console.log(str3.substr(3,10));//4安 从第三个元素开始截取10个字符，不够则截取到最末尾
 //字符串替换
 console.log(str3.replace('owi','xxx'));//xxx4安徽东湖owie,只替换一次
 //字符串切割
 var str4="1,2.,4,5,6,9,6"; 
 var arr=str4.split(',');
 console.log(arr);//Array(7)
 console.log(arr.length);//7
 console.log(arr[1]);//2.
</script>
<body>    
</body>
</html>

3. 数组

  • 创建 var arr=new Array();无需声明数组大小
  • 初始化 
    • 先创建，直接单个赋值
    • 初始化在括号内赋值
    • 直接在[ ]赋值
  • 常用方法
    • tostring()：将数组转换成字符串
    • join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串
    • concat(新元素)：将原来的数组连接新元素，原数组不变
    • slice(开始，结束)：在数组中提取一部分，形成新的数组
    • reverse()：数组的反转（倒序）
    • arr.sort() :字符排序
    • arr.sort(自定义排序函数名) 数值排序 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    //创建数组
    var arr1=new Array();
    //初始化数组 
    //1. 直接单个赋值
    var arr2=new Array();
    arr2[0]=1;
    arr2[1]=2;
    arr2[2]=3;
    for( var i=0;i<arr2.length;i++){
        console.log(arr2[i]);
    }
    //2.创建时赋值
    var arr3=new Array(1,"10",true);
    for( var i=0;i<arr3.length;i++){
        console.log(arr3[i]);
    }
    //3.直接赋值
    var arr4=[1,"helo",false];
    for( var i=0;i<arr4.length;i++){
        console.log(arr4[i]);
    }
    //常用方法
    var arr5=[1,2,3,4,5];
    console.log("类型为"+typeof(arr5));//类型为object
    //1. 转成字符串
   console.log(arr5.toString()+"类型为"+typeof(arr5.toString()));//1,2,3,4,5类型为String
    //2. 自定义字符连接
    console.log(arr5.join("--"));//1--2--3--4--5
    //3. 添加新元素生成新数组
    var arrnew=arr5.concat(7,8);
    console.log(arrnew.toString());//1,2,3,4,5,7,8
    console.log(arr5.toString())//1,2,3,4,5
    //4. 提取部分数组元素生成新数组
    arrnew= arr5.slice(2,4);
    console.log(arrnew.toString());//3,4
    console.log(arr5.toString())//1,2,3,4,5
    //5. 数组翻转
    console.log(arr5.reverse());
    //6. 字符排序，不会按照字面量大小排序
    var arr6=[32,12,345,124];
    console.log(arr6.sort().toString());//12，124，32，342
    //7. 自定义排序
    console.log(arr6.sort(rfsort).toString());//12,32,124,342
    function rfsort(a,b){
        return a-b;
    }
    </script>
</body>
</html>

4. math数学对象和number对象

直接调用Math对象属性和方法，无需创建，Number.toFixed(保留位数)自动进行位数保留和四舍五入

  • math属性
属性描述
E 返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2 返回 2 的自然对数（约等于0.693）。
LN10 返回 10 的自然对数（约等于2.302）。
LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
PI 返回圆周率（约等于3.14159）。
SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2 返回 2 的平方根（约等于 1.414）。
  • math方法
方法描述
abs(x) 返回数的绝对值。
acos(x) 返回数的反余弦值。
asin(x) 返回数的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
toSource() 返回该对象的源代码。
valueOf() 返回 Math 对象的原始值。 

 <script>
    //math属性
    console.log(Math.PI);
    //随机产生一个0-9的整数
    var num=Math.random()*10;
    console.log(Math.floor(num));//向下取整
    //保留给定位数
    num=new Number(6.36245);
    console.log(num.toFixed(4));//保留4位，第五位四舍五入
    console.log(num.toFixed(8));//自动补足位数 
    </script>

 5. 正则表达式

用于匹配验证格式的一串字符，

  • 创建方式一：  var reg= /^xxx$/修饰符（可选）   ,以/^开始，以$/结尾
  • 创建方式二： var reg = new RegExp('^xxx$'), 创建对象，以^开始，$结尾
  • 修饰符
    修饰符描述
    i 执行对大小写不敏感的匹配。
    g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
    m 执行多行匹配。

 

  •  表达式
    表达式描述
    [abc] 查找方括号之间的任何字符。
    [0-9] 查找任何从 0 至 9 的数字。
    (x|y) 查找任何以 | 分隔的选项。
  •   元字符
元字符描述
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
  •  检验方法
    • exec() 方法用于检索字符串中的正则表达式的匹配，该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
    • test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false
    • search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置
    • replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    //创建方式一
    var reg1=/^\d{1,3}$/;
    console.log(reg1.test('12'));//true
    console.log(reg1.test('1a2')); //false
    //创建方式二
    var reg2= new RegExp('^[a-zA-Z0-9]{1,4}$');
    //检验方法test
    console.log(reg2.test('ad2W'));//true
    console.log(reg2.test('#da'));//false
    //查找方法 search
    var str1='afwi1123e12kssqa';
    console.log(str1.search('1123'));//返回起始下标 4
    //检索方法 exec
    reg1=/\d/;
    console.log(reg1.exec(str1).toString());//1,找到第一个
    console.log(reg1.exec('asdhia'));//null
    //替换方法 replace
    var str2='hello moto';
    console.log(str2.replace(/o/,'a'));//hella moto 替换找到的第一个
    </script>
</body>
</html>
  • 常用的正则表达式

 

 

 6.日期

<script>
    //获取日期
    var date= new Date();
    console.log(date);//Thu Jan 07 2021 09:41:37 GMT+0800 (中国标准时间)
    //转成x年 x月 x日  x时 x分 x秒 x毫秒
    var year=date.getFullYear();
    var month= date.getMonth()+1;  //month从0开始计算，要+1
    var day=date.getDate();
    var hh= date.getHours();
    var mm=date.getMinutes();
    var ss=date.getSeconds();
    var ms=date.getMilliseconds();
    //输出打印
    console.log(year+"年 "+month+"月 "+day+"日  "+hh+"时 "+mm+"分 "+mm+"秒 "+ms+"毫秒"); 
    </script>

7. 函数

function 函数名(形参)｛
      函数体
｝
  • 无返回值
  • 有返回值 return 语句
  • 匿名函数 函数体不带名称直接赋予变量
  • 构造函数   函数构造器（new Function()）定义
  • 参数对象调用 函数内部调用arguement对象
  • isNaN：检查其参数是否是非数字值
  • eval：用来转换字符串中的运算
  • encodeURI 与 decodeUR转码和解码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    //函数调用后才会执行,形参不能加类型
    //无返回值
    function fun1(a,b){
        console.log(a+b);
    }
     var s1=fun1(3,4);//7
    //有返回值函数
    function fun2(a,b){
        return a+b;
    }
    console.log(fun2(3,4)); //7
    //构造函数
    var s2=new Function("a","b","return a*b+10");
    var s3= s2(3,4);
    console.log(s3); //22
    //匿名函数
    var s4= function(a,b){
        return a*b;
    }
    s3= s4(3,4);
    console.log(s3); //12
    //参数对象调用
    function fun3(a,b,c,d){
        console.log(arguments.length); //4
        console.log(arguments[3]); //d
    }
    var s5=fun3('a',1,3,'d');
    //判断是否为数字,是数字就位false
    var s6="123";
    console.log(isNaN(s6)); //false
    var s7=123;
    console.log(isNaN(s7)); //false
    var s8=true;
    console.log(isNaN(s8)); //false
    var s9="1啊";
    console.log(isNaN(s9)); //true
    //字符串内进行运算
    var s10="1+3";
    console.log(s10); //1+3
    console.log(eval(s10)); //4
    //转码和解码
    console.log(encodeURI("你好"));//08函数.html:52 
    console.log(decodeURI(encodeURI("你好")))//你好
    </script>
    
</body>
</html>

8.闭包

  • 有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。
  • 作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理；保证了数据的安全唯一性
  • 全局变量： 不用var声明的变量都是全局变量，在body体内,函数体外的变量都是全局变量
  • 局部变量：在函数体内使用var声明的变量都是局部变量
  • 函数体内支持函数嵌套，使用闭包可以在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰，形成一个不被销毁的栈环境
    • 优点： 方便调用上下文中声明的局部变量逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题
    • 缺点： 因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造成内存泄露，内存消耗很大
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
     //全局变量
     s1=1;
     var s2=1;
     function test01(){
         s3=1; //全局变量
         var count=0;//局部变量
         //函数嵌套
         function jie(){
             return count+=1;
         }
         return jie;
     }
     //闭包访问test01数据count，并循环执行jie不会重置count
     var fn=test01();
     fn();
     fn();
     console.log(fn());//3
    
    </script>
</body>
</html>

9.弹窗

  • 普通弹框 alert("xxx");
  • 控制台日志输出 console.log("xxx");
  • 页面输出 document.write("xx"); HTML语言可以被解析
  • 确认框 confirm("xxx");  
  • 输入框 prompt("xxx");  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    //弹窗 
    alert("弹出窗口");
    //控制台输出
    console.log("控制台输出");
    //页面输出
    document.write("<h1>i love you </h1>");
    //确认框
    if(confirm("are you sure"))
    document.write("yes");
    else document.write("no");
    //输入框
    var str=prompt("write your name");
    document.write("my name is "+str);

    </script>
</body>
</html>

三、DOM操作

DOM：文档对象模型，将HTML视为一棵树(根节点)，每个对象是一个子节点，节点纵向上有父子关系，横向上有同胞关系，所有标签都是由根节点延伸出去的

1. DOM 访问元素

  • getElementById：通过id属性获得元素节点对象
  • getElementsByName：通过name属性获得元素节点对象集
  • getElementsByTagName：通过标签名称获得元素节点对象集
  • 案例：1.当帐号为空时，阻止表单提交 2.购物车全选效果  3.表格隔行变色 
    <body>
    <h1 align="center">欢迎登陆系统</h1>
     <!--1. 当帐号为空时，阻止表单提交-->
     <form onsubmit="return login() ">
    <p align="center"> 账号 <input type="text" id="username"> </p>
    <p align="center"> 密码 <input type="text"> </p>
    <p align="center"><button>submit</button></p>
    </form>
    <!--getElementById：通过id属性获得元素节点对象 -->
   <script>
       function login()
    {var name=document.getElementById("username").value;
    if (name==""){
        alert("账号不能为空");
        return false;
    }
    return true;}
    </script>
  
</body>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <table border="1" cellspacing="0" align='center'>
        <tr>
            <td> <input type="checkbox" onchange="allchoose(this)"> 全选</td>
            <td>商品</td>
            <td>单价</td>
        </tr>
        <tr>
            <td> <input type="checkbox" name="a"> 1</td>
            <td>red tea</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td> <input type="checkbox" name="a"> 2</td>
            <td>black tea</td>
            <td>3.0</td>
        </tr>
        <tr>
            <td> <input type="checkbox" name="a"> 3</td>
            <td>milk</td>
            <td>4.0</td>
        </tr>
        <tr>
            <td> <input type="checkbox" name="a"> 4</td>
            <td>cola</td>
            <td>5.0</td>
        </tr>
        <tr>
            <td> <input type="checkbox" name="a"> 5</td>
            <td>juice</td>
            <td>6.0</td>
        </tr>
    </table>

    <script>
        //2.getElementsByName：通过name属性获得元素节点对象集
        function allchoose(all) {
            var arr = document.getElementsByName("a");
            for (var i = 0; i < arr.length; i++) {
                arr[i].checked = all.checked; //每一个a的状态与全选状态一样
            }
        }
        //3. getElementsByTagName：通过标签名称获得元素节点对象集
        var rows = document.getElementsByTagName("tr");
        for (var i = 0; i < rows.length; i++) {
            if (i % 2 == 0) {
                rows[i].style.backgroundColor = "pink";
            }

        }
    </script>
</body>
</html>

2. DOM 修改

　　修改 HTML DOM 可以改变 HTML 内容属性，改变 CSS 样式，对html元素进行增删改查，改变事件（处理程序）

  • 改变内容与样式  innerHTML="xxx", style属性
 <button onclick="content()">改变内容</button>
    <button onclick="kind()">改变样式</button>
    <h1 id = "title">你瞅啥</h1>
    <script>
    //改变HTML元素内容和样式
    function content(){
        document.getElementById("title").innerHTML="瞅你咋地";
        
    }
    function kind(){
        document.getElementById("title").style.color="red";
        document.getElementById("title").style.fontSize='100px';
        document.getElementById("title").style.fontFamily ="微软雅黑";
    }
    </script>
  • 添加元素  createElement(元素标签)， 设置元素属性setAttribute("属性"，属性值) , 在根节点添加 appendChild(　　
  <button onclick="add()">添加</button>
    <div align=center> </div> <!--容器存放-->
    <script>
    //添加元素
    function add(){
        var img=document.createElement("img");
        img.setAttribute("src","../html/img/t0159c04f0aa743088a.jpg" );
        img.setAttribute("title","背景");
        img.setAttribute("id","back");
        document.getElementsByTagName("div")[0].appendChild(img); //父节点下添加子节点图片
    }
    </script>
  • 删除元素  找到节点的父节点后移除 xxx.parentNode.removeChild(xxx);　
  <button onclick="del()">删除</button>
    <script>
    //删除元素
    function del(){
        var img=document.getElementById("back");
        img.parentNode.removeChild(img);
    }
    </script>
  • 替换元素 找到节点的父节点后替换 xxx.parentNode.replaceChild(xxx);或者直接替换节点属性值　
<button onclick="rep()">替换</button>
    <script>
    function rep(){
        //1.直接更改属性
        var oldimg=document.getElementById("back");
        //oldimg.setAttribute("src","../html/img/t01f59fe896bc74d125.jpg");
        //2.替换节点
        var newimg=document.createElement("img");
        newimg.setAttribute("src","../html/img/t01f59fe896bc74d125.jpg");
        oldimg.parentNode.replaceChild(newimg,oldimg);
    }
    </script>
  • 事件　　
    • 窗口事件仅在 body 和 frameset 元素中有效， onload:当文档载入时执行脚本　　
<body onload="test()">
<script>
function test() {
document.write("hello");
}
</script>
</body
    • 表单事件
      • 获得焦点 onfocus="getFocus()"
      • 失去焦点 onblur="loseFocus()"
<body>
<script>
function a() {
console.log("获得焦点");
} f
unction b() {
console.log("失去焦点");
}
</script>
<form action="">
<p>帐号：<input onfocus="a()" onblur="b()" /></p>
<p>密码：<input /></p>
</form>
</body>
    • 键盘事件
      • 按下时触发 onkeydown 按下去
      • 松开时触发onkeyup 弹上来 
 <script>
//3.键盘事件
        //3.1按下时触发
        /* window.onkeydown= function(){
             console.log(event.keyCode);
             if (event.keyCode=='13')
             alert("success");
         }*/
        //3.2松开时触发
        window.onkeyup = function () {
            console.log(event.keyCode); //松开键盘才有输出
        }
</script>
    • 鼠标事件 
      • onclick 当鼠标被单击时执行脚本
      • ondblclick 当鼠标被双击时执行脚本
      • onmouseout 当鼠标指针移出某元素时执行脚本
      • onmouseover 当鼠标指针悬停于某元素之上时执行脚本 
<img src="../html/img/t01f59fe896bc74d125.jpg" id="back" onclick="dan(this)" ondblclick="shuang(this)">
 <img src="../html/img/t01f59fe896bc74d125.jpg" id="font"  onmouseover="xuan(this)"  onmouseout="chu(this)">
  <script>  
//4. 鼠标事件
    //4.1单击
    function dan(id){
        id.style.border="12px solid red";
        }
    //4.2双击
    function shuang(id){
        id.style.border="12px solid yellow";
        }
    //4.3悬停
    function xuan(id){
        id.style.border="12px solid pink";
        }
    //4.4 移出焦点
    function chu(id){
        id.style.border="12px solid green";
        }
</script>
    • 冒泡与捕获机制
      • 冒泡由子到父，逐级触发  取消冒泡机制event.stopPropagation();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
#father{
    width: 200px;
    height: 200px;
    background: black;
    padding: 20px;
}
#son{
    width: 100px;
    height: 100px;  
    background: greenyellow;  
}
</style>
<body>

    <div id="father">
        <div id="son"></div>
    </div>
    <script>
    //冒泡
    //冒泡由子到父，逐级触发  取消冒泡机制event.stopPropagation();
    document.getElementById("father").addEventListener("click",function(){alert("father")});
    //捕获由父到子，逐级触发
    document.getElementById("son").addEventListener("click",function(e){
        e.stopPropagation();
        alert("son")}); //不加 e.stopPropagation();会出现son弹窗后又出现father
    </script>
</body>
</html>
    • 捕获由父到子，逐级触发
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #father {
        width: 200px;
        height: 200px;
        background: black;
        padding: 20px;
    }

    #son {
        width: 100px;
        height: 100px;
        background: greenyellow;
    }
</style>

<body>
    <div id="father">
        <div id="son"></div>
    </div>
 <script>
   //捕获
   document.getElementById("father").addEventListener("click",function(){
       alert("father");
   },true);
   document.getElementById("son").addEventListener("click",function(){
       alert("son"); //先出现father弹窗再出现son
   },true);
    </script>

</body>

</html>

4. 面向对象OOP

  • 使用Object创建通用对象
  • 使用构造函数
  • 使用直接量 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //使用Object创建通用对象
        var user1 = new Object();
        user1.name = "forever";
        user1.age = 24;
        user1.say = function () {
            console.log("大家好，我叫" + this.name + ",我今年" + this.age + "岁了");
        }
        user1.say();
        //使用构造函数 
        function User(name, age) {
            this.name = name;
            this.age = age;
            this.say = function () {
                console.log("大家好，我叫" + this.name + ",我今年" + this.age + "岁了");
            }
        }
        var user2 = new User("hello", 23);
        user2.say();
        //使用直接量 
        var user3 = {
            name: 'nihao',
            age: 26, say: function () {
                console.log("大家好，我叫" + this.name + ",我今年" + this.age + "岁了");
            }
        }
        user3.say();
    </script>
</body>
</html>

5. JSON

  • json 用于数据交换，是一种轻量级的数据交换格式，易于阅读理解和机器解析
  • 格式：｛属性1：值1，属性2：值2，...｝
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>

        var js1 = {
            name: "java",
            price: 35
        }
        console.log(js1.name + "单价为" + js1.price); //java单价为35

        var js2 = [
            { name: "java", price: 35 },
            { name: "css", price: 20 },
            { name: "html", price: 35 }]
        console.log(js2[2].name + "单价为" + js2[2].price) // HTML单价为35

        var js3 = {
            name: "java",
            price: 35,
            para: [
                { id: 1, skill: "javaee", time: "3month" },
                { id: 2, skill: "javase", time: "2month" },
                { id: 3, skill: "jdbc", time: "5month" }
            ]
        }
        //java第2个技能为javase，学习时间为2month
        console.log(js3.name + "第" + js3.para[1].id + "技能为" + js3.para[1].skill + "，学习时间为" + js3.para[1].time); 

    </script>
</body>

</html>

四、BOM操作

1. window对象

  • 窗口属性

　　　　

<body>
    <button onclick="win()">点我试试</button>  
    <script>
    function win(){
        window.open("http:www.lagou.com","拉勾网","width=500px,height=500px,left=300px");
    }
    </script>
</body>
  • screen屏幕对象，可以知道屏幕大小
  • location定位对象，包含有关当前 URL 的信息，通常用来做页面跳转
  • history记录浏览器访问历史
  • navigator导航对象，记录包含有关访问者浏览器的信息 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <button onclick="lo()">点我</button>
    <script>
    //screen
     console.log("高"+screen.height+"，宽"+screen.width);
    //location 
    function lo(){
        console.log("当前页面url"+location.href); //当前页面URL
        location.reload();//刷新当前页面
        location.href="b.html";//跳转页面  
    }
    
    //navigator 导航
    var str="";
    str+="<p>浏览器代号"+window.navigator.appCodeName+"</p>";
    str+="<p>浏览器名称"+window.navigator.appName+"</p>";
    str+="<p>浏览器版本"+window.navigator.appVersion+"</p>";
    str+="<p>是否启用cookie"+window.navigator.cookieEnabled+"</p>";
    str+="<p>浏览器用户代理"+window.navigator.userAgent+"</p>";
    str+="<p>硬件平台"+window.navigator.platform+"</p>";
    document.write(str);
    
    </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bhtml</title>
</head>
<body>
    <button onclick="back()">b返回</button>
    <script>
    function back(){
        //history.back();
        //或者
        history.go(-1); //不加参数相当于刷新
    }
    </script>
</body>
</html>

2. 存储对象

  • 本地存储 
    • 保存数据 localStorage.setItem(属性名,值);
    • 读取数据 localStorage.getItem(属性名,值); 
    • 删除数据 localStorage.removeItem(属性名,值); 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //多样化保存
        localStorage.setItem("name1","rf");
        localStorage.name2="sdf";
        localStorage["name3"]="efs";
        //读取
        console.log(localStorage.name1);
        console.log(localStorage["name2"]);
        console.log(localStorage.getItem("name3"))

        //删除
        localStorage.removeItem("name1");
        
        console.log(localStorage.name1);
        console.log(localStorage["name2"]); //undefined
        console.log(localStorage.getItem("name3"))
    </script>
</body>
</html>
  • 会话存储： 刷新浏览器不代表结束会话，关闭代表结束会话，打开新的浏览器代表建立新的会话
    • 保存数据 sessionStorage.setItem(属性名,值); 
    • 读取数据  sessionStorage.getItem(属性名,值); 
    • 删除数据  sessionStorage.removeItem(属性名,值);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button onclick="dian()">点我</button>
    <h1 id="ti">点击了</h1>
    <script>
        //多样化保存
        sessionStorage.setItem("name1","rf");
        sessionStorage.name2="sdf";
        sessionStorage["name3"]="efs";
        //读取
        console.log(sessionStorage.name1);
        console.log(sessionStorage["name2"]);
        console.log(sessionStorage.getItem("name3"))

        //删除
        sessionStorage.removeItem("name1");
        
        console.log(sessionStorage.name1);
        console.log(sessionStorage["name2"]); //undefined
        console.log(sessionStorage.getItem("name3"))


        //计数器
    function dian(){
        if (sessionStorage.getItem("count")){
            sessionStorage.setItem("count", parseInt(sessionStorage.getItem("count"))+1);
        }else sessionStorage.setItem("count",1);
        document.getElementById("ti").innerHTML="已经点击了"+sessionStorage.getItem("count")+"次";
    }
    </script>
</body>
</html>

3. 计时操作

  • 周期性定时器  setInterval(动作，毫秒数)， 在毫秒数周期内循环执行动作
  • 停止定时器  clearInterval(定时器)  ，结束定时器
  • 一次性定时器 setTimeOut(动作，毫秒数)， 在毫秒数内执行一次动作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id ="title" align="center">我爱你中国</h1>
    <p><button onclick ="start()">start</button>
        <button onclick ="end()">end</button> </p> 
    <img src="img/1.jpg" id="photo" align="center" >
    <script>
    //闪烁的字体 （1秒1变色）
    setInterval(bian,100);
    var colors=["red","orange","yellow","green","blue","purple"];
    var i=0;
    function bian(){
        document.getElementById("title").style.color=colors[i++];
        if(i==colors.length) 
        i=0;
    }
    //闪烁的电子时钟
    setInterval(bian1,1000)
    function bian1(){
        var date=new Date();
        var str=date.getFullYear()+"年  "+(date.getMonth()+1)+"月  "+date.getDate()+"日 "+date
        .getHours()+  "分 "+date.getSeconds()+"秒 ";
        document.getElementById("title").innerHTML=str;
    }
    //模拟抽奖
    var imgs=["1.jpg","2.jpg","3.jpg","4.jpg"];
    function start(){
        time= setInterval(bian2,100);
    }
 
    function bian2(){
        var i=Math.floor(Math.random()*3);
        document.getElementById("photo").src="img/"+imgs[i];
    }

    function end(){
        clearInterval(time);
    }

    //延迟转换背景
    setTimeout(back,1000);
    function back(){ 
        document.body.style.backgroundColor="pink";
        }
   
    </script>
</body>
</html>

 

 

 

动作，毫秒数)

posted @ 2021-01-06 17:41  forever_fate  阅读(190)  评论(0)    收藏  举报