五，javaScript内置对象与DOM操作

JavaScript中的对象分为3种:内置对象，浏览器对象、自定义对象。

1，JavaScript对象定义和使用

创建对象的方式：

原始方式创建对象；
工厂模式创建对象；
自定义构造函数创建对象；
直接创建自定义对象；

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1.使用原始的方式创建对象
        var obj = new Object();
        obj.name = "zhangsan"; //为obj对象添加属性
        obj.age = 20;
        obj.say = function(){ //添加功能（函数/方法）
            console.log(this.name,":",this.age);
        }
        //测试
        console.log(obj.name);
        console.log(obj.age);
        obj.say()

        //2.使用工厂模式创建对象
        function createObject(name,age){
            var obj = new Object();
            obj.name = name; //为obj对象添加属性
            obj.age = age;
            obj.say = function(){ //添加功能（函数/方法）
                console.log(this.name,":",this.age);
            }
            return obj;
        }
        //测试
        var ob1 = createObject("lisi",20);
        console.log(ob1.name);
        ob1.say();
        var ob2 = createObject("wangwu",25);
        console.log(ob2.name);
        ob2.say();
        console.log("=============================");

        //3.使用自定义构造函数创建对象
        function Stu(name,age){
            this.name = name;
            this.age = age;
            this.say = function(){
                console.log(this.name,":",this.age);
            }
        }
        //测试
        var s1 = new Stu("zhaoliu",28);
        var s2 = new Stu("xiaoli",21);
        s1.say()
        s2.say()
        console.log("=============================");

        //4.直接创建自定义对象
        var ob = {name:"qq",age:26};
        console.log(ob.name);
        console.log(ob.age);

        var obj={};
        obj.name="小白";
        obj.say=function () {
        console.log("我叫: "+this.name);
        };
        obj.say();

        var obj2={
            name:"小明",
            age:20,
            say:function () {
                console.log("我叫: "+this.name+"; 年龄: "+this.age);
            },
        };
        obj2.say();

        var a = [10,20,30];
        console.log(typeof(a));// 类型显示的是Object
        console.log(a.constructor == Array);// 用此方法可以判断a的具体类型
        console.log(s1 instanceof Stu);
    </script>
</head>
<body>
    <h1>JavaScript语言实例--对象的定义和使用</h1>
</body>
</html>
复制代码

点击并拖拽以移动

2，JavaScript内置对象

2.1 Array数组

JavaScript Array 对象

2.1.1 创建方式

var a= new Array(); //创建一个空数组
a = new Array(10); //创建一个数组单元为10个的数组。
a=new Array(18, 20, 38);//创建一个指定数组单元的数组。
a=[“a”,”b”,”c”,”d”]; //快捷定义数组

2.1.2 常用属性：

length：获取长度

2.1.3 常用方法：

tostring()：把数组转换为字符串，并返回结果。
sort()：对数组的元素进行排序
join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()：删除并返回数组的最后-一个元素
push()：向数组的末尾添加一个或更多元素，并返回新的长度。
shift()：取出数组中的第一个元素，修改length属性
unshift()：在数组最前面插入项，返回数组的长度
reverse()：反转数组
concat()：把参数拼接到当前数组

2.1.4 清空数组:

arr=[]; // 方式1推荐
arr.length = 0; // 方式2
arr.splice(0, arr.length); // 方式3

2.1.5 举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //内置对象--Array数组
        var a1 = new Array(); //定义一个空数组
        var a2 = new Array(10); //定义一个长度为10数组（值：undefined）
        var a3 = new Array(10,20,30); //定义一个指定数值的数组

        console.log(a1.length);
        console.log(a2.length);
        console.log(a3.length);

        var a4 = [10,20,30,40,50]; //快捷定义数组

        //数组的遍历
        for(var i=0; i<a4.length;i++){
            console.log(i,"=>",a4[i]);
        }

        for(var i=a4.length-1; i>=0;i--){
            console.log(i,"=>",a4[i]);
        }

        for(var i in a4){
            console.log(i,"=>",a4[i]);
        }

        a4.forEach(function(v){
            console.log(v);
        });

        //数组的方法：
        console.log(a4.toString());
        console.log(a4.join(":"));
        var aa = [1,2,3];
        console.log(aa.concat(4,5));

        var b = [10,50,30,20,70,40];
        console.log(b.join(":"));
        console.log(b.sort().join(":"));
        console.log(b.reverse().join(":"));

        var aa = new Array(10,20,30); 
        console.log(aa.join(":"));
        aa.push(50);
        aa.push(40);
        console.log(aa.join(":"));
        aa.pop();
        console.log(aa.join(":"));

        //清空
        console.log(b.join(":"));
        b.length = 3;
        console.log(b.join(":"));
        b = [];
        console.log(b.join(":"));
    </script>
