JS基础入门

Java张金贺

已于 2022-08-17 07:44:27 修改

阅读量1k

点赞数

分类专栏：前端文章标签： web js

于 2022-08-17 03:37:19 首次发布

本文链接：https://blog.csdn.net/weixin_47281685/article/details/126292508

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、组成

（一）基础语法

1、alert弹窗及js引入方式

（1）alert（' '）

（2）js引入方式：（head、body内外均可以引用）

内部引用：<script> js代码 </script>

外部引用：<script src="路径"> </script>

2、console输出

console.log("内容") //打印一般信息、日志

console.info("内容") //打印一般信息、日志

console.error("内容") //打印错误信息

console.warn("内容") //打印非法警告信息

3、变量与注释

js变量都是弱类型，无需确定数据类型。

强类型:编译前进行数据类型的确定。

弱类型:编译后确定数据类型。

（1）定义变量 var a=1; //声明同时初始化

（2）注释 // 或者/*注释的内容*/

4、数据类型

（1）数字型 Number

（2）字符串 String ( "内容" 、 '内容' 、 `内容` )

（3）布尔 Boolean：ture or false

（4）未定义 Undefind 确省（只声明、不定义）

（5）空 Null

（6）特殊类型、对象类型 Object

注意：typeof()可以进行类型检测。

5、NAN

not a number

6、算数运算符和赋值运算符

（1）算数运算符：+ - * / %（取余） ++（自增） --（自减）

（2）赋值运算符：= += -= *= /= %=

7、数据类型转换及Math对象

（1）数据类型转换

隐式转换：数字与字符串进行运算（+转字符串，其余都是数字）、转布尔类型（非0即为真、非空即为真）。

强制类型转换：

//NaN
var str = "123abc" ;

var n = Number(str);

console.log(n)

字符串转数字parseInt parseFloat

（2）Math对象

Math.floor(n) //向下取证

Math.ceil(n) //向上取证

Math.round（n） //四舍五入

Math.max（n1,n2...） //最大值

Math.min（n1,n2...） //最小值

Math.random（） //随机数[0,1)

Math.pow（2，3） //幂数

Math.sqrt（9） //开平方

Math.abs（-1） //绝对值

Math.sin（） //正弦

8、函数基础

（1）作用：代码更加简洁，提高重用性

//函数的声明
function sum(a, b) {
console.log(a+b);
return a+b;
console.log(123);//不执行
}
//函数的调用
sum(1,2);
sum(300,400);

function 函数名(一组参数){
代码体
}

一组参数:最多255个参数 ,也可以不写。

参数:形参(声明的位置)、实参(调用的位置)

函数的返回值(可有可无)，作用：返回一个值、结束函数

（2）函数的作用域

全局作用域、局部作用域、全局变量、局部变量

<!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>
</head>
<body>
    
</body>
<script>
    // 全局作用域
    // 在全局作用域声明的变量，称之为全局变量
    var nick = "csdn";

    function changeNick() {
        // 局部作用域定义的变量称之为局部变量
        // 不能在全局作用域调用局部变量
        var my = "张金贺";
        nick = "hello csdn";
    }

    changeNick();
    console.log(my)
</script>
</html>

9、比较运算符

==等于

!= <>不等于(只判断内容大小)
===恒等于

!==恒不等于(既判断内容大小有判断数据类型)

>大于

<小于

>=大于等于

<=小于等于

10、逻辑运算符与运算符优先级

（1）逻辑运算符：&&逻辑与（一假即假） ||逻辑或（一真即真）！逻辑非（取反）

（2）运算符优先级：

11、流程控制语句-if

12、流程控制语句-switch

13、三目运算符

判断条件?对的︰错的

14、循环

（1）while

while(条件){
语句
}

（2）do while

do {
代码块
}while(条件)

（3）for

for (var i=0;i<=5;i++) {
代码块
}

15、获取元素

（1）通过id获取

（2）通过ul获取

（2）通过类名获取

<!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>
        .color {
            color: red;
        }
    </style>
