JavaScript基础笔记

JavaScript基础笔记

一、JavaScript简介

1.什么是JavaScript

JavaScript是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。

JavaScript 是一种功能强大的编程语言,简称JS。
用于开发交互式的Web页面和给页面添加动态效果。
JavaScript不仅可以运行在客户端,还可以运行在服务器端,比如:node.js。

2.Java与 JavaScript的关系

比较经典的回答有:Java 和 Javascript 的关系就像雷锋和雷峰塔,老婆和老婆饼,精卫和汪精卫的关系

Java与 JavaScript是完全不同的两种语言
相同之处:
JavaScript的语法借鉴了Java的语法
Java与 JavaScript都是面向对象的(虽然实现的方式略有不同)

Netscape之所以命名为 JavaScript:
1.JavaScript的语法借鉴了Java的语法,表示对Java的尊敬
2.是因为 Java是当时最流行的编程语言,带有 "Java" 的名字有助于这门新生语言的传播。

3.JavaScript特点

1).JavaScript是一种脚本(Script)语言
JavaScript与其他脚本语言一样,采用小程序段的方式实现编程。

2).JavaScript是一种解释性语言
JavaScript程序代码在运行过程中被逐行解释。

3).JavaScript是一种基于对象的语言
有关 JavaScript的对象特性, 将贯穿整套教程。

4).JavaScript是一种安全性语言
称为具有 Web安全特性,它不允许访问本地的硬盘,也不允许对网络文档进行修改和删除,而只能通过浏览器实现信息浏览或动态交互。

5).JavaScript跨平台性
JavaScript的执行依赖于浏览器本身, 而与操作环境无关。只要是能运行浏览器的计算机,而该浏览器又支持 JavaScript,则脚本就可正确执行。

简单概括为:

1.简单、易学、易用;

2.跨平台;IE、Navigator

3.符合ECMA(欧洲计算机制造协会)标准,可移植;

4.事件驱动式的脚本程序设计思想;

5.动态、交互式的操作方式。

4.ES,JS和JScript关系

ECMA:国际标准化组织
ECMAScript:简称ES,可以理解为是JavaScript的一个标准
JavaScript:网景公司开发的一种脚本语言
JScript:微软公司开发的一种脚本语言

JS和JScript的差别微乎其微,对使用者没影响。

5.js内部引入,注释

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--1.js开发工具:HBuilder-->
        <!--2.js调试工具:火狐浏览器-->

        <!--js内部引入-->
        <script type="text/javascript">
//          弹出带有一条指定消息和一个确定按钮的警告框,简称:输出弹窗
//          alert("我要学代码,我们的网址:www.51xcode.com");
//          alert("我要学代码1");
            /*alert("我要学代码2");
            alert("我要学代码3");*/

//          js注释:
//          1.单行注释以 // 开头。
//          2.多行注释以 /* 开始,以 */ 结尾
//          3.HBuilder注释快捷键: ctrl+/
        </script>
    </head>
    <body>
    </body>
</html>

6.外部引入和行内引入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--1.内部引入-->
        <!--<script type="text/javascript">
            alert("我要学代码1");
        </script>-->

        <!--2.外部引入-->
        <!--<script src="js/06.js" type="text/javascript" charset="utf-8"></script>-->
    </head>
    <body onload="alert('我是行内引入')">

        <!--3.行内引入,用得少-->
        <!--行内引入方式必须结合事件来使用,但是内部js和外部js可以不结合事件--->
        <!--<button onclick="alert('我要学代码3')">点击</button>-->

    </body>
</html>

7.输入输出工具

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          1.显示可提示用户进行输入的对话框,简称:输入弹窗。
//          语法: prompt(对话框中显示的纯文本,默认的输入文本);两个参数均为可选。
//          prompt();
//          prompt('请输入姓名:');
//          prompt('请输入姓名:','张三');

//          2.弹出带有一条指定消息和一个确定按钮的警告框,简称:输出弹窗
//          语法: alert(对话框中显示的纯文本);
//          alert('我要学代码');

//          3.输出到页面,会以HTML的语法解析里面的内容
//          语法:document.write(参数1,参数2,参数3,...) ,它们将按顺序被追加到文档中。
//          document.write("我要学代码1");
//          document.write("<span style='color: red;'>我要学代码2</span>");
            document.write("<span style='color: red;'>我要学代码2</span>","<br>","<span style='color: blue;'>我要学代码3</span>");
        </script>

    </head>
    <body>

    </body>
</html>

8.控制台输出信息

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          在控制台上输出的信息,浏览器按下 F12 打开控制台,Console 即控制台
//          可以接受任何字符串、数字和js对象,可以看到清楚的对象属性结构,不会阻塞程序的执行.
//          console.log("我要学代码1");

            var zxw={name:'李四',sex:'男',age:'18'};

            alert("我要学代码");

            console.log(zxw);

        </script>

    </head>
    <body>
    </body>
</html>

9.引入区域和执行顺序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入区域-->
        <!--1.js可以引入文档中的任何区域,js都可以正确执行-->
        <!--2.js通常写在head区域或者body区域-->

        <!--执行顺序-->
        <!--1.代码在执行过程中,另一段代码想要执行就必须等当前代码执行完成后才可以进行-->
        <!--2.JS是按照语句出现的先后顺序执行,和引入方式无关-->
        <script src="js/06.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">
            alert("我要学代码1");
//          console.log('123456');

            alert("我要学代码5");
        </script>

    </head>

    <body>

    </body>
</html>

10.js对DOM树的阻塞

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var abc=document.getElementById("zxw");
                abc.style.color="red";
            }   
        </script>

    </head>
    <body>
        <!--js对DOM树的阻塞-->
        <!--1.DOM: js操作网页的接口,全称为“文档对象模型”(Document Object Model)。可以简单理解成页面中的元素。-->
        <!--2.DOM树:元素和元素之间的关系,可以简单理解成页面的结构。-->
        <!--3.js的执行会阻塞页面结构的加载,此时 DOM树是不完整的,这样在调用一些 js代码时就可能报错。-->
        <!--4.防止阻塞的两种方法:-->
            <!--a.把所有js代码放在body区域的最后-->
            <!--b.添加window.onload事件,表示网页加载完毕后(包括图片、css文件等等)执行的操作-->
        <div id="zxw">我要学代码</div>

        <!--<script type="text/javascript">
            var abc=document.getElementById("zxw");
            abc.style.color="red";
        </script>-->
    </body>
</html>

11.js发生错误时的阻塞

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var abc=document.getElementById("zxw");
                abc.style.color="red";
                alert(111);
                bc.style.fontSize="50px";

                abc.style.fontWeight="700";
                abc.style.textAlign="center";
            }   
        </script>

    </head>
    <body>
        <!--js发生错误时的阻塞-->
        <!--1.根据js执行顺序:按照语句出现的先后顺序执行,上一段代码执行完毕,才能执行下一段代码-->
        <!--2.如果一段代码出现错误,那么这段代码之后的代码都不能执行-->
            <!--3.根据浏览器控制台错误提示对错误进行调试-->
            <!--4.根据alert()的阻塞特征,可以对错误进行调试-->
        <div id="zxw">我要学代码</div>

    </body>
</html>

12.js学习方法和技巧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            document.getElementById("")
        </script>

    </head>
    <body>
        <!--1.不要背单词,善用开发工具提示功能;-->
        <!--2.出错不可怕,善用调试工具的错误提示功能-->
        <!--3.善用js参考手册和搜索工具-->
        <!--4.将错误提示和知识点整理成册-->
        <!--5.经常使用的认真学习,不常用的了解,根本不用的不学习-->
    </body>
</html>

二、变量及数据类型

01.变量声明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          变量:从字面上看,变量是可变的量;从编程角度讲,变量是用于存储数据的容器。

//          01.先声明后赋值
//          var xdm;
//          xdm = "我要学代码";

//          02.边声明边赋值
//          var xdm = "我要学代码";
//          var wyxdm = "51学代码";

//          03.多变量一起声明(用 ,隔开)
//          var xdm,wyxdm;
//          xdm = "我要学代码";
//          wyxdm = "51学代码";

            04.多变量一起声明一起赋值(用 ,隔开)
            var xdm="我要学代码",wyxdm = "51学代码";

            alert(xdm);

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

02.js书写规范

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          alert("我要学代码");
//          alert("我要学代码"); 错的
//          Alert("我要学代码"); 错的

            var xdm="我要学代码";
//          alert(XDM);  变量xdm和XDM不一样

//          1.所有代码一律使用英文半角输入
//          2.js严格区分大小写

        </script>

    </head>
    <body>
        <div>我要学代码1</div>
        <DIV>我要学代码2</DIV>
    </body>
</html>

03.变量命名注意事项

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          var zxw = "我要自学网";

//          var ZXW = "我要自学网";

//          1.变量名不能以数字开头
//          var 123 = "我要自学网";
//          var 123zxw = "我要自学网";
//          var zxw123 = "我要自学网";
//          var z1x2w3 = "我要自学网";

//          2.可以使用中文作变量名,但最好不用中文
//          var 自学网 = "我要自学网";

//          3.不能使用关键字命名
//          关键字”就是 JS 本身已经使用了,具有一定特殊的含义,你就不能再用它们充当变量名啊方法名啊什么的。包括(按字母排序):break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等
//          var var = "我要自学网";
//          var this = "我要自学网";

//          4.不能使用js保留字命名
//          实际上就是预留的“关键字”,意思是现在虽然现在还不是关键字(也就是本身还不具备特殊含义的),但是未来可能会成为关键字的,你一样是不能使用它们当变量名啊方法名的。包括(按字母排序):abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。
            var class = "我要自学网";

            document.write(class);
        </script>
    </head>
    <body>
    </body>
</html>

04.变量命名规范

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          01.变量名只能以字母,_,$开头,余下的可以是字母,数字,_,$;
//          var zxw = "我要自学网";
//          var _51 = "我要自学网";
//          var $51 = "我要自学网";            
//          var $_zxw51 = "我要自学网";
//          var _$zxw51 = "我要自学网";

//          02.命名一定要有意义,要便于识别.可以是英文,拼音,但一定要有意义
            var wyzxw = "我要自学网";
            var myname ="张三";
            var myage ="15";
            var beijing = "北京";

//          03.js习惯的命名规范(驼峰命名法)
//              第一个单词以小写字母开始;第二个单词的首字母大写
//              每一个单词的首字母都采用大写字母
            var wyZxw = "我要自学网";
            var myName ="张三";
            var BeiJing = "北京";

            document.write(_$zxw51);
        </script>
    </head>
    <body>
    </body>
</html>

05.单双引号的用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          单双引号的用法
//              1.最外面用了双引号了,那么里面就不能再用双引号了,因为引号是成双对的,浏览器读到一个双引号后,到第2个双引号时才算结束;
//              2.同理,浏览器读到一个单引号后,必须要读到第二个单引号才算结束;
//          document.write("<div class="box">张三说:"中午一起吃饭"</div>");
//          document.write('<div class="box">张三说:"中午一起吃饭"</div>');
//          document.write("<div class='box'>张三说:'中午一起吃饭'</div>");
//          document.write("<div class=\"box\">张三说:\"中午一起吃饭\"</div>");
//              3.不管是单引号还是双引号,里面都可以套相反的引号;
//              4.但是不可以双引号里面套单引号,这个单引号再套双引号,这是不行的;
//              5.如果使用相同的引号,再套引号,需要用反斜杠 \ 转义。
            document.write('<div class="box">张三说:"中午一起到\'北京\'吃饭"</div>');

        </script>
    </head>
    <body>

    </body>
</html>

06.分号的用法及资源共享

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script type="text/javascript">
            var zxw = "我要自学网"; 
            var beiJing = "北京";

//          js中分号的用法:
//              1.分号表示一段功能的结束
//              2.一段功能结束,有换行,可以不用分号
//              要求:不管有没有换行,一段功能的结束都用分号          
        </script>

    </head>
    <body>

        <!--多个js区块可以看作一个整体,也就是说:无论是内部引入或外部,有多少个js区块,js区块之间可以共享资源,可以相互调用资源-->

        <script src="js/06.js" type="text/javascript" charset="utf-8"></script>

        <!--<script type="text/javascript">
            document.write(beiJing);
        </script>-->

    </body>
</html>

07.变量小练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          变量不仅可以存储具体的值,还可存储运算结果

//          var zxw = "www.51zxw.net";
//          var zxw = 3+4;

            var zxw = prompt("请输入姓名");

            document.write(zxw);
        </script>

    </head>
    <body>
    </body>
</html>

08.undefined和null类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          var zxw;
//          1.undefined :表示空变量,变量被声明但没赋值
//          2.null :空对象,表示什么也没有,连声明都没有

//          typeof:检测数据类型,是运算符,不是函数
//          var t = typeof zxw;
            var t = typeof null;

            document.write(t);
        </script>

    </head>
    <body>
    </body>
</html>

09.数值和字符串类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

//          1.undefined :表示空变量,变量被声明但没赋值
//          2.null :空对象,表示什么也没有,连声明都没有
//          3.number :数值类型.整数或小数(浮点数)
//              不要使用js做浮点运算,js浮点运算能力很差

//          4.string :表示字符串类型,凡是用引号包起来的都是字符串类型,不管里面是文字还是数字

//          var zxw = 123;

//          var zxw = 123.123;

//          var zxw = 3.1-1.9;
//          var zxw = 2.3+2.9;

//          var zxw = "我要自学网";
//          var zxw = '我要自学网';
            var zxw = "123456";

            var t = typeof zxw;

            document.write(t,"<br>",zxw);
        </script>

    </head>
    <body>
    </body>
</html>

10.布尔值和对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

//          1.undefined :表示空变量,变量被声明但没赋值
//          2.null :空对象,表示什么也没有,连声明都没有
//          3.number :数值类型.整数或小数(浮点数)
//              不要使用js做浮点运算,js浮点运算能力很差

//          4.string :表示字符串类型,凡是用引号包起来的都是字符串类型,不管里面是文字还是数字

//          5.boolean:布尔值.结果只有两种:true真或false假

//          6.object :对象类型,数组属于特殊的对象

//          var zxw = 4>7;
//          var zxw = 4<7;
//          var zxw = false;
//          var zxw = true+false;
//          var zxw = true+10;
//          var zxw = 10+false;

//          var zxw = [1,2,3,4,5];
            var zxw = {name:"张三",age:"15"};

            var t = typeof zxw;

            document.write(t,"<br>",zxw);
        </script>

    </head>
    <body>
    </body>
</html>

11.变量的赋值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

//      js是弱类型语言:数据类型可以被忽略的语言。
//      同一个变量,后赋的值会覆盖先赋的值
            var zxw 
//          zxw = 123;
//          zxw = "我要自学网";

//          zxw = "1"+1;
//          zxw = 1;
//          zxw = zxw+1;

            var a = 1;
            zxw = a = 5;

            var t = typeof zxw;

            document.write(t,"<br>",zxw);
        </script>

    </head>
    <body>
    </body>
</html>

三、运算符

01.算术运算符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          1.加+,减-,乘*,除/,取余%
//          var a = 3+4;    //7
//          var a = 6-3;    //3
//          var a = 3*4;    //12
//          var a = 9/3;   //3

//          取余:两个数相除得到余数
            var a = 10%3;   //1

//          var b = prompt()%3;
//          1,4,7,10,13,16,19

            document.write(a);
        </script>

    </head>
    <body>
    </body>
</html>

02.自增自减

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          1.加+,减-,乘*,除/,取余%
//          var a = 3+4;    //7
//          var a = 6-3;    //3
//          var a = 3*4;    //12
//          var a = 9/3;   //3

//          取余:两个数相除得到余数
//          var a = 10%3;   //1

//          2.自增++,自减--
            var a = 3;
//          a++;   //4
//          ++a;   //4
//          var b = 5*a++;  //15  ++在后,先参与运算,再自增
//          var b = 5*++a;  //20  ++在前,先自增,再参与运算        
//          var b = 5*a;    

//          a--;   //2
//          --a;   //2
//          var b = 5*a--;  //15  --在后,先参与运算,再自减
            var b = 5*--a;  //20  --在前,先自减,再参与运算    

            document.write(a,"<br>",b);
        </script>

    </head>
    <body>
    </body>
</html>

03.字符串运算符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          字符串运算符,+连接,不是加法
//          如果+号一侧是字符串,表示连接,并不是加法运算
//          var a = "1"+1;
//          var a = 1+"1";
//          var a = "1"+"1";

//          var a = "我要自学网"+"www.51zxw.net"

//          document.write( typeof a,"<br>", a );