</head>
<body>
    <h1>JavaScript语言实例--内置对象</h1>
</body>
</html>
复制代码

点击并拖拽以移动

2.2 基本包装类型

基本包装类型

为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型: String/Number/Boolean

下面代码的问题?

s1是基本类型，基本类型是没有方法的

var s1 = 'zhangsan' ;
var s2 = s1. substring(5);
复制代码

点击并拖拽以移动

当调用s1. substring(5)的时候，先把s1包装成String类型的临时对象，再调用substring方法，最后销毁临时对象

var s1 = new String( ' zhangsan');
var s2 = s1. substring(5);
s1 = null;
复制代码

点击并拖拽以移动

创建基本包装类型的对象

var num =18;//数值，基本类型
var num = Number('18');//类型转换
var num = new Number(18);//基本包装类型，对象
复制代码

点击并拖拽以移动

Number和Boolean基本包装类型基本不用，使用的话可能会引起歧义。例如:

var b1 = new Boolean(false);
var b2 = b1 && true;//结果是什么
复制代码

点击并拖拽以移动

2.3 Date日期

JavaScript Date 对象

2.3.1 常用方法

var dd = new Date();

getDate()：从Date对象返回一个月中的某一天(1 ~ 31)。
getDay()：从Date对象返回一周中的某一天(0 ~ 6)。
getMonth()：从Date对象返回月份(0 ~ 11)。
getFullYear()：从Date对象以四位数字返回年份。
getYear()：请使用getFullvear() 方法代替。
getHours()：返回Date对象的小时(0~23)。
getMinutes()：返回Date对象的分钟(0~59)。
getseconds()：返回 Date对象的秒数(0~59)。
getMilliseconds()：返回 Date 对象的毫秒(0~999)。
getTime()：返回 1970年1月1日至今的毫秒数。

同上还有很多set方法用来设置。

2.3.2 举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript语言实例--内置对象</h1>
</body>
<script>
    //内置对象--Date日期对象

    function formatDate(dd){
        if(!dd instanceof Date){
            return;
        }
        var y = dd.getFullYear(),
            m = dd.getMonth()+1,
            d = dd.getDate(),
            hh = dd.getHours(),
            mm = dd.getMinutes(),
            ss = dd.getSeconds();
        //判断单位数字前补零操作
        hh = hh<10?'0'+hh:hh;
        mm = mm<10?'0'+mm:mm;
        ss = ss<10?'0'+ss:ss;
        return y+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
    }

    var dd = new Date();
    //从1970年1月1日零时零分0秒至今的毫秒数
    document.write("时间戳："+dd.valueOf());
    
    document.write("<h2>"+formatDate(dd)+"</h2>");
</script>
</html>
复制代码

点击并拖拽以移动

2.4 String字符串

JavaScript String 对象

2.4.1 常用方法

anchor()：创建HTHL锚。
*charAt()：返回在指定位置的字符。
charCodeAt()：返回在指定的位置的字符的Unicode 编码。
*index0f()：检索字符串。
*lastIndexOf()：从后向前搜索字符串。
match()：找到一个或多个正在表达式的匹配。
*replace()：替换与正则表达式匹配的子串。
search()：检索与正则表达式相匹配的值。
slice()：提职字符串的片断，并在新的字符串中返回被提取的部分。
split()：把字符串分割为字符串数组。
substr()：从起始索引号提取字符串中指定数目的字符。
*substring()：提取字符串中两个指定的索引号之间的字符。
tolocaleLowerCase()：把字符串转换为小写。
tolocaleUpperCase()：把字符串转换为大写。
*toLowerCase()：把字符申转换为小写。
*toupperCase()：把字符串转换为大写。

2.4.2 举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript语言实例--内置对象</h1>
</body>
<script>
    //内置对象--String字符串对象
    var s1 = "ZhangSanFeng";
    document.write(s1+"<br/>");
    document.write(s1[5]+"<br/>");
    document.write(s1.charAt(5)+"<br/>");
    document.write(s1.substr(5,3)+"<br/>");
    document.write(s1.substring(5,8)+"<br/>");
    document.write("小写："+s1.toLowerCase()+"<br/>");
    document.write("大写："+s1.toUpperCase()+"<br/>");
    //子串查找
    document.write(s1.indexOf("an")+"<br/>");
    document.write(s1.lastIndexOf("an")+"<br/>");
    //替换
    document.write(s1.replace("SanFeng","WuJi")+"<br/>");

    //全部替换
    document.write("10,20,30,40".replace(/,/g,":")+"<br/>");

    var str = "10:23:45:67:87:65";
    console.log(str);
    console.log(str.split(":"));

    var s2 = " zhangsan ";
    console.log("#"+s2+"#");
    console.log("#"+s2.trim()+"#");