</head>
<body>
    <div id="d1">
        <span>自挂东南枝</span>
    </div>
    <ul>
        <li class="item">李白</li>
        <li class="item">杜甫</li>
        <li class="item">白居易</li>
    </ul>
</body>
<script>
    var d1 = document.getElementById("d1");
	//获取文本内容
	console.log(d1.inner)
	// 获取标签和内容
    console.log(d1.innerHTML)
	// 修改内容
    d1.innerHTML = "举头望明月，自挂东南枝";
	// 修改样式
    d1.className = "color";
	// 内联修改样式
    d1.style.fontSize = "30px";

    // 1. 标签获取
    var ul = document.getElementsByTagName("ul");
    // 2.类名获取
    var lis = document.getElementsByClassName("item")
    // console.log(lis)
 
    //for循环，遍历获取
    for (var i=0; i<lis.length; i++) {
        //遍历
        lis[i].style.textAlign = "right";
        lis[i].style.backgroundColor = "orange"
    }

</script>
</html>

16、数组的基本使用

<!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>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    // 三种创建方式
    // 1.
    var array = new Array(1,2,3,4,5);
    console.log(array);

    // 2. 
    var array = new Array(3);
    array[0] = 1
    console.log(array);

    // 3. 
    var sdmz = ["内容一","内容二","内容三"];
    var lis = document.getElementsByTagName("li");
    // 数组的遍历
    for (var i=0; i<lis.length; i++) {
        lis[i].innerHTML = sdmz[i];
    }
    // 可以通过取下标(索引)的方式获取或修改对应的数组元素
</script>
</html>

17、基本数据类型与引用数据类型的区别

此处涉及堆和栈的知识。

深拷贝：拷贝内容。

浅拷贝：拷贝地址，不拷贝内容。

基本数据类型的值在栈内存。

引用数据类型的值在堆内存。

<!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>
</head>
<body>
    
</body>
<script>
    // 基本数据类型
    var a = 1;
    var b = a;
    b = 2;
    console.log(a);
	// a不受影响

    // 引用数据类型
    var arr1 = [1,2,3];
    var arr2 = arr1;
    arr2[0] = 10;
    console.log(arr1[0])
	// arr1受影响

    // 基本数据类型的值在栈内存
    // 引用数据类型的值在堆内存
</script>
</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>数组常见操作</title>
</head>
<body>
    
</body>
<script>
    // 数组元素的修改与访问
    var books = ["西游记","水浒传","三国演义","红楼"]
    // 通过下标访问 修改元素
    console.log(books[0])
    books[3] = "石头记";
    console.log(books.length);

    push(n)   在数组最后添加一个元素n
    pop()     删除数组最后一个元素
    books.push("聊斋");
    books.pop();
    books.pop();

    unshift(n)  在数组的开头添加一个元素n  
    shift()     删除数组的第一个元素
    books.unshift("山海经");
    books.shift();

    concat() 拼接数组  返回一个新的数组
    var arr = ["山海经","聊斋"];
    books = books.concat(arr);

    splice(下标，删除元素的个数，新插入的元素列表)
    books.splice(1,2,"聊斋","钢铁是怎样炼成的")

    slice(start[, end])  截取元素  返回一个新的数组
    [start, end)
    var a = books.slice(1,2);
    console.log(a);

    reverse() 反转数组
    console.log(books.reverse())

    join(规则)  按照规则将数组转为字符串
    console.log(books.join(" "))

    indexOf(子元素)  从数组中查询子元素，返回下标，没有就返回-1
    console.log(books.indexOf("朝花夕拾"))

   // 遍历
   // 1. for  while
   // 2. forEach
   // 函数做参数，称之为回调函数
   // item 数组的每一个值
   //index 下标
    books.forEach(function(item, index) {
        console.log(item, index)
    })
   // 3. map  遍历  回调函数中return一个新的值 返回新数组
    var arr = [1,2,3,4];
    var newArr = arr.map(function(item) {
        return item ** 2;
    })
    console.log(newArr)

    sort()  排序  
    var arr = [7, 18, -9, -23, 0, 56];
    // a b是数组相邻的两个值
    // 回调函数，如果返回值大于0，就交换a b的顺序
    arr.sort(function(a, b) {
        return a - b;
    })
    console.log(arr)

    // console.log(books);
