DOM操作五-内置对象及事件添加解绑

作者: charlotte2018 | 来源:发表于2017-11-12 17:16 被阅读2次

01-Date定义和体验.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //第一种
    var date1 = new Date();
    console.log(date1);

    //第二种
    var date2 = new Date("2016/09/06 00:00:00");
    console.log(date2);


    //后两种兼容性不好，不推荐使用
    //第三种
    var date3 = new Date('Wed Jan 27 2016 12:00:00 GMT+0800 (中国标准时间)');

    //第四种
    var date4 = new Date(2016, 1, 27);



    console.log(date1.getDate()          )       //获取日 1-31
    console.log(date1.getDay ()          )       //获取星期 0-6（0代表周日）
    console.log(date1.getMonth ()        )       //获取月 0-11（1月从0开始）
    console.log(date1.getFullYear ()     )      //获取完整年份（浏览器都支持）
    console.log(date1.getHours ()        )       // 获取小时 0-23
    console.log(date1.getMinutes ()      )     //获取分钟 0-59
    console.log(date1.getSeconds ()      )     //获取秒  0-59
    console.log(date1.getMilliseconds () )       //获取毫秒 （1s = 1000ms）
    console.log(date1.getTime ()         )      //返回累计毫秒数(从1970/1/1午夜)




    //获取当前时间距离1970/01/01的毫秒值

//    var date11 = Date.now();
//    var date22 = +new Date();
//    var date33 = new Date().getTime();
//    var date44 = new Date().valueOf();
//
//    console.log(date11);
//    console.log(date22);
//    console.log(date33);
//    console.log(date44);

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

02-模拟日历.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 800px;
            margin: 200px auto;
            color: red;
            text-align: center;
            font: 600 30px/30px "simsun";
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        //模拟日历
        //需求：每天打开这个页面都能定时显示年月日和星期几
        //步骤：（创建一个当前日期的日期对象，然后获取其中的年月日和星期，赋值给div）
        //1.创建一个当前日期的日期对象
        //2.然后获取其中的年月日和星期
        //3.赋值给div


        //1.创建一个当前日期的日期对象
        var date = new Date();
        //2.然后获取其中的年月日和星期
        var year = date.getFullYear();
        var month = date.getMonth();
        var hao = date.getDate();
        var week = date.getDay();
//        console.log(year+" "+month+" "+hao+" "+week);
        //3.赋值给div
        var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        var div = document.getElementsByTagName("div")[0];
        div.innerText = "今天是："+year+"年"+(month+1)+"月"+hao+"日 "+arr[week];


    </script>


</body>
</html>

03-苹果发布会倒计时.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 1210px;
            margin: 200px auto;
            color: red;
            text-align: center;
            font: 600 30px/30px "simsun";
        }
    </style>
</head>
<body>
    <div></div>

<script>
    var div=document.getElementsByTagName("div")[0];
    var timer = setInterval(fn,1);
    function fn(){
        var nowtime = new Date();
        var future = new Date("2018/09/05 18:23:15");
        var timeSum = future.getTime() - nowtime.getTime();
        var day = parseInt(timeSum/1000/60/60/24);
        var hour = parseInt(timeSum/1000/60/60%24);
        var minu = parseInt(timeSum/1000/60%60);
        var sec = parseInt(timeSum/1000%60);
        var millsec = parseInt(timeSum%1000);
        day=day<10?"0"+day:day;
        hour=hour<10?"0"+hour:hour;
        minu=minu<10?"0"+minu:minu;
        sec=sec<10?"0"+sec:sec;
        if(millsec<10){
            millsec="00"+millsec;
        }else if(millsec<100){
            millsec="0"+millsec;
        }
//
//        console.log(day);
//        console.log(parseInt(timeSum/1000/60/60/24));
        if(timeSum<0){
            div.innerHTML="距离苹果发布会还有00天00小时00分00秒000毫秒";
            clearInterval(timer);
            return;
        }
        div.innerHTML="距离苹果发布会还有"+day+"天"+hour+"小时"+minu+"分"+sec+"秒"+millsec+"毫秒";
    }

</script>
</body>

</html>

04-String内置对象体验.html

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

    //简单数据类型无法绑定属性和方法
    var str = "abc";

    var strObj = new String("abc");
    strObj.aaa = 111;
    console.log(strObj);
    console.log(typeof strObj);
    console.log(strObj.aaa);

    str.aaa = 111;
    console.log(str.aaa);
    console.log(str.length);
    console.log(str.indexOf("c"));


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

05-给索引查字符.html

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

    var str = new String("abcd");

