javascript学习笔记

Javascript

对象——引用数据类型(保存在堆中，而基本数据类型在栈中)

---

对象的分类：

1.内建对象

由ES标准中定义的对象，在任何的ES的实现中都可以使用。比如：

Math

String

Number

Boolean

Function

Object…

2.宿主对象

由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。比如：BOM DOM

3.自定义对象

由开发人员自己创建的对象

对象的创建

//增
var obj = new object();
obj.name = "yt"
obj["yyyy"] ="lxw"//名字可随意
//删
delete obj.name;

//改
obj.name = 'wjx';
//查
console.log(obj.name);

//属性值可以是任意的数据类型 

注意：

1.属性值可以是任意，也可以是对象

判断对象里是否有某个属性：

in

console.log("name" in obj)

2.对象在变量中保存的是地址

var obj1 = new object();
var obj2 = obj1;
//改变里面的值 都会变
obj2 =null;//这则改变的是指针的地址，obj1不会收到影响

对象自变量

var obj = {};//用自变量来创建对象
var obj ={
    name:"yt",
    lk:"wjx",
    "*%$%$":"wxhn",
    test:{name:"wjxxx"}
};
//

函数——能分装一些功能

注意：函数也是对象！！！！

var fun = new Function("console.log('wjx wxhn');");
fun();//直接应用
fun.name = "hello";//具有对象的所有属性

函数的申明

function fun2()
{
    var ldlsdsds='wjx';
    document.write("wxhnwjx");
}
var fun3 = function()//创建匿名函数后赋值给变量
{
	console.log("I li ke u<br\>");
}
fun3();

函数的参数——可以是基本数据类型、对象、函数

//要检查参数的类型 和 数量

//多的不管 少的可能

函数也可以是参数

函数内部声明函数

立即执行函数

对象的方法

遍历对象里的属性

作用域——全局变量都会作为window对象的属性，函数作为其方法

申明提前

变量申明提前

函数申明提前

this指针

this是会变的

就是在外面直接调用 this就是Windows

而通过某对象作为方法调用 this就是指该对象

工厂方法创建对象——类似c++的类（就是）

所有的对象都是Object的后代

缺点：都是由Object创建的对象，人和狗不能区分

解决缺点：创建构造函数

1. 创建一个新对象
2. 将新建的对象设为函数中的this
3. 逐行执行函数中的代码
4. 将新建的对象作为返回值返回 自动会返回

最终

//检验对象是否是某个类的实例
console.log(dog instanceof Dog);

如果有个函数在每个对象中都有实现，为了避免重复消耗内存，可以定义成全局函数，然后里面的this用法就有大用处了

缺点：污染全局作用域的命名空间，同时定义在全局作用域中很不安全

解决方法 :原型 prototype

每个函数都有默认的 protottype

以后对公用属性，方法都可以添加到原型中

同时 对

__proto__ 这样在外部调用原型对象

找不到，就到原型对象中找

怎么看自己是否有某个属性

原型对象也有原型 但是也止步于此！不能无限套娃 最多二层

重写toString 每次打印都会调用object里面的toString

要到原型里面写才最好

垃圾回收

obj = null;后会自动回收

数组——也是对象，因为一切皆对象

---

var arr = new Array();

//直接添加
arr[0] = 1;
arr[1]  =4;//可以添加任何东西 对象也可以
arr[4] = "ds"
//一旦有跳过 跳到哪记录到哪 
arr.length==5; //也可以修改length来修改数组元素

向数组最后一个元素添加元素

创建方法

数组可以存任意，包括函数

数组方法

4个增删函数

var arr = new array();
res = arr.push("wjx");//末尾添加一个元素，也可以是多个
//res=  1//长度
res = arr.pop();//删除最后一个
res = "wjx";
res= arr.unshift("likeu")
//res =1
console.log(arr);//"likeu" 第一个
arr.shift();//删除第一个

数组遍历

var arr=[1,2,3,4,4,5];
for(var i=0;i<arr.length;i++)
    {
        console.log(arr[i]);
    }

forEach()方法遍历 ——只支持IE8以上 大于IE8 但是现在IE已经退役了

需要传入一个函数,数组中有几个元素，就执行几次

var arr= [1,2,3,4,5];
arr.forEach(function(a,b,c))//传三个参数
{
	  //a是数组元素
      //b是索引
      //c是arr本身  
      console.log(a)==console.log(arr[b])==console.log(c[b]);
}

slice(start,end)方法

python的切片

start<=index <end;

截取元素 封装到一个新的数组

