DOM操作五-内置对象及事件添加解绑
2017-11-12 本文已影响2人
charlotte2018
01-Date定义和体验.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//第一种
var date1 = new Date();
console.log(date1);
//第二种
var date2 = new Date("2016/09/06 00:00:00");
console.log(date2);
//后两种兼容性不好，不推荐使用
//第三种
var date3 = new Date('Wed Jan 27 2016 12:00:00 GMT+0800 (中国标准时间)');
//第四种
var date4 = new Date(2016, 1, 27);
console.log(date1.getDate() ) //获取日 1-31
console.log(date1.getDay () ) //获取星期 0-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午夜)
//获取当前时间距离1970/01/01的毫秒值
// var date11 = Date.now();
// var date22 = +new Date();
// var date33 = new Date().getTime();
// var date44 = new Date().valueOf();
//
// console.log(date11);
// console.log(date22);
// console.log(date33);
// console.log(date44);
</script>
</body>
</html>
02-模拟日历.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 800px;
margin: 200px auto;
color: red;
text-align: center;
font: 600 30px/30px "simsun";
}
</style>
</head>
<body>
<div></div>
<script>
//模拟日历
//需求：每天打开这个页面都能定时显示年月日和星期几
//步骤：（创建一个当前日期的日期对象，然后获取其中的年月日和星期，赋值给div）
//1.创建一个当前日期的日期对象
//2.然后获取其中的年月日和星期
//3.赋值给div
//1.创建一个当前日期的日期对象
var date = new Date();
//2.然后获取其中的年月日和星期
var year = date.getFullYear();
var month = date.getMonth();
var hao = date.getDate();
var week = date.getDay();
// console.log(year+" "+month+" "+hao+" "+week);
//3.赋值给div
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var div = document.getElementsByTagName("div")[0];
div.innerText = "今天是："+year+"年"+(month+1)+"月"+hao+"日 "+arr[week];
</script>
</body>
</html>
03-苹果发布会倒计时.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 1210px;
margin: 200px auto;
color: red;
text-align: center;
font: 600 30px/30px "simsun";
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.getElementsByTagName("div")[0];
var timer = setInterval(fn,1);
function fn(){
var nowtime = new Date();
var future = new Date("2018/09/05 18:23:15");
var timeSum = future.getTime() - nowtime.getTime();
var day = parseInt(timeSum/1000/60/60/24);
var hour = parseInt(timeSum/1000/60/60%24);
var minu = parseInt(timeSum/1000/60%60);
var sec = parseInt(timeSum/1000%60);
var millsec = parseInt(timeSum%1000);
day=day<10?"0"+day:day;
hour=hour<10?"0"+hour:hour;
minu=minu<10?"0"+minu:minu;
sec=sec<10?"0"+sec:sec;
if(millsec<10){
millsec="00"+millsec;
}else if(millsec<100){
millsec="0"+millsec;
}
//
// console.log(day);
// console.log(parseInt(timeSum/1000/60/60/24));
if(timeSum<0){
div.innerHTML="距离苹果发布会还有00天00小时00分00秒000毫秒";
clearInterval(timer);
return;
}
div.innerHTML="距离苹果发布会还有"+day+"天"+hour+"小时"+minu+"分"+sec+"秒"+millsec+"毫秒";
}
</script>
</body>
</html>
04-String内置对象体验.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//简单数据类型无法绑定属性和方法
var str = "abc";
var strObj = new String("abc");
strObj.aaa = 111;
console.log(strObj);
console.log(typeof strObj);
console.log(strObj.aaa);
str.aaa = 111;
console.log(str.aaa);
console.log(str.length);
console.log(str.indexOf("c"));
</script>
</body>
</html>
05-给索引查字符.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var str = new String("abcd");
// console.log(str);
// for(var i=0;i<str.length;i++){
// console.log(str.charAt(i));
// }
// console.log(str.charAt(0));
// console.log(str.charAt(1));
// console.log(str.charAt(2));
// console.log(str.charAt(3));
//返回unicode中的码表值。
console.log(str.charCodeAt(0));
</script>
</body>
</html>
06-打印字符串的站位长度.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// sort(); 底层用到了charCodeAt();
var str = "I love my country!我你爱中国！";
//"我爱你"：一汉字占两个字符位。
//需求：求一个字符串占有几个字符位。
//思路；如果是英文，站一个字符位，如果不是英文占两个字符位。
//技术点：判断该字符是否在0-127之间。（在的话是英文，不在是非英文）
alert(getZFWlength(str));
alert(str.length);
function getZFWlength(string){
//定义一个计数器
var count = 0;
for(var i=0;i<string.length;i++){
//对每一位字符串进行判断，如果Unicode编码在0-127，计数器+1；否则+2
if(string.charCodeAt(i)<128 && string.charCodeAt(i)>=0 ){
count++;
}else{
count+=2;
}
}
return count;
}
</script>
</body>
</html>
07-给字符查索引.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var str = "abcdea";
//给字符查索引(索引值为0,说明字符串以查询的参数为开头)
console.log(str.indexOf("c"));
console.log(str.lastIndexOf("c"));
console.log(str.indexOf("a"));
console.log(str.lastIndexOf("a"));
//了解；数据传递的时候经常需要通过编码后在传递，接收后还需要反编译回来。
var url = "http://www.itcast.cn?username='aaa'&password='123'";
console.log(encodeURIComponent(url));
console.log(decodeURIComponent(encodeURIComponent(url)));
</script>
</body>
</html>
08-字符串连接和截取.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//concat 连接两个字符串返回一个新字符串，并且不会被修改
// var str1 = "abc";
// var str2 = "123";
// var str3 = str1.concat(str2);
// console.log(str1);
// console.log(str2);
// console.log(str3);
var str = "I love my family!";
console.log(str);
// //slice(); 跟剧索引值和索引值截取字符串
// console.log(str.slice(2));//从索引截取到最后
// console.log(str.slice(2,5));//从索引截,包左不包右
// console.log(str.slice(-3));//后几个
// console.log(str.slice(5,2));//空字符串
// //substr(); 跟剧索引值和长度值截取字符串
// console.log(str.substr(2));//从索引截取到最后
// console.log(str.substr(2,6));//从索引截,长度个字符串
// console.log(str.substr(-3));//后几个
// //substring(); 跟剧索引值和索引值截取字符串
console.log(str.substring(2)); //从索引截取到最后
console.log(str.substring(2,5));//从索引截,长度个字符串
console.log(str.substring(-1)); //全部截取
console.log(str.substring(5,2));//只能调换
</script>
</body>
</html>
09-特殊方法.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//去除前后空格，trim();
// var str1 = " a b c ";
// console.log(str1);
// console.log(str1.trim());
//replace()替换
// var str2 = "Today is fine day,today is fine day a!!!"
// console.log(str2);
// console.log(str2.replace(/today/gi,"tomorrow"));
//字符串变数组split(); 无参，是把字符串作为一个元素添加进数组中。空字符串，分隔字符串中每一个字符，分别添加进入数组中
//指定字符分隔数组：特殊符号将不会出现在数组的任意一个元素中
var str3 = "关羽|张飞|刘备";
console.log(str3);
console.log(str3.split("|"));
</script>
</body>
</html>
10-大小写和创建标签（奇葩操作）.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file"/>
<script>
var str = "abcdEFG";
//转换成小写
console.log(str.toLowerCase());
//转换成大写
console.log(str.toUpperCase());
//校验上传文件格式（图片img/png/jpg/gif）(查找最后一个.截取到最后，判断value属性值)
// document.getElementsByTagName("input")[0].onchange = function () {
// alert(this.value);
// }
var str = "你好";
console.log(str.anchor())
console.log(str.big())
console.log(str.sub())
console.log(str.sup())
console.log(str.link("http://www.baidu.com"));
console.log(str.bold())
</script>
</body>
</html>
11-字符串案例.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 截取字符串"我爱你中国，我亲爱的母亲"，中的"中国，我亲爱的"；
var str1 = "我爱你中国，我亲爱的母亲";
var index1 = str1.indexOf("中");
var index2 = str1.indexOf("的");
console.log(str1.slice(index1,index2+1));
// "abcoefoxyozzopp"查找字符串中所有o出现的位置
var str2 = "abcoefoxyozzopp";
for(var i=0;i<str2.length;i++){
//如果指定位置的符号=== "o"
//str2[i]
if( str2.charAt(i)==="o"){
console.log(i);
}
}
// 把字符串中所有的o替换成!
console.log(str2);
console.log(str2.replace(/o/g,"!"));
// 判断一个字符串中出现次数最多的字符，统计这个次数
//定义一个json，然后判断json中是够有该属性，如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
var json = {};
for(var i=0;i<str2.length;i++){
//判断：如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
var key = str2.charAt(i);
if(json[key] === undefined){
json[key] = 1;
}else{
json[key] += 1;
}
}
console.log(json);
//获取json中属性值最大的选项
// var maxKey = "";
// var maxValue = 0;
// for(var k in json){
//// if(maxKey == ""){
//// maxKey = k;
//// maxValue = json[k];
//// }else{
// if(json[k]>maxValue){
// maxKey = k;
// maxValue = json[k];
// }
//// }
// }
// console.log(maxKey);
// console.log(maxValue);
</script>
</body>
</html>
12-获取节点元素的封装（简单版）.html
<!DOCTYPE html>
<html>
<head lang="en">
<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>
<div></div>
<script>
//需求：一个方法，包含三种获取元素节点的功能。通过传递参数的不同，来决定使用哪种获取方法。
//例如： "ibox": getElementById();
//例如： "cbox": getElementsByClassName();
//例如： "tbox": getElementsByTagName();
//化简：使用类似css获取的方式表明使用哪种方式来获取：
// "#box" getElementById();
// ".box" getElementsByClassName();
// "div" getElementsByTagName();
//验证：
getEle("#box").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";
}
//思路：封装一个方法，然后判断第一个字符，如果是#用id，如果是.用className,否则用tagName
//步骤：
//1.封装一个方法，获取参数的第一个字符
//2.判断第一个字符是#走第一个逻辑，是.走第二个逻辑，如果都不是那么走最后一个逻辑
//3.隐藏：
//1.封装一个方法，获取参数的第一个字符
function getEle(str){
//2.判断第一个字符是#走第一个逻辑，是.走第二个逻辑，如果都不是那么走最后一个逻辑
var str1 = str.charAt(0);
if(str1==="#"){
//3.隐藏：
//返回获取的元素。（因为传递过来的值带有#，所以我们要从第二项开始截取并搜索）
return document.getElementById(str.slice(1));
}else if(str1 === "."){
return document.getElementsByClassName(str.slice(1));
}else{
return document.getElementsByTagName(str);
}
}
</script>
</body>
</html>
13-获取节点元素的封装（最终版版）.html
<!DOCTYPE html>
<html>
<head lang="en">
<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>
<div></div>
<script>
$("#box").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";
}
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>
14-Math对象.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//
// var num = 1.4;
var num = -0.6;
console.log(Math.abs(num)); //取绝对值
console.log(Math.floor(num)); //向下取整 //向小取
console.log(Math.ceil(num)); //向上取整 //向大取
console.log(Math.round(num)); //四舍五入取整 //正数四舍五入，负数五舍六入
console.log(Math.random()); //随机数0-1
</script>
</body>
</html>
15-事件的概述.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
//第一种事件绑定的方法容易被层叠。
// btn.onclick = function () {
// console.log("九尺龙泉万卷书，上天生我意何如。");
// }
//
// btn.onclick = function () {
// console.log("不能报国平天下，枉为男儿大丈夫。");
// }
//addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
//第二种事件绑定的方法不会出现层叠。（更适合团队开发）
btn.addEventListener("click",fn1);
btn.addEventListener("click",fn2);
function fn1(){
console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
console.log("不能报国平天下，枉为男儿大丈夫。");
}
//调用这是事件源，参数1事件名(不带on) ，参数2事件名(执行函数) 参数3事件名(捕获或者冒泡)
</script>
</body>
</html>
16-事件监听原理.html
<!DOCTYPE html>
<html>
<head lang="en">
<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);
fn("click",fn1,btn);
fn("click",fn2,btn);
fn("click",fn3,btn);
function fn1(){
console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
console.log("不能报国平天下，枉为男儿大丈夫。");
}
function fn3(){
console.log("111111。");
}
//原理（了解）（自己封装一个）(click)
function fn(str,fn,ele){
//判断位置要注意：如果进入绑定事件本身，那么该事件已经本绑定了
//所以获取旧的事件必须在新的事件绑定之前
var oldEvent = ele["on"+str];
ele["on"+str] = function () {
//不能直接执行函数，因为我们还不知道以前有没有绑定我同样的事件
//进行判断，如果以前有过绑定事件，那么把以前的执行完毕在执行现在的事件，如果没有就直接执行
//如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
//如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
if(oldEvent){
//因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数
oldEvent();
fn();
}else{
//没有绑定过事件
fn();
}
}
}
</script>
</body>
</html>
17-事件添加的兼容写法.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
//火狐谷歌IE9+支持addEventListener
// btn.addEventListener("click",fn1);
// btn.addEventListener("click",fn2);
//IE678支持attachEvent
// btn.attachEvent("onclick",fn1);
// btn.attachEvent("onclick",fn2);
//兼容写法
EventListen = {
addEvent: function (ele,fn,str) {
//通过判断调用的方式兼容IE678
//判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
if(ele.addEventListener){
//直接调用
ele.addEventListener(str,fn);
}else if(ele.attachEvent){
ele.attachEvent("on"+str,fn);
}else{
//在addEventListener和attachEvent都不存在的情况下，用此代码
ele["on"+str] = fn;
}
}
}
EventListen.addEvent(btn,fn1,"click")
EventListen.addEvent(btn,fn2,"click")
console.log(EventListen);
function fn1(){
console.log("九尺龙泉万卷书，上天生我意何如。");
}
function fn2(){
console.log("不能报国平天下，枉为男儿大丈夫。");
}
</script>
</body>
</html>
18-事件解绑的兼容写法.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>赋诗</button>
<script>
var btn = document.getElementsByTagName("button")[0];
EventListen = {
addEvent: function (ele,fn,str) {
//通过判断调用的方式兼容IE678
//判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
if(ele.addEventListener){
//直接调用
ele.addEventListener(str,fn);
}else if(ele.attachEvent){
ele.attachEvent("on"+str,fn);
}else{
//在addEventListener和attachEvent都不存在的情况下，用此代码
ele["on"+str] = fn;
}
},
removeEvent: function (ele,fn,str) {
if(ele.removeEventListener){
ele.removeEventListener(str,fn);
}else if(ele.detachEvent){
ele.detachEvent("on"+str,fn);
}else{
ele["on"+str] = null;
}
}
}
// btn.addEventListener("click",fn);
EventListen.addEvent(btn,fn,"click");
EventListen.removeEvent(btn,fn,"click");
function fn(){
alert(1);
}
//第一种
// btn.onclick = function () {
// alert(1);
// }
// btn.addEventListener("click",fn);
// btn.attachEvent("onclick",fn);
// btn.onclick = null;
//第二种
// btn.removeEventListener("click",fn);
// btn.detachEvent("onclick",fn);
</script>
</body>
</html>
