内置date

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>date定义和体验</title>
  6. </head>
  7. <body>
  8. <script>
  9.     //第一种获取当前时间
  10.     var date1=new Date();
  11.     console.log(date1);
  12.  
  13.     //第二种指定事件
  14.     var date2=new Date("2016/09/06 00:00:01");
  15.     console.log(date2);
  16.  
  17.     console.log(date1.getDate());         //获取日 1-31
  18.     console.log(date1.getDay());          //获取星期--6（0代表周日）
  19.     console.log(date1.getMonth());        //获取月0-11（1月从0开始）
  20.     console.log(date1.getFullYear());     //获取完整的年份（）
  21.     console.log(date1.getHours());        //获取小时0-23
  22.     console.log(date1.getMinutes());      //获取分钟0-59
  23.     console.log(date1.getSeconds());      //获取秒（0-59）
  24.     console.log(date1.getMilliseconds()); //获取毫秒（1s=1000ms）
  25.     console.log(date1.getTime());         //返回累计毫秒数（从1970/1/1）
  26.  
  27. </script>
  28. </body>
  29. </html>

string

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>string</title>
  6. </head>
  7. <body>
  8. <script>
  9.     // var str =  new String("abcd");
  10.  
  11.     //charAt
  12.     // for(var i=0;i<str.length;i++){
  13.     //     console.log(str.charAt(i));
  14.     // }
  15.  
  16.     //charCodeAt  asci码
  17.     // console.log(str.charCodeAt(0));
  18.  
  19.     //给字符查索引，索引值为0，说明字符串以传输的参数为开头
  20.     // console.log(str.indexOf("c"));
  21.     // console.log(str.lastIndexOf("c"));
  22.  
  23.     //uri解析
  24.     // var url="http://www.baidu.com/test?user=zk&pwd=123";
  25.     // console.log(encodeURIComponent(url));
  26.     // console.log(decodeURIComponent(encodeURIComponent(url)))
  27.  
  28.     //字符串连接和截取
  29.     // var str1="abc";
  30.     // var str2="123";
  31.     // var str3 = str1.concat(str2);
  32.     // console.log(str3)
  33.  
  34.     var str="I love my family";
  35.     //slice()
  36.     // console.log(str.slice(2)); //从索引截取到最后
  37.     // console.log(str.slice(2,6));//截取2-6的字符，包左不包右
  38.     // console.log(str.slice(-3));//截取后3个
  39.     // console.log(str.slice(5,2));//空字符
  40.  
  41.     //substr()  根据索引值数字截取字符
  42.     // console.log(str.substr(2)); //从索引截取到最后
  43.     // console.log(str.substr(2,6));//从索引截取，长度为6的字符串
  44.     // console.log(str.substr(-3));//截取后3个
  45.  
  46.     //substring
  47.     console.log(str.substring(2)); //从索引截取到最后
  48.     console.log(str.substring(2,5));//截取2-6的字符，包左不包右
  49.     console.log(str.substring(-3));//全部字符串
  50.     console.log(str.substring(5,2));//只能调换
  51.  
  52. //特殊方法
  53.  
  54.     //去除前后空格trim()
  55.     // var str1="  a  2  3  ";
  56.     // console.log(str1);
  57.     // console.log(str1.trim());
  58.  
  59.     //替换 replace()只能替换一个
  60.     // var str2="today is find day,today is find day a !!!";
  61.     // console.log(str2);
  62.     // console.log(str2.replace(/today/g,"tomorrow"));
  63.  
  64.     //字符串变数组
  65.     // var str3="关羽|张飞|刘备";
  66.     // console.log(str3);
  67.     // console.log(str3.split("|"));
  68.  
  69.     // var str4="ABCDefG";
  70.     // //转换成小写
  71.     // console.log(str4.toLowerCase());
  72.     // //转换成大写
  73.     // console.log(str4.toUpperCase());
  74.  
  75.     var str5="abccdssfasdfasdfafasddfa";
  76.     var json={};
  77.     for(var i=0;i<str5.length;i++){
  78.         var key=str5.charAt(i);
  79.         if(json[key] === undefined){
  80.             json[key] = 1;
  81.         }else{
  82.            json[key]+=1;
  83.         }
  84.     }
  85.     var maxkey="";
  86.     var maxValue=0;
  87.     for(var k in json){
  88.         if(json[k] >maxValue){
  89.             maxkey=k;
  90.             maxValue=json[k];
  91.         }
  92.     }
  93.     console.log(maxkey);
  94.     console.log(maxValue);
  95.  
  96.     // console.log(json);
  97.  
  98. </script>
  99. </body>
  100. </html>