var arr= [1,2,3,4,5];   
var arr2 = arr.slice(0,2);
//arr2 == [1,2];
var arr3 =arr.slice(1,-1);
//arr3 = [1,2,3,4];

splice(start,count,object……)

从第几个开始删除

删几个

从删除位置开始替换

删除数组中的指定元素

var arr= [1,2,3,4,5];
var arr2 = arr.splice(0,2);
//arr2 = [1,2];
//arr = [3,4,5];

concat(arr1,arr2,……)

连接1个以上的数组，合并为一个数组

也可以是元素(字符串，数字……)

不会对原数组产生影响

var arr = [1,2,3,4,5];
var arr2 = [6,7,8,9];
var res = arr.concat(arr2,"wjx");
//res == [1,2,3,4,5,6,7,8,9,"wjx"];S

join()

数组转化为字符串，参数为连接符

默认为逗号,

reverse() 翻转

该方法会直接改变原数组

sort()

默认是字典排序！！！！，数字也是字典

可以自定义

var arr = [5,4,3,2,1];
var res = arr.sort(function(a,b){
    return a - b;//反回值>0 交换位置
    //小于0 不变
    //如果是0 不交换 认为相等
    //等价于 a > b
})

//res = [1,2,3,4,5];

函数的方法

---

call()和apply()

fun.call(obj);//把函数的this指向obj
fun.apply(obj);

//区别
//call可以将实参一次传递
fun.call(obj,2,3);

//apply需要将其封装到数组里面
fun.apply(obj,[2,3]);

函数的默认参数之二 argument（参数），之一是this

1.argument是一个类数组对象

2.它是一个类似数组的对象，也可以用索引来获取

​ 即使不定义形参，也可以用argument来使用参数，但是比较麻烦

3.属性length,代表参数长度

4.有一个属性callee就是当前使用的函数对象

Data对象

---

封装的是最新的时间

var d = new Data();
var d2 = new Data("12/03/2022 11:08:30");

getData()方法返回的是当前日期是几日

getDay()方法返回当前日期是星期几

0~6 0表示周日 1表示周一

getMonth()方法 返回月份

0~11 0表示1月 以此类推

getFullYear()方法 获取四位数年份

getTime()方法获取时间戳 1970 \1 \1\0\0 到现在的毫秒数

中文时间，是北京时间

获取当前时间戳

var time = Date.now();

Math对象

---

和python差不多

生成x~y的随机数

Math.round(Math.random()*(y-x)+x)

ES6新增平方 x**y

Math.pow(2,5)==2**5;

包装类

---

这样有很多去缺点，开发中绝对别用

但是是底层自己用的，在基本数据类型转化是会临时转化为该对象，再调用对象的方法

字符串方法

---

charAt(index) 返回字符

charCodeAt（index）返回字符编码

根据索引 获取指定位置字符

String.fromCharCode()根据字符编码获取字符

concat(string,……) 可用+号替代

indexOf(“x”，start)返回第一个地址，没找到返回-1

可以指定开始查找的位置start

lastIndexOf(“x”,start)从后往前找

slice(start,end)从字符串截取内容，不会影响原字符串 类似切片 end可省略

substring(start,end) 类似slice()

不接受负值，自动调整负值为0，而且会交换前大后小的start, end;

substr(start,count)也是截取字符串，不改变原字符串

split(“,”)；类似py里面split

以参数分开字符串，然后存入数组

如果传空串""，则每个字符单独存入数组

toUpperCase()转化为大写

toLowerCase()转化为小写

var str = "ytxhwjx";
var str2 = "forever";
res = str.charAt(2);
//res = = "x";
res = String.fromCharCode(0x231);
var str3 =str.concat(str2)==str+str2;
res = str.slice(2);//=="xhwjx"

正则表达式

---

创建正则表达式对象

var reg = new RegExp("正则表达式","匹配模式");
var reg = new RegExp("a");
var str = "a";

字面量创建

var reg =/a/i;

test()检查字符串是否符合正则规则

var reg = new RegExp("a");
var str= "abcd";
var res = reg.test(str);
//res ==true;//检查是否含有a这个字符
//没有就返回fales
//区分大小写

匹配模式

• i 忽略大小写
• g 全局模式匹配
• m换行匹配

var reg = new RegExp("a");
var str= "abcd";

**I 和 [ ]**表示或的意思

var res = /a|b/;
//[]也表示或的意思
res = /[ab]/;
reg =/[a-z]/;//a~z

//a开头 c结尾