</script>
</html>

18、对象结构

<!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>
</head>
<body>
    
</body>
<script>
    // key: value
    // 人物 : 姓名：张金贺  年龄：22  性别：man  城市:河北   爱好：计算机
    var zhang = {
        name: "张金贺",
        age: 22,
        sex: "man",
        city: "河北",
        hobby: "computer"
    }

    //  访问:
    //  1.  通过.语法
    console.log(zhang.name)
    //修改
    zhang.name = "张金贺";
    // console.log(cege)
    //  2. 通过 [变量]
    var str = "age";
    console.log(zhang[str])

    // 可以为对象添加任意属性
    zhang.car = "奔驰";
    // 删除 delete 
    delete zhang.car

    // 使用 for  in 进行对象的遍历 
    for(var key in zhang) {
        console.log(key)
        console.log(zhang[key])
    }
</script>
</html>

19、字符串操作

<!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>
</head>
<body>
    <div id="ok">
        <!-- <p>静夜思</p>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p> -->
    </div>
</body>
<script>
    var dOk = document.getElementById("ok");
    var author = "李白"
    // dOk.innerHTML = "<p>静夜思</p><p>"+author+"</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p>"
    dOk.innerHTML = `
        <p>静夜思</p>
        <p>${author}</p>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    `;

    // 获取字符串的长度 length
    console.log(author.length)

    // toUppercase() 大写  toLowercase() 小写
    var str = "Hello CsDn";
    console.log(str.toUpperCase(),str.toLowerCase())

    // split(规则) 以某种规则将字符串转为数组
    var str = "你-好";
    var arr = str.split("-");

    // indexOf()  下标
    var str = "123123";
    console.log(str.indexOf(4))

    // substring(start, end)[)  substr(start, length)
    var str = "一棵是枣树，另一棵也是枣树";
    console.log(str.substring(0,5));
    console.log(str.substr(4,2))

    // replace(x,y)  用y替换x 
    var str = "一棵是枣树，另一棵也是枣树";
    console.log(str.replace("枣树","桃树"))

    var str = "一棵是\"枣树\"另一棵也是枣树"
    console.log(str);
</script>
</html>

20、计时器

<!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>
</head>
<body>
    
</body>
<script>
    setTimeout(fn, time)  
    // 延迟time后，执行一次fn
    setInterval(fn, time)
    // 每延迟time后，执行一次fn
	// eg:
    setTimeout(function(){
        console.log("执行")
    }, 1000);
	// eg:
    setInterval(function() {
        console.log("执行")
    }, 1000)


// 使用场景
    var timer = null;
    var count = 0;
    timer = setInterval(function() {
        count ++;
        if (count == 10) {
            clearInterval(timer)
        }
        console.log("执行")
    }, 1000)
    

</script>
</html>

21、日期对象Date()

<script>
    // Date()
    // var date = new Date(); //获取当前的时间戳
    // console.log(date);
    var date = new Date("2022-1-1 00:00:00");
    console.log(date.getFullYear());//年
    console.log(date.getMonth());  //[0,11]   月
    console.log(date.getDate());//日
    console.log(date.getDay());  //星期几

    console.log(date.getHours())//时
    console.log(date.getMinutes())//分
    console.log(date.getSeconds())//秒
    // 获取距离1970.1.1的毫秒数
    console.log(date.getTime());
</script>

22、函数补充