//          字符串拼接练习
            var name = prompt("请输入姓名");
            var b = prompt("请输入课程");
            document.write('<div style="color: red;font-size: 30px;">'+name+'在“我要自学网”学习了'+b+'课程</div>')
        </script>

    </head>
    <body>

    </body>
</html>

04.算术及字符串练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script type="text/javascript">
//          var a = 1+1;   //2  如果+两侧的值为数字型,可进行正常的数值运算
//          var a = "1"+1; //11 只要+有一侧为字符串,表示连接

//          除了加法以外,纯数字字符串可以进行算术运算
//          如果存在纯数字字符串(如:"5"),计算机自动转其为数字型进行运算
//          var a="6"-2;   //4
//          var a="6"-"2";   //4
//          var a="6"*2;    //12
//          var a="6"/2;    //3
//          var a="6"%2;     //0

//          只要有一侧为非纯数字字符串,结果为NaN(非数字类型)
//          var a="51zxw"-2;  //NaN
//          var a="51zxw"*2;  //NaN
//          var a="51zxw"/2;   //NaN
//          var a="51zxw"%2;   //NaN

            var a = "6"*1;  //用来作纯数字字符串转数值类型

            document.write(typeof a, "<br>",a);
        </script>

    </head>
    <body>
    </body>
</html>

05.赋值运算符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          1.基本的赋值运算符是=,一开始可能会以为它是“等于”,其实不是的,可以读作"等于"
//              赋值运算符实际上意味着把等号右边的值或表达式的值赋给等号左边
//          var a = "我要自学网";

            var a ;
            a = 25;
//          a = a+5;

//          +=先加后赋值
//          a += 10;     //a = a+10;   35

//          -=先减后赋值
//          a -= 10;     //a = a-10;   15

//          *=先乘后赋值
//          a *= 10;    //a = a*10;  250

//          /=先除后赋值
//          a /= 10;    //a = a/10;  2.5    

//          %=先取余后赋值
            a %= 10;    //a = a%10;  5

            document.write(a);
        </script>

    </head>
    <body>
    </body>
</html>

06.关系运算符1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script type="text/javascript">
//          1.关系(比较)运算符 :  >、<、>=、<=、==(等于)、!=(不等于)、===(全等)、!==(全不等)
//          2.比较运算符的运算结果是布尔值(true或false)
            var b;
//          b = 4>3;   //true
//          b = 4<3;   //false
//          b = 4>=3;   //true           
//          b = 4<=3;   //false  

//          “=”表示赋值,“==”表示等于
//          b = 4==3;   //false
            b = 4!=3;   //true

            document.write(b);
        </script>
    </head>
    <body>
    </body>
</html>

07.关系运算符2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script type="text/javascript">
//          1.关系(比较)运算符 :  >、<、>=、<=、==(等于)、!=(不等于)、===(全等)、!==(全不等)
//          2.比较运算符的运算结果是布尔值(true或false)
//          3.>、<、>=、<=、==(等于)、!=(不等于):只比较值,不比较类型
//          4.===(全等)、!==(全不等):既比较值,也比较类型

            var b;
//          b = "4">3;   //true
//          b = 4<"6";   //true
//          b = "4">="3";   //true           
//          b = "4"<=3;   //false  

//          “=”表示赋值,“==”表示等于
//          b = "4"==4;   //true
//          b = 4!="3";   //true

//          b = 4===4;    //true
//          b = "4"===4;   //false
//          b = "4"==="4";   //true

//          b = 4!==5;    //true
//          b = "4"!==4;   //true
            b = "4"!=="4";   //false            

            document.write(b);
        </script>
    </head>
    <body>
    </body>
</html>

08.字符串的比较

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          1.字符串可以比较
//          2.字符串会转成ASCII码值,再比较
//          3.字母越靠后越大,小写字母比大写字母大
//          4.从左到右比较,直到比较出结果

            var b;
//          b = "a" > "b";  //false
//          b = "a" < "b";  //true 
//          b = "c"<"y";   //true
//          b = "a"<"C"    //false
//          b = "abc">"Def" //true 
            b = "abc"<"aef" //true 

//          b = "张三"<"李四";

            document.write(b);
        </script>

    </head>
    <body>
    </body>
</html>

09.逻辑运算符1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          1.逻辑运算符:&&(与)、||(或)、!(非)
//          2.逻辑运算符的运算结果有两个true或false。

//           "与"运算:所有条件全部满足,才能"成立";
//          var b = 5>3 && 4<7;    //true
//          var b = 5>3 && 4>7;    //false 
//          var b = 5>3 && 4>7 && 8<10;    //false 

//          "或"运算:条件有一个满足,就能"成立";
//          var b = 5>3 || 4>7 || 8<10;    //true

//          "非"运算:取反,真的变假的,假的变真的;
//          var b = !5>3;    //false

//          运算符综合运用
//          var b = !5>3 && 4<8;    //false
//          var b = !5<3 && 4<8;    //true

//          var b = !5<3 || 4<8;    //true
//          var b = !5>3 || 4<8;    //true
            var b = !5>3 || 4>8;    //false

            document.write(b);
        </script>

    </head>
    <body>
    </body>
</html>

10.逻辑运算符2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>     
        <script type="text/javascript">
//          var a = prompt();   
            var b;
//          b = !5>3   //false
//          b = a=="";  //true
//          b = !a=="";  //false  判断字符串是否为空

//          逻辑运算符可以对任何类型的数据进行运算,运算的时候转为对应的布尔值
//              undefined : 假;
//              Null : 假;
//              false : 假;
//              Number : 除0以外都是真;
//              string : 除空字符串以外都是真;
//              对象 : 真

//          if (true && 123 && "aaa" && {} ) {
//              document.write("真");
//          } else{
//              document.write("假");
//          };

            if (false || 0 || ""  ) {
                document.write("真");
            } else{
                document.write("假");
            };
//          document.write(b);
        </script>

    </head>
    <body>
    </body>
</html>

11.三元运算符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          三元运算符,三目运算符,三元表达式
//          语法:条件 ? 为真时返回的数据 :为假时返回的数据
//          var a = 5>3 ? 5 : 3;
//          var a = 5<3 ? 5 : 3;         
//          var a = 5<3 ? "真" : "假";

            var a = prompt("请输入年龄");
            var b = prompt("请输入年薪,单位万");

//          var c = a>20 ? "可以娶老婆" : "不准娶老婆";
//          var c = a>20 && a<60 ? "可以娶老婆" : "不准娶老婆";

//          括号():可以改变运算符的优先级
            var c = a>20 && (a<60 || b>100) ? "可以娶老婆" : "不准娶老婆";

            document.write(c);
        </script>
    </head>
    <body>
    </body>
</html>

四、条件语句和循环语句

01.if条件语句

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          如果:成绩95分以上
//          结果:压岁钱加倍
//          否则:压岁钱没有

//          1.条件成立时执行,条件不成立时什么也不做
//          if(条件){
//              条件成立时要执行的代码
//          };

//          2.条件成立时执行,条件不成立时也是执行
//          if(条件){
//              条件成立时要执行的代码
//          }else{
//              条件不成立时要执行的代码
//          };

            var a = prompt();

//          if( a>95){
//              document.write("压岁钱加倍");
//          }

            if( a>95){
                document.write("压岁钱加倍");
            }else {
                document.write("压岁钱没有");
            }

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

02.if多条件判断的写法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          如果:语文成绩95分以上,数学成绩96分以上
//          结果:压岁钱加倍,作业没有
//          否则:压岁钱没有,练习册5本

//          1.条件成立时执行,条件不成立时什么也不做
//          if(条件){
//              条件成立时要执行的代码
//          };

//          2.条件成立时执行,条件不成立时也是执行
//          if(条件){
//              条件成立时要执行的代码
//          }else{
//              条件不成立时要执行的代码
//          };

//          注意:条件可以有多个,可以做多件事(执行多段代码)

            var a = prompt("语文成绩");
            var b = prompt("数学成绩");

//          if( a>95){
//              document.write("压岁钱加倍");
//          }

            if( a>95 && b>96){
                document.write("压岁钱加倍");
                alert("作业没有");
            }else {
                document.write("压岁钱没有");
                alert("练习册5本");
            }

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

03.if条件多次判断的写法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          如果:成绩90分以上,压岁钱加倍,作业没有
//          如果:成绩80分以上,压岁钱加倍,作业练习册1本
//          如果:成绩70分以上,压岁钱照旧,作业练习册2本
//          如果:成绩60分以上,压岁钱没有,作业练习册3本
//          如果:成绩60分以下,压岁钱没有,作业练习册4本

//          1.条件成立时执行,条件不成立时什么也不做
//          if(条件){
//              条件成立时要执行的代码
//          };

//          2.条件成立时执行,条件不成立时也要执行
//          if(条件){
//              条件成立时要执行的代码
//          }else{
//              条件不成立时要执行的代码
//          };

//          3.对条件进行多次判断,执行不同的代码
//          if(条件1){
//              条件1成立时要执行的代码
//          }else if(条件2){
//              条件2成立时要执行的代码
//          }else if(条件3){
//              条件3成立时要执行的代码
//          }else {
//              条件都不成立时要执行的代码
//          };

//          注意:条件可以有多个,可以做多件事(执行多段代码)
//              if一般用于范围的判断

            var a = prompt("成绩");

            if( a>90){
                document.write("压岁钱加倍,作业没有");
            }else if(a>80){
                document.write("压岁钱加倍,作业练习册1本");
            }else if(a>70){
                document.write("压岁钱照旧,作业练习册2本");
            }else if(a>=60){
                document.write("压岁钱没有,作业练习册3本");
            }else {
                document.write("压岁钱没有,作业练习册4本");
            };

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

04.switch条件语句

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          8号:食品8折
//          18号:服装8折
//          28号:电器8折

//          switch判断:主要用于精确值的判断

            var a = prompt("请输入日期")*1;
            switch (a){   //()中是要判断的对象
                case 8:   //case是要判断的对象的值
                    document.write("食品8折");
                    break;   //条件成立时结束后面的判断
                case 18:
                    document.write("服装8折");
                    break;
                case 28:
                    document.write("电器8折");
                    break;
                default:    //条件都不成立时   
                    document.write("不打折");
                    break;
            }

        </script>

    </head>
    <body>
    </body>
</html>

05.for循环初识

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          for循环:在给定条件下,反复执行同一段代码块;
//          for循环的规则:
//              01.先声明一个变量,赋初始值;
//              02.检测变量的值是否满足条件;
//              03.若满足条件,执行的代码块,不满足,终止循环;
//              04.变量自增或自减;
//              05.再检测变量的值是否满足条件;
//              06.反复以上规则执行,至条件不满足时终止

//          for循环语法:
//          for(声明变量=初始值; 变量和结束值作比较;怎样变化){
//              要执行的代码块
//          };

            for (var i=0; i<100; i++) {
                document.write("你好,");
            }

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