[^] 除了的意思

var reg = /[^ab]/;
//除了ab

- 什么到什么

例如[A-Z]

匹配多个重复字符

{n}正好出现n次

只对前面的一个内容起作用，可以加括号

{m,n} m到n次

{m,}m个以上

+至少一个 {1,}

* //0个以上有没有都行 {0,}

? ==>{0,1}

var reg  = /a{3}/;//
reg = /(ab){2}/;

开头紧接着某字母：^

reg = /^a/;

结尾紧接着某字母：$

reg = /a$/;

reg = /^a$/;//只能是a

. 表示任意字符

要检查怎么办：

转义字符

/\./;

\w 任意字母数字

\W 除了数字字母

\d 数字

\D除了数字

\s 空格

\S除了空格

\b 单词边界

配合字符串方法的正则

// split()  以任意大写字母分割
var res = str.split(/[A-Z]/);

//search()搜索字符串中是否堪忧指定内容
//返回索引 没有返回-1
//可以接收正则表达式
//search()不能全局 只会返回第一个匹配到的
str =  "hello world ahhh yt wjxhhh";
res = str.search("abcd");
res = str.search(/a[def]c/);

//match() 匹配符合条件的字符
//默认是找到一个就停止 g就是所有
//返回的是一个数组
str = "1a22b3b4d5e6f7";
res = str.match(/[A-z]/g);
//res = "a,b,c,d,e,f";

//replace()
res =str.replace(/[a-z]/gi,"@");//也可替换成空串

手机号

var phoneReg = /^1[3-9][0-9]{9}/;

排除输入的空格

var str = prompt("输入你的用户名：");
str =  str.replace(/\s/g,"");//所用空格
str = str.replace(/^\s*/,"");//取出开头所有空格
str = str.replace(/\s*$/,"");//结尾
str = str.replace(/^\s*|\s*$/,"");
console.log(str);

电子邮件

A-z包括下划线

var reg = /^w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

DOM

---

Document Object Model

用来操作网页的

要放在下面，因为它是一行一行执行的，要写在相应的后面

//获取button对象
var btn = document.getElementById("xxx");

//修改按钮文字
btn.innerHTML = "xxxxx";

事件与绑定

可以将事件和对象分离

var btn = document.getElementById("btn");
//推荐使用 
//单击响应函数
//
btn.onclick = function(){
    alert("你干嘛~~~~~");
}

如果就是要写在前面 全部写在window.onload里面最优写在下面 但是差距不大

window.onload = function()
{
	var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert("hello");
    }
}

childNodes会算入所有元素（包括空白） 9

children获取当前元素的所有子元素 4

获取第一个

减少重复性代码绑定

function myClick(idStr,fun)
{
    var btn = document.getElementById(idStr);
    btn.onclick = fun;
}

myClick("btn07",function(){
    var bj  =documrnt.getElementBtId("bj");
    var pn = bj.parentNode;
    alert(pn.innerHTML);
})

获取body

var body = document.body;

//复杂
var body = document.getElementsByTagName("body")[0];//返回的是数组

表示HTML

var html = document.documentElement;

所有all，这个目前已经弃用了

var all = document.all;

class

//返回的是数组
var box1 = document.getElementsByClassName("box1");

选择器方法

缺点：它只会返回第一个找到的

var div = document.querySelector(".box1 div");

解决：document.querySelectAll(“xxx”);

返回数组，即使只有一个

var box1 = document.querySelectorAll(".box1");

增删改节点

创建节点:document.createElement()

var li = document.createElement("li");
//文本节点
var text = document.createTextNode("广州");

//把text添加到li元素里面

//appendChild()
li.appendChild(text);//文本天机到列表里面

var city= document.getElementById("city");
city.appendChild(li);

insertBefore()指定子节点插入新节点

先获取父节点

//父节点.insertBefore(新节点,旧节点);
var city = document.getElementById("city");
city.insertBefore(li,bj);

父节点.replaceChild(新节点,旧节点) 替换子节点

city.replaceChild(li,bj);//li节点替换bj节点

父节点.removeChild(子节点)

找不到父节点时，用函数

bj.parentNode.removeChild(bj);

父.innerHTML获取父节点里面的html代码

为了不覆盖以前的内容,可以直接用+=

var city = document.getElementById("city");
city.innerHTML +="<li>武汉</li>";

两者结合方法,避免+=改动太大

var city = document.getElementById("city");
var li = document.createElement("li");
li.innerHTML = "广州";
city.appendChild(li);

修改样式