获取元素节点的封装

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>获取节点元素的封装</title>
  6.     <style>
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: pink;
  11.             margin: 5px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div></div>
  17.     <div class="box"></div>
  18.     <div id="box"></div>
  19.     <div class="box"></div>
  20.  
  21. <script>
  22.     //一个方法包含三种获取元素节点的功能，通过传递参数的不通决定用什么方式获取
  23.  
  24.     getEle("#box").style.backgroundColor = "red";
  25.  
  26.     // var divArr=getEle(".box")[0].style.backgroundColor="red";
  27.     var claArr=getEle(".box");
  28.     for(var i=0;i<claArr.length;i++){
  29.         claArr[i].style.backgroundColor = "yellow";
  30.     }
  31.  
  32.     var divArr=getEle("div");
  33.     for(var i=0;i<divArr.length;i++){
  34.         divArr[i].style.border = "2px solid #000";
  35.     }
  36.  
  37.     //#box  getElementById()
  38.     //.box  getElementsByClassName()
  39.     // div  getElementsByTagName()
  40.     function getEle(str) {
  41.         var str1=str.charAt(0);
  42.         if(str1 === "#"){
  43.             return document.getElementById(str.slice(1));
  44.         }else if(str1 === "."){
  45.             return document.getElementsByClassName(str.slice(1));
  46.         }else{
  47.             return document.getElementsByTagName(str);
  48.         }
  49.     }
  50.  
  51. </script>
  52. </body>
  53. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>获取节点元素的封装(最终)</title>
  6.     <style>
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: pink;
  11.             margin: 5px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div></div>
  17.     <div class="box"></div>
  18.     <div id="box"></div>
  19.     <div class="box"></div>
  20.  
  21. <script>
  22.     //一个方法包含三种获取元素节点的功能，通过传递参数的不通决定用什么方式获取
  23.  
  24.     $("#box").style.backgroundColor = "red";
  25.  
  26.     // var divArr=getEle(".box")[0].style.backgroundColor="red";
  27.     var claArr=$(".box");
  28.     for(var i=0;i<claArr.length;i++){
  29.         claArr[i].style.backgroundColor = "yellow";
  30.     }
  31.  
  32.     var divArr=$("div");
  33.     for(var i=0;i<divArr.length;i++){
  34.         divArr[i].style.border = "2px solid #000";
  35.     }
  36.  
  37.     //#box  getElementById()
  38.     //.box  getElementsByClassName()
  39.     // div  getElementsByTagName()
  40.     function $(str) {
  41.         var str1=str.charAt(0);
  42.         if(str1 === "#"){
  43.             return document.getElementById(str.slice(1));
  44.         }else if(str1 === "."){
  45.             return document.getElementsByClassName(str.slice(1));
  46.         }else{
  47.             return document.getElementsByTagName(str);
  48.         }
  49.     }
  50.  
  51. </script>
  52.  
  53. </body>
  54. </html>