06.for循环注意事项

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          for (var i=0; i<100;i++) {
//              document.write(i+1+",");
//          };

//          for (var i=1; i<=50;i++) {
//              document.write(i+",");
//          };

//          for (var i=50; i>0;i--) {
//              document.write(i+",");
//          };

//          for循环注意事项:循环必须要能正常结束,否则会无限循环,浏览器会卡死
            for (var i=50; i>0;i++) {
                document.write(i+",");
            };

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

07.实战0至100连加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          0+1=1
//          1+2=3
//          3+3=6
//          6+4=10
//          10+5=15

            var a = 0;  
            for (var i=1;i<=100;i++) {               
                document.write(a+"+"+i+"="+(a+i)+"<br>");
                a=a+i;
            }

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

08.双层for循环初识

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          在页面中每行输出5个“你好”,共输出10行
            for (var i = 0;i<10;i++) {          //执行10次
                for (var a =0;a<5;a++  ) {  //输出5个“你好”
                    document.write("你好,");
                };
                document.write("<br>");
            };

//          双层for循环:
//          01.里外层循环声明的变量名不能相同;
//          02.外层循环每执行一次,里层循环要执行一轮;

//          作业:第1行1个A,第2行2个A,以此类推,共5行

        </script>

    </head>
    <body>
    </body>
</html>

09.双层for循环练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          第1行1个A,第2行2个A,以此类推,共5行
//          for (var i = 1;i<=5;i++) {          //执行5次
//              for (var a =0;a<i;a++) {  
//                  document.write("A");
//              };
//              document.write("<br>");
//          };

//          第1行5个A,第5行1个A,以此类推,共5行

            var b = prompt();
            for (var i = 0;i<b;i++) {          //执行5次
                for (var a =0;a<(b-i);a++) {  
                    document.write("A");
                };
                document.write("<br>");
            };

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

10.双层循环输出九九乘法表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            for (var i=1;i<=9;i++) {
                for (var a=1;a<=i;a++) {
                    var b=a+"X"+i+"="+(a*i)+"   ";
                    document.write(b);
                };
                document.write("<br>");
            }
        </script>
    </head>
    <body>
    </body>
</html>

11.if-for综合练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//      要求:
//          1.奇数行的奇数列输出红色"您"字,偶数列输出蓝色"好"字
//          2.偶数行的奇数列输出蓝色"您"字,偶数列输出红色"好"字   
//          for (var i=1;i<=10;i++) {
//              for (var a=1;a<=5;a++) {
//                  document.write("您好");
//              };
//              document.write("<br>");
//          }

//          for (var i=1;i<=10;i++) {
//              for (var a=1;a<=10;a++) {
//                  if (a%2==1) {
//                      document.write('<span style="color: red;">您</span>');
//                  } else{
//                      document.write('<span style="color: blue;">好</span>');
//                  };  
//              };
//              document.write("<br>");
//          }
            var rows=prompt("输入行数");
            var cols=prompt("输入列数");
            for (var i=1;i<=rows;i++) {
                if (i%2==1) {
                    for (var a=1;a<=cols;a++) {
                        if (a%2==1) {
                            document.write('<span style="color: red;">您</span>');
                        } else{
                            document.write('<span style="color: blue;">好</span>');
                        };  
                    };
                } else{
                    for (var a=1;a<=cols;a++) {
                        if (a%2==1) {
                            document.write('<span style="color: blue;">您</span>');
                        } else{
                            document.write('<span style="color: red;">好</span>');
                        };  
                    };
                };
                document.write("<br>");
            }
        </script>

    </head>
    <body>
        <!--<span style="color: red;">您</span>
        <span style="color: blue;">好</span>-->
    </body>
</html>

12.while循环

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          while循环:一般用在循环次数不确定的情况下
//          while循环开保险柜:
            var a=1;
            var b=Math.floor(Math.random() * (50 - 1)) + 1;
//          document.write(b);
            alert(b);
//          while循环:
            while(a<b){
                document.write("密码:"+a+"-不对<br>")
                a++;
            }

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

13.do-while循环

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          while循环:一般用在循环次数不确定的情况下
//          while循环开保险柜:
            var a=1;
            var b=Math.floor(Math.random() * (50 - 1)) + 1;
//          var b=12;
//          document.write(b);
            alert(b);
//          1.while循环:先判断条件,条件成立才执行
//          while(a<b){
//              document.write("密码:"+a+"-不对<br>")
//              a++;
//          }

//          2.do-while循环:先执行一次,再判断条件
//          do{
//              document.write("密码:"+a+"-不对<br>")
//              a++;
//          }while(a<b);         

//          3.while循环+判断条件
//          while(a<=b){
//              if (a==b) {
//                  document.write("密码:"+a+"-正确<br>");
//              } else{
//                  document.write("密码:"+a+"-不对<br>")
//              };
//              a++;
//          };

//          4.break:终止全部循环
            while(a<1000){
                if (a==b) {
                    document.write("密码:"+a+"-正确<br>");
                    break;
                }; 
                document.write("密码:"+a+"-不对<br>")
                a++;
            };
        </script>
    </head>
    <body>
    </body>
</html>

14.终止while循环

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          while循环:一般用在循环次数不确定的情况下
//          while循环开保险柜:
            var a=1;
            var b=Math.floor(Math.random() * (999999 - 1)) + 1;
//          var b=12;
//          document.write(b);
            alert(b);
//          1.while循环:先判断条件,条件成立才执行
//          while(a<b){
//              document.write("密码:"+a+"-不对<br>")
//              a++;
//          }

//          2.do-while循环:先执行一次,再判断条件
//          do{
//              document.write("密码:"+a+"-不对<br>")
//              a++;
//          }while(a<b);         

//          3.while循环+判断条件
//          while(a<=b){
//              if (a==b) {
//                  document.write("密码:"+a+"-正确<br>");
//              } else{
//                  document.write("密码:"+a+"-不对<br>")
//              };
//              a++;
//          };

//          4.break:终止全部循环
//          while(a<1000){
//              if (a==b) {
//                  document.write("密码:"+a+"-正确<br>");
//                  break;
//              }; 
//              document.write("密码:"+a+"-不对<br>")
//              a++;
//          };

//          5.continue:终止本次循环
//          while(a<1000){
//              if (a==b) {
//                  document.write("密码:"+a+"-正确<br>");
//                  break;
//              }; 
//              if (a==11||a==22||a==33||a==44) {
//                  a++;        //终止本次循环前,让变量自增
//                  continue;   //终止本次循环,开始下次循环,后面的代码不会执行
//              }; 
//              document.write("密码:"+a+"-不对<br>")
//              a++;
//          };  

//          6.方案优化
            while(a<1000000){
                if (a==b) {
                    document.write("密码:"+a+"-正确<br>");
                    break;
                }; 
                if (a==11||a==22||a==33||a==44) {
                    a++;        //终止本次循环前,让变量自增
                    continue;   //终止本次循环,开始下次循环,后面的代码不会执行
                }; 

                a++;
            };              

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

五、函数

01.函数初识

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//      sin函数:对边/斜边
//      函数:
//          1.是被设计为执行特定任务的代码块,就相当于电饭锅
//          2.把相同的重复的流程打包,方便重复调用
//      function 电饭锅(米,水,电){
//          1.加热到100度;
//          2.保温30分;
//      };

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

02.创建函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          1.基本方式定义函数:
//              通过 function 关键词进行定义,其后是函数名,括号 (),大括号{}。
//          语法:
//          function 函数名(参数1,参数2,...){
//              要执行的代码(函数体)
//          };

//          function dfg(){
//              alert("饭做好了");
//          };

//          2.自面量方式定义函数(赋值法定义函数)
//              通过 function 关键词进行定义,其后,括号 (),大括号{}。并赋值给一个变量 
//              变量名就相当于函数名
//          var dfg = function (参数1,参数2,...){
//              要执行的代码(函数体)
//          };

            var dfg = function (){
                alert("饭做好了");
            };

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

03.函数调用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          function cfb (){
//              for (var i=1;i<=9;i++) {
//                  for (var a=1;a<=i;a++) {
//                      var b=a+"X"+i+"="+(a*i)+"   ";
//                      document.write(b);
//                  };
//                  document.write("<br>");
//              };
//          };

            (function cfb (){
                for (var i=1;i<=9;i++) {
                    for (var a=1;a<=i;a++) {
                        var b=a+"X"+i+"="+(a*i)+"   ";
                        document.write(b);
                    };
                    document.write("<br>");
                };
            })();

//          调用函数:  函数名();
//              1.当事件发生时(当用户点击按钮时)
//              2.当 JS 代码调用时
//              3.函数创建完成后自动调用

//          cfb();
//          
//          cfb();

        </script>

    </head>
    <body>
    </body>
</html>

04.函数的传参

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          创建函数的流程:
//              1.声明函数,确定函数名称,搭建函数框架
//              2.想清楚让函数怎样执行(执行过程)
//              3.确定函数的参数

            function jiafa(x,y){                
                var a= x+y;             
                alert(a);               
            };

            jiafa(13,5);

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

05.形参和实参

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            function jiafa (x,y){   //x,y:形参,形式上的参数,没有实际值,形参只作用于函数内部
                var jf=x+y;
                alert(jf);  
            };

//          jiafa(12,15);  //实参,实际有值的参数

//          var x=10;
//          var y=20;
//          jiafa(x,y);   //实参,实际有值的参数

//          var a=10;
//          var b=30;
//          jiafa(a,b);

            var a=10;
            var b=30;
            var c=40;
            jiafa(a,b,c);   //实参个数大于形参,函数可以执行       
            jiafa(a);       //实参个数小于形参,函数不能执行

        </script>

    </head>
    <body>
    </body>
</html>

06.函数返回值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            function jiafa (x,y){   
                var jf=x+y;

//              返回执行结果,不会在页面中显示,需要用变量来接收
//              函数遇到return,会立即返回结果,并中止函数
                return jf;

                var zxw=jf*3;
                return zxw;
            };

//          函数外部使用变量接收函数的执行结果
//          结果想怎么用就怎么用
            var a= jiafa(12,15); 

//          var b=a*2;
//          
//          alert(b);
            document.write(a);

        </script>

    </head>
    <body>
    </body>
</html>

07.函数中调用函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          function jiafa(x,y){
//              var jf=x+y;
//              return jf;
//          };

            function jiafa2(x,y,z){
                var jf=x+y;
                var re= chengfa(jf,z);
                return re;
            };

            function chengfa(x,y){
                var cf=x*y;
                return cf;
            };

//          要求:计算(2+3)*4的结果
//          方法1:
//          var a=jiafa(2,3);       
//          var b=chengfa(a,4);

//          方法2:
            var b=jiafa2(2,3,5);

            alert(b);

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

08.局部变量和全局变量

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

//          1.函数外部声明的变量为全局变量,在整个js文档中都可调用;
//          var a="我要自学网";
//          function zxw(){
//              document.write(a);
//          };          
//          zxw();

//          2.函数内部用var声明的变量是局部变量,只能在函数内部调用;
//              局部变量,函数执行完就从内存中删除
//              能用局部变量声明的,就不要用全局变量,能提高效率;
//          function zxw(){
//              var a="我要自学网";
//          };  
//          zxw();
//          document.write(a);      

//          3.函数内部不用var声明,直接赋值方式声明的变量是全局变量;
            function zxw(){
                a="我要自学网";
            };  
            zxw();
            document.write(a);              
        </script>

    </head>
    <body>
    </body>
</html>

09.赋值法声明匿名函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          zxw();
//          function zxw (){
//              alert("我要自学网");
//          };          
//          zxw();

//          匿名函数:没有函数名
//          第一种匿名函数:函数没有函数名,而是直接赋值给一个变量通过变量调用或直接调用
//          注意:函数的调用语句,必须放在函数声明语句之后!!!
//          zxw();
            var zxw = function (){
                alert("我要自学网");
            };
//          zxw();

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

10.匿名函数的调用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          zxw();
//          function zxw (){
//              alert("我要自学网");
//          };          
//          zxw();

//          匿名函数:没有函数名
//          第一种匿名函数:函数没有函数名,而是直接赋值给一个变量通过变量调用或直接调用
//          注意:函数的调用语句,必须放在函数声明语句之后!!!
//          zxw();
//          var zxw = function (){
//              alert("我要自学网");
//          };
//          zxw();

//          第二种匿名函数:
//          1.自调用
//          (function (){
//              alert("我要自学网");
//          })();

//          2.当事件发生时调用
//          window.onload= function (){
//              alert("我要自学网");           
//          };

//          3.函数中调用
            setTimeout(function (){
                alert("我要自学网");           
            },3000);

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

11.回调函数初识

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          回调函数:
//          回家是主函数;
//          发信息是回调函数

            function hj(a){
                a();
            };
            function fxx(){
                alert("亲,我已到家,爱你哦");
            };

//          你把“发条信息函数”当成参数传给“回家的函数”,然后你女朋友必须先回到家以后,主函数执行完了,再执行传进去的“发条信息函数”,然后你就收到一条信息了。
            hj(fxx);
        </script>
    </head>
    <body>
    </body>
</html>

12.回调函数四则混合运算

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          回调函数:(callback函数)函数B作为参数传递到另一个函数A中,函数A执行函数B。函数B叫做回调函数

            function a(x,y){
                return x+y;
            };

            function b(x,y){
                return x-y;
            };

            function c(x,y){
                return x*y;
            };

            function d(x,y){
                return x/y;
            };

            function fn(x,y,m){
                return m(x,y);
            };

            var re=fn(12,4,d);
            alert(re);

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

13.回调函数练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">         
//          要求:计算(2+3)*4的结果
//          1.函数A执行函数B,函数B是回调函数
//          function a(x,y,z,m){
//              var re= x+y;
//              return m(re,z);
//          };
//          
//          function b(x,y){
//              return x*y;
//          };
//          var c = a(2,3,4,b);

//          2.函数B执行函数A,函数A是回调函数

            function a(x,y){
                return x+y; 
            };

            function b(x,y,z,m){
                var re=m(x,y);
                return re*z;
            };

            var c = b(2,3,4,a);
            alert(c);

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

14.递归函数初识

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          递归函数:就是函数自己调用自己
//          注意:递归函数必须有跳出条件,否则就是死循环
            var i=1;
            function dg(){              
                alert("从前有座山,山里有座庙....老和尚给小和尚讲故事,讲的是:");
                i++;  
                if(i<5){
                    dg();
                };              
            };
            dg();
        </script>
    </head>
    <body>
    </body>
</html>

15.递归函数练习1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          递归函数计算1+2+....+100
            function lj(n){
                if (n==1) {
                    return n
                } else{
                    return n + lj(n-1);
                }

            };

            var re= lj(100);

            alert(re);

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

16.递归函数练习2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          递归函数计算从任意数到任意数的连加
            function lj(m,n){
                if (n==m) {
                    return m;
                } else{
                    return n + lj(m,--n);
                }

            };
            var a=prompt("输入最小的数")*1;
            var b=prompt("输入最大的数")*1;

            var re= lj(a,b);

            alert(re);

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

17.内置功能函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          内置功能函数:
//              1.ECMAscript 自带的函数,ECMAscript将我们常用的一些功能封装起来
//              2.我们不需要知道他是怎么实现的,只需要知道怎么调用即可。
//          alert(123);
//          prompt();

//          1.Number() 转换成数值类型
//          var a = "123456";
//          var b =typeof Number(a);
//          alert(b);

//          2.String() 转换成字符串类型
//          var a = 123456;
//          var b =typeof String(a);
//          alert(b);

//          3.Boolean() 转换成布尔类型
//          var a = 0;
//          var b =typeof Boolean(a);
//          var c = Boolean(a);
//          alert(c);           

//          4.parseInt() 将字符串转换为整型
            var a = "123px";
            var b =typeof parseInt(a);
            var c = parseInt(a);
            alert(b);           
            alert(c);
        </script>

    </head>
    <body>
    </body>
</html>

六、数组和对象

01.数组初识

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          1.数组:一组数据的集合,数组的每一个数据叫做一个元素
//          2.数组元素可以是任意类型,同一个数组中的不同元素可能是对象或数组
//          隐式方式创建的数组,最常用的方式
//          var arr=["小张","小王","小李","小明"];
//          var arr=[1,2,3,4];
//          var arr=["小张",2,true,["小明","小李"],{}];
            var arr=[];

            console.log(arr);

        </script>

    </head>
    <body>
    </body>
</html>

02.数组的特点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          1.数组:一组数据的集合,数组的每一个数据叫做一个元素
//          2.数组元素可以是任意类型,同一个数组中的不同元素可能是对象或数组
//          3.每个数组都具有一个length属性,length属性就是数组元素的个数(数组长度)
//          4.数组中每个元素在数组中有一个位置,以数字表示,称为索引(下标)
//          5.索引从0开始排列,[0]表示第一个数据,以此类推
//          6.数组最大的索引,始终比数组长度小1
//          7.数组的数据类型是一个对象,其实就是个加了数字索引和length属性的特殊对象
//          隐式方式创建的数组,最常用的方式
            var arr=["小张","小王","小李","小明"];

            alert(typeof arr);
            alert(arr.length);
            alert(arr[3]);
            console.log(arr);

        </script>

    </head>
    <body>
    </body>
</html>

03.数组创建方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          1.数组:一组数据的集合,数组的每一个数据叫做一个元素
//          2.数组元素可以是任意类型,同一个数组中的不同元素可能是对象或数组
//          3.每个数组都具有一个length属性,length属性就是数组元素的个数(数组长度)
//          4.数组中每个元素在数组中有一个位置,以数字表示,称为索引(下标)
//          5.索引从0开始排列,[0]表示第一个数据,以此类推
//          6.数组最大的索引,始终比数组长度小1
//          7.数组的数据类型是一个对象,其实就是个加了数字索引和length属性的特殊对象

//          数组创建方式:
//          1.隐式方式创建的数组,最常用的方式
            var arr=["小张","小王","小李","小明"];

//          2.直接实例化,通过构造函数Array()创建
//              1.直接把数组元素写到括号里 
//              var arr=new Array("小张","小王","小李","小明");

//              2.创建数组并给数组元素赋值
//              var arr=new Array();
//              arr[0]="小张";
//              arr[1]="小王";
//              arr[2]="小李";
//              arr[3]="小明";

//              3.规定了数组初始的长度,并给数组元素赋值
//                  数组长度动态调整
//              var arr=new Array(3);
//              arr[0]="小张";
//              arr[1]="小王";
//              arr[2]="小李";
//              arr[3]="小明";
//              arr[4]="小花";

            console.log(arr);

        </script>

    </head>
    <body>
    </body>
</html>

04.数据修改和增加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          1.数组:一组数据的集合,数组的每一个数据叫做一个元素
//          2.数组元素可以是任意类型,同一个数组中的不同元素可能是对象或数组
//          3.每个数组都具有一个length属性,length属性就是数组元素的个数(数组长度)
//          4.数组中每个元素在数组中有一个位置,以数字表示,称为索引(下标)
//          5.索引从0开始排列,[0]表示第一个数据,以此类推
//          6.数组最大的索引,始终比数组长度小1
//          7.数组的数据类型是一个对象,其实就是个加了数字索引和length属性的特殊对象
//          隐式方式创建的数组,最常用的方式
            var arr=["小张","小王","小李","小明"];

//          数组中数据的修改:直接使用下标对数组元素重新赋值
//          arr[2]="小花";

//          数组中数据增加:
//          arr[4]="小花";
//          arr[5]="小孙";
//          arr[6]="小赵";
            arr[arr.length]="小花";
            arr[arr.length]="小王";
            console.log(arr);

        </script>

    </head>
    <body>
    </body>
</html>

05.普通for循环遍历数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          数组遍历
            var arr=["小张","小王","小李","小明"];
//          要求:在数组的每个数据后加上"写作业去",并输出;
//          document.write(arr[0]+"写作业去"+"<br>");
//          document.write(arr[1]+"写作业去"+"<br>");
//          document.write(arr[2]+"写作业去"+"<br>");
//          document.write(arr[3]+"写作业去"+"<br>");

//          第一种:普通for循环
//          for (var i=0;i<4;i++) {
//              document.write(arr[i]+"写作业去"+"<br>");
//          };

//          第二种:使用数组长度的for循环
//          for (var i=0;i<arr.length;i++) {
//              document.write(arr[i]+"写作业去"+"<br>");
//          };          

//          第三种:优化版for循环
            var len=arr.length;
            for (var i=0;i<len;i++) {
                document.write(arr[i]+"写作业去"+"<br>");
            };          

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

06.其它方式遍历数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          数组遍历
            var arr=["小张","小王","小李","小明"];
//          要求:在数组的每个数据后加上"写作业去",并输出;
//          document.write(arr[0]+"写作业去"+"<br>");
//          document.write(arr[1]+"写作业去"+"<br>");
//          document.write(arr[2]+"写作业去"+"<br>");
//          document.write(arr[3]+"写作业去"+"<br>");

//          第一种:普通for循环
//          for (var i=0;i<4;i++) {
//              document.write(arr[i]+"写作业去"+"<br>");
//          };

//          第二种:使用数组长度的for循环
//          for (var i=0;i<arr.length;i++) {
//              document.write(arr[i]+"写作业去"+"<br>");
//          };          

//          第三种:优化版for循环
//          使用变量将数组长度存起来,避免重复获取数组长度
//          var len=arr.length;
//          for (var i=0;i<len;i++) {
//              document.write(arr[i]+"写作业去"+"<br>");
//          };          

//          第四种:for-in遍历,使用下标
//              使用的人很多,在所有遍历方式中效率最低
//          for (i in arr) {
//              document.write(arr[i]+"写作业去"+"<br>");
//          };              

//          第五种:for-of遍历(ES6),使用数据
//              for-of遍历比for-in遍历效率高,但是比普通for循环效率要低 
            for (value of arr) {
                document.write(value+"写作业去"+"<br>");
            };  

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

07.获取数组中最大,最小值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          获取数组中最大,最小值
            var zxw=[21,35,93,86,72,64];

//          把数组0号数据关到小黑屋中
//          var xhw=zxw[0];
//          做循环,让数组里的值依次和小黑屋中的值做比较
//          for (var i=0;i<zxw.length;i++) {
//              判断:如果小黑屋中的值小于数组中i号的值
//              if(xhw<zxw[i]){
//                  将数组中i号的值赋值给小黑屋
//                  xhw=zxw[i]                  
//              };              
//          };

            function bdx(arr){
                var xhw=arr[0];
                for (var i=0;i<arr.length;i++) {
                    if(xhw>arr[i]){
                        xhw=arr[i]                  
                    };              
                };
                return xhw;             
            };

            alert(bdx(zxw));

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

08.数组排序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          数组中值从小到大依次排列
            var zxw=[21,35,93,86,72,64,21,35];
//          var zxw=[21,35,86,72,64,21,35,93];
//                  21,35,86,72,64,21,35,93

            function paixu(arr){   //冒泡排序
                for (var b=0;b<arr.length-1;b++) {
                    for (var i=0;i<arr.length-1;i++) {
                        if(arr[i]>arr[i+1]){
                            var a=arr[i];
                            arr[i]=arr[i+1];
                            arr[i+1]=a;                 
                        };              
                    };
                };  
                return arr;             
            };

            alert(paixu(zxw));

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

09.二维数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          二维数组:数组里的数据还是数组
            var zxw=[["小赵","小钱","小孙","小李"],["小周","小吴","小郑","小王"],["小冯","小陈","小褚","小卫","小韩","小杨"],["小蒋","小沈","小韩","小杨"]];

//          alert(zxw.length);  //zxw.length:zxw数组长度
//          alert(zxw[0][2]);   //zxw[0][2]:  第一个下标:数组的元素索引;第二个下标:数组的元素中的元素索引
            alert(zxw[2].length);

            console.log(zxw);

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

10.二维数组的遍历

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          二维数组:数组里的数据还是数组
            var zxw=[["小赵","小钱","小孙","小李"],["小周","小吴","小郑","小王","小李"],["小冯","小陈","小褚","小卫","小韩","小杨"],["小蒋","小沈","小韩","小杨"]];

            for (var i=0;i<zxw.length;i++) {
                for (var b=0;b<zxw[i].length;b++) {
                    document.write(zxw[i][b]+"写作业去"+"<br>");
                };

            };  

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

11.获取二维数组中最大,最小值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          获取数组中最大,最小值
            var zxw=[[21,35,93,86,72,64],[38,74,65,82,13,44],[81,49,36,54,10,27]];

//          把数组0号元素中的0号数据关到小黑屋中
            var xhw=zxw[0][0];

//          做循环,让数组里的值依次和小黑屋中的值做比较
//          for (var i=0;i<zxw.length;i++) {
//              for (var b=0;b<zxw[i].length;b++) {
////                    判断:如果小黑屋中的值小于数组中i号中b号的的值
//                  if(xhw<zxw[i][b]){
////                        将数组中i号的值赋值给小黑屋
//                      xhw=zxw[i][b];
//                  };                                          
//              };              
//          };  

            function bdx(arr){
                for (var i=0;i<arr.length;i++) {
                    for (var b=0;b<arr[i].length;b++) {
    //                  判断:如果小黑屋中的值小于数组中i号中b号的的值
                        if(xhw>arr[i][b]){
    //                      将数组中i号的值赋值给小黑屋
                            xhw=arr[i][b];
                        };                                          
                    };              
                };      
                return xhw;             
            };
//          
//          
            alert(bdx(zxw));

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

12.对象初识

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          在js中,对象是王。如果您理解了对象,就理解了 JavaScript。
//          在js中,几乎“所有事物”都是对象。
//          字符串,布尔,数字(如果用 new 关键词定义),是对象
//          对象,函数,日期,数组,正则表达式,页面中的元素都是对象

//          var zxw="我要自学网";
//          var zxw= new String("我要自学网");
//          var zxw2 = zxw+"123456";
//          document.write(zxw2);
//          alert(typeof zxw2);

//          var zxw= new Number(123);
//          var zxw2 = zxw+1;
//          document.write(zxw2);
//          alert(typeof zxw);

            var zxw= new Boolean(true);
            document.write(zxw);
            alert(typeof zxw);
        </script>
    </head>
    <body>
    </body>
</html>

13.对象创建方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          js对象是包含很多属性的变量。
//          js对象属性指的是与 对象相关的值。js对象是无序属性的集合。
//          属性按照    名称 : 值 对的形式编写(名称和值以冒号分隔)
//          var 人= {姓名:小明,年龄:18岁,性别:男,身高:1.8米}

//          1.json模式创建对象,创建对象用{}号;(最主要的形式)
//          var ren={name:"小明",sex:"男",age:12,height:1.8};

//          2.直接实例化,通过构造函数Object()创建对象
            var ren=new Object();
            ren.name="小明";
            ren.sex="男";

            alert(typeof ren);
            console.log(ren);
        </script>
    </head>
    <body>
    </body>
</html>

14.对象属性访问及添加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            var ren={name:"小明",sex:"男",age:12,height:1.8};
//          访问对象属性:
//          1.对象名["属性名"]
//          var a= ren["age"];

//          2.对象名.属性名(用得最多)
//          var a=ren.sex;          
//          alert(a);

//          对象添加属性:
            ren.gcd=true;
            ren["yiFu"]="red";

            alert(ren.gcd);

            console.log(ren);
        </script>
    </head>
    <body>
    </body>
</html>

15.对象属性修改及删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

//          var ren={name:"小明",sex:"男",age:12,height:1.8};
            var ren={
                name:"小明",
                sex:"男",
                age:12,
                height:1.8
            };

//          修改对象属性:
//          ren.age=13;
//          ren["height"]=1.85;
//          alert(ren.height);

//          删除对象属性:
//          delete 关键词从对象中删除属性:会同时删除属性的值和属性本身

            delete ren.height;

            delete ren["age"];

            alert(ren.age);
            alert(ren.height);

            console.log(ren);
        </script>
    </head>
    <body>
    </body>
</html>

16.对象的易变性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

//          变量不是易变的:
//          var a = "我要自学网";
//          var b = a;
//          b = 123;
//          alert(a);
//          document.write(b);

//          对象的易变性:
            var c = {name:"小明",sex:"男",age:12,height:1.8};
            // 这不会创建 c 的副本,c 和 d 是同一个对象.对 d 的任何改变都将改变 c
            var d = c;

            d.name="小红";

            console.log(c);
            console.log(d);

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

17.遍历对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            var ren = {name:"小明",sex:"男",age:12,height:1.8};

//          for-in遍历,for...in 循环会为每个属性执行一次
            for (i in ren) {  //属性名  in 对象名
                document.write("我的"+i+"是"+ren[i]+"<br>");
            };

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

18.构造函数初识

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          构造函数:主要功能初始化对象.可以想像成一套模板或一套方案

            function Ren{
                this.name="";   //this:表示现在还不知道,没有具体的名称
                this.sex="男";
                this.age="20";
            }

            var xiaoMing = new Ren(); //通过new方法来创具体的叫"xiaoMing"的人

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

19.实例化对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          构造函数:主要功能初始化对象.可以想像成一套模板或一套方案
//          构造函数:通过new 函数名来实例化对象的函数叫构造函数。
//          new就是在创建对象,从无到有,构造函数就是在为初始化的对象添加属性和方法。
            function Ren(){
                this.name="";   //this:表示现在还不知道,没有具体的名称
                this.sex="男";
                this.age="20";
            };

//          通过new方法来创具体的叫"xiaoMing"的人         
            var xiaoMing = new Ren(); 
//          通过new的方法创建具体的对象时,this才有具体的名称,现在this就表示xiaoMing

            xiaoMing.name="小明";
            xiaoMing["age"]=21;

//          alert(xiaoMing.sex); 

            xiaoMing.zzmm="共产党";

            delete xiaoMing.sex;

            console.log(xiaoMing);
        </script>
    </head>
    <body>
    </body>
</html>

20.构造函数添加属性和方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          构造函数:主要功能初始化对象.可以想像成一套模板或一套方案
//          构造函数:通过new 函数名来实例化对象的函数叫构造函数。
//          new就是在创建对象,从无到有,构造函数就是在为初始化的对象添加属性和方法。
//          构造函数定义时首字母大写(规范)
            function Ren(){
                this.name="";   //this:表示现在还不知道,没有具体的名称
                this.sex="男";
                this.age="20";
                this.benLing=function (){
                    alert("会做饭");
                };
            };

//          通过new方法来创具体的叫"xiaoMing"的人         
            var xiaoMing = new Ren(); 
//          通过new的方法创建具体的对象时,this才有具体的名称,现在this就表示xiaoMing

            xiaoMing.name="小明";
            xiaoMing["age"]=21;

//          alert(xiaoMing.sex); 

            xiaoMing.zzmm="共产党";

            delete xiaoMing.sex;

//      --------------------------------------------------  

            var xiaoZhang = new Ren();
            xiaoZhang.name="小张";
//          xiaoZhang.benLing();
            xiaoZhang.benLing=function(){
                alert("会做饭,会开车,会泡妞");
            };
//          xiaoZhang.benLing();

            xiaoZhang.aiHao=function (){
                alert("唱歌");
            };

            xiaoZhang.aiHao();

            console.log(xiaoZhang);
        </script>
    </head>
    <body>
    </body>
</html>

七、获取元素及事件

01.使用ID获取元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>
        <div id="zxw1">我要自学网1</div>
        <div id="zxw1">我要自学网2</div>
        <div id="zxw3">我要自学网3</div>
        <div id="zxw4">我要自学网4</div>
        <div id="zxw5">我要自学网5</div>

        <script type="text/javascript">
//          1.ID选择器
//          输入dg工具会自动生成
//          返回文档中一个指定ID的元素,用于精确获取
//          出现多个id名的情况,CSS样式对所有该id名的元素都生效,但js脚本仅对第一个出现该id名的元素生效。
//          getElementById()该方法接收一个参数:要取得元素的id,若找到则返回该元素,若不存在则返回null

            var zxw1= document.getElementById("zxw1");
            console.log(zxw1);
        </script>     
    </body>
</html>

02.获取和设置元素内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>
        <!--<div id="zxw1"><span style="color: red;">我要自学网1</span></div>-->
        <div id="zxw1">我要自学网1</div>
        <div id="zxw1">我要自学网2</div>
        <div id="zxw3">我要自学网3</div>
        <div id="zxw4">我要自学网4</div>
        <div id="zxw5">我要自学网5</div>

        <script type="text/javascript">
            var zxw1= document.getElementById("zxw1");

//          获取和设置元素内容
//          1.innerText方法,返回的是标签内的文本值,不包含html标签
//          var a= zxw1.innerText;
//          alert(a);
//          zxw1.innerText="51自学网1";
            zxw1.innerText='<span style="color: red;">51自学网1</span>';

//          1.innerHTML方法,返回的是标签内的 html内容,包含html标签
//          var a= zxw1.innerHTML;
//          alert(a);
//          zxw1.innerHTML='<span style="color: red;">51自学网1</span>';           
        </script>     
    </body>
</html>

03.获取和设置元素属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" class="zxw51" name="zxw" id="wyzxw" value="我要自学网" abc="1111"/>

        <script type="text/javascript">
            var z = document.getElementById("wyzxw");

//          alert(z.id);
//          alert(z.type);
//          alert(document.getElementById("wyzxw").value);
//          alert(z.name);

//          alert(z.abc);   //不能获取自定义属性
            alert(z.className); //获取类名

//          z.id="abc";
//          z.value="51zxw";
//          z.title="我是新添加的";

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

04.通用方法获取和设置元素属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" class="zxw51" name="zxw" id="wyzxw" value="我要自学网" abc="1111"/>

        <script type="text/javascript">
            var z = document.getElementById("wyzxw");

//      获取和设置元素属性通用方法(推荐使用)
//      1.获取任意属性:元素.getAttribute("属性名");
//          alert(z.getAttribute("abc"));
//          alert(z.getAttribute("class"));
//          alert(z.getAttribute("id"));

//      2.设置任意属性:元素.setAttribute("属性名","属性值");  
//          z.setAttribute("class","zxw5111");
            z.setAttribute("title","51zxw");

//          z.id="abc";
//          z.value="51zxw";
//          z.title="我是新添加的";

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

05.获取设置行内样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="wyzxw" style="color: red;font-size: 24px; width: 500px;height: 300px;border: 2px solid black;">
            我要自学网
        </div>
        <script type="text/javascript">
            var zxw = document.getElementById("wyzxw");

//          获取元素的行内样式
//          alert(zxw.style.cssText); 

//          设置元素的行内样式
            zxw.style.cssText= "color: blue;font-size: 30px;font-weight: 700;"

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

06.获取设置行内样式中的属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="wyzxw" style="color: red;font-size: 24px; width: 500px;height: 300px;border: 2px solid black; padding-left: 20px;" >
            我要自学网
        </div>
        <script type="text/javascript">
            var zxw = document.getElementById("wyzxw");

//          获取元素的行内样式的某个样式
//          语法:  元素.style.某个样式
//          alert(zxw.style.color); 
//          alert(zxw.style.width);
//          当行内样式中的属性名中有"-"时,应使用驼峰命名法
//          alert(zxw.style.fontSize);
//          alert(zxw.style.paddingLeft);

//          设置元素的行内样式的某个样式
//          zxw.style.color= "blue";
//          zxw.style.width= "300px";
//          zxw.style.height= "100px";
            zxw.style.fontSize="40px";
            zxw.style.marginLeft="100px";
        </script>
    </body>
</html>

07.添加和删除类名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .zxw1{color: black;font-size: 16px;}
            .zxw2{color: red;font-size: 24px;}
            .zxw3{width: 200px;height: 100px;border: 2px solid black;}
        </style>
    </head>
    <body>
        <div id="wyzxw" class="zxw1" >
            我要自学网
        </div>
        <script type="text/javascript">
            var zxw = document.getElementById("wyzxw");

//          1.添加类名,已有相同类名,不会添加
//          zxw.classList.add("zxw2");
//          zxw.classList.add("zxw2","zxw3");

//          2.删除类名,如果要删除的类名没有,也不会出错
//          zxw.classList.remove("zxw3");
            zxw.classList.remove("zxw3","zxw2");

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

08.元素类名的切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .zxw1{color: black;font-size: 16px;}
            .zxw2{color: red;font-size: 24px;}
            .zxw3{width: 200px;height: 100px;border: 2px solid black;}
        </style>
    </head>
    <body>
        <div id="wyzxw" class="zxw1 zxw2" >
            我要自学网
        </div>
        <script type="text/javascript">
            var zxw = document.getElementById("wyzxw");

//          1.toggle在有相同类名时执行删除,没有相同类名时执行添加
//          zxw.classList.toggle("zxw2");

//          2.强制执行添加或删除
//          语法: toggle("类名",布尔值)
//              第2个参数为:true  执行添加
//              第2个参数为:false  执行删除
//          zxw.classList.toggle("zxw2",true);
            zxw.classList.toggle("zxw2",false);

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

09.使用类名获取元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>
        <div id="zxw1" class="zxw">我要自学网1</div>
        <div id="zxw1" class="zxw">我要自学网2</div>
        <div id="zxw3" class="zxw">我要自学网3</div>
        <div id="zxw4" class="zxw">我要自学网4</div>
        <div id="zxw5" class="zxw">我要自学网5</div>

        <script type="text/javascript">
//          1.ID选择器
//          输入dg工具会自动生成
//          返回文档中一个指定ID的元素,用于精确获取
//          出现多个id名的情况,CSS样式对所有该id名的元素都生效,但js脚本仅对第一个出现该id名的元素生效。
//          getElementById()该方法接收一个参数:要取得元素的id,若找到则返回该元素,若不存在则返回null

//          var zxw1= document.getElementById("zxw1");
//          console.log(zxw1);

//          2.类名选择器
//          返回文档中所有指定类名的一组元素,而不是一个元素。
//          可以把它当作数组进行处理
            var zxw= document.getElementsByClassName("zxw");
//          console.log(zxw);

//          给第1个元素设置行内样式
//          zxw[0].style.color="red";

//          给所有类名为zxw的元素设置行内样式
            for (var i=0;i<zxw.length;i++) {
                zxw[i].style.color="red";
            }

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

10.使用标签及name属性获取元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>
        <!--<div id="zxw1" class="zxw" name="wyzxw">我要自学网1</div>
        <p id="zxw1" class="zxw">我要自学网2</p>
        <div id="zxw3" class="zxw" name="wyzxw">我要自学网3</div>
        <p id="zxw4" class="zxw">我要自学网4</p>
        <div id="zxw5" class="zxw" name="wyzxw">我要自学网5</div>-->

        <p  class="zxw">我要自学网2</p>
        <div id="zxw1" class="zxw" name="wyzxw">
            <p  class="zxw">我要自学网2</p>
            <div  class="zxw" name="wyzxw">我要自学网3</div>
            <p  class="zxw">我要自学网4</p>
            <div  class="zxw" name="wyzxw">我要自学网5</div>
        </div>

        <script type="text/javascript">
//          1.ID选择器
//          输入dg工具会自动生成
//          返回文档中一个指定ID的元素,用于精确获取
//          出现多个id名的情况,CSS样式对所有该id名的元素都生效,但js脚本仅对第一个出现该id名的元素生效。
//          getElementById()该方法接收一个参数:要取得元素的id,若找到则返回该元素,若不存在则返回null

//          var zxw1= document.getElementById("zxw1");
//          console.log(zxw1);

//          2.类名选择器
//          返回文档中所有指定类名的一组元素,而不是一个元素。
//          可以把它当作数组进行处理
//          var zxw= document.getElementsByClassName("zxw");
//          console.log(zxw);

//          给第1个元素设置行内样式
//          zxw[0].style.color="red";

//          给所有类名为zxw的元素设置行内样式
//          for (var i=0;i<zxw.length;i++) {
//              zxw[i].style.color="red";
//          }

//          3.标签名选择器
//          返回文档中所有指定标签名的一组元素,而不是一个元素。
//          可以把它当作数组进行处理
//          var zxw= document.getElementsByTagName("p");
//          console.log(zxw);

//          给第1个元素设置行内样式
//          zxw[0].style.color="red";

//          给所有类名为zxw的元素设置行内样式
//          for (var i=0;i<zxw.length;i++) {
//              zxw[i].style.color="red";
//          }

//          4.name属性选择器
//          返回文档中所有指定标签名的一组元素,而不是一个元素。
//          可以把它当作数组进行处理
            var zxw= document.getElementsByName("wyzxw");
//          console.log(zxw);

//          给第1个元素设置行内样式
            zxw[1].style.color="red";

//          给所有类名为zxw的元素设置行内样式
//          for (var i=0;i<zxw.length;i++) {
//              zxw[i].style.color="red";
//          }           

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

11.组合方式获取元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>
        <p  class="zxw">我要自学网2</p>
        <div id="zxw1" class="zxw" name="wyzxw">
            <p id="zxw5" class="zxw3">我要自学网2</p>
            <div  class="zxw" name="wyzxw">我要自学网3</div>
            <p  class="zxw3">我要自学网4</p>
            <div  class="zxw" name="wyzxw">我要自学网5</div>
        </div>

        <script type="text/javascript">
//          正确方法:
//          var zxw=document.getElementById("zxw1").getElementsByTagName("p");
//          var zxw=document.getElementById("zxw1").getElementsByClassName("zxw");

//          错误方法:
//          var zxw=document.getElementById("zxw1").getElementsByName("wyzxw");
//          var zxw=document.getElementById("zxw1").getElementById("zxw5");
//          var zxw=document.getElementsByClassName("zxw").getElementById("zxw5");
//          var zxw=document.getElementsByClassName("zxw").getElementsByTagName("p");
//          var zxw=document.getElementsByTagName("div").getElementsByClassName("zxw3");

//          console.log(zxw);
            for (var i=0;i<zxw.length;i++) {
                zxw[i].style.color="red";
            }
        </script>     
    </body>
</html>

12.使用css选择器方法获取元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>
        <p  class="zxw">我要自学网2</p>
        <div id="zxw1" class="zxw" name="wyzxw">
            <p id="zxw5" class="zxw3">我要自学网2</p>
            <div  class="zxw" name="wyzxw">我要自学网3</div>
            <p  class="zxw3">我要自学网4</p>
            <div  class="zxw" name="wyzxw">我要自学网5</div>
        </div>

        <script type="text/javascript">
//          1.返回文档中匹配指定css选择器的所有元素
//              语法:querySelectorAll("css选择器");
//          var zxw=document.querySelectorAll("#zxw1 p");
//          var zxw=document.querySelectorAll("#zxw1 .zxw");
//          console.log(zxw);
//          for (var i=0;i<zxw.length;i++) {
//              zxw[i].style.color="red";
//          }

//          2.返回文档中匹配指定css选择器的第一个元素
//              语法:querySelector("css选择器");
            var zxw=document.querySelector("#zxw1 p");
            var zxw=document.querySelector("#zxw1 .zxw");         

            zxw.style.color="red";

//          console.log(zxw);
        </script>     
    </body>
</html>

13.BOM和DOM

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
//          BOM:浏览器对象模型 Browser Object Model
//          DOM:文档对象模型     Document Object Model
//          window:浏览器窗口对象,最大的对象,其它的是window的子对象
//          history:历史记录对象
//          location:网址对象
//          document:文档对象
        window.onload=function(){
            var zxw = document.getElementById("zxw").innerText;
            alert(zxw);
        }

        </script>
    </head>
    <body>
        <div id="zxw">我要自学网</div>
    </body>
</html>

14.事件初识

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #zxw{
                width: 100px;height: 30px;line-height: 30px;text-align: center;
                background: burlywood;margin: 0 auto;
            }
        </style>
        <script type="text/javascript">
//          事件:发生了事情.事件可以是浏览器行为,也可以是用户行为
            window.onload=function(){
                var zxw = document.getElementById("zxw");
//              zxw.onclick=function(){//鼠标单击事件
//                  alert("我的事件被触发了");
//              };

//              zxw.onmousedown=function(){//鼠标按下时事件
//                  alert("我的事件被触发了");
//              };

//              zxw.onmouseover=function(){//鼠标移入时事件
//                  alert("我的事件被触发了");
//              };

                zxw.ontouchstart=function(){//触摸开始时事件
                    alert("我的事件被触发了");
                };
            };

        </script>
    </head>
    <body>
        <div id="zxw">我要自学网</div>
    </body>
</html>

15.传统事件绑定方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #zxw{
                width: 500px;height: 300px;background: red;margin: 0 auto;
                color: white; font-size: 30px;
            }
        </style>
        <script type="text/javascript">
//          传统事件绑定方法:
//          1.行内绑定,在开始标签中绑定,把事件名当作元素属性
//          语法: 事件名="执行的函数()"
//          结构+样式+行为都绑定在同一个标签中,不利于后期维护

//          2.动态绑定
//          语法: 对象.事件 = 匿名函数(匿名函数中是要执行的函数)

//          传统事件绑定注意:
//          1.事件名称之间一定要加上on
//          2.兼容主流的浏览器,包括低版本的IE

            function abc(){
//              Math.random();取0-1之间的随机数
                document.getElementById("zxw").innerText=Math.random();
            };

            window.onload=function(){
                var zxw=document.getElementById("zxw");
                zxw.onclick=function(){
//                  abc();
                    document.getElementById("zxw").innerText=Math.random();
                };

            };

        </script>
    </head>
    <body>
        <!--<div id="zxw" onclick="abc()"></div>-->
        <div id="zxw"></div>
    </body>
</html>

16.事件监听

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #zxw{
                width: 500px;height: 300px;background: red;margin: 0 auto;
                color: white; font-size: 30px;
            }
        </style>
        <script type="text/javascript">