元素.style.xxx = xx;来改变

改变的是内联样式，有较高的优先级，会立即显示但是出现!important就不会改变

遇到出现减号的样式，用驼峰法代替

同时用这个语法读取的都是内联样式，无法读取样式表中的样式

解决

元素.currentStyle.width……只有IE支持，但是IE已经退役了 默认会获取auto

解决：

两个参数：

1.要获取样式的元素

2.传递一个伪元素

3.都是只读的

var obj = window.getComputedStyle(box1,null);
alert(obj.width);
//遇到自动的 不返回auto 而是真实的值
function getStyle(obj,name){
    return getComputedStyle(obj,null)[name];
}

兼容ie8

其他样式相关属性element属性

box1.clientWidth元素的可见高宽，包括内容区和内边距（padding）都是只读的

box1.clientHeight

元素高宽

offsetWidth包括边框

offsetHeight

元素偏移

offsetParent获取当前元素最近的开启了定位祖先元素，返回的是容器

offsetLeft相当于定位父元素左边的偏移量

offsetTop相当于定位父元素右的偏移量

滚动区域的高度和宽度

box1.scrollHeight

box1.scrollWidth

获取滚动条滚动距离

scrollLeft 水平滚动条滚动距离

scrollTop 垂直滚动条滚动距离

当scrollHeight -scrollTop ==clientHeight

当scrollWidth - scrollLeft ==clientWidth

滚动条到底了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #info{
            height: 600px;
            width: 300px;
            overflow: scroll;
            background: #bfa;
        }
    </style>
    <script>
        window.onload = function()
        {
            //滚动才判断
            var info = document.getElementById("info");
            var checkbox =document.getElementsByTagName("input");
            info.onscroll = function(){
                // console.log("aaaa");
                if(info.scrollHeight-info.scrollTop-info.clientHeight<1)
                {   
                    // console.log(info.scrollHeight-info.scrollTop-info.clientHeight)
                    checkbox[0].disabled = false;//划到底了 可以点击
                    // alert("aaa");
                    checkbox[1].disabled = false;
                }
            }
        }
    </script>
</head>
<body>
    <h3>欢迎亲爱的用户注册</h3>
    <p id="info">
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读，就别注册
    </p>
    <input type="checkbox" disabled="disabled"/>我已经仔细阅读
    <input type="button" value="注册" disabled="disabled"/>
</body>
</html>

onmousemove事件

响应函数被触发时，每次都会将一个事件对象作为实参传入响应函数，你可以获取事件的一切信息

IE8中 事件是储存在全局中的

记录坐标代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #areaDiv{
            width: 400px;
            height: 500px;
            border: 1px solid;
        }
        #showMsg{
            width: 400px;
            height: 30px;
            border: 1px solid;

        }
    </style>

    <script>
        window.onload =function(){
            var areaDiv = document.getElementById("areaDiv");
            var showMsg = document.getElementById("showMsg");

            areaDiv.onmousemove = function(event){
                var x = event.clientX;
                var y = event.clientY;
                showMsg.innerHTML = "x="+x+",y="+y;
            }

        }
    </script>
</head>
<body>
    <div id ="areaDiv"></div>
    <div id ="showMsg"></div>
</body>
</html>

让区域随鼠标移动代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            position: absolute;
            
        }
        body{
            height: 1400px;
        }
    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            document.onmousemove = function(event){
                event = event||window.event;
                //可见区域的坐标
                // var left =event.clientX;//这个是获取鼠标在当前页面的坐标
                // var top =event.clientY;
                //div的偏移量是相对于整个页面的
                var left = event.pageX;
                var top = event.pageY;
                box1.style.left = left+"px";
                box1.style.top = top+"px";

            }

        }
    </script>
</head>
<body>
    <div id ="box1"></div>
</body>
</html>

事件的冒泡

指的是子代的触发时，祖先的相同事件，其祖先也会被触发，会一级一级向上传

取消冒泡

var body = document.getElementsByTagName("body")[0];
body.onclick = function(event)
{
    event.cancelBubble = true;
    //最新的：
    event.stopPropagation();
}

事件的委派

利用冒泡的原理，绑定其祖先一次，子女永远受益

有时要用event.target 判断是否点的是子女

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function()
        {
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                var li = document.createElement("li");
                li.innerHTML = '<a class="link" href="javascript:;">new超链接</a>';
                var ul = document.getElementById("u1");
                ul.appendChild(li);
            }

            var myul = document.getElementById("u1");
            myul.onclick = function(event){
                if(event.target.className =="link")
                    alert(event.target);
                // alert("你干嘛~");
            }
        }
    </script>