</script>
</html>
复制代码

点击并拖拽以移动

2.5 Math对象

JavaScript Math 对象

注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

2.5.1 常用方法

abs(x)：返回数的绝对值。
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
random()：返回0~1之间的随机数。
round(x)：把数四舍五入为最接近的整数。
max(x,y)：返回x和y中的最高值。
min(x,y)：返回x和y中的最低值。

2.5.2 举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript语言实例--内置对象</h1>
</body>
<script>
    //内置对象--Math对象
    console.log(Math.abs(-20));
    console.log(Math.ceil(10.000000001)); //进一取整
    console.log(Math.floor(10.9999999)); //舍去取整
    console.log(Math.round(10.5)); //四舍五入取整
    console.log(Math.max(10,20)); //最大
    console.log(Math.min(10,20)); //最小

    console.log(Math.random()) //0~1的随机数
    console.log(Math.ceil(Math.random()*1000000)%10+1) //1~10的随机数
</script>
</html>
复制代码

点击并拖拽以移动

2.6 Global

escape(string)：可对字符串进行编码
unescape(string)：函数可对通过escape() 编码的字符串进行解码。
encodeURI(URIstring)：函数可把字符串作为URI 进行编码。
decodeURI(URIstring)：函数可对encodeURI() 函数编码过的urI进行解码。
peval(string)：函数可计算某个字符串，并执行其中的的JavaScript 代码。
getClass(javaobj)：函数可返回一个Javaobject的JavaClass
*isNaN(x)：函数用于检查其参数是否是非数字值。
Number(object)：函数把对象的值转换为数字。
*parsef loat(string)：还数可解析一个字符串，并返回一个浮点数。
*parseInt(string, radix)

3，JavaScript单击事件与元素标签操作

JavaScript 事件

点击并拖拽以移动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="hid">JavaScript语言实例--单击事件</h1>
    <button onclick="fun()">点击我</button>
    <ul id="uid">
        <li>AAAAA</li>
        <li>BBBBB</li>
        <li>CCCCC</li>
        <li>DDDDD</li>
    </ul>
    <ol>
        <li>1111111</li>
        <li>2222222</li>
    </ol>
</body>
<script>
   function fun(){
        console.log('hello js');
        //获取id属性值为hid的元素标签
        var hid = document.getElementById("hid");
        //输出元素标签之间的文本内容
        console.log(hid.innerHTML);
        //修改标签之间的内容
        hid.innerHTML = "JavaScript语言实例--元素操作";
        //改变 HTML 元素的样式
        hid.style.color = "red";
        // hid.style.background-color = "#ddd";由于命名冲突 此代码报错时 可改为下面的代码
        hid.style.backgroundColor = "#ddd";// 去掉-，并将-后的小写字母改为大写
   }

   //获取当前网页中的所有li元素标签
   //var mlist = document.getElementsByTagName("li");
   var mlist = document.getElementById("uid").getElementsByTagName("li");
   
   //遍历输出
   for(var i in mlist){
       if(!isNaN(i)){
          console.log(mlist[i].innerHTML);
          mlist[i].style.color="red";
       }
   }

</script>
</html>
复制代码

点击并拖拽以移动

4，JavaScript中的Timing定时事件

JavaScript Timing 事件

4.1 Timing事件

点击并拖拽以移动

4.2 如何停止？

点击并拖拽以移动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript语言实例--定时器</h1>
    <h2  id="hid">计数器：0</h2>
    <button onclick="doStop()">停止</button>
</body>
<script>
    var m=0,mytime=null;

    function doRun(){
        m++;
        document.getElementById("hid").innerHTML = "计数器："+m;
        
        mytime = setTimeout(doRun,1000);
    }
    
    doRun();
    
    function doStop(){
        clearTimeout(mytime);
    }
    
    
    /*
    m = 0;
    var mytime = setInterval(function(){
        m++;
        document.getElementById("hid").innerHTML = "计数器："+m;
    },1000)

    function doStop(){
        clearInterval(mytime);
    }
    */

    /*
    //定义时3秒后执行参数中的函数
    setTimeout(function(){
        console.log("Hello JS!");
    },3000);


    //定时每隔1秒执行参数回调函数一次
    var m = 0;
    setInterval(function(){
        m++;
        console.log("Hello "+m);
    },1000)
    */
</script>
</html>
复制代码

点击并拖拽以移动

5，JavaScript实现简单计算器实例