//    console.log(str);
//    for(var i=0;i<str.length;i++){
//        console.log(str.charAt(i));
//    }
//    console.log(str.charAt(0));
//    console.log(str.charAt(1));
//    console.log(str.charAt(2));
//    console.log(str.charAt(3));

    //返回unicode中的码表值。
    console.log(str.charCodeAt(0));

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

06-打印字符串的站位长度.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
//    sort();   底层用到了charCodeAt();

    var str = "I love my country!我你爱中国！";
    //"我爱你"：一汉字占两个字符位。
    //需求：求一个字符串占有几个字符位。
    //思路；如果是英文，站一个字符位，如果不是英文占两个字符位。
    //技术点：判断该字符是否在0-127之间。（在的话是英文，不在是非英文）
    alert(getZFWlength(str));
    alert(str.length);

    function getZFWlength(string){
        //定义一个计数器
        var count = 0;
        for(var i=0;i<string.length;i++){
            //对每一位字符串进行判断，如果Unicode编码在0-127，计数器+1；否则+2
            if(string.charCodeAt(i)<128 && string.charCodeAt(i)>=0 ){
                count++;
            }else{
                count+=2;
            }
        }
        return count;
    }


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

07-给字符查索引.html

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

    var str = "abcdea";

    //给字符查索引(索引值为0,说明字符串以查询的参数为开头)
    console.log(str.indexOf("c"));
    console.log(str.lastIndexOf("c"));

    console.log(str.indexOf("a"));
    console.log(str.lastIndexOf("a"));


    //了解；数据传递的时候经常需要通过编码后在传递，接收后还需要反编译回来。
    var url = "http://www.itcast.cn?username='aaa'&password='123'";
    console.log(encodeURIComponent(url));
    console.log(decodeURIComponent(encodeURIComponent(url)));


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

08-字符串连接和截取.html

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

    //concat 连接两个字符串返回一个新字符串，并且不会被修改
//    var str1 = "abc";
//    var str2 = "123";
//    var str3 = str1.concat(str2);
//    console.log(str1);
//    console.log(str2);
//    console.log(str3);

    var str = "I love my family!";
    console.log(str);

//    //slice();   跟剧索引值和索引值截取字符串
//    console.log(str.slice(2));//从索引截取到最后
//    console.log(str.slice(2,5));//从索引截,包左不包右
//    console.log(str.slice(-3));//后几个
//    console.log(str.slice(5,2));//空字符串



//    //substr();   跟剧索引值和长度值截取字符串
//    console.log(str.substr(2));//从索引截取到最后
//    console.log(str.substr(2,6));//从索引截,长度个字符串
//    console.log(str.substr(-3));//后几个


//    //substring();   跟剧索引值和索引值截取字符串
    console.log(str.substring(2));  //从索引截取到最后
    console.log(str.substring(2,5));//从索引截,长度个字符串
    console.log(str.substring(-1)); //全部截取
    console.log(str.substring(5,2));//只能调换

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

09-特殊方法.html

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

    //去除前后空格，trim();
//    var str1 = "   a   b   c   ";
//    console.log(str1);
//    console.log(str1.trim());


    //replace()替换
//    var str2 = "Today is fine day,today is fine day a!!!"
//    console.log(str2);
//    console.log(str2.replace(/today/gi,"tomorrow"));


    //字符串变数组split();  无参，是把字符串作为一个元素添加进数组中。空字符串，分隔字符串中每一个字符，分别添加进入数组中
            //指定字符分隔数组：特殊符号将不会出现在数组的任意一个元素中

    var str3 = "关羽|张飞|刘备";

    console.log(str3);
    console.log(str3.split("|"));

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

10-大小写和创建标签（奇葩操作）.html

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

<input type="file"/>

<script>

    var str = "abcdEFG";

    //转换成小写
    console.log(str.toLowerCase());
    //转换成大写
    console.log(str.toUpperCase());

    //校验上传文件格式（图片img/png/jpg/gif）(查找最后一个.截取到最后，判断value属性值)
//    document.getElementsByTagName("input")[0].onchange = function () {
//        alert(this.value);
//    }

    var str = "你好";

    console.log(str.anchor())
    console.log(str.big())
    console.log(str.sub())
    console.log(str.sup())
    console.log(str.link("http://www.baidu.com"));
    console.log(str.bold())


</script>


</body>
</html>

11-字符串案例.html

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

//    截取字符串"我爱你中国，我亲爱的母亲"，中的"中国，我亲爱的"；
    var str1 = "我爱你中国，我亲爱的母亲";
    var index1 = str1.indexOf("中");
    var index2 = str1.indexOf("的");
    console.log(str1.slice(index1,index2+1));

//    "abcoefoxyozzopp"查找字符串中所有o出现的位置
    var str2 = "abcoefoxyozzopp";
    for(var i=0;i<str2.length;i++){
        //如果指定位置的符号=== "o"
        //str2[i]
        if( str2.charAt(i)==="o"){
            console.log(i);
        }
    }