</head>
<body>
    <button id="btn01">添加超链接</button>
    <ul id="u1">
        <li><a class="link" href="javascript:;">超链接</a></li>
        <li><a class="link" href="javascript:;">超链接</a></li>
        <li><a class="link" href="javascript:;">超链接</a></li>
        <li><a class="link" href="javascript:;">超链接</a></li>
    </ul>
</body>
</html>

事件的绑定

addEventListener()，里面的this是调用这得对象，第三个参数是时候在捕获阶段执行，一般false，如果要在捕获阶段执行，true

兼容IE8:attachEvent(),里面的this是window

这样可以解决绑定覆盖的问题，可以绑定多个函数，有些特殊事件只能用它来绑定

btn01.addEventListener("click",function(){
    alert("1");
    alert("2");
},false);

兼容：

事件的传播

拖拽案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{

            width: 100px;
            height: 100px;
            background-color: aquamarine;
            position: absolute;
        }
        #box2{
            
            width: 100px;
            height: 100px;
            background-color: rgb(153, 255, 127);
            position: absolute;
            top:200px;
            left: 300px;
            /* z-index: -1; */

        }
    </style>
    <script>
        //
        window.onload = function(){
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            drag(box1);
            drag(box2);s
            //提取专门用来拖拽的函数
            function drag(obj){
                obj.onmousedown = function(event){
                obj.setCapture&&obj.setCapture();//前面的ture就返回后面的
                //求偏移量
                var ol = event.clientX -obj.offsetLeft;
                var ot = event.clientY -obj.offsetTop;
                document.onmousemove = function(event){
                    var left = event.clientX-ol;
                    var top = event.clientY-ot;
                    obj.style.left=left+"px";
                    obj.style.top = top+"px";
                    
                };
                //不被别人覆盖就移动不了了
                document.onmouseup = function(){
                   document.onmousemove = null;//取消移动
                   document.onmouseup = null;//变成一次性事件
                   obj.releaseCapture&&obj.releaseCapture();
                };
                //全选后再拖拽可能会出现问题
                //return false后取消默认行为 对IE8不起作用
                //可以用setCapture() 把接下来所有点击都绑定在某个对象上
                return false;
            };
            }

        };
    </script>
</head>
<body>
    <p>我喜欢你</p>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

滚轮案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{

            width: 100px;
            height: 100px;
            background-color: aquamarine;
            position: absolute;
        }
        body{
            height: 1400px;
        }
    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            //onmousewhell不支持火狐 旦支持 onwheel
            //chrome也支持onwheel
            box1.onwheel = function(event){
                // alert("滚！！！");
                //判断滚轮滚动方向 event.wheelDelta 上正下负
                // alert(event.wheelDelta);
                // alert(event.deltaY);
                if(event.wheelDelta>0){
                    box1.style.height=box1.clientHeight-20+"px";
                }
                else{
                    // alert("aa");
                    box1.style.height=box1.clientHeight+20+"px";
                }
                //当body很长时，有滚动条，会产生默认行为，要取消就要 return fasle;
                event.preventDefault();//取消默认行为
                return fasle;//chrome不行
            };

        }
    </script>

</head>
<body>
     <div id="box1"></div>
</body>
</html>

键盘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{

            width: 100px;
            height: 100px;
            background:#bfa;
            position: absolute;
        }

    </style>
    <script>
        window.onload = function(){
            code = ["w","s","a","d"];
            var speed = 10;
            document.onkeydown = function(event){
                // console.log("按键被按下")//keyCode判断那个按键被按下

                // if(event.keyCode==89)
                // {
                //     console.log("y")
                // }
                //判断ctrl + y
                //altKey
                //shiftKey

                // if(event.keyCode===89&&event.ctrlKey)
                // {
                //     console.log("ctrl+y");
                // }
                // return false;//取消输入框默认输入
                    // if(event.keyCode>=48&&event.keyCode<=57)
                    // {
                    //     return false;
                    // }www
                    // if(event.KeyCode==119){
                    //     console.log('aaa');
                    // }
                    // console.log(event.keyCode);
                    // console.log(code[0].charCodeAt(0));
                var box1 = document.getElementById("box1");
                if(event.ctrlKey==true){
                    // alert("ctrl");
                    speed+=10;
                }
                if(event.keyCode==65){
                    console.log("left");
                    box1.style.left = box1.offsetLeft-speed+"px";
                }
                else if(event.keyCode==87){
                    console.log("up");
                    box1.style.top = box1.offsetTop-speed+"px";
                }
                else if(event.keyCode==68){
                    console.log("right");
                    box1.style.left = box1.offsetLeft+speed+"px";
                }
                else if(event.keyCode==83){
                    console.log("down");
                    box1.style.top = box1.offsetTop+speed+"px";
                }

            };//一直按着，事件会一直触发 连续触发 第一次和第二次间隔会比较大
            //防止误操作
            // document.onkeyup = function(event){
            //     console.log("按键已经松开");//这个只触发一次
            // };
        };
    </script>