<!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>
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</body>
<script>
    // 1. arguments
    function add() {
        var sum = 0;
        for (var i=0; i<arguments.length; i++) {
            sum += arguments[i];
        }
        return sum
    }
    var n = add(1,2,3,4,5,6,7,8);
    console.log(n)

    // 2. 匿名函数  回调函数
    var add = function(a,b) {
        return a + b;
    }
    console.log(add(1,2))

    // 3. 自执行函数
    (function(a,b,c) {
        console.log(a+b+c)
    })(1,2,3)

    // 4. 函数最后返回自身  递归函数
    // 如果随机数不大于10，就一直打印
    function shown() {
        var n = rand(0,12);
        if (n > 10) {
            return ;
        }
        console.log(n)
        shown();
    }
    shown();

    function rand(min, max) {
        return Math.round(Math.random() * (max-min) + min);
    }

    // 用setTimeout实现setInterval
    function interval() {
        setTimeout(function(){
            console.log("123123")
            interval();
        }, 1000)
    }
    interval();

    // 5.闭包
	// 局部变量数据持久化
	// 函数内部嵌套函数
    // 全局作用域不能调用局部变量
	// 造成一定内存压力
    function fn1() {
        var a = 1;
        function fn2() {
            return a;
        }
        return fn2;
    }
   var ok = fn1()();
// eg:
    var buts = document.getElementsByTagName("button");
    // 闭包
    for (var i=0; i<buts.length; i++) {
        (function(item) {
            buts[item].onclick = function() {
                console.log(item)
            }
        })(i)
    }
    // 对象方式实现闭包功能
    for (var i=0; i<buts.length; i++) {
        buts[i].index = i;  //单独做标记
        buts[i].onclick = function() {
            // this代表当前事件的拥有者
            console.log(this.index)
        }
    }
</script>
</html>

（二）DOM操作（文档、对象、模型）

对HTML节点进行增删改查

1、树形结构

嵌套、非线性结构、非对称（HTML的标签逻辑就是树形结构）

2、DOM增加操作

（1）新建

fn createElement(标签名) 创建元素节点
fn setAttribute(name,value) 直接设置属性true包含子节点
fn cloneNode(true、false) false 不包含

（2）插入

拼接节点 fn appendChild()
插入节点 fn insertBefore(new,old)

3、DOM删除操作

（1）删除子节点

fn removeChild();

（2）删除属性节点

fn removeAttributeNode()

4、DOM修改操作

（1）替换节点

fn replaceChild(new,old)
注意：需要用父级来调用

（2）修改属性值

fn setAttribute()

5、DOM查找操作

6、代码演示