//    把字符串中所有的o替换成!
    console.log(str2);
    console.log(str2.replace(/o/g,"!"));


//    判断一个字符串中出现次数最多的字符，统计这个次数
    //定义一个json，然后判断json中是够有该属性，如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
    var json = {};
    for(var i=0;i<str2.length;i++){
        //判断：如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
        var key = str2.charAt(i);
        if(json[key] === undefined){
            json[key] = 1;
        }else{
            json[key] += 1;
        }
    }
    console.log(json);



    //获取json中属性值最大的选项
//    var maxKey = "";
//    var maxValue = 0;
//    for(var k in json){
////        if(maxKey == ""){
////            maxKey = k;
////            maxValue = json[k];
////        }else{
//            if(json[k]>maxValue){
//                maxKey = k;
//                maxValue = json[k];
//            }
////        }
//    }
//    console.log(maxKey);
//    console.log(maxValue);

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

12-获取节点元素的封装（简单版）.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 5px;
        }
    </style>
</head>
<body>

    <div></div>
    <div class="box"></div>
    <div id="box"></div>
    <div class="box"></div>
    <div></div>



<script>
    //需求：一个方法，包含三种获取元素节点的功能。通过传递参数的不同，来决定使用哪种获取方法。
        //例如： "ibox":  getElementById();
        //例如： "cbox":  getElementsByClassName();
        //例如： "tbox":  getElementsByTagName();
                //化简：使用类似css获取的方式表明使用哪种方式来获取：
                    //   "#box"  getElementById();
                    //   ".box"  getElementsByClassName();
                    //   "div"   getElementsByTagName();
    //验证：
    getEle("#box").style.backgroundColor = "red";

    var claArr = getEle(".box");
    for(var i=0;i<claArr.length;i++){
        claArr[i].style.backgroundColor = "yellow";
    }

    var divArr = getEle("div");
    for(var i=0;i<divArr.length;i++){
        divArr[i].style.border = "2px solid #000";
    }

    //思路：封装一个方法，然后判断第一个字符，如果是#用id，如果是.用className,否则用tagName
    //步骤：
    //1.封装一个方法，获取参数的第一个字符
    //2.判断第一个字符是#走第一个逻辑，是.走第二个逻辑，如果都不是那么走最后一个逻辑
    //3.隐藏：

    //1.封装一个方法，获取参数的第一个字符
    function getEle(str){
        //2.判断第一个字符是#走第一个逻辑，是.走第二个逻辑，如果都不是那么走最后一个逻辑
        var str1 = str.charAt(0);
        if(str1==="#"){
            //3.隐藏：
            //返回获取的元素。（因为传递过来的值带有#，所以我们要从第二项开始截取并搜索）
            return document.getElementById(str.slice(1));
        }else if(str1 === "."){
            return document.getElementsByClassName(str.slice(1));
        }else{
            return document.getElementsByTagName(str);
        }
    }

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

13-获取节点元素的封装（最终版版）.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 5px;
        }
    </style>
</head>
<body>

    <div></div>
    <div class="box"></div>
    <div id="box"></div>
    <div class="box"></div>
    <div></div>



<script>

    $("#box").style.backgroundColor = "red";

    var claArr = $(".box");
    for(var i=0;i<claArr.length;i++){
        claArr[i].style.backgroundColor = "yellow";
    }

    var divArr = $("div");
    for(var i=0;i<divArr.length;i++){
        divArr[i].style.border = "2px solid #000";
    }

    function $(str){
        var str1 = str.charAt(0);
        if(str1==="#"){
            return document.getElementById(str.slice(1));
        }else if(str1 === "."){
            return document.getElementsByClassName(str.slice(1));
        }else{
            return document.getElementsByTagName(str);
        }
    }

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

14-Math对象.html

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

    //
//    var num = 1.4;
    var num = -0.6;

    console.log(Math.abs(num));        //取绝对值
    console.log(Math.floor(num));      //向下取整      //向小取
    console.log(Math.ceil(num));       //向上取整      //向大取
    console.log(Math.round(num));      //四舍五入取整   //正数四舍五入，负数五舍六入
    console.log(Math.random());        //随机数0-1





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

15-事件的概述.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>赋诗</button>


<script>

    var btn = document.getElementsByTagName("button")[0];

    //第一种事件绑定的方法容易被层叠。