</head>
<body>
    <div id="box1">
        <!-- <input type="text"/> -->

    </div>
</body>
</html>

BOM

---

浏览器 对象 模型

Window——整个窗口

Navigator——浏览器信息

Location——地址栏

History——前进后退

Screen——多用在移动端

都作为window的属性保存的，可以通过window对象来使用，也可以直接使用

Navigator

Navigator.appName

由于历史原因，已经不能识别大部分浏览器了

userAgent现在用户代理来识别

判断浏览器

目前已经不能通过这个判断是否是IE11了

History

history.length 返回历史页面的数量，当次的

hostory.back() 回退上一页面

history.forward() 下一个页面

history.go(number)

1向前跳1个

2跳两个

0不跳

-1后跳一个

-2后跳两个

没有记录，返回undefined

location

location = "https:\\www.baidu.com";

location.assign(“http://xxxxx”) 跳转

location.reload(); 刷新

ctrl+F5强制清空缓存，参数为true；

location.reload(true);

location.replace(“http:\xxxx”) 没有历史记录

案例

定时器

    window.onload = function(){

            var count = document.getElementById("count");

           // setInterval();
           //函数每隔一段时间执行一次
            //每次间隔时间是毫秒
            var i=0;
            var timer = setInterval(function(){
                count.innerHTML =++i; 
                if(i==5)
                clearInterval(timer);
            },1000);
            //timer =1叫做一号定时器
            //clearInterval();关闭定时器
            console.log(1);
        }

延时调用

只调用一次

var timer = setTimeout(function(){
    console.log("lll");
},3000);

手写move函数

  function move(obj,attr,target,speed,callback){
                var left = getStyle(obj,attr);
                clearInterval(obj.timer);//关闭上一个定时器
                var current = parseInt(getStyle(obj,attr));//字符串转化为整数
                if(current>target){//调整方向
                    speed=-speed;
                }
                    obj.timer = setInterval(function(){
                        var oldValue =parseInt(getStyle(obj,attr));
                        var newValue = oldValue+speed;
                        if(speed>0&&newValue>target||speed<0&&newValue<target) newValue=target;
                    //    console.log("aaa");
                        obj.style[attr]= newValue+"px";
                        if(newValue==target){
                            clearInterval(obj.timer);
                           // console.log(obj.timer);
                            callback&&callback();
                        }
                    },10);    

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            flex-direction: row;
            /* 让outer域居中 */
            justify-content: center;
            /* align-content: center; */

        }
        #outer{
            margin-top: 100px;
            display: flex;
            width: 400px;
            height: 500px;
            /* justify-align: center; */
            /* align-items: center; */
            background-color: aquamarine;
            position: absolute;
            overflow: hidden;
        }
        #imgList{
          
            position: absolute;
            left: 0px;
           
            /* width: 4000px; */
            list-style: none;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        #imgList li{
            display: flex;
            margin: 20px;
            /* margin: ; */
            width: 360px;
            height: 460px;
        }
        img{
            width: 360px;
            height: 460px;
        }
        #navdiv{
            display: flex;
            /* width: ; */
            flex-direction: row;
            /* justify-content: center; */
            position: absolute;
            left: 125px;
            bottom: 0;
        }
        #navdiv a{
            width: 20px;
            height: 20px;
            margin: 0 5px;
            /* 左右共30px */
            background-color: rgb(155, 165, 42);
            /* 半透明 */
            opacity: 0.5;
            text-decoration: none;
        }
        #navdiv a:hover{
            background-color:black;
        }
    </style>
    <script>
        window.onload = function(){

            var imgList =document.getElementById("imgList");
            var imgArr = document.getElementsByTagName("img");
            var outer = document.getElementById("outer");
            //设置imgList的动态宽度
            imgList.style.width = 400*imgArr.length+"px";
            var navdiv = document.getElementById("navdiv");
            var aList =document.getElementsByTagName("a");
            //让导航栏动态居中
            navdiv.style.left = (outer.offsetWidth-navdiv.offsetWidth)/2+"px";
            var index =0;


            aList[index].style.backgroundColor="black";
            for(var i=0;i<aList.length;i++){
                // 用let可以，不考虑兼容性
                aList[i].num = i;//为每个超链接都添加一个属性
                aList[i].onclick = function(){
                clearInterval(timer);//清除此时 防止阻止你
                index = this.num;
                SetA();
                move(imgList,"left",-400*index,20,function(){
                    autoChange();
                });
                }
            }
            autoChange();
            var timer;


            function autoChange(){
                timer = setInterval(function(){
                    // aList[index].style.backgroundColor="";
                    // index=(index+1)%(imgArr.length);
                    index++;//这个必须放在回调函数中判断
                    move(imgList,"left",-400*index,20,function(){
                        SetA();
                    });
                },3000);
            }
            function SetA(){
                //     index=(index+1)%(imgArr.length);

                if(index>=imgArr.length-1){
                    index=0;
                    imgList.style.left=0;
                }
                for(let i=0;i<aList.length;i++)
                {
                    aList[i].style.backgroundColor="";
                }
                aList[index].style.backgroundColor="black";

            }



            function getStyle(obj,name){
                if(window.getComputedStyle){
                    // alert("jjj");
                    return getComputedStyle(obj,null)[name];//返回样式
                }
                else{
                    return obj.currentStyle[name];
                }
            }
            // var timer;不要用全局变量
            function move(obj,attr,target,speed,callback){
                // var left = getStyle(obj,attr);
                clearInterval(obj.timer);//关闭上一个定时器
                var current = parseInt(getStyle(obj,attr));
                if(current>target){
                    speed=-speed;
                }
                    obj.timer = setInterval(function(){
                        var oldValue =parseInt(getStyle(obj,attr));
                        var newValue = oldValue+speed;
                        if(speed>0&&newValue>target||speed<0&&newValue<target) newValue=target;
                    //    console.log("aaa");
                        obj.style[attr]= newValue+"px";
                        if(newValue==target){
                            clearInterval(obj.timer);
                            // console.log(obj.timer);
                            callback&&callback();
                        }
                    },10);    
            
        }
        }
    </script>