//          事件监听:
//          1.addEventListener()添加事件监听
//              语法:  对象.addEventListener(事件名(字符串), 执行的函数, (可选)布尔值 )

//          2.removeEventListener()移除事件监听
//              语法:  对象.removeEventListener(事件名(字符串), 执行的函数, (可选)布尔值 )

//          事件监听注意:
//              1.绑定事件的时候,事件名称之前不需带"on" 
//              2.IE8 及更早版本不支持

//              第3个参数:指定事件是否在捕获或冒泡阶段执行
            function abc(){
//              Math.random();取0-1之间的随机数
                document.getElementById("zxw").innerText=Math.random();
            };

            function bcd(){
                document.getElementById("zxw").removeEventListener("mousemove",abc);
            };

            window.onload=function(){
                document.getElementById("zxw").addEventListener("mousemove",abc);
                document.getElementById("zxw").addEventListener("click",bcd);

            };

        </script>
    </head>
    <body>
        <div id="zxw"></div>
    </body>
</html>

17.this的应用1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .zxw{
                width: 200px;height: 200px;background: red;float: left;
                color: white; margin-left:10px ;
            }
        </style>
        <script type="text/javascript">

//          function abc(){
////                Math.random();取0-1之间的随机数
//              document.getElementById("zxw").innerText=Math.random();
//          };

            window.onload=function(){
                var zxw= document.getElementsByClassName("zxw");

                for (var i=0;i<zxw.length;i++) {
                    zxw[i].onclick=function(){
//                      在事件中this指向了:当前正在操作的元素
                        this.innerText=Math.random();
                        this.style.background="blue";
                        this.style.height="300px";
                    };
                };
//              zxw[0].onclick=function(){
////                    在事件中this指向了:当前正在操作的元素
//                  this.innerText=Math.random();
//              };
//              
//              zxw[1].onclick=function(){
//                  zxw[1].innerText=Math.random();
//              };
            };

        </script>
    </head>
    <body>
        <div class="zxw"></div>
        <div class="zxw"></div>
        <div class="zxw"></div>
        <div class="zxw"></div>
    </body>
