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{

            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>

<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{

            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>

<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{

            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>

<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>

JavaScript-dom4 date string 事件绑定的更多相关文章

javascript创建节点的事件绑定
javascript创建节点的事件绑定 timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计). 现video ...
第一百三十六节，JavaScript，封装库--事件绑定
JavaScript,封装库--事件绑定在函数库添加两个函数添加事件绑定函数删除事件绑定函数添加事件绑定函数 /** addEvent()函数库函数,跨浏览器添加事件绑定,注意:传入事件名称时 ...
javascript - 工作笔记（事件绑定二）
在上篇中的事件绑定方法,相信大家都看到过了. 不过这里有点小小的问题,这些方法,变量都是全局的,难免会与其他的库或者方法发生冲突而被覆盖,因此,我在这里做了小小的封装,如下: JavaScript ...
javascript - 工作笔记（事件绑定）
背景: 目前所做的项目,只能使用的是原生的javascript.对于javascript的事件绑定想必大家都懂得语法: 1,在标签中使用属性调用方法:<div onclick="AAA ...
javascript - 工作笔记（事件四）
在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装, JavaScript Code 12345 yx.bind(item, "click&quo ...
js-DOM ～ 05. Date日期的相关操作、string、查字符串的位置、给索引查字符、字符串截取slice／substr／substring、去除空格、替换、大小写、Math函数、事件绑定、this
内置对象: 语言自带的对象/提供了常用的.基本的功能打印数组和字符串不用for... in / 打印josn的时候采用for...in Date 获取当前事件: var date = ...
javascript中通过匿名函数进行事件绑定
JavaScript中绑定事件监听函数的通用方法addEvent() 和事件绑定之bindEvent()与 unBindEvent()函数
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...
javascript对象事件绑定方法
javascript对象事件绑定方法今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...

随机推荐

用户控件(ASCX)向网页(ASPX)传值使用反射实现
用户控件向网页传递值,方法非常之多,此博文尝试使用反射来实现.在站点中,建一个网页以及一个用户控件. 网页切换至设计模式,拉用户控件至网页上. Default.aspx: <%@ Page La ...
Java千百问_05面向对象（011）_引用传递和值传递有什么差别
点击进入_很多其它_Java千百问 1.什么是值传递值传递,是将内存空间中某个存储单元中存放的值,传送给还有一个存储单元.(java中的存储单元并不是物理内存的地址,但具有相关性) 比如: //定义 ...
POJ 2567 Code the Tree & POJ 2568 Decode the Tree Prufer序列
题目大意:2567是给出一棵树,让你求出它的Prufer序列.2568时给出一个Prufer序列,求出这个树. 思路:首先要知道Prufer序列.对于随意一个无根树,每次去掉一个编号最小的叶子节点,并 ...
剑指 offer set 15 第一个只出现一次的字符
题目描述: 在一个字符串(1<=字符串长度<=10000,全部由大写字母组成)中找到第一个只出现一次的字符思路: 1. 给定的题目约束比较多, 因此可以自定义哈希函数 2. 字符是一个长 ...
Servlet3.0文件上传
Servelt3.0文件上传作为一种便捷的文件上传方式很是值得我们去应用的 1.Servlet3.0文件上传使用步骤浏览器端的要求表单的提交方法必须是post 必须有一个文件上传组件 <in ...
11.Curator扩展库
Recipes组件包含了丰富的Curator应用的组件.但是这些并不是ZooKeeper Recipe的全部.大量的分布式应用已经抽象出了许许多多的的Recipe,其中有些还是可以通过Cura ...
Laravel 5.x HTTPS反向代理的实现
需求可针对多个域名设置HTTPS并指向到同一个项目. 最先考虑到的是通过nginx的反向代理来实现,最终测试发现效果并不完美. 示例如下: server { listen 127.0.0.1:808 ...
ubuntu重新设置登陆界面|切换gdm kdm lightdm
方法: $ sudo dpkg-reconfigure gdm 然后会出一个让你进行选择的提示,根据需要切换即可
LMAX Disruptor 原理
http://mechanitis.blogspot.com/search/label/disruptor http://ifeve.com/disruptor/, 并发框架Disruptor译文 h ...
设计模式之Factory工厂模式
在上一章,模板模式中,我们在父类规定处理的流程,在子类中实现具体的处理.如果我们将该模式用于生成实例,便演变成了Factory模式,即工厂模式. 在Factory模式中,父类决定实例的生成方式,但并不 ...

JavaScript-dom4 date string 事件绑定

内置date

string

获取元素节点的封装

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

事件概述

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

JavaScript-dom4 date string 事件绑定的更多相关文章

随机推荐

热门专题