</head>
<body>
    <div id="outer">
        <ul id="imgList">
            <li ><img src="img/1.jpg"/></li>
            <li><img src="img/2.jpg"/></li>
            <li><img src="img/3.jpg"/></li>
            <li><img src="img/4.jpg"/></li>
            <li><img src="img/5.jpg"/></li>
            <li><img src="img/6.jpg"/></li>
            <li ><img src="img/1.jpg"/></li>
            <!-- <li><img src="img/6.jpg"/></li> -->
            <!-- <li><img src="img/6.jpg"/></li> -->
        </ul>
        <div id="navdiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>
</html>

类操作技巧

我们可以通过className来直接修改渲染，减少浏览器渲染次数

function addClass(obj, cn) {

    obj.className += " " + cn;
}



function hasClass(obj, cn) {
    var reg = RegExp("\\b" + cn + "\\b");//要双斜杠
    // console.log(reg);
    return reg.test(obj.className);
}



function removeClass(obj, cn) {
    var reg = RegExp("\\b" + cn + "\\b");//要双斜杠
    obj.className = obj.className.replace(reg, "");
}




//用来切换一个类，有则删除，没有则添加


function toggleClass(obj, cn) {
    if (hasClass(obj, cn)) {
        removeClass(obj, cn);
    }
    else {
        addClass(obj, cn);
    }
}