//    btn.onclick = function () {
//        console.log("九尺龙泉万卷书，上天生我意何如。");
//    }
//
//    btn.onclick = function () {
//        console.log("不能报国平天下，枉为男儿大丈夫。");
//    }


    //addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
    //第二种事件绑定的方法不会出现层叠。（更适合团队开发）
    btn.addEventListener("click",fn1);
    btn.addEventListener("click",fn2);
    function fn1(){
        console.log("九尺龙泉万卷书，上天生我意何如。");
    }
    function fn2(){
        console.log("不能报国平天下，枉为男儿大丈夫。");
    }

    //调用这是事件源，参数1事件名(不带on) ，参数2事件名(执行函数)           参数3事件名(捕获或者冒泡)


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

16-事件监听原理.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>赋诗</button>


<script>

    var btn = document.getElementsByTagName("button")[0];

//    btn.addEventListener("click",fn1);
//    btn.addEventListener("click",fn2);
    fn("click",fn1,btn);
    fn("click",fn2,btn);
    fn("click",fn3,btn);


    function fn1(){
        console.log("九尺龙泉万卷书，上天生我意何如。");
    }
    function fn2(){
        console.log("不能报国平天下，枉为男儿大丈夫。");
    }
    function fn3(){
        console.log("111111。");
    }

    //原理（了解）（自己封装一个）(click)
    function fn(str,fn,ele){
        //判断位置要注意：如果进入绑定事件本身，那么该事件已经本绑定了
        //所以获取旧的事件必须在新的事件绑定之前
        var oldEvent = ele["on"+str];
        ele["on"+str] = function () {
            //不能直接执行函数，因为我们还不知道以前有没有绑定我同样的事件
            //进行判断，如果以前有过绑定事件，那么把以前的执行完毕在执行现在的事件，如果没有就直接执行
            //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
            //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
            if(oldEvent){
                //因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数
                oldEvent();
                fn();
            }else{
                //没有绑定过事件
                fn();
            }
        }
    }

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

17-事件添加的兼容写法.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>赋诗</button>


<script>

    var btn = document.getElementsByTagName("button")[0];

    //火狐谷歌IE9+支持addEventListener
//    btn.addEventListener("click",fn1);
//    btn.addEventListener("click",fn2);

    //IE678支持attachEvent
//    btn.attachEvent("onclick",fn1);
//    btn.attachEvent("onclick",fn2);

    //兼容写法
    EventListen = {
        addEvent: function (ele,fn,str) {
            //通过判断调用的方式兼容IE678
            //判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
            if(ele.addEventListener){
                //直接调用
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                //在addEventListener和attachEvent都不存在的情况下，用此代码
                ele["on"+str] = fn;
            }
        }
    }


    EventListen.addEvent(btn,fn1,"click")
    EventListen.addEvent(btn,fn2,"click")


    console.log(EventListen);


    function fn1(){
        console.log("九尺龙泉万卷书，上天生我意何如。");
    }
    function fn2(){
        console.log("不能报国平天下，枉为男儿大丈夫。");
    }

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

18-事件解绑的兼容写法.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>赋诗</button>


<script>

    var btn = document.getElementsByTagName("button")[0];

    EventListen = {
        addEvent: function (ele,fn,str) {
            //通过判断调用的方式兼容IE678
            //判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
            if(ele.addEventListener){
                //直接调用
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                //在addEventListener和attachEvent都不存在的情况下，用此代码
                ele["on"+str] = fn;
            }
        },
        removeEvent: function (ele,fn,str) {
            if(ele.removeEventListener){
                ele.removeEventListener(str,fn);
            }else if(ele.detachEvent){
                ele.detachEvent("on"+str,fn);
            }else{
                ele["on"+str] = null;
            }
        }
    }

//    btn.addEventListener("click",fn);
    EventListen.addEvent(btn,fn,"click");

    EventListen.removeEvent(btn,fn,"click");

    function fn(){
        alert(1);
    }
    //第一种
//    btn.onclick = function () {
//        alert(1);
//    }


//    btn.addEventListener("click",fn);
//    btn.attachEvent("onclick",fn);


//    btn.onclick = null;

    //第二种
//    btn.removeEventListener("click",fn);
//    btn.detachEvent("onclick",fn);
</script>
</body>
</html>

DOM操作五-内置对象及事件添加解绑

01-Date定义和体验.html

02-模拟日历.html

03-苹果发布会倒计时.html

04-String内置对象体验.html

05-给索引查字符.html

06-打印字符串的站位长度.html

07-给字符查索引.html

08-字符串连接和截取.html

09-特殊方法.html

10-大小写和创建标签（奇葩操作）.html

11-字符串案例.html

12-获取节点元素的封装（简单版）.html

13-获取节点元素的封装（最终版版）.html

14-Math对象.html

15-事件的概述.html

16-事件监听原理.html

17-事件添加的兼容写法.html

18-事件解绑的兼容写法.html

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读