• JavaScript-dom4 date string 事件绑定

    内置date

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>date定义和体验</title>
</head>
<body>
<script>
    //第一种获取当前时间
    var date1=new Date();
    console.log(date1);

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

    console.log(date1.getDate());         //获取日 1-31
    console.log(date1.getDay());          //获取星期--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）


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

     string

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>string</title>
</head>
<body>
<script>
    // var str =  new String("abcd");

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

    //charCodeAt  asci码
    // console.log(str.charCodeAt(0));

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

    //uri解析
    // var url="http://www.baidu.com/test?user=zk&pwd=123";
    // console.log(encodeURIComponent(url));
    // console.log(decodeURIComponent(encodeURIComponent(url)))

    //字符串连接和截取
    // var str1="abc";
    // var str2="123";
    // var str3 = str1.concat(str2);
    // console.log(str3)

    
    var str="I love my family";
    //slice()
    // console.log(str.slice(2)); //从索引截取到最后
    // console.log(str.slice(2,6));//截取2-6的字符，包左不包右
    // console.log(str.slice(-3));//截取后3个
    // console.log(str.slice(5,2));//空字符


    //substr()  根据索引值数字截取字符
    // console.log(str.substr(2)); //从索引截取到最后
    // console.log(str.substr(2,6));//从索引截取，长度为6的字符串
    // console.log(str.substr(-3));//截取后3个

    //substring
    console.log(str.substring(2)); //从索引截取到最后
    console.log(str.substring(2,5));//截取2-6的字符，包左不包右
    console.log(str.substring(-3));//全部字符串
    console.log(str.substring(5,2));//只能调换





//特殊方法

    //去除前后空格trim()
    // var str1="  a  2  3  ";
    // console.log(str1);
    // console.log(str1.trim());

    //替换 replace()只能替换一个
    // var str2="today is find day,today is find day a !!!";
    // console.log(str2);
    // console.log(str2.replace(/today/g,"tomorrow"));

    //字符串变数组
    // var str3="关羽|张飞|刘备";
    // console.log(str3);
    // console.log(str3.split("|"));


    // var str4="ABCDefG";
    // //转换成小写
    // console.log(str4.toLowerCase());
    // //转换成大写
    // console.log(str4.toUpperCase());

    var str5="abccdssfasdfasdfafasddfa";
    var json={};
    for(var i=0;i<str5.length;i++){
        var key=str5.charAt(i);
        if(json[key] === undefined){
            json[key] = 1;
        }else{
           json[key]+=1;
        }
    }
    var maxkey="";
    var maxValue=0;
    for(var k in json){
        if(json[k] >maxValue){
            maxkey=k;
            maxValue=json[k];
        }
    }
    console.log(maxkey);
    console.log(maxValue);


    // console.log(json);


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

    获取元素节点的封装

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取节点元素的封装</title>
    <style>
        div{
             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>


<script>
    //一个方法包含三种获取元素节点的功能，通过传递参数的不通决定用什么方式获取

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

    // var divArr=getEle(".box")[0].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";
    }
    
    //#box  getElementById()
    //.box  getElementsByClassName()
    // div  getElementsByTagName()
    function getEle(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>

    获取元素节点的封装（终极版$）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取节点元素的封装(最终)</title>
    <style>
        div{
             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>


<script>
    //一个方法包含三种获取元素节点的功能，通过传递参数的不通决定用什么方式获取

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

    // var divArr=getEle(".box")[0].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";
    }

    //#box  getElementById()
    //.box  getElementsByClassName()
    // div  getElementsByTagName()
    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>

    事件概述

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取节点元素的封装(最终)</title>
    <style>
        div{
             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>


<script>
    //一个方法包含三种获取元素节点的功能，通过传递参数的不通决定用什么方式获取

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

    // var divArr=getEle(".box")[0].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";
    }

    //#box  getElementById()
    //.box  getElementsByClassName()
    // div  getElementsByTagName()
    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>

    事件绑定/取消绑定兼容写法

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

</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <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);
    function fn1() {
        console.log("床前明月光,疑是地上霜");
    }
    function fn2() {
        console.log("抬头望明月,低头思故乡");
    }
    function fn3() {
        console.log("抬头望明月,低头思故乡");
    }
    fn("click",fn1,btn);
    fn("click",fn2,btn);
    fn("click",fn3,btn);

    EventListen = {
        //判断是否兼容IE678
        addEvent:function (ele,fn,str) {
            if(ele.addEventListener){
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                ele["on"+str]=fn;
            }
        }
    }



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

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

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

<button>赋诗</button>

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

    EventListen ={
        removeEvent:function (ele,fn,str) {
            if(ele.removeEventListener){
                console.log("OK");
                ele.removeEventListener(str,fn);
            }else if(ele.detachEvent){

                ele.detachEvent("on"+str,fn);
            }else{

                ele["on"+str]= null;
            }
        }
    };

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

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


    function fn() {
            alert(1)
        }
    

    // //第一种解绑方式
    // btn.onclick=function () {
    //     alert(1);
    // };
    // // btn.onclick = null;

    // //第二种
    // btn.addEventListener("click",fn);
    // function fn() {
    //     alert(1)
    // }
    // btn.removeEventListener("click",fn);


    // btn.attachEvent("onclick",fn);
    // function fn() {
    //     alert(1);
    // }
    // btn.detachEvent("onclick",fn);



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

    　　
  • 相关阅读:
    elasticsearch-5.1.1 安装的问题
    idea 新建New Module时Maven的列表加载不出来
    使用X-Pack插件来进行权限控制
    Groovy学习记录-------Groovy安装/配置
    学习使用Apollo配置中心
    Apollo配置中心介绍
    自定义的GitLab 头像无法正常显示以及URL总是指向localhost
    2020/2/19
    一九八四
    Python 进阶
  • 原文地址：https://www.cnblogs.com/zhangkui/p/8625580.html
Copyright © 2020-2023  润新知