<!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>DOM</title>
    <style>
        .ok {
            color:  red;
        }
        .yes {
            font-size: 36px;
        }
        .no {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <!-- <div id="wrap">
        <p id="zy" class="ok">赵云</p>
        <p id="dw">典韦</p>
        <p id="mc">马超</p>
    </div> -->

    <ul>
        <li>两个黄鹂鸣翠柳</li>
        <li class="ok yes">一行白鹭上青天</li>
        <li>窗含西岭千秋雪</li>
        <li>门泊东吴万里船</li>
    </ul>
</body>
<script>

    var dWrap = document.getElementById("wrap");

    // 1. 增加
    var p1 = document.createElement("p");
    p1.innerHTML = "诸葛亮";
    // 将p1放在指定位置
    dWrap.appendChild(p1);

    var arr = ["诸葛亮","司马懿","郭嘉"];
    for (var i=0; i<arr.length; i++) {//创建p标签
        var p = document.createElement("p");
        p.innerHTML = arr[i];
        dWrap.appendChild(p);
    }
	
	// eg:将荀彧插入到诸葛亮前面

    // 获取诸葛亮的p标签
    var pZhuge = document.getElementsByTagName("p")[0];
	// 设置id、class等属性
    pZhuge.setAttribute("id","zg");
    pZhuge.setAttribute("class","ok");
	// 同作用：
    // pZhuge.id = "zg";
    // pZhuge.className = "ok";

    /* pZhuge.myname = "zhang";
     通过setAttribute设置的自定义属性通过点语法是不能调用的
    pZhuge.setAttribute("myname","zhang");
    console.log(pZhuge);
    console.log(pZhuge.getAttribute("myname"))*/

    var p = document.createElement("p");
    p.innerHTML = "荀彧";
    dWrap.insertBefore(p, pZhuge);
     // 克隆节点dWrap
    var d = dWrap.cloneNode(false);
    console.log(d);

    // 2. 删除
	// 标签获取
    var dDw = document.getElementById("dw");
    // 删除子节点
    dWrap.removeChild(dDw);

    //删除属性节点 eg:
	// 获取属性节点
    var dZy = document.getElementById("zy");
    var c = dZy.getAttributeNode("class");
    //删除属性节点
    dZy.removeAttributeNode(c);

    // 3. 修改
    var dDw = document.getElementById("dw");
    var p = document.createElement("p");
    p.innerHTML = "关羽";
	// 替换
    dWrap.replaceChild(p, dDw);


    // 4. 查找
    // ES6新方法
    var dWrap2 = document.querySelector("#wrap");
	
    var dDw = document.querySelector("#wrap p:nth-of-type(2)");
	
    var dDw = document.querySelectorAll("p")[1];
	
    console.log(dDw)
// eg:
    var ul = document.querySelector("ul");
    ul.firstElementChild.style.color = "yellow";
    ul.lastElementChild.style.color = "cyan";

    var li1 = document.querySelectorAll("li")[0];
    
    var li2 = li1.nextElementSibling;
    // 兼容写法
    // var li2 = li1.nextSibling.nodeType === 1 ? li1.nextSibling : li1.nextElementSibling;
    console.log(li2);
    li2.style.color = "red";
    li2.className = "ok yes";

    // console.log(li2.parentNode)

    // 获取所有子节点
    var lis = ul.children   推荐
    var lis = ul.childNodes;
    console.log(lis);

    // 操作
	// 通过classList控制样式
    var li2 = document.querySelector("ul li:nth-of-type(2)");
    li2.classList.add("no");
    li2.classList.remove("yes");
    li2.classList.replace("yes", "no");
	//判断是否包含OK
    console.log(li2.classList.contains("ok"))
    li2.classList.toggle("no", false);
    li2.classList.toggle("no", false);
</script>
</html>

7.案例见CSDN文件夹

手风琴效果、瀑布流、拓展版瀑布流、选字游戏、购物车、滑块效果、选项卡、百度换肤、仿微博添加推荐标签、轮播图、关灯游戏。

（三）BOM操作（浏览器、对象、模型）

1、BOM简介

获取浏览器提供的一些列信息

2、window对象

（1）window是浏览器留给js的大入口，全局变量是window的属性，全局函数是window的方法。

（2）窗口位置：

screenLeft返回浏览器窗口左上角相对于当前屏幕左上角的水平距离,不兼容FF浏览器。
screenTop返回浏览器窗口左上角相对于当前屏幕左上角的垂直距离,不兼容FF浏览器。
screenX功能同screenLeft，兼容FF。
screenY功能同screenTop，兼容FF。

（FF为Firefox）

（3）窗口大小（IE9以下不兼容）：

innerWidth返回网页在当前窗口中可见部分的宽度,包含滚动条宽度。
innerHeight返回网页在当前窗口中可见部分的高度,包含滚动条高度。

outerWidth返回浏览器窗口宽度,包含浏览器菜单和边框。
outerHeight返回浏览器窗口高度,包含浏览器菜单和边框。

（4）打开窗口

window.open()：

打开一个新的浏览器窗口,接受四个参数
(URL/打开方式/窗口参数/是否取代当前页面历史记录的布尔值)

_blank:在新窗口中浏览新的页面。
_self:在同一个窗口打开新的页面。
_parent:在父窗口中打开新的页面。（页面中使用框架才有用）
_top:以整个浏览器作为窗口显示新页面。（突破了页面框架的限制）

第三个参数示例 width=500,height=500

window.close()：
关闭新打开的窗口(仅限open()打开的窗口)

3、scree（屏幕信息）和history（历史信息）

（1）scree（屏幕信息）

功能:包含显示设备的信息。

个别属性列举:
screen.height、screen.width返回设备的分辨率。
screen.availWidth、screen.availHeight返回屏幕可用宽高,值为屏幕的实际大小减去操作系统某些功能占据的空间,如系统任务栏。

（2）history（历史信息）

功能:保存用户上网的历史记录。

方法、属性:
go()在用户历史记录中任意跳转,接受一个参数,表示前后跳转页数的整数值(后退一页-1，前进一页1),也可传字符串参数,跳转到第一个包含该字符串的位置。
back()后退。
forward()前进。
length属性保存历史记录的数量。

4、location

（1）功能：保存当前文档信息、将URL解析为独立片段。

（2）属性：

href 返回当前页面完整的URL、修改这个属性，即跳转新页面。
hash 返回URL中的hash(#号后跟零或多个字符)。
host 返回服务器名称和端口号。
port 返回服务器端口号。
pathname 返回URL中的目录和文件名。
hostname 返回不带端口号的服务器名称。
protocol 返回页面使用的协议(http://或 https://)。
search 返回URL的查询字符串,字符串以问号开头。

5、navigator（浏览器状态信息）

提供一系列属性用于检测浏览器

onLine：是否联网

userAgent：浏览器嗅探、检测浏览器的类型

6、判断移动端

<!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>demo</title>
    <style>
        .blue {
            background-color: deepskyblue;
        }
        .red {
            background-color: tomato;
        }
    </style>
</head>
<body class="blue">
    
</body>
<script>    
    // 移动端下  屏幕是 红色的
    if (isMobile()) {
        document.body.className = "red";
    }


    //判断是否是移动端
    function isMobile() {
        var arr = ["iOS", "iPhone", "iPad", "Android"];
        var is = false;
        for (var i=0; i<arr.length; i++) {
            if (navigator.userAgent.indexOf(arr[i]) != -1) {
                is = true;
                break;
            }
        }
        return is;
    }
</script>
</html>

（四）事件操作

1、UI事件

（1）load当页面完全加载后在window上触发图片也可以触发load事件。

（2）resize当窗口大小变化时在window上触发。
(除火狐外其他浏览器会在浏览器窗口变化1像素时就触发事件,而火狐是在用户停止调整窗口大小时才触发。不建议在此事件中加入大计算量代码,因为可能频繁执行,导致浏览器速度变慢。另外窗口最大最小化也会触发事件)

（3）scroll当用户滚动带滚动条的元素中的内容时,在该元素上面触发。(overflow:scroll)

2、鼠标事件

（1）事件类型：

onclick(单击)

ondblclick(双击)
oncontextmenu(右键菜单)
onmouseover(移入)
onmouseout(移出)
onmouseenter(移入)
onmouseleave(移出)
onmousedown(按下)

onmouseup(抬起)
onmousemove(移动)

<script>
    var d = document.querySelector("div");
    var sec = document.querySelector("section");

    // 只读属性
    // offsetLeft  offsetTop  获取标签的左侧 顶部偏移量
    // offsetWidth  offsetHeight  获取元素的宽度和高度

    d.onclick = function(e) {
        // e 事件对象 包含了该事件所有的相关信息
        // console.log("看我一记左勾拳");
        // console.log(e.clientX, e.clientY)
        // 获取点击点在标签内部的坐标
        var x = e.clientX - this.offsetLeft;
        var y = e.clientY - this.offsetTop;
        console.log(x, y);
    }
    // d.ondblclick = function() {
    //     console.log("双击")
    // }
    // d.oncontextmenu = function() {
    //     console.log("单击")
    // }

    // d.onmouseover = function() {
    //     console.log("over")
    // }
    // d.onmouseout = function() {
    //     console.log("out")
    // }
    // // over与out在指针进入子级时会进行触发，无特殊要求，建议使用enter和leave
    // d.onmouseenter = function() {
    //     console.log("enter")
    // }
    // d.onmouseleave = function() {
    //     console.log("leave")
    // }
    // d.onmousedown = function() {
    //     console.log("down");
    // }
    // d.onmouseup = function() {
    //     console.log("up");
    // }
    // d.onmousemove = function() {
    //     console.log("move");
    // }
</script>

（2）坐标位置（先学习事件对象）：

screenX在屏幕中的x坐标。

screenY在屏幕中的y坐标。

相对于body：
clientX表示事件发生时鼠标指针在视口中的水平坐标(不包含滚动距离)；
clientY在视口中的垂直坐标；

IE没有以下两个属性：
pageX在页面中的x坐标(包含滚动距离)；
pageY在页面中的y坐标；

获取点击目标的坐标(有兼容性)：offsetX，offsetY

3、键盘事件

keydown当用户按下键盘上的任意键时触发,按住不动将重复触发。
keyup 当用户释放键盘上的键时触发。
event.keyCode键码。

keypress当用户按下键盘上的字符键时触发,按住不动将重复触发。
event.charCode键码(ASCII编码形式展示,需通过String.fromCharCodel()方法转换,IE9以下不支持)。
shiftkey、altkey、ctrlkey。

<!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>key</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script>
    var d = document.querySelector("div");
    // window.onkeydown = function(e) {
        // if (e.keyCode == 37) {
        //     d.style.left = d.offsetLeft - 5 + 'px';
        // } else if (e.keyCode == 38) {
        //     d.style.top = d.offsetTop - 5 + 'px';
        // } else if (e.keyCode == 39) {
        //     d.style.left = d.offsetLeft + 5 + 'px';
        // } else if (e.keyCode == 40) {
        //     d.style.top = d.offsetTop + 5 + 'px';
        // }
    // }
    // 问题：
    // 1. 先顿一下
    // 2. 不流畅
    // 3. 不支持2个键位同时按下

    // 如果要用键盘控制标签移动，需要用到定时器+状态 

    // 状态
    var isLeft = false;
    var isUp = false;
    var isRight = false;
    var isDown = false;

    //定时器
    var timer = null;

    timer = setInterval(function() {
        if (isLeft) {
            d.style.left = d.offsetLeft - 5 + 'px';
        }
        if (isRight) {
            d.style.left = d.offsetLeft + 5 + 'px';
        }
        if (isUp) {
            d.style.top = d.offsetTop - 5 + 'px';
        }
        if (isDown) {
            d.style.top = d.offsetTop + 5 + 'px';
        }
    }, 30)

    //键盘事件只改变状态
    window.onkeydown = function(e) {
        if (e.keyCode == 37) {
            isLeft = true;
        } else if (e.keyCode == 38) {
            isUp = true;
        } else if (e.keyCode == 39) {
            isRight = true;
        } else if (e.keyCode == 40) {
            isDown = true;
        }
    }
    window.onkeyup = function(e) {
        if (e.keyCode == 37) {
            isLeft = false;
        } else if (e.keyCode == 38) {
            isUp = false;
        } else if (e.keyCode == 39) {
            isRight = false;
        } else if (e.keyCode == 40) {
            isDown = false;
        }
    }
</script>
</html>

4、表单事件

focus元素获得焦点时触发；
blur元素失去焦点时触发；
submit()提交表单；
change 当input、textarea元素value值改变且失去焦点时、select元素选项改变时触发；
input当input、textarea元素value值改变同步触发事件,select元素选项改变时触发(有兼容问题,IE:onpropertychange，非E:oninput)

<!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>
</head>
<body>
    <button onclick="tj()">我的提交</button>
    <form action="https://www.csdn.net/">
        <input id="ipt" type="checkbox" name="mine">
        <input type="submit">
    </form>
</body>
<script>
    var ipt = document.getElementById("ipt");
    var f = document.querySelector("form");
    // 获取焦点
    ipt.onfocus = function() {
        console.log("获取焦点")
    }

    // 失去焦点
    ipt.onblur = function() {
        console.log("失去焦点")
    }

    // 提交
    function tj() {
        f.submit();
    }

    // change 内容修改，并失去焦点
    ipt.onchange = function() {
        console.log("change")
    }
    // input 内容修改 
    ipt.oninput = function() {
        console.log("input")
    }
</script>
</html>

5、阻止冒泡

同一个事件会从子级传递向父级，称之为事件冒泡，所以有的时候我们需要阻止冒泡。

fn stopPropagation() 非IE
pro cancelBubble = true lE

<!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>
        div {
            width: 100px;
            height: 100px;
            margin-left: 120px;
        }
    </style>
</head>
<body>
    <div class="d1" style="background-color: pink;">
        <div class="d2" style="background-color: tomato;">
            <div class="d3" style="background-color: cyan;"></div>
        </div>
    </div>
</body>
<script>
    var d1 = document.querySelector(".d1");
    var d2 = document.querySelector(".d2");
    var d3 = document.querySelector(".d3");
    d1.onclick = function() {
        console.log("d1")
    }
    d2.onclick = function() {
        console.log("d2")
    }
    d3.onclick = function(e) {
        console.log("d3")
        //阻止冒泡
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    }
    document.onclick = function() {
        console.log("document")
    }
    window.onclick = function() {
        console.log("window")
    }
</script>
</html>

6、阻止默认

比如右键菜单栏、P标签复制文本值等。

fn preventDefault() 非IE
pro returnValue = true IE

<!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>
</head>
<body>
    <p>床前明月光</p>
</body>
<script>
    window.oncontextmenu = function(e) {
        // 阻止默认事件
        e.preventDefault();
    }

    var p = document.querySelector("p");
    p.onmousedown = function(e) {
        e.preventDefault();
    }
</script>
</html>

7、dom0与dom2

<script>
    // dom0
    window.onclick = function() {
        alert(1)
    }
    window.onclick = function() {
        alert(2)
    }

    // dom2
    // addEventListener(事件类型，函数，是否捕获)
    function ok() {
        alert(1);
    }
    window.addEventListener("click", ok, false)
    window.addEventListener("click", function() {
        alert(2);
    }, false)

    window.removeEventListener("click", ok)
</script>

8、捕获与冒泡

同一个事件，由子级传递给父级称之为事件冒泡。
同一个事件，由父级传递给子级称之为事件捕获。

<!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>
        div {
            /* width: 100px;
            height: 100px;
            margin-left: 120px; */
            padding: 50px;
        }
    </style>
</head>
<body>
    <div class="d1" style="background-color: pink;">
        <div class="d2" style="background-color: tomato;">
            <div class="d3" style="background-color: cyan;"></div>
        </div>
    </div>
</body>
<script>
    var d1 = document.querySelector(".d1");
    var d2 = document.querySelector(".d2");
    var d3 = document.querySelector(".d3");
    
    d1.addEventListener("click", function() {
        console.log("d1");
    }, true);
    d2.addEventListener("click", function() {
        console.log("d2");
    }, true);
    d3.addEventListener("click", function() {
        console.log("d3");
    }, true);

    // 同一个事件，由子级传递给父级称之为事件冒泡
    // 同一个事件，由父级传递给子级称之为事件捕获
</script>
</html>

9、事件委托

<!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>
</head>
<body>
    <div>
        <button>item1</button>
        <button>item2</button>
        <button>item3</button>
        <button>item4</button>
        <button>item5</button>
    </div>
</body>
<script>
    // 一般思路
    // var buts = document.querySelectorAll("button");
    // for (var i=0; i<buts.length; i++) {
    //     buts[i].onclick = function() {
    //         console.log(this.innerHTML)
    //     }
    // }


    // 事件委托
    // 自己不想做的事情委托给别人做
    // 子级的事件全部由父级实现，通过e.target来区分
    var div = document.querySelector("div");
    div.onclick = function(e) {
        console.log(e.target.innerHTML)
    }
</script>
</html>

10、例见CSDN文件夹

放大镜、拖拽。

二、补充知识点

（一）数组

1、数组转字符串join反之solit

2、在数据前面添加新元素unshift

（二）JS

1、平滑过渡（设置延迟）

        li {
            width: 80px;
            height: 400px;
            float: left;
            background-size: cover;
            background-position: center center;
            /* 过渡 */
            transition: .3s;
        }
        li p {
            width: 80px;
            height: 400px;
            background-color: rgba(255,255,255,.5);
            color: white;
            font-size: 60px;
        }

2、只读属性
offsetLeft offsetTop 获取标签的左侧顶部偏移量
offsetWidth offsetHeight 获取元素的宽度和高度

3、快捷生成标签案例：<div>{item$}*5

4、opacity:.5 设置透明度

5、display:nono 隐藏

6、overflow:none 隐藏