二级菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "宋体";
        }

        .sec_menu {
            width: 100px;
            height: auto;
            display: block;
            position: fixed;
        }

        .menuspan {
            width: 100px;
            display: block;
            height: 30px;
            text-align: center;
            border: solid 1px blanchedalmond;
            line-height: 33px;
            background-color: aqua;
        }

        .menuspan:hover {
            background-color: aquamarine;
            cursor: pointer;
        }

        .sec_menu div {
            overflow: hidden;
        }

        .sec_menu a {
            display: block;
            text-decoration: none;
            line-height: 33px;
            text-align: center;
            color: black;
            width: 100px;
            height: 30px;
            background: rgb(150, 237, 250);
        }

        .sec_menu a:hover {
            background: rgb(63, 96, 93);
        }

        .collapsed {
            height: 30px;
            /* overflow: hidden; */
        }
    </style>
    <script>
        window.onload = function () {

            var menuspans = document.getElementsByClassName("menuspan");
            var openDiv = menuspans[0].parentNode;//当前打开的
            // var menuspans = document.querySelectorAll(".menuspan");
            // alert(menuspans[0].innerHTML);
            for (var i = 0; i < menuspans.length; i++) {
                menuspans[i].onclick = function () {
                    var parent = this.parentNode;
                    toggleMenu(parent);
                    if (openDiv != parent && !hasClass(openDiv, "collapsed")) {
                        // addClass(openDiv,"collapsed");
                        // toggleClass(openDiv, "collapsed");
                        toggleMenu(openDiv);

                    }
                    openDiv = parent;//记录现在的
                }
            }
            //切换菜单的折叠和显示状态
            function toggleMenu(obj){
                    var begin = obj.offsetHeight;//便于动画移动
                    toggleClass(obj, "collapsed");
                    var end = obj.offsetHeight;
                    obj.style.height=begin+"px";//内联样式复原
                    move(obj,"height",end,10,function(){ 
                        obj.style.height="";//内联样式复原
                    });
                    // console.log(begin + "to" + end);
            }
            function getStyle(obj, name) {
                if (window.getComputedStyle) {
                    // alert("jjj");
                    return getComputedStyle(obj, null)[name];//返回样式
                }
                else {
                    return obj.currentStyle[name];
                }
            }
            // var timer;不要用全局变量
            function move(obj, attr, target, speed, callback) {
                // var left = getStyle(obj,attr);
                clearInterval(obj.timer);//关闭上一个定时器
                var current = parseInt(getStyle(obj, attr));
                if (current > target) {
                    speed = -speed;
                }
                obj.timer = setInterval(function () {
                    var oldValue = parseInt(getStyle(obj, attr));
                    var newValue = oldValue + speed;
                    if (speed > 0 && newValue > target || speed < 0 && newValue < target) newValue = target;
                    //    console.log("aaa");
                    obj.style[attr] = newValue + "px";
                    if (newValue == target) {
                        clearInterval(obj.timer);
                        // console.log(obj.timer);
                        callback && callback();
                    }
                }, 10);

            }




            function addClass(obj, cn) {

                obj.className += " " + cn;
            }



            function hasClass(obj, cn) {
                var reg = RegExp("\\b" + cn + "\\b");//要双斜杠
                // console.log(reg);
                return reg.test(obj.className);
            }
        
            function removeClass(obj, cn) {
                var reg = RegExp("\\b" + cn + "\\b");//要双斜杠
                obj.className = obj.className.replace(reg, "");
            }
         
        //用来切换一个类，有则删除，没有则添加
            function toggleClass(obj, cn) {
                if (hasClass(obj, cn)) {
                    removeClass(obj, cn);
                }
                else {
                    addClass(obj, cn);
                }
            }
        }
    </script>

</head>

<body>
    <div class="sec_menu">
        <div>
            <span class="menuspan">首页</span>
            <a href="javascript:;">aaaa</a>
            <a href="javascript:;">bbbb</a>
            <a href="javascript:;">cccc</a>
            <a href="javascript:;">dddd</a>
            <a href="javascript:;">dddd</a>
            <a href="javascript:;">dddd</a>
        </div>
        <div class="collapsed">
            <span class="menuspan">关心</span>
            <a href="javascript:;">wwww</a>
            <a href="javascript:;">jjjj</a>
            <a href="javascript:;">xxxx</a>
            <a href="javascript:;">xhxh</a>
        </div>
        <div class="collapsed">
            <span class="menuspan">袁涛</span>
            <a href="javascript:;">xxxx</a>
            <a href="javascript:;">hhhh</a>
            <a href="javascript:;">nnnn</a>
            <a href="javascript:;">hhhh</a>
        </div>
    </div>
</body>
</html>

JSON

---

特殊格式的字符串

任何语言都认识的东西，便于数据交互

并且转换为任何语言的对象

格式和js对象一样，只不过属性名必须加双引号

json格式：

• 对象{}
• 数组[]

json允许的值

1. 字符串
2. 数值
3. 布尔值
4. null
5. 对象
6. 数组

var json ='{"name":"yt","age":"18"}';
var arr = '[1,2,3,"hello"]';

json与js对象的转换

//json-> js对象
var obj1 = JSON.parse(json);
var obj2 = JSON.parse(arr);

//js对象->json

var obj3 = {"name":"yt","age":"18"};
var json = JSON.stringify(obj3);

兼容ie7

方法一不建议

方法二引入js/json2.js文件