通过javascript进行简单的数据获取、计算、显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript语言实例--简单计算器</h1>
    <form action="" name="myform" method="get">
        数值1：<input type="text" name="num1" size="10"/><br/><br/>
        数值2：<input type="text" name="num2" size="10"/><br/><br/>
        结 果：<input type="text" name="res" readonly style="border:0px;" size="10"/><br/><br/>
        <input type="button" onclick="doFun(1)" value="加"/>
        <input type="button" onclick="doFun(2)" value="减"/>
        <input type="button" onclick="doFun(3)" value="乘"/>
        <input type="button" onclick="doFun(4)" value="除"/>
    </form>
</body>
<script>
    //处理函数
    function doFun(c){
        var m1 = parseInt(document.myform.num1.value);
        var m2 = parseInt(document.myform.num2.value);
        //console.log(m1,m2);
        switch(c){
            case 1: var res = m1+"+"+m2+"="+(m1+m2); break;
            case 2: var res = m1+"-"+m2+"="+(m1-m2); break;
            case 3: var res = m1+"*"+m2+"="+(m1*m2); break;
            case 4: var res = m1+"/"+m2+"="+(m1/m2); break;
        }
        //将结果放置到第三个输入框中
        document.myform.res.value = res;
    }
</script>
</html>
复制代码

点击并拖拽以移动

6，JavaScript简单操作元素标签实例

通过JavaScript控制HTML元素大小

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript语言实例--js操作元素标签属性（放大和缩小）</h1>
    <button onclick="dofun(1)">放大</button>
    <button onclick="dofun(2)">缩小</button>
    <button onclick="dofun(3)">隐藏</button>
    <br/><br/>
    <div style="width:200px;height:200px;background-color:#ddd;" id="did"></div>
</body>
<script>
    var width=200,height=200;
    var did = document.getElementById("did");// 获取div节点

    function dofun(m){
        switch(m){
            case 1:
                width += 10;
                height += 10;
                did.style.width = width+"px";
                did.style.height = height+"px";
                break;
            case 2:
                width -= 10;
                height -= 10;
                did.style.width = width+"px";
                did.style.height = height+"px";
                break;
            case 3:
                did.style.display = "none";
                break;
        }
    }
</script>
</html>
复制代码

点击并拖拽以移动

7，JS事件处理

参考文档：HTML DOM Event 对象

7.1 事件绑定方式

事件源，事件，事件处理程序

点击并拖拽以移动

举例介绍两种事件绑定方式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript语言实例</title>
</head>
<body>
    <h1>JavaScript语言实例--事件处理(事件绑定方式)</h1>
    <button onclick="fun()">按钮1</button>
    
    <button id="bid">按钮2</button>
</body>
<script>
    // 方式一
     function fun(){
         console.log("按钮1被点击了");
     } 

    // 方式二
     document.getElementById("bid").onclick = function(){
        console.log("按钮2被点击了");
     }
</script>
</html>
复制代码

点击并拖拽以移动

7.2 获取事件源对象

两种事件绑定方式对应两种获取事件源对象的方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript语言实例</title>
</head>
<body>
    <h1>JavaScript语言实例--获取事件源对象</h1>
    <h2 onclick="fun(this)">2级标题1</h2>
    <h2 id="hid">2级标题2</h2>
</body>
<script>
    // function fun(){
    //     console.log("aaaaaaaaaa");
    //     //此种事件绑定方式，this表示外层对象，无法获取当前事件源对象
    //     console.log(this);
    // }
    // 方式一
    function fun(ob){
        console.log("aaaaaaaaaa");
        console.log(ob);
        ob.style.color = "green";
    }

    // 方式二
    document.getElementById("hid").onclick = function(){
        console.log("bbbbbbbbbbb");
        //此种事件绑定方式，this就表示当前事件源对象
        //console.log(this);
        this.style.color = "red";
    }
</script>
</html>
复制代码

点击并拖拽以移动

7.3 bclick双击事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript语言实例</title>
    <style>
        ul,li{margin:0px;padding:0px;}
        ul{list-style:none;}
        ul li{height:30px;margin-top:4px;background-color:#ddd;}
        ul li:hover{background-color:#fc0;}
    </style>
</head>
<body>
    <h1>JavaScript语言实例--dblclick双击事件</h1>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
   //获取上面所有的li元素节点
   var mlist = document.getElementsByTagName("li");
   //遍历绑定事件
   for(var i=0;i<mlist.length;i++){
       mlist[i].ondblclick = function(){
           //设置背景颜色
           this.style.backgroundColor = "#f0c";
       }
   }
</script>
</html>
复制代码

点击并拖拽以移动