JavaScript-dom4 date string 事件绑定
2024-08-25 04:33:00
内置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>
最新文章
- Rotate Image
- js生成二维码（jquery自带）
- Mysql自定义函数总结
- centos安装ruby on rails
- 动作之CCActionInterval（持续动作）家族
- jdbc-connect-oracle12c-pdb/cdb(jdbc连接oracle12c的pdb和cdb)
- C#调用cmd 脚本实例
- Hessian Servlet和Hessian Spring的简单应用
- JQuery使用on绑定动态生成元素时碰到的问题
- 用C++语言开发Android程序 配置开发环境
- 实验四 Android程序设计 实验报告
- stm32F10x复习-1
- OpenCV3如何使用SIFT和SURF Where did SIFT and SURF go in OpenCV 3?
- Windows邮件客户端
- SSL加速卡调研的原因及背景
- NB-iot 和 emtc两种技术区别
- Charles安装包及破解包下载地址
- git撤销各种状态下的操作
- 数据挖掘算法之关联规则挖掘（二）FPGrowth算法
- Linux网络服务管理命令