</html>

18.this的应用2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .zxw{
                width: 200px;height: 200px;background: red;float: left;
                color: white; margin-left:10px ;
            }
        </style>
        <script type="text/javascript">

//          function abc(){
//              this.innerText=Math.random();
//              this.style.background="blue";
//              this.style.height="300px";
//          };

            function abc(a){
                a.innerText=Math.random();
                a.style.background="blue";
                a.style.height="300px";
            };

            window.onload=function(){
                var zxw= document.getElementsByClassName("zxw");

//              for (var i=0;i<zxw.length;i++) {
//                  zxw[i].onclick=function(){
////                        在事件中this指向了:当前正在操作的元素
//                      abc(this);
//                  };
//              };

//              for (var i=0;i<zxw.length;i++) {
////                    事件监听会自动传入正在操作的元素对象
//                  zxw[i].addEventListener("click",abc);
//              };

            };

        </script>
    </head>
    <body>
        <div class="zxw" onclick="abc(this)"></div>
        <div class="zxw" onclick="abc(this)"></div>
        <div class="zxw" onclick="abc(this)"></div>
        <div class="zxw" onclick="abc(this)"></div>
    </body>
</html>

19.事件名称

load 页面或图像被完成加载
click 鼠标点击某个对象
mousedown 鼠标按键被按下
mouseup 鼠标按键被松开
mouseout 鼠标从某元素移开
mouseover 鼠标被移到某元素之上
abort 图像加载被中断
blur 元素失去焦点
change 用户改变域的内容
dblclick 鼠标双击某个对象
error 当加载文档或图像时发生某个错误
focus 元素获得焦点
keydown 键盘的键被按下
keypress 键盘的键被按下或按住
keyup 键盘的键被松开
mousemove 鼠标被移动
reset 重置按钮被点击
resize 窗口或框架被调整尺寸
select 文本被选定
scroll 元素滚动条在滚动时触发。
submit 提交按钮被点击
unload 用户退出页面

touchstart : 触摸开始(手指放在触摸屏上)
touchmove : 拖动(手指在触摸屏上移动)
touchend : 触摸结束(手指从触摸屏上移开)
touchenter :移动的手指进入一个dom元素。
touchleave :移动的手指离开一个dom元素。
touchcancel:是在拖动中断时候触发
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
swipe:手指在屏幕上滑动时会触发
swipeLeft:手指在屏幕上向左滑动时会触发
swipeRight:手指在屏幕上向右滑动时会触发
swipeUp:手指在屏幕上向上滑动时会触发
swipeDown:手指在屏幕上向下滑动时会触发

八、js效果实战

01.元素内容的操作

01.删除元素内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #zxw{
                width: 300px;height: 200px;border: 1px solid black;
                margin: 0 auto;
            }
            #btn{
                width: 100px;height: 30px;margin: 50px auto;display: block;
            }
        </style>
    </head>
    <body>
        <div id="zxw">我要自学网</div>
        <button id="btn">点击删除</button>
        <script type="text/javascript">
            var btn = document.getElementById("btn");
            var zxw = document.getElementById("zxw");
            btn.onclick = function(){
                //删除元素内容
                zxw.innerHTML="";
            }
        </script>
    </body>
</html>

02.复制元素内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .zxw{
                width: 300px;height: 200px;border: 1px solid black;
                margin: 0 auto;
            }
            #btn{
                width: 100px;height: 30px;margin: 50px auto;display: block;
            }
        </style>
    </head>
    <body>
        <div id="zxw1" class="zxw">我要自学网</div>
        <button id="btn">按钮</button>
        <div id="zxw2" class="zxw"></div>
        <script type="text/javascript">
            var btn = document.getElementById("btn");
            var zxw1 = document.getElementById("zxw1");
            var zxw2 = document.getElementById("zxw2");
            btn.onclick = function(){
                //复制元素内容
                zxw2.innerHTML=zxw1.innerHTML;
            }
        </script>
    </body>
</html>

03.元素内容移动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .zxw{
                width: 300px;height: 200px;border: 1px solid black;
                margin: 0 auto;
            }
            #btn{
                width: 100px;height: 30px;margin: 50px auto;display: block;
            }
        </style>
    </head>
    <body>
        <div id="zxw1" class="zxw">我要自学网1</div>
        <button id="btn">按钮</button>
        <div id="zxw2" class="zxw"></div>
        <script type="text/javascript">
            var btn = document.getElementById("btn");
            var zxw1 = document.getElementById("zxw1");
            var zxw2 = document.getElementById("zxw2");
            var abc = 1;
            btn.onclick = function(){
                if (abc == 1) {
                    //复制元素内容
                    zxw2.innerHTML=zxw1.innerHTML;
                    //删除zxw1中的元素内容
                    zxw1.innerHTML="";
                    abc = 2;
                } else{
                    //复制元素内容
                    zxw1.innerHTML=zxw2.innerHTML;
                    //删除zxw1中的元素内容
                    zxw2.innerHTML="";
                    abc = 1;                    
                }

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

04.元素内容交换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .zxw{
                width: 300px;height: 200px;border: 1px solid black;
                margin: 0 auto;
            }
            #btn{
                width: 100px;height: 30px;margin: 50px auto;display: block;
            }
        </style>
    </head>
    <body>
        <div id="zxw1" class="zxw">我要自学网1</div>
        <button id="btn">按钮</button>
        <div id="zxw2" class="zxw">我要自学网2</div>
        <script type="text/javascript">
            var btn = document.getElementById("btn");
            var zxw1 = document.getElementById("zxw1");
            var zxw2 = document.getElementById("zxw2");
            var abc = 1;
            btn.onclick = function(){
                if (abc == 1) {
                    var p = zxw2.innerHTML;
                    //复制元素内容
                    zxw2.innerHTML=zxw1.innerHTML;
                    //删除zxw1中的元素内容
                    zxw1.innerHTML=p;
                    abc = 2;
                } else{
                    var p = zxw1.innerHTML;
                    //复制元素内容
                    zxw1.innerHTML=zxw2.innerHTML;
                    //删除zxw1中的元素内容
                    zxw2.innerHTML=p;
                    abc = 1;                    
                }

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

02.元素样式的操作

01.操作元素尺寸

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #btn{
                width: 100px;height: 30px;display: block;margin: 0 auto;
            }
            #zxw{
                margin: 50px auto;background: red;
            }
        </style>
    </head>
    <body>
        <button id="btn">点击</button>
        <div id="zxw" style="width: 200px;height: 200px;"></div>

        <script type="text/javascript">
            var btn=document.getElementById("btn");
            var zxw=document.getElementById("zxw");

            btn.onclick = function(){
//              获取元素尺寸并转成数值类型
                var o_w=parseInt(zxw.style.width);
                var o_h=parseInt(zxw.style.height);
//              alert(typeof o_h);

//              计算新的尺寸
                var n_w=o_w+20+"px";
                var n_h=o_h+20+"px";

                if (n_h>="300px") {
                    zxw.style.height="300px";
                } else{
                    zxw.style.height=n_h;
                }

//              元素尺寸重新赋值
                zxw.style.width=n_w;

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

02.获取非行内样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #btn{
                width: 100px;height: 30px;display: block;margin: 0 auto;
            }
            #zxw{
                width: 200px;height: 200px;margin: 50px auto;background: red;
            }
        </style>
    </head>
    <body>
        <button id="btn">点击</button>
        <div id="zxw" ></div>

        <script type="text/javascript">
            var btn=document.getElementById("btn");
            var zxw=document.getElementById("zxw");

            btn.onclick = function(){
//              获取非行内元素尺寸,IE9及以上的标准浏览器生效,只能获取,不能设置
//              var o_w=getComputedStyle(zxw,null).width;
//              var o_h=getComputedStyle(zxw,null).height;

//              获取非行内元素尺寸,IE9以下的浏览器生效,只能获取,不能设置
//              var o_w=zxw.currentStyle.width;
//              var o_h=zxw.currentStyle.height;            

//              document.all:所有元素的一个集合,判断浏览器是否是IE               
                if (document.all) {
                    var o_w=parseInt(zxw.currentStyle.width);
                    var o_h=parseInt(zxw.currentStyle.height);
                } else{
                    var o_w=parseInt(getComputedStyle(zxw,null).width);
                    var o_h=parseInt(getComputedStyle(zxw,null).height);
                }

//              转成数值类型
//              var o_w=parseInt(zxw.currentStyle.width);
//              var o_h=parseInt(zxw.currentStyle.height);
//              alert(typeof o_h);

//              计算新的尺寸
                var n_w=o_w+20+"px";
                var n_h=o_h+20+"px";

//              元素尺寸重新赋值
                zxw.style.width=n_w;
                zxw.style.height=n_h;
            }
        </script>
    </body>
