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 ...
随机推荐
- 深入分析jquery解析json数据
我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. JSON数据如下,是一个嵌套JSON: {"comments":[{& ...
- Ubuntu Mysql 安装
下载 http://dev.mysql.com/downloads/mysql/ 选择 Linux- Generic 选择版本 wget http://cdn.mysql.com/Downloads/ ...
- ios开发之--swift下Alamofire的使用
1,首先使用cocoapods导入,如果有不会的同学,可以去看我写的关于cocopods使用的那篇博客 2,直接上代码: a 先看下文件结构 CommonFile.swift import UIKit ...
- open() 函数以 w+ 模式打开文件
这种模式打开文件时,会先清空文件,然后才执行读写操作,当我们要执行读操作时,需要通过 seek() 方法将读取指针移到前面,才能读取内容 [root@localhost ~]$ cat 1.txt # ...
- Linux命令之乐--curl
参数: -I 获取头部信息 -s/--silent Silent mode. Don't output anything 沉默模式 --connect-timeout <secon ...
- Maven手动添加dependency（以Oracle JDBC为例）
由于Oracle授权问题,Maven不提供Oracle JDBC driver,为了在Maven项目中应用Oracle JDBC driver,必须手动添加到本地仓库.首先需要到Oracle官网上下载 ...
- phpcms v9表单实现问答咨询功能
本文转自别人 phpcms v9的留言板插件可以安装留言板,做问答咨询,那样的话有很多东西需要修改,也有人发现phpcms v9有个表单向导功能,只能留言,不能回复,今天仿站网:新源网络工作室告诉大家 ...
- [Web] 如何实现Web服务器和应用服务器的负载均衡？
本文对Web服务器和应用服务器的负载均衡进行说明. 在负载均衡的思路下,多台服务器为对称方式,每台服务器都具有同等的地位,可以单独对外提供服务而无须其他服务器的辅助.通过负载分担技术,将外部发送来的请 ...
- ios iphone、ipad启动画面尺寸
以下是iphone.ipad启动画面的尺寸 iphone4(纵):320 x 480 iphone4 Retina(纵):640 x 960 iphone5(纵):320 x 568 iphone ...
- MyBatis基础入门
1.MyBatis概述 MyBatis是一个优秀的持久层框架,它对jdbc的操作数据库的过程进行封装,使开发者只需要关注 SQL 本身,而不需要花费精力去处理例如注册驱动.创建connection.创 ...