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 ...
随机推荐
- ThinkPHP中的验证码不出现的解决办法
出现这种问题的原因可能是因为代码写的不规范,出现了其他的输出:解决办法: 原代码: public function captchaAction() { $verify = ...
- angular使用codemirror ui-codemirror在模态框或者tab中没有缩进，内容也会在点击之后才显示的问题
<textarea ui-codemirror="{ mode: 'javascript', lineNumbers: true, theme: 'solarized dark', l ...
- jquery与javescript的区别（一）
一.找元素: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g ...
- chrome/FF 解析遇到 { 行为一致，返回不一致
测试的时候,发现一个问题,FF下: chrome 下: 你会发现,FF 在解析一直到返回的时候,都是把 {x:1} 当做一个语句块去解析的,而 chrome 在返回的时候返回了对象,把 {x:1} 当 ...
- CH5105 Cookies【贪心】【线性dp】
5105 Cookies 0x50「动态规划」例题 描述 圣诞老人共有M个饼干,准备全部分给N个孩子.每个孩子有一个贪婪度,第 i 个孩子的贪婪度为 g[i].如果有 a[i] 个孩子拿到的饼干数比第 ...
- Android ArrayAdapter，BaseAdapter，SimpleAdapter适配器绑定数据方法
/** * 2017-07-31.Book 类 */ public class Book { public String getName() { return name; } public void ...
- WEB状态码
这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个 1xx 响应. 100 - 继续. 101 - 切换协议. 2xx - 成功 这类状态代码表明服务器成功地接受了客户端请求. ...
- Linux 常用资源
kernel:ftp://kernel.orgcnkernel:http://www.cnkernel.orgoldlinux:http://www.oldlinux.orgminix3:http:/ ...
- 修改NavigationBar的分根线颜色
[self.navigationController.navigationBar setShadowImage:[Static ColorToImage:[Static colorWithHexStr ...
- 常见到的runtime exception
ClassCastException 类转换异常 IllegalArgumentException 非法参数异常 IndexOutOfBoundsException 数组越界异常 Nul ...