</html>

03.元素显隐

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #btn{
                width: 100px;height: 30px;display: block;margin: 0 auto;
            }
            #zxw{
                width: 200px;height: 200px;margin: 50px auto;background: red;
            }
        </style>
    </head>
    <body>
        <button id="btn">点击</button>
        <div id="zxw" ></div>

        <script type="text/javascript">
            var btn=document.getElementById("btn");
            var zxw=document.getElementById("zxw");

            var abc=1;

            btn.onclick = function(){
                if (abc==1) {
                    zxw.style.display="none";
                    abc=0;
                } else{
                    zxw.style.display="block";
                    abc=1;
                }

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

04.下滑显隐

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #zxw_c{
                width: 800px;margin: 0 auto;
            }
            #zxw_l{
                position:fixed ;top: 150px;left: 10px;display: none;
            }
            #zxw_r{
                position:fixed ;top: 150px;right: 10px;display: none;
            }
        </style>
    </head>
    <body>
        <div id="zxw_c">
            <img src="img/zxw_c.png" width="100%"/>
        </div>
        <img id="zxw_l" src="img/zxw_l.png" width="60px"/>
        <img id="zxw_r" src="img/zxw_r.png" width="50px"/>

        <script type="text/javascript">
            //给body添加滚动事件
            document.body.onscroll= function(){
                //滚动条距离顶部的距离
                var s_top = document.documentElement.scrollTop;
//              alert(typeof s_top);
                if(s_top>300){
                    document.getElementById("zxw_l").style.display="block";
                    document.getElementById("zxw_r").style.display="block";
                }else{
                    document.getElementById("zxw_l").style.display="none";
                    document.getElementById("zxw_r").style.display="none";
                };
            };
        </script>
    </body>
</html>

05.点击变色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .box{
                width: 800px;height: 600px;margin: 0 auto;
            }
            .zxw{
                width: 100px;height: 100px;float: left;margin: 10px;
                text-align: center;line-height: 100px;color: white;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <!--div.zxw[style="background:green"]*20-->
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>            
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>
            <div class="zxw" style="background:green"></div>

        </div>

        <script type="text/javascript">
            //获取所有zxw的元素
            var zxw = document.getElementsByClassName("zxw");
            var abc = 1;
            //给所有zxw的元素加事件
            for (var i=0;i<zxw.length;i++) {
                zxw[i].onclick=function(){
                    if (abc==1) {
                        //在事件中this指向了:当前正在操作的元素
                        this.style.background="red";
                        abc=2;
                    } else{
                        //在事件中this指向了:当前正在操作的元素
                        this.style.background="blue";
                        abc=1;                      
                    };

                    this.innerHTML="我变色了";
                };
            };

        </script>

    </body>
</html>

06.围棋效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .box{
                width: 700px;height: 700px;margin: 0 auto;
                background: url(img/wqqp.jpg) no-repeat 0/100% 100%;
                position: relative;
            }
            .wq{
                width: 670px;height: 670px;position: absolute;
                top: 18px;left: 18px;
            }
            .wqqz{
                width: 25px;height: 25px;border-radius:50% ;
                margin: 5px;background: rgba(0,0,0,0);
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="wq">
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
                <div class="wqqz"></div>
            </div>
        </div>

        <script type="text/javascript">
            var wqqz = document.getElementsByClassName("wqqz");
            var abc = 1;
            for (var i=0;i<wqqz.length;i++) {
                wqqz[i].onclick = function(){
                    if(abc==1){
                        this.style.background="#000";
                        abc = 2;
                    }else{
                        this.style.background="#ccc";
                        abc = 1;                        
                    };

                    this.style.boxShadow="3px 3px 1px #666";
                };
            };
        </script>
    </body>
</html>

07.选项卡切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            li{list-style: none;}
            #box{
                width: 600px;height: 400px;margin: 0 auto;
                border: 1px solid black;
            }
            #tab{
                width: 600px;height: 50px;line-height: 50px;text-align: center;
            }
            #tab li{
                width: 200px;height: 50px;font-size: 30px;float: left;
            }
            #cont{
                width: 600px;height: 340px;line-height: 350px;
                text-align: center;position: relative;margin-top: 10px;
            }
            #cont li{
                width: 600px;height: 340px;font-size: 30px;
                position: absolute;top: 0;left: 0;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul id="tab">
                <li style="background: red;">选项卡1</li>
                <li style="background: blue;">选项卡2</li>
                <li style="background: green;">选项卡3</li>
            </ul>
            <ul id="cont">
                <li style="background: red;display: block;">内容1</li>
                <li style="background: blue;">内容2</li>
                <li style="background: green;">内容3</li>
            </ul>
        </div>

        <script type="text/javascript">
            var t_lis=document.getElementById("tab").getElementsByTagName("li");
            var c_lis=document.getElementById("cont").getElementsByTagName("li");
            for (var i=0;i<t_lis.length;i++) {
                //给i号元素加记号
                t_lis[i].xb=i;
                t_lis[i].onclick = function(){
                    //先让cont中所有的li隐藏
                    for (var p=0;p<c_lis.length;p++) {
                        c_lis[p].style.display = "none";
                    };
                    c_lis[this.xb].style.display = "block";

                };

            }
        </script>

    </body>
</html>

03.定时器

01.两种定时器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <script type="text/javascript">
            //1.setTimeout(要执行的动作,时间:毫秒);多少时间后执行,只执行一次
//              setTimeout(function(){
//                  document.write("我要自学网");
//              },3000)
//          
            //2.setInterval(要执行的动作,时间:毫秒);多少时间就执行,重复执行多次
                setInterval(function(){
                    document.write("我要自学网<br>");
                },1000)             

        </script>

    </body>
</html>

02.清理两种定时器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="btn">点击</button>
        <script type="text/javascript">
            //1.setTimeout(要执行的动作,时间:毫秒);多少时间后执行,只执行一次
                var timer2 = setTimeout(function(){
                    console.log("我要自学网<br>");
                },3000);

            //2.setInterval(要执行的动作,时间:毫秒);多少时间就执行,重复执行多次
//              var timer1 = setInterval(function(){
//                  console.log("我要自学网<br>");
//              },1000);                

            //清理定时器
//              1.clearInterval(要清理的定时器名称);
//              2.clearTimeout(要清理的定时器名称);
                var btn = document.getElementById("btn");
                btn.onclick=function(){
                    //clearInterval(timer1);
                    clearTimeout(timer2);
                };
        </script>

    </body>
</html>

03.定时器的三种写法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <script type="text/javascript">
            //1.setTimeout(要执行的动作,时间:毫秒);多少时间后执行,只执行一次
//              setTimeout(function(){
//                  document.write("我要自学网");
//              },3000)
//          
            //2.setInterval(要执行的动作,时间:毫秒);多少时间就执行,重复执行多次
//              setInterval(function(){
//                  document.write("我要自学网<br>");
//              },1000)             

            function zxw(){
                document.write("我要自学网<br>");
            };

            function wyzxw(x){
                document.write(x);
            };
//          要执行动作的三种写法:(定时器的第一个参数)
//              1.匿名函数:
//              setInterval(function(){
//                  document.write("我要自学网<br>");
//              },1000)                 

//              2.函数名,不能有参数
//              setInterval(zxw,1000);

//              3.把函数当成字符串,就可以传参数
                var a = "我要自学网2<br>";
                setInterval("wyzxw(a)",1000);
        </script>

    </body>
</html>

04.倒计时跳转效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .box{
                width: 400px;
                height: 50px;
                margin: 0 auto;
                text-align: center;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            跳转剩余时间:<span id="clock">10</span>秒

        </div>

        <script type="text/javascript">
            var clock= document.getElementById("clock");
            var t = clock.innerHTML;

            function func(){
                t--;
                clock.innerHTML=t;
                if (t<=0) {
                    clearInterval(timer);
                    location.href = "https://www.51zxw.net";
                };
            }

            var timer = setInterval(func,1000);
        </script>

    </body>
</html>

05.运动效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            body{position: relative;}
            #zxw{
                width: 100px;height: 100px;background: green;
                position: absolute;top: 100px;
            }
        </style>
    </head>
    <body>
        <button type="button" id="btn">点我移动</button>
        <div id="zxw" style="left: 0px;"></div>

        <script type="text/javascript">
            var btn = document.getElementById("btn");
            var zxw = document.getElementById("zxw");
            var buCang = 10;
            btn.onclick = function(){

                var timer = setInterval(function(){

                    //获取zxw的left值,转成整数
                    var o_left = parseInt(zxw.style.left);
                    //alert(o_left);
                    var n_left = o_left+buCang;
                    zxw.style.left = n_left+"px";
                    if ( n_left>400) {
                        buCang = -10;
                    }else if(n_left==0){
                        buCang = 10;
                    };  
                },200);

            };

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

06.实战清理定时器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            body{position: relative;}
            #zxw{
                width: 100px;height: 100px;background: green;
                position: absolute;top: 100px;
            }
        </style>
    </head>
    <body>
        <button type="button" id="btn">点我移动</button>
        <div id="zxw" style="left: 0px;"></div>

        <script type="text/javascript">
            var btn = document.getElementById("btn");
            var zxw = document.getElementById("zxw");
            var buCang = 10;
            var timer;

            function inter(){
                //获取zxw的left值,转成整数
                var o_left = parseInt(zxw.style.left);
                //alert(o_left);
                var n_left = o_left+buCang;
                zxw.style.left = n_left+"px";
                if ( n_left>400) {
                    buCang = -10;
                }else if(n_left==0){
                    buCang = 10;
                };  
            };                                          

            btn.onclick = function(){
                clearInterval(timer);
                timer = setInterval(inter,100);

            };

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

07.十秒免单效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .box{
                width: 200px;height: 50px;line-height: 50px;margin: 20px auto;
                font-size: 50px;color: red;position: relative;
            }
            .dian{
                width: 100%;height: 100%;text-align: center;
            }
            #clock{
                width: 100%;height: 100%;text-align: right;
                position: absolute;top: 0;left: 0;letter-spacing: 16px;
            }
            #btn{
                width: 100px;height: 40px;display: block;margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="dian">.</div>
            <div id="clock">00</div>
        </div>

        <button type="button" id="btn">点击开始</button>

        <script type="text/javascript">
            var btn = document.getElementById("btn");
            var clock = document.getElementById("clock");

            var t = 0;
            function time(){
                t++;
                if (t>1200) {
                    clearInterval(inter);
                } else{
                    clock.innerHTML = t;
                }
            };

            btn.onmousedown = function(){
                inter = setInterval(time,10);
            };
            btn.onmouseup = function(){
                clearInterval(inter);
                //生成1-9的随机数
                var p = Math.floor(Math.random()*10);
                if(t==1000&&p==9){
                    alert("挑战10秒成功");
                }else if(t==1000&&p!=9){
                    clock.innerHTML = 1002;
                    alert("挑战10秒失败");
                }else{
                    alert("挑战10秒失败");
                };

            };

        </script>

    </body>
</html>

08.动画效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .box{
                width: 400px;height: 300px;margin: 20px auto;

            }

            #pic{
                width: 100%;height: 100%;
            }
            #btn{
                width: 100px;height: 40px;display: block;margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="img/1.jpg" id="pic"/>
        </div>

        <button type="button" id="btn">点击开始</button>

        <script type="text/javascript">
            var btn = document.getElementById("btn");
            var pic = document.getElementById("pic");
            var abc = 1;
            btn.onclick = function(){
                if (abc==1) {
                    abc = 0;
                    var i = 1;
                    var p = 1;
                    timer = setInterval(function(){
                        pic.setAttribute("src","img/"+i+".jpg");
    //                  i++;
    //                  if (i==45) {
    //                      i=1;
    //                  };
    //                  i= i<44?i+1:1;

                        i = i + p;   
                        if (i==44) {
                            p = -1;
                        } else if(i==1){
                            p = 1;
                        };  
                    },100);                 
                } else{
                    clearInterval(timer);
                    abc = 1;
                }

            }

        </script>

    </body>
</html>

04.放大镜效果

01.获取事件对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #left{
                width: 500px;height: 400px;background: red;
            }
        </style>
    </head>
    <body>
        <div id="left">

        </div>

        <script type="text/javascript">
            var left = document.getElementById("left");
            //给left元素绑定鼠标移动事件
            left.onmousemove = function(event){
                //获取事件对象
                //event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
                //event对象只在事件发生的过程中才有效
//              var ev = window.event;  //IE写法
//              var ev = event;   //其它浏览器写法

                var ev = window.event || event;

                alert(ev.type);

            };
        </script>

    </body>
</html>

02.获取鼠标位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #left{
                width: 500px;height: 400px;background: red;
            }
        </style>
    </head>
    <body>
        <div id="left">

        </div>

        <script type="text/javascript">
            var left = document.getElementById("left");
            //给left元素绑定鼠标移动事件
            left.onmousemove = function(event){
                //获取事件对象
                var ev = window.event || event;

                //获取鼠标与元素的位置,相对于被触发的元素左上角位置

//              var m_left = ev.offsetX;
//              var m_top = ev.offsetY;
//              var m_left = ev.layerX;
//              var m_top = ev.layerY;
                var m_left = ev.layerX ||ev.offsetX;
                var m_top = ev.layerY ||ev.offsetY;
                document.title = (m_left+"|"+m_top);
            };
        </script>

    </body>
</html>

03.放大镜

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #left{
                width: 500px;height: 400px;background: url(img/fj500.jpg) no-repeat;
                float: left;margin-left: 20px;position: relative;
                cursor: crosshair;
            }
            #box{
                width: 250px;height: 200px;background: #999;opacity: 0.8;
                position: absolute;top: 0;left: 0;display: none;
            }
            .cover{
                width: 500px;height: 400px;background: rgba(0,0,0,0);
                position: absolute;top: 0;left: 0;
            }
            #right{
                width: 500px;height: 400px;float: left;margin-left: 20px;
                position: relative;overflow: hidden;display: none;
            }
            #pic{
                position: absolute;top: 0;left: 0;
            }
        </style>
    </head>
    <body>
        <div id="left">
            <div id="box"></div>
            <div class="cover"></div>
        </div>
        <div id="right">
            <img src="img/fj1000.jpg" id="pic"/>  
        </div>        

        <script type="text/javascript">
            var left = document.getElementById("left");
            var box = document.getElementById("box");
            var right = document.getElementById("right");
            //给left元素绑定鼠标移动事件
            left.onmousemove = function(event){
                //获取事件对象
                var ev = window.event || event;
                //获取鼠标与元素的位置,相对于被触发的元素左上角位置
                var m_left = ev.layerX ||ev.offsetX;
                var m_top = ev.layerY ||ev.offsetY;
//              document.title = (m_left+"|"+m_top);

                //计算box的位置
                var box_left = m_left-125;
                var box_top = m_top-100;
                document.title = (box_left+"|"+box_top);

                //设置条件
                box_left = box_left<0?0:box_left;
                box_top = box_top<0?0:box_top;
                box_left = box_left>250?250:box_left;
                box_top = box_top>200?200:box_top;

                //让box动起来
                box.style.left = box_left+"px";
                box.style.top = box_top+"px";

                //让右侧图片动起来
                pic.style.left = "-"+box_left*2+"px";
                pic.style.top = "-"+box_top*2+"px";

            };
            //鼠标移入事件
            left.onmouseover = function(){
                box.style.display = "block";
                right.style.display = "block";
            };

            //鼠标移出事件
            left.onmouseout = function(){
                box.style.display = "none";
                right.style.display = "none";
            };  
        </script>

    </body>