事件概述

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>获取节点元素的封装(最终)</title>
  6.     <style>
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: pink;
  11.             margin: 5px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div></div>
  17.     <div class="box"></div>
  18.     <div id="box"></div>
  19.     <div class="box"></div>
  20.  
  21. <script>
  22.     //一个方法包含三种获取元素节点的功能，通过传递参数的不通决定用什么方式获取
  23.  
  24.     $("#box").style.backgroundColor = "red";
  25.  
  26.     // var divArr=getEle(".box")[0].style.backgroundColor="red";
  27.     var claArr=$(".box");
  28.     for(var i=0;i<claArr.length;i++){
  29.         claArr[i].style.backgroundColor = "yellow";
  30.     }
  31.  
  32.     var divArr=$("div");
  33.     for(var i=0;i<divArr.length;i++){
  34.         divArr[i].style.border = "2px solid #000";
  35.     }
  36.  
  37.     //#box  getElementById()
  38.     //.box  getElementsByClassName()
  39.     // div  getElementsByTagName()
  40.     function $(str) {
  41.         var str1=str.charAt(0);
  42.         if(str1 === "#"){
  43.             return document.getElementById(str.slice(1));
  44.         }else if(str1 === "."){
  45.             return document.getElementsByClassName(str.slice(1));
  46.         }else{
  47.             return document.getElementsByTagName(str);
  48.         }
  49.     }
  50.  
  51. </script>
  52.  
  53. </body>
  54. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. </body>
  10. </html><!DOCTYPE html>
  11. <html lang="en">
  12. <head>
  13.     <meta charset="UTF-8">
  14.     <title>事件概述</title>
  15. </head>
  16. <body>
  17.  
  18. <button>赋诗</button>
  19.  
  20. <script>
  21.     var btn = document.getElementsByTagName("button")[0];
  22.     // btn.addEventListener("click",fn1);
  23.     // btn.addEventListener("click",fn2);
  24.     function fn1() {
  25.         console.log("床前明月光,疑是地上霜");
  26.     }
  27.     function fn2() {
  28.         console.log("抬头望明月,低头思故乡");
  29.     }
  30.     function fn3() {
  31.         console.log("抬头望明月,低头思故乡");
  32.     }
  33.     fn("click",fn1,btn);
  34.     fn("click",fn2,btn);
  35.     fn("click",fn3,btn);
  36.  
  37.     EventListen = {
  38.         //判断是否兼容IE678
  39.         addEvent:function (ele,fn,str) {
  40.             if(ele.addEventListener){
  41.                 ele.addEventListener(str,fn);
  42.             }else if(ele.attachEvent){
  43.                 ele.attachEvent("on"+str,fn);
  44.             }else{
  45.                 ele["on"+str]=fn;
  46.             }
  47.         }
  48.     }
  49.  
  50. </script>
  51. </body>
  52. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. </body>
  10. </html><!DOCTYPE html>
  11. <html lang="en">
  12. <head>
  13.     <meta charset="UTF-8">
  14.     <title>事件概述</title>
  15. </head>
  16. <body>
  17.  
  18. <button>赋诗</button>
  19.  
  20. <script>
  21.     var btn = document.getElementsByTagName("button")[0];
  22.  
  23.     EventListen ={
  24.         removeEvent:function (ele,fn,str) {
  25.             if(ele.removeEventListener){
  26.                 console.log("OK");
  27.                 ele.removeEventListener(str,fn);
  28.             }else if(ele.detachEvent){
  29.  
  30.                 ele.detachEvent("on"+str,fn);
  31.             }else{
  32.  
  33.                 ele["on"+str]= null;
  34.             }
  35.         }
  36.     };
  37.  
  38.     // btn.onclick=fn;
  39.     btn.addEventListener("click",fn);
  40.  
  41.     EventListen.removeEvent(btn,fn,"click");
  42.  
  43.     function fn() {
  44.             alert(1)
  45.         }
  46.  
  47.     // //第一种解绑方式
  48.     // btn.onclick=function () {
  49.     //     alert(1);
  50.     // };
  51.     // // btn.onclick = null;
  52.  
  53.     // //第二种
  54.     // btn.addEventListener("click",fn);
  55.     // function fn() {
  56.     //     alert(1)
  57.     // }
  58.     // btn.removeEventListener("click",fn);
  59.  
  60.     // btn.attachEvent("onclick",fn);
  61.     // function fn() {
  62.     //     alert(1);
  63.     // }
  64.     // btn.detachEvent("onclick",fn);
  65.  
  66. </script>
  67. </body>
  68. </html>

　　

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

  1. javascript创建节点的事件绑定

    javascript创建节点的事件绑定 timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计). 现video ...

  2. 第一百三十六节，JavaScript，封装库--事件绑定

    JavaScript,封装库--事件绑定 在函数库添加两个函数 添加事件绑定函数 删除事件绑定函数 添加事件绑定函数 /** addEvent()函数库函数,跨浏览器添加事件绑定,注意:传入事件名称时 ...

  3. javascript - 工作笔记 （事件绑定二）

    在上篇中的事件绑定方法,相信大家都看到过了. 不过这里有点小小的问题,这些方法,变量都是全局的,难免会与其他的库或者方法发生冲突而被覆盖,因此,我在这里做了小小的封装,如下:  JavaScript ...

  4. javascript - 工作笔记 （事件绑定）

    背景: 目前所做的项目,只能使用的是原生的javascript.对于javascript的事件绑定想必大家都懂得语法: 1,在标签中使用属性调用方法:<div onclick="AAA ...

  5. javascript - 工作笔记 （事件四）

    在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装,  JavaScript Code  12345   yx.bind(item, "click&quo ...

  6. js-DOM ～ 05. Date日期的相关操作、string、查字符串的位置、给索引查字符、字符串截取slice／substr／substring、去除空格、替换、大小写、Math函数、事件绑定、this

    内置对象:  语言自带的对象/提供了常用的.基本的功能 打印数组和字符串不用for... in   /   打印josn的时候采用for...in Date 获取当前事件:   var date = ...

  7. javascript中通过匿名函数进行事件绑定

  8. JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数

    下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...

  9. javascript对象事件绑定方法

    javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...

随机推荐

  1. ThinkPHP项目笔记之RBAC(权限)上篇

    当理清这5个表的关系,接下来,就是功能介绍了.

  2. JSP 页面中用绝对路径显示图片

    首先,图片和工程不在一个盘符下.图片也不能放到工程下.  在JSP 文件中 <img src="E:/图片/1.jpg"/>  这样是引不到图片的.因为,JSP页面在引 ...

  3. 剑指 offer set 20 打印出和为 s 的连续正序序列

    题目 100 可以由 9~16, 或者 18 ~ 22 组成 思路 1. 与 Leetcode Container With Most Water 有些类似, 依然是平移题目. 但这道更加复杂 2. ...

  4. ArcGIS 同一要素图层合并

  5. 打开cmd闪退

    我们在使用电脑过程中一般会很少用到cmd命令,CMD命令窗口在一些特殊情况时我们会用到,如PING下看网络通不通.在CMD窗口里运行命令如磁盘格式转换,但是有些朋友遇到了这样的问题,在开始运行输入CM ...

  6. Gradle 模板配置

    对于新手配置Gradle是一件很痛苦的事,记住二句话绝对搞定 1.在Gradle-->gradle-wrapper.properties中配置distributionUrl=https\://s ...

  7. 链接href的多重使用

    1. 拨打电话 在电话号码前面可以加上 + (加号)表示国际号码. <a href="tel:10086">10086</a> 使用wtai协议进行拨打电话 ...

  8. [Gradle] 针对不同的项目类型应用不同的 findbugs 配置

    build.gradle in project root subprojects { subProject -> plugins.withId('com.android.application' ...

  9. 进击的RecyclerView入门三（要是能拖动就好了）

    还是接着上一讲"进击的RecyclerView入门二(来点小装饰?)",在上一讲中我们学到了怎么给不同的Item定制不同的外观,但貌似那个蓝色的框实在太丑了,咱还是把它干了吧. @ ...

  10. Windows7 x64系统下安装Nodejs并在WebStorm下搭建编译less环境

    1. 打开Nodejs官网http://www.nodejs.org/,点“DOWNLOADS”,点64-bit下载“node-v0.10.33-x64.msi”. 2. 下载好后,双击“node-v ...