</html>

05.转盘效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .box{
                width: 450px;height: 450px;margin: 100px auto;
                border-radius:50% ;overflow: hidden;position: relative;
            }
            img{
                width: 100%;height: 100%;position: absolute;
                top: 0;left: 0;
            }
            .zp{
                animation: zpzd 1s linear infinite;
            }
            .paused{
                animation-play-state: paused;
            }

            @keyframes zpzd{
                0%{transform: rotate(0deg);}
                100%{transform: rotate(360deg);}
            }

        </style>
    </head>
    <body>
        <div class="box">
            <img src="img/zp.png" id="zp"/>
            <img src="img/zz.png" id="zz"/>
        </div>

        <script type="text/javascript">
            var zp = document.getElementById("zp");
            var zz = document.getElementById("zz");
            var abc = 1;
            //获取旋转角度函数开始            
            function trans(r){
                var values = r.split('(')[1].split(')')[0].split(',');
                var a = values[0];
                var b = values[1];
                var scale = Math.sqrt(a * a + b * b);
                var sin = b / scale;
                var rota = Math.round(Math.atan2(b, a) * (180 / Math.PI));
                var rotate = rota>=0?rota:rota+360;
                return rotate;
            };
            //获取旋转角度函数结束            
            zz.onclick = function(){
                if (abc==1) {
                    //设置属性,让转盘转动
                    zp.setAttribute("class","zp");
                    abc = 2;
                } else{
                    var rot = getComputedStyle(zp,null).transform;
                    var rotate = trans(rot);
                    //console.log(rotate);

                    //设置条件
                    if (rotate>=54&&rotate<=90) {
                        //设置随机值
                        var num = Math.floor(Math.random()*(100-92+1)+92);                      
                        //设置角度
                        zp.style.transform = "rotate("+num+"deg)";

                        //console.log(num);

                    } else{
                        zp.style.transform = "rotate("+rotate+"deg)";
                    };

                    //设置属性,让转盘停止
                    zp.setAttribute("class","paused");
                    abc = 1;                    
                };

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

九、时间,数字,字符串方法

1.时间

01.创建时间对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //创建时间对象
            //1.创建当前的时间对象
            //var myDate = new Date();

            //2.使用参数创建时间对象(年, 月, 日, 时, 分, 秒, 毫秒)
            //var myDate = new Date(2019,10,1,9,10,40,50);

            //3.使用字符串创建时间对象
            //var myDate = new Date("2019/10/1 9:10:40");

            //4.使用时间戳创建时间对象
            //时间戳:从格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数,13位数字
            var myDate = new Date(1560000000000);

            alert(myDate);

        </script>

    </body>
</html>

02.获取年月日星期

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //创建当前的时间对象
            var myDate = new Date();

            //获取完整的年份(4位)
            var year = myDate.getFullYear();

            //获取当前月份(0-11,0代表1月)
            //var mon = myDate.getMonth();
            var mon = myDate.getMonth()+1;

            //获取当前日(1-31)
            var dat = myDate.getDate();

            //获取当前星期X(0-6,0代表星期天)
            var day = myDate.getDay();

            alert(day);

        </script>

    </body>
</html>

03.获取时分秒毫秒

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //创建当前的时间对象
            var myDate = new Date();

            //获取小时数(0-23)
            var hou = myDate.getHours();

            //获取分钟数(0-59)
            var min = myDate.getMinutes();

            //获取秒数(0-59)
            var msec = myDate.getSeconds();

            //获取毫秒数(0-999)
            var ms = myDate.getMilliseconds();

            alert(ms);

        </script>

    </body>
</html>

04.获取完整日期和时间

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //创建当前的时间对象
            //var myDate = new Date();

            //获取完整的年月日
            //var d = new Date().toLocaleDateString();
            var d = new Date(1560000000000).toLocaleDateString();

            //获取完整的时分秒
            //var t = new Date().toLocaleTimeString();
            var t = new Date(1560000000000).toLocaleTimeString();

            //获取完整的年月日时分秒
            //var dt = new Date().toLocaleString();
            var dt = new Date(1560000000000).toLocaleString();

            alert(dt);

        </script>

    </body>
</html>

05.时间戳

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //创建当前的时间对象
            //var myDate = new Date();

            //时间戳:从格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数,13位数字

            //精确到毫秒
            //var t = new Date().getTime();

            //精确到秒
//          var t = parseInt(new Date().getTime()/1000);
//          alert(t);

            var o_t = parseInt(new Date("2018/10/1 9:0:5").getTime()/1000);
            var n_t = parseInt(new Date().getTime()/1000);

            if (n_t-o_t<31536000) {
                alert("会员有效");
            } else{
                alert("会员无效");
            }

        </script>

    </body>
</html>

2.数字

01.数字取整

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
//          Math对象:用于执行数学任务
//          Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数
            var zxw = 1.53456;

            //1.向下取整
            var a = Math.floor(zxw);

            //2.向上取整
            var b = Math.ceil(zxw);

            //3.四舍五入
            var c = Math.round(zxw);

            alert(c);

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

02.随机取数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
//          Math对象:用于执行数学任务

            //获取0-1之间的随机数,包含0不包含1
            var a = Math.random();
//          0*5 = 0
//          0.01*5=0.05
//          0.11*5=0.55
//          0.91*5=4.55
            //获取0-10之间的随机数,包含0不包含10
            var b = Math.random()*10;

            //获取0-5之间的随机数,包含0不包含5
            var c = Math.random()*5;

            //获取0,1,2随机数,用得多
            //var zxw = Math.floor(Math.random()*3);

            //获取0,1,2,3随机数,取0的概率极小。
            var zxw = Math.ceil(Math.random()*3);

            alert(zxw);

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

03.给定范围随机整数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
//          Math对象:用于执行数学任务

            //获取2,3,4,5随机数
            var a = Math.random()+2;
            var b = Math.random()*4;
            var c = Math.random()*(5-2+1);
            var d = Math.random()*(5-2+1)+2;
            var e = Math.floor( Math.random()*(5-2+1)+2);

            //获取给定范围的随机整数(包含最小数和最大数)
            //公式:  Math.floor(Math.random()*(最大数-最小数+1)+最小数);

            //获取最小是5,最大是50,包含5和50的随机整数
            var zxw = Math.floor(Math.random()*(50-5+1)+5);

            alert(zxw);

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

3.字符串

01.字符串查找

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //1.查找指定位置的字符
            //返回某个位置的字符,即字符在字符串中的下标,第一个字符的下标是 0
            //如果下标超出了字符串长度,该方法将返回一个空字符串
//          var zxw = "www.51zxw.net";
//          
//          var a = zxw.charAt(4);   //5
//          var b = zxw.charAt(0);   //w
//          var c = zxw.charAt(10);   //n
//          var e = zxw.charAt(13);   //空

            //2.返回某个指定的字符串值在字符串中首次出现的位置
            //对大小写敏感,如果要检索的字符串值没有出现,则该方法返回 -1
            var zxw = "www.51zxw.net";

            var a = zxw.indexOf("w");  //0
            var b = zxw.indexOf(".");  //3
            var c = zxw.indexOf("w.51");  //2
            var d = zxw.indexOf("W");  //-1
            var e = zxw.indexOf("a");  //-1

            alert(e);

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

02.字符串替换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //字符串替换
            //语法:replace("要替换的字符","用什么字符替换");

            var zxw1 = "www.51zxw.net";
            var zxw2 = "www.51zxw.net www.51zxw.net";

            var a = zxw1.replace("www","aaa");  //aaa.51zxw.net
            var b = zxw2.replace("www","aaa");  //aaa.51zxw.net www.51zxw.net

            //全局匹配
            var c = zxw2.replace(/www/g,"aaa"); //aaa.51zxw.net aaa.51zxw.net

            //忽略大小写
            var d = zxw2.replace(/WWW/i,"aaa"); //aaa.51zxw.net www.51zxw.net

            //全局匹配,忽略大小写
            var e = zxw2.replace(/WWW/gi,"aaa"); //aaa.51zxw.net aaa.51zxw.net

            alert(e);

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

03.字符串大小写转换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //1.字符串大小写转换

            var zxw1 = "www.51zxw.net";
            var zxw2 = "WWW.51ZXW.NET";

            //toUpperCase()将所有的字符串都转换成大写字母
            var a = zxw1.toUpperCase();

            //toLowerCase()将所有的字符串都转换为小写字母
            var b = zxw2.toLowerCase();

            //2.把字符串首字母转成大写
            var xm = "xiaoming";

            //第1步:找到第1个字符
            var e = xm.charAt(0);

            //第2步:转成大写
            var f = e.toUpperCase();

            //第3步:字符串替换
            var g = xm.replace(e,f);

            var XM = xm.replace(xm.charAt(0),xm.charAt(0).toUpperCase());

            alert(XM);

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

04.截取指定下标的字符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var zxw = "www.51zxw.net";

            //1.substring()截取指定下标范围的字符串
                //substring()不接受负值

            //只有一个参数时,从指定位置截取到字符串结尾
            var a = zxw.substring(4); //51zxw.net

            //有两个参数时,截取指定下标范围的内容,包头不包尾
            var b = zxw.substring(4,8); //51zx
            var c = zxw.substring(4,9); //51zxw

            var d = zxw.substring(-4,-2); //错误

            alert(d);
        </script>
    </body>
</html>

05.截取指定个数的字符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var zxw = "www.51zxw.net";

            //2.substr()截取从指定下标开始的指定个数的字符
                //语法: substr(开始下标,截取个数);
                //substr()可以接受负值

            //只有一个参数时,从指定位置截取到字符串结尾
            var a = zxw.substr(4); //51zxw.net

            //有两个参数时,截取从指定下标开始的指定个数的字符,包头
            var b = zxw.substr(4,8); //51zxw.ne
            var c = zxw.substr(4,5); //51zxw

            //开始下标可以接受负值(-1 指字符串中最后一个字符,-2 指倒数第二个字符)
            var d = zxw.substr(-4,2); //.n

            var e = zxw.substr(-4,-2); //错误的
            alert(e);
        </script>
    </body>
</html>

06.字符串分割

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var zxw = "www.51zxw.net";

            //split();把一个字符串分割成字符串数组
            //语法:  split(指定位置分割,指定数组的长度);

            //var a = zxw.split(".");  //[ "www", "51zxw", "net" ]

            //var b = zxw.split(".",2);  //[ "www", "51zxw" ]

            //----------------------------------------------------

            var e = "中文名:我和我的祖国||出品时间:2019年||片长:158分钟||主演:黄渤,张译,吴京,杜江";

            var f = e.split("||");

            console.log(f);

            alert(f[1]);

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

07.字符串当成数组使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
//          var zxw = "www.51zxw.net";

            //把字符串当成数组来使用

//          var a = zxw.charAt(0);
//          var b = zxw[4];
//          
//          for (var i=0;i<zxw.length;i++) {
//              document.write(zxw[i]+"<br>");
//          }

            //2.把字符串首字母转成大写
            var xm = "xiaoming";

            //第1步:找到第1个字符
            //var e = xm.charAt(0);
            var e = xm[0];
            //第2步:转成大写
            var f = xm[0].toUpperCase();

            //第3步:字符串替换
            var g = xm.replace(e,f);

            //var XM = xm.replace(xm.charAt(0),xm.charAt(0).toUpperCase());
            var XM = xm.replace(xm[0],xm[0].toUpperCase());

            alert(XM);

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

十、数组及对象方法

1.对象

01.对象的合并

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //Object.assign()方法用于对象的合并
            //将源对象的属性,复制到目标对象中
            //第一个参数是目标对象,后面的参数都是源对象
            //会修改目标对象,不会修改源对象
//          var obj1 = {a:1};
//          var obj2 = {b:2};
//          var obj = Object.assign(obj1,obj2);
//          
//          console.log(obj1);//{ a: 1, b: 2 }
//          console.log(obj2);//{ b: 2 }
//          console.log(obj); //{ a: 1, b: 2 }

            //如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性
//          var obj1 = {a:1,b:1};
//          var obj2 = {b:2,c:2};
//          var obj = Object.assign(obj1,obj2);
//          
//          console.log(obj1);//{ a: 1, b: 2, c: 2 }
//          console.log(obj2);//{b:2,c:2}
//          console.log(obj); //{ a: 1, b: 2, c: 2 }

            //多个对象合并
            var obj1 = {a:1,b:1};
            var obj2 = {b:2,c:2};
            var obj3 = {c:3,d:3};
            var obj = Object.assign(obj1,obj2,obj3);

            console.log(obj1);//{ a: 1, b: 2, c: 3, d: 3 }
            console.log(obj2);//{b:2,c:2}
            console.log(obj3);//{c:3,d:3}
            console.log(obj); //{ a: 1, b: 2, c: 3, d: 3 }              

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

02.返回对象属性名和属性值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var obj = {a:1,b:2,c:3,d:4};

            //可枚举就是可遍历的意思,也就是说对象的属性是否能够通过遍历得到
            //1.Object.keys():用于返回对象可枚举的属性名或方法名
            //返回的结果是一个数组
            var a = Object.keys(obj);

            console.log(a);     //[ "a", "b", "c", "d" ]

            //2.Object.values():用于返回对象可枚举的属性值
            //返回的结果是一个数组
            var b = Object.values(obj);

            console.log(b);     //[ 1, 2, 3, 4 ]

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

03.判断属性及销毁对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var obj = {a:1,b:2,c:3,d:4};

            //1.判断对象中是否包含某个属性  :  in操作符

            //var a = "b" in obj;   //true  表示有这个属性
            //var b = "f" in obj;   //false 表示没有这个属性

            //alert(b);

            //2.销毁对象            对象=null;
            console.log(obj);   //{ a: 1, b: 2, c: 3, d: 4 }
            console.log(obj.b); //2

            //销毁obj这个对象
            obj=null;

            console.log(obj);   //null
            console.log(obj.b); //报错: obj is null

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

2.数组

01.数组转字符串

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //1.join()将数组的元素转成一个字符串,原来的数组会保留
            //join("分隔符"): 该方法只接收一个参数:即分隔符,省略的话则用默认用逗号为分隔符。

            //var arr = [1,2,3,4,5,6];
            var arr = ["2020","02","01"];
            //var a = arr.join();
            var a = arr.join("-");
            console.log(typeof a);
            console.log(a);
            console.log(arr);

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

02.伪数组转数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">

            //Array.from()将伪数组转成数组,只要有length属性的就可以转成数组。ES6语法
            //主要用来把字符串,set数据类型转成数组

            var zxw = "51zxw";

            var arr = [1,2,3,4,5,6];

            var obj = {name:"小明", age:18};

            console.log(zxw.length);
            console.log(arr.length);
            console.log(obj.length);//对象没有长度

            var a = Array.from(zxw);

            var b = Array.from(arr);

            var c = Array.from(obj);//返回空数组

            console.log(a);
            console.log(b);
            console.log(c);

        </script>

    </body>
</html>

03.数组末尾删除与添加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var arr = [1,2,3,4,5,6];

            //1.pop() 数组末尾移除最后一项,减少数组的 length 值,然后返回移除的元素。
            //pop()会直接修改原数组,而不是创建一个新的数组
            //var a = arr.pop();      //a: 6      arr: [1,2,3,4,5]

            //2.push() 用于向数组的末尾添加一个或多个元素,并返回修改后数组的长度(数值类型)。
            //push()会直接修改原数组,而不是创建一个新的数组
            //var b = arr.push(7);   //b: 7  数组的长度
            var c = arr.push("小明","小红");  
            //c: 8 数组的长度
            //arr:[ 1, 2, 3, 4, 5, 6 ,"小明", "小红"]

            console.log(arr); 

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

04.数组开头删除与添加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var arr = [1,2,3,4,5,6];

            //1.shift() 删除数组开头第一项,减少数组的 length 值,然后返回移除的元素。
            //shift()会直接修改原数组,而不是创建一个新的数组
            //var a = arr.shift();      //a: 1      arr: [ 2, 3, 4, 5, 6 ]

            //2.unshift() 用于向数组的开头添加一个或多个元素,并返回修改后数组的长度(数值类型)。
            //unshift()会直接修改原数组,而不是创建一个新的数组
            //var b = arr.unshift(7);   //b:  7数组的长度
            var c = arr.unshift("小明","小红");   
            //c: 8 数组的长度
            //arr:[ "小明", "小红", 1, 2, 3, 4, 5, 6 ]

            console.log(arr); 

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

05.数组任意位置删除和插入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //splice():可以实现删除,插入,替换,截取。会直接修改原数组
            //1.删除:可以删除任意数量的项,需指定 2 个参数:要删除的第一项的位置和要删除的项数。

            //var arr = ["赵","钱","孙","李"];          
            //arr.splice(1,2);          
            //console.log(arr);//[ "赵", "李" ]

            //2.插入:可以向指定位置插入任意数量的项,需提供 至少3 个参数:起始位置、 0(要删除的项数)和要插入的项。
            var arr = ["赵","钱","孙","李"];
            //arr.splice(2,0,"周","吴");
            arr.splice(arr.length,0,"周","吴");
            console.log(arr);//[ "赵", "钱", "周","吴", "孙", "李" ]

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

06.数组任意位置替换和截取

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //splice():可以实现删除,插入,替换,截取。会直接修改原数组
            //1.删除:可以删除任意数量的项,需指定 2 个参数:要删除的第一项的位置和要删除的项数。

            //var arr = ["赵","钱","孙","李"];          
            //arr.splice(1,2);          
            //console.log(arr);//[ "赵", "李" ]

            //2.插入:可以向指定位置插入任意数量的项,需提供 至少3 个参数:起始位置、 0(要删除的项数)和要插入的项。
            //var arr = ["赵","钱","孙","李"];
            //arr.splice(2,0,"周","吴");
            //arr.splice(arr.length,0,"周","吴");
            //console.log(arr);//[ "赵", "钱", "周","吴", "孙", "李" ]

            //3.替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,需提供 至少3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
            //var arr = ["赵","钱","孙","李"];
            //arr.splice(1,1,"周");//[ "赵", "周", "孙", "李" ]
            //arr.splice(1,2,"周","吴");//[ "赵", "周", "吴", "李" ]
            //arr.splice(1,2,"周","吴","郑","王");//[ "赵","周","吴","郑","王","李"]
            //console.log(arr);

            //4.截取:splice()返回一个包含从原始数组中删除项的数组
            //可以截取从指定位置开始,指定元素个数的数组
            var arr = ["赵","钱","孙","李","周","吴","郑","王"];
            var abc = arr.splice(1,4);
            console.log(abc); 

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

07.截取指定下标的数组或字符串

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //slice():截取指定下标的数组或字符串元素。数组,字符串均有效
            //不会修改原数组或字符串
            //语法: slice(开始下标,结束下标);
            //如果结束下标未被规定,那么会选取从开始下标到数组结尾的所有元素
            //返回一个包含从开始下标到结束下(不包括结束标下标)的新数组或字符串
            //可使用负值从数组的尾部选取元素

            var arr = [0,1,2,3,4,5,6,7,8,9];

            var str = "www.51zxw.net";

            //var zxw = arr.slice(2);  //[2,3,4,5,6,7,8,9]
            //var zxw = arr.slice(3,8);  //[3,4,5,6,7]
            //var zxw = arr.slice(-6,-1);  //[ 4, 5, 6, 7, 8 ]
            //var zxw = arr.slice(-6,-9);  //空数组

            var zxw = str.slice(2);  //w.51zxw.net

            console.log(zxw);

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

08.查找指定元素的下标

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">

            //1.indexOf() 查找指定元素的下标,从前往后查找
            //若有重复的,则返回第一个查到的下标
            //若不存在,则返回 -1
            //var arr1 = ["赵","钱","孙","李","周","吴","郑","王"];
            //var arr1 = ["赵","钱","孙","李","周","吴","郑","王","李"];
            //var a = arr1.indexOf("李");  //3
            //var b = arr1.indexOf("冯");  //-1
            //console.log(b);

            //2.lastIndexOf() 查找指定元素的下标,从后往前查找
            //若有重复的,则返回第一个查到的下标
            //若不存在,则返回 -1
            var arr2 = ["赵","钱","孙","李","周","吴","郑","王"];
            var arr3 = ["赵","钱","孙","李","周","吴","郑","王","李"];
            var a = arr2.lastIndexOf("李");  //3
            var b = arr3.lastIndexOf("李");  //8
            var c = arr3.indexOf("冯");  //-1
            console.log(c);         

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

09.合并数组及反转数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //1.concat() 方法用于连接两个或多个数组
            //该方法会先创建当前数组一个副本,不会改变原有的数组,会返回一个新数组。
//          var arr1 = [1,2,3];
//          var arr2 = [4,5,6];
//          var arr3 = [7,8,9];
            //var arr = arr1.concat(arr2);   //[1,2,3,4,5,6]
            //var arr = arr1.concat(arr2,arr3);  //[1,2,3,4,5,6,7,8,9]

//          var arr = arr2.concat(arr1);  //[4,5,6,1,2,3]
//          
//          console.log(arr);
//          console.log(arr1);
//          console.log(arr2);
//          console.log(arr3);

            //2.reverse():反转数组中元素的顺序
            //该方法会改变原来的数组,而不会创建新的数组
            //返回值并不是排序后的数组,而是数组的引用
            var arr4 = [1,2,3,4,5,6];

            //arr4.reverse(); //[ 6, 5, 4, 3, 2, 1 ]

            var arr5 = arr4.reverse();  //[ 6, 5, 4, 3, 2, 1 ]      
            console.log(arr4);
            console.log(arr5);
        </script>
    </body>
</html>

10.数组元素升序排序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">

            //sort():用于对数组的元素进行排序
            //默认:按升序排列数组项,即最小的值位于最前面,最大的值排在最后面。
            //会直接修改原数组
            //sort()会转成字符串再比较,并从第1个字符进行比较

            var arr1 = [3,9,7,6,4,2];
            var arr2 = ["e","a","f","b","c","m"];
            var arr3 = [33,99,17,6,24,2];
            var arr4 = ["ea","aj","ff","mb","zc","hm"];
            var arr5 = ["aa","aj","ff","mb","zc","hm"];

            arr1.sort();   //[ 2, 3, 4, 6, 7, 9 ]
            arr2.sort();    //[ "a", "b", "c", "e", "f", "m" ]
            arr3.sort();   //[2,6,17,24,33,99][ 17, 2, 24, 33, 6, 99 ]
            arr4.sort();   // [ "aj", "ea", "ff", "hm", "mb", "zc" ]
            arr5.sort();   //[ "aa", "aj", "ff", "hm", "mb", "zc" ]

            console.log(arr1);
            console.log(arr2);
            console.log(arr3);
            console.log(arr4);
            console.log(arr5);
        </script>
    </body>
</html>

11.数组元素自定义排序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">

            //sort():用于对数组的元素进行排序
            //默认:按升序排列数组项,即最小的值位于最前面,最大的值排在最后面。
            //会直接修改原数组
            //sort()会转成字符串再比较,并从第1个字符进行比较
            //sort()参数为规定排序顺序,必须是函数
            //语法:sort(比较函数);
            //比较函数函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。
            //比较函数应该具有两个参数 a 和 b,其返回值如下:
                //若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
                //若 a 等于 b,则返回 0。
                //若 a 大于 b,则返回一个大于 0 的值。
            //1.升序排列    
            function asc(a,b){
                if (a<b) {
                    return -1;
                } else if (a>b){
                    return 1;
                } else {
                    return 0;
                };
            };

            //1.降序排列    
            function desc(a,b){
                if (a<b) {
                    return 1;
                } else if (a>b){
                    return -1;
                } else {
                    return 0;
                };
            };              

//          var arr1 = [3,9,7,6,4,2];
//          var arr2 = ["e","a","f","b","c","m"];
            var arr3 = [33,99,17,6,24,2];
            var arr4 = ["ea","aj","ff","mb","zc","hm"];
//          var arr5 = ["aa","aj","ff","mb","zc","hm"];

//          arr1.sort(asc);   //[ 2, 3, 4, 6, 7, 9 ]
//          arr2.sort();    //[ "a", "b", "c", "e", "f", "m" ]
//          arr3.sort(asc);   //[2,6,17,24,33,99]
            arr3.sort(desc);  //[ 99, 33, 24, 17, 6, 2 ]

//          arr4.sort(asc);   // [ "aj", "ea", "ff", "hm", "mb", "zc" ]
            arr4.sort(desc);  //[ "zc", "mb", "hm", "ff", "ea", "aj" ]

//          arr5.sort();   //[ "aa", "aj", "ff", "hm", "mb", "zc" ]

//          console.log(arr1);
//          console.log(arr2);
            console.log(arr3);
            console.log(arr4);
//          console.log(arr5);
        </script>
    </body>
</html>

12.数组元素过滤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //filter():把数组中的某些元素过滤掉,然后返回剩下的元素,接收的是一个回调函数
            //数组中的每一项运行给定函数,返回满足过滤条件组成的新数组。
            //不会改变原数组
            var arr1 = [1,2,3,4,5,6,7,8,9,10];

            function abc(x){
                return x>6;
            };

            //保留大于6的数组元素
            var arr2 = arr1.filter(abc);  //[7,8,9,10]

            function bcd(x){
                return x%2==1;
            };

            //保留数组中的奇数元素
            var arr3 = arr1.filter(bcd);   //[1,3,5,7,9]

            console.log(arr1);
            console.log(arr2);
            console.log(arr3);

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

13.数组元素遍历法去重复

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //遍历数组法去重复:
            //建立一个新数组,然后循环遍历要去重的数组,每次判断新数组不包含旧数组的值时(新数组用indexOf方法检索旧数组的值返回结果等于-1)将该值加入新数组。
            var arr1 = [1,1,2,2,3,3];  //[1,2,3]

            function qcf(arr){
                var abc=[];
                for(var i=0; i<arr.length;i++){
                    if(abc.indexOf(arr[i]) == -1){
                        abc.push(arr[i]);
                    };  
                };
                return abc;
            };

            var arr2 = qcf(arr1);

            console.log(arr2);  //[1,2,3]
        </script>
    </body>
</html>

14.使用set方法去重复

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //set数据类型:ES6提供了新的数据结构Set。
            //它类似于数组,但是成员的值都是唯一的,没有重复的值。

            var arr1 = [1,1,2,2,3,3];

            //1.数组转set
            var set = new Set(arr1); //[1,2,3]

            //console.log(arr1);
            //console.log(set1);

            //2.set转数组
            var arr2 = Array.from(set);//[1,2,3]
            var arr3 = [...set]; //[1,2,3]
            //console.log(arr2);
            //console.log(arr3);

            //3.has()判断一个值是否在set中
            //返回布尔值,在为true,不在为false
             console.log(set.has(2));  //true
             console.log(set.has(5));  //false

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

15.数组并集,交集,差集

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var arr1=[1,2,3];
            var arr2=[2,3,4];
            var a = new Set(arr1);
            var b = new Set(arr2);

            //1.并集:a+b再把重复去掉  [1,2,3,4]
            var un = new Set([...a,...b]);  //[1,2,3,4]
            console.log(un);

            //2.交集:a和b共同的部分[2,3]
            var is = new Set([...a].filter(x=> b.has(x)));//[2,3]
            console.log(is);
//          function(x){
//              return b.has(x);
//          }

            //3.差集:a-b [1]
            var df = new Set([...a].filter(x=> !b.has(x)));//[1]
            console.log(df);
        </script>
    </body>
</html>

十一、json数据格式

01.JSON数据格式简介

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //JSON(JavaScript Object Notation, js对象标记法) 是一种轻量级的数据交换格式。
            //JSON基于 ECMAScript规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
            //JSON字符集必须是UTF-8,JSON的字符串规定必须用双引号"",键名也必须用双引号""。
            //任何支持的数据类型都可以通过 JSON 来表示。
            //JavaScript内置了JSON的解析
            //json本质就是字符串

            var obj = {name:"小明",age:18}; //这是一个对象
            //console.log(obj);
            //console.log(typeof obj);

            var xm = '{"name":"小明","age":18}'; //这是一个json字符串
            console.log(xm);
            console.log(typeof xm);
        </script>
    </body>
</html>

02.JSON和JS对象互转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">

            var obj = {name:"小明",age:18}; //这是一个对象

            var xm = '{"name":"小明","age":18}'; //这是一个json字符串

            //1.JS对象转JSON字符串:使用 JSON.stringify()方法
            var xm_json = JSON.stringify(obj);

            //console.log(xm_json);
            //console.log(typeof xm_json);

            //2.JSON字符串转JS对象:使用 JSON.parse()方法
            var xm_obj = JSON.parse(xm);

            console.log(xm_obj);

            alert(xm_obj.name);
            alert(xm_obj.age);
        </script>
    </body>
</html>

03.筛选对象键值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">

            var obj = {name:"小明",age:18,sex:"男",height:"1.8米"}; //这是一个对象

            //1.JS对象转JSON字符串:使用 JSON.stringify()方法
            //JSON.stringify()可以有3个参数
            //参数1:要转换对象或数组
            //参数2(可选):数组或函数
                //如果参数2 是一个数组,则仅转换数组中指定的属性
                //如果参数2为函数,则将调用该函数,并传入每个成员的键和值。
            //参数3(可选):文本缩进、空格和换行符   

            //var xm_json = JSON.stringify(obj);
            //var xm_json = JSON.stringify(obj,['name','sex']);//{"name":"小明","sex":"男"}

            //var xm_json = JSON.stringify(obj,sex);
            //{"name":"小明","age":18,"sex":"女","height":"1.8米"}

            function sex(key,value){
                if (value == "男") {
                    return "女";
                };
                return value;
            }

            var xm_json = JSON.stringify(obj,null,'\n');

            console.log(xm_json);

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

04.传入函数处理json键值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //这是一个JSON字符串
            var xm = '{"name":"小明","age":18,"sex":"男","height":"1.8米"}'; 
            //2.JSON字符串转JS对象:使用 JSON.parse()方法
            //JSON.parse()方法可以有2个参数
            //参数1:要转换JSON字符串
            //参数2(可选):在 parse 函数返回之前处理结果的函数,处理每个成员的键和值  

            //var xm_obj = JSON.parse(xm);
            //{ name: "小明", age: 18, sex: "男", height: "1.8米" }

            var xm_obj = JSON.parse(xm,sex);
            //{ name: "小明", age: 18, sex: "女", height: "1.8米" }

            var xm_obj = JSON.parse(xm,nm);
            //{ name: "小明你好", age: 18, sex: "男", height: "1.8米" }

            function sex(key,value){
                if (value == "男") {
                    return "女";
                };
                return value;
            }

            function nm(key,value){
                if (key == "name") {
                    return value+"你好";
                };
                return value;
            }

            console.log(xm_obj);

            document.write(xm_obj.name+"<br>");
            document.write(xm_obj.age+"<br>");
            document.write(xm_obj.sex+"<br>");
            document.write(xm_obj.height+"<br>");

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

声明:此笔记来自我要自学网何亮老师录制的JavaScript基础教程课后笔记,放在这里主要是方便学习使用。

想要获得此笔记,关注微信公众号“51学代码” 回复"JS基础"即可免费获得。

欢迎关注本站微信公众号“51学代码”

免责声明:

  • 1.本站所提供的全部内容仅限于交流、学习与研究使用,请勿用于非法目的。
  • 2.任何使用本站内容而出现的意外或损失,本站概不负责。
  • 3.本站遵守国家法律法规,禁止制作、复制、发布、传播任何具有反动、色情、暴力、淫秽,政治等内容的信息,一经发现,立即删除,并锁定IP地址移交给公安机关处理。
  • 4.本站的留言、评论与转载内容,仅代表原作者个人观点,与本站观点或立场无关,所有评论、留言均需经过审核后方可正常显示,本站有权删除和过滤违反法律法规的或不正当的言论。
  • 5.本站的文章部分内容可能来源于网络或转载于其他文章,仅供大家学习与参考,如有侵权,请联系站长QQ:1823782755进行删除处理。
  • 6.本站可能会包含第三方网站的链接,点击后或将离开本站并进入其他站点,本站不对其他站点的内容负责。
  • 7.本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
  • 8.根据《计算机软件保护条例》第十七条,为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬,本站所有软件资料仅用于学习研究。
  • 9.本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
  • 10.本站文章采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可,阅读后请勿用于非法用途。
  • 点我去本站旗下导航网

    更多知识,请关注微信公众号“51学代码”

    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞236 分享
    jjz的头像-51学代码
    评论 抢沙发
    头像
    发一个友善的评论吧!
    提交
    头像

    昵称

    取消
    昵称表情代码图片