操作BOM对象 Browser Object Model：浏览器对象模型windowwindow代表浏览器窗口window.alert("Hello World") undefined window.innerHeight 906 window.innerWidth 559 ……Navigator（不建议使用）Navigator封装了浏览器的信息navigator.appVersion "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36" navigator.userAgent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36" navigator.platform "Win32" ……注：一般情况下不使用navigator,存在被人为修改的隐患screen代表屏幕规格screen.width 1920 screen.height 1080locationlocation代表当前页面的URL信息host:"www.bing.com" href:"https://www.bing.com" protocol:"https:" reload:ƒ reload() //重新加载，刷新网页 //设置新的地址 location.assign('https://xxx.com')documentdocument代表当前的页面，HTML DOM文档树获取具体的文档树节点<dl id="test"> <dt>JavaScript</dt> <dd>demo01</dd> <dd>demo02</dd> </dl> <script> var dl = document.getElementById('test'); </script>获取cookiedocument.cookie劫持cookie原理：通过js恶意代码在服务器端可以设置cookie：httpOnlyhistory（不建议使用）history代表浏览器的历史记录history.back() //后退 history.forward() //前进

面向对象编程（JavaScript） 原型对象var Student = { name: "孙笑川", age: 33, run:function () { console.log(this.name + "run ...") } } var sun = { name: "sun" } //原型对象 sun.__proto__ = Student;function Student(name){ this.name = name; } //给Student新增一个方法 Student.prototype.hello = function () { alert("hello") }class 继承classs关键字在ES6引入1、定义一个类class Student{ constructor(name){ this.name = name; } hello(){ alert("hello") } } var sun = new Student("sun"); sun.hello()2、继承class Student{ constructor(name){ this.name = name; } hello(){ alert("hello") } } class highStudent extends Student{ constructor(name,score){ super(name); this.score = score; } myScore(){ alert("100分！") } } var sun = new highStudent("sun",100);本质：查看对象原型原型链

内部对象（JavaScript） 标准对象typeof 123 "number" typeof '123' "string" typeof NaN "number" typeof true "boolean" typeof [] "object" typeof {} "object" typeof Math.abs "function" typeof undefined "undefined"1.1 Date基本使用var now = new Date(); now.getFullYear(); //年 now.getMonth(); //月 now.getDate(); //日 now.getDay(); //星期几 now.getHours(); //时 now.getMinutes(); //分 now.getSeconds(); //秒 now.getTime(); //时间戳，从1970-01-01 0:00:00到现在的毫秒数（全世界统一） console.log(new Date(1607479949417)); //时间戳转为当前时间转换now.toLocaleString //此处调用的是一个方法 ƒ toLocaleString() { [native code] } now.toLocaleString() "2020/12/9 上午10:16:59" now.toGMTString() "Wed, 09 Dec 2020 02:16:59 GMT"1.2 JSONjson是什么是一种轻量级的数据交换格式层次结构简洁清晰易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率格式：对象都用 {}数组都用 []所有的键值对都用 key:valuejson字符串和js对象的转化：var user = { name: "孙笑川", age: 33, sex: '男' } //对象转化为json字符串 {"name":"孙笑川","age":33,"sex":"男"} var jsonUser = JSON.stringify(user); //json字符串转化为对象 参数为json字符串 var obj = JSON.parse('{"name":"孙笑川","age":33,"sex":"男"}');1.3 Ajax原生的js写法 xhrJQuery封装好的方法 $("name").ajax("")axios 请求

函数（JavaScript） 1.1 定义函数定义方式一绝对值函数function test(x){ if(x>=0){ return x; }else{ return -x; } } //一旦执行到return代表函数结束，返回结果 //如果没有执行return，函数执行完也会返回结果undefined定义方式二var test = funxtion(x){ //匿名函数，可以把结果赋值给test，通过test调用函数 if(x>=0){ return x; }else{ return -x; } }调用函数test(10); //10 test(-10); //10参数问题：Javascript可以传任意个参数，也可以不传参数假设不存在参数，如何规避？var test = function (x) { //手动抛出异常来进行判断 if(typeof x!== 'number'){ throw 'Not a number'; } if (x>=0){ return x; }else { return -x; } }arguments代表传递进来的所有参数是一个数组var test = function (x) { console.log("x:"+x); for (var i = 0; i<arguments.length; i++){ console.log(arguments[i]); } if (x>=0){ return x; }else { return -x; } }arguments存在的问题：当需要使用多余的参数来进行附加操作时，需要排除已有的参数restES6之前的用法if(arguments.length>2){} for (var i = 2; i<arguments.length; i++){ ...... } }ES6引入的新特性，获取除了已定义的参数之外的所有参数function test(a,b,...rest) { console.log("a:"+a); console.log("b:"+b); console.log(rest); }rest只能写在最后面，必须用 ...rest 标识1.2 变量的作用域function test() { var x = 1; x = x + 1; } x = x + 2; //Uncaught ReferenceError: x is not defined变量x在函数体中声明，在函数体外不可以使用如果两个函数使用的相同的变量名，只要在函数内部，就不冲突内部函数可以使用外部函数的成员，反之不行function test() { var x = 1; function test1() { var y = x + 1; //2 } var z = y + 1; //Uncaught ReferenceError: x is not defined }假设内部函数变量和外部函数变量重名function t() { var x = 1; function t1() { var x = '大写的一'; console.log('inner:'+x); //inner:大写的一 } console.log('outer:'+x); //outer:1 t1(); } t();注：函数查找变量从自身函数开始，由”内“向”外“查找，如果外部存在同名的函数变量，则内部函数会屏蔽外部函数的变量提升变量的作用域function t(){ var x = "abc" + y; console.log(x); var y = 'y'; }结果会报错：x undefinedjs执行引擎自动提升了y的声明，但是没有提升变量y的赋值function t(){ var y; var x = "abc" + y; console.log(x); y = 'y'; }注：所有的变量定义都放在函数的头部，便于代码维护全局函数//全局变量 var x = 1; function t(){ console.log(x); //1 } t(); console.log(x); //1全局对象windowvar x = 123; alert(x); alert(window.x); //默认所有的全局变量，都会自动绑定在winsow对象下alert() 这个函数本身也是一个window变量var x = '123'; window.alert(x); var old_alert = window.alert; window.alert = function (){ } window.alert(123); //失效 //恢复 window.alert = old_alert; window.alert(456);JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），如果没有在函数作用范围内找到，就会向外查找，如果在全局作用域中也没有找到，会报错ReferenceError。规范//唯一全局变量 var test = {}; //定义全局变量 test.name = '孙笑川'; test.add = function (a,b) { return a + b; }把自己的代码全部放入自己定义的唯一空间空间名字中，降低全局命名冲突的问题局部作用域 letfunction t() { for (var i = 0; i < 100; i++){ console.log(i); } console.log(i); //101 }ES6引入let关键字，解决局部作用域冲突问题function t() { for (let i = 0; i < 100; i++){ console.log(i); } console.log(i); //Uncaught ReferenceError: i is not defined }常量 const在ES6之前，全部用大写字母命名的变量就是常量var PI = '3.14'; console.log(PI); //3.14 PI = 'abc'; console.log(PI); //abc，值改变在ES6中引入关键字constconst PI = '3.14'; console.log(PI); PI = 'abc'; //TypeError: Assignment to constant variable console.log(PI);1.3 方法定义方法//将函数放在对象中 var test = { name: 'sun', birth: 1988, //方法 age: function () { var time = new Date().getFullYear(); return time-this.birth; } } //属性 test.name //调用方法 test.age()this代表什么？function getAge() { var time = new Date().getFullYear(); return time-this.birth; } var test = { name: 'sun', birth: 1988, age: getAge } test.age() //2020-1988 getAge() //NaNthis是无法指向的，默认指向调用它的对象apply在js中控制this的指向function getAge() { var time = new Date().getFullYear(); return time-this.birth; } var test = { name: 'sun', birth: 1988, age: getAge } getAge.apply(test,[]); //this指向了test，参数为空

数据类型（JavaScript） 1.1 字符串1、正常字符串使用单引号或双引号包裹2、转义字符 \\' \n \t \u4e2d \u#### Unicode编码 \x41 AscII码3、多行字符串<script> 'use strict' var msg = ` hello world test` </script>4、模板字符串<script> 'use strict' let name = "孙笑川"; let age = 30; let mgs = `你好,${name}` </script>5、字符串长度console.log(str.length)6、字符串的可变性，不可变7、大小写转换str.toUpperCase(); //大写 str.yoLowerCase(); //小写8、student.indexOf('t'); //在student字符串中，t是第几个元素 //第1个9、substring[a,b) //a <= str < b student.substring(1); //从第一个字符串截取到最后一个字符串 student.substring(1，3); //[1,3) 1.2 数组Array可以包含任意的数据类型var arr = [1,2,3,4,5,6]; //通过下边元素取值和赋值 arr[0]; arr[0] = 1;1、长度arr.length注：如果给arr.length赋值，数组的大小就会发生变化，如果赋值过小，数组里原本的元素就会丢失2、indexOf，通过元素获得下标索引arr.indexOf(2);注：字符串的"1"和数字 1 是不同的3、slice() 截取Array的一部分，返回一个新的数组，用法类似于substring4、push()、pop() 尾部push：压入元素到尾部 pop：弹出尾部的元素5、unshift()、shift() 头部unshift：压入元素到头部 shift：弹出头部的元素6、排序 sort()arr (3) [2, 1, 3] arr.sort() (3) [1, 2, 3]7、元素反转 reverse()8、拼接 concat()(3) [3, 2, 1] arr.concat(["A","B","C"]) (6) [3, 2, 1, "A", "B", "C"] arr (3) [3, 2, 1]注：concat()并没有修改原来的数组，只是返回了一个新的数组9、连接符 joinarr (3) [3, 2, 1] arr.join('-') "3-2-1"打印拼接数组，使用特定的字符串连接10、多维数组arr = [[1,2],[3,4],[5,6]]; arr[1][0] 31.3 对象var 对象名 = { 属性名：属性值, 属性名：属性值, 属性名：属性值 } var person = { name:"sun", age:3, address:"kunming" }在js中，{……}表示一个对象，以键值对的形式描述属性 xxx:xxx，每一个属性末尾以逗号隔开，最后一个属性不加逗号==JavaScript中所有的键都是字符串，值是任意对象==1、对象赋值person.name = "yaoshui" "yaoshui" person.name "yaoshui"2、使用一个不存在的对象属性，不会报错person.email undefined3、动态的删减属性 deletedelete person.name true person4、动态的添加，直接给新的属性添加值即可person.email = "xxx@qq.com"; "xxx@qq.com" person5、判断属性值是否在对象中 xxx in xxx'age' in person true //继承 'toString' in person true6、判断一个属性是否是对象本身就存在的person.hasOwnProperty('toString') false person.hasOwnProperty('age') true1.4 流程控制if判断var age = 3; if(age)>3{ alert("哈哈"); }else { alert("哭哭"); }while循环，避免程序死循环var age = 3; while(age<100){ age = age +1; console.log(age); }for循环for(let i = 0; i < 100; i++){ console.log(i); }forEach循环ES5.1引入var age = [1,2,3,4,5]; //函数 age.forEach(function(value){ console.log(value); })for...in<script> 'use strict' var age = [1,2,3,4,5,6]; /* * for(Type str:el) java * for(var index in object){} javascript */ for (var num in age){ if (age.hasOwnProperty(num)){ console.log(age[num]); } } </script>1.5 Map和SetES6的新特性1、Map<script> 'use strict' //ES6 //统计学生成绩、名字 // var name = ["孙笑川","药水哥","Giao哥"]; // var score = [100,99,98]; var map = new Map([['孙笑川',100],["药水哥",99],["Giao哥",98]]); var name = map.get("孙笑川"); //通过key获得value map.delete("药水哥"); //删除 map.set("admin",101); //新增或修改 console.log(name); </script>2、Set：无序不重复的集合set.add(2); //添加 set.delete(1); //删除 console.log(set.has(3)); //是否包含某个元素1.6 iteratorES6新特性1、遍历数组//通过for of实现便利数组 //for in是打印输出下标 var arr = [1,2,3,4]; for (let values of arr){ console.log(values); }2、遍历Mapvar map = new Map([['孙笑川',100],["药水哥",99],["Giao哥",98]]); for (let values of map){ console.log(values); }3、遍历Setvar set = new Set([3,1,7,7,9,7]); for (let values of set){ console.log(values); }

JavaScript快速入门 1.1 引入JavaScript1、内部标签<script> //…… </script>2、外部引入test.js//……test.html<script src="js/test.js"></script>测试代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script> alert('Hello World'); </script> --> <!--外部引入 注意：script标签必须成对出现，不能写成自闭和标签的形式 --> <script src="js/test.js"></script> <!--JavaScript不用显示定义，也默认是JavaScript类型--> <script type="text/javascript"></script> </head> <body> </body> </html>1.2 基本语法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // 1.定义变量 变量类型 变量名 = 变量值; var num = -1; //alert(num); // 2.条件控制 if (num>1){ alert("true"); }else { alert("false"); } // console.log(num); 在浏览器的控制台打印变量 </script> </head> <body> </body> </html>浏览器调试：1.3 数据类型数值，文本，图形，音频，视频……==变量==var person = 1;==number==js不区分小数和整数，Number123 //整数 123.1 //小数 1.123e //科学计数法 -99 //负数 NaN //not a number Infinity //表示无限大==字符串=='abc' "abc"==布尔值==true，false==逻辑运算==&& 两个都为真，结果为真 || 一个为真，结果为真 ! 取反==比较运算符=== 赋值 == 等于（类型不一样，值一样，也会判断为true） === 绝对等于（类型一样，值一样，结果为true）这是js的一个缺陷注：NaN===NaN --->false，NaN与所有的数值都不相等，包括自己只能通过isNaN(NaN)来判断这个数是否是NaN浮点数问题:console.log((1/3)===(1-2/3)); --->false尽量避免使用浮点数进行运算，存在精度问题==null和undefined==null 空undefined 未定义==数组==在Java中数值必须是相同类型的对象，而js中不需要这样~//保证代码的可读性，尽量使用[] var arr = [1,2,3,null,'hello',false];数组中，如果取的数组下标越界，控制台会提示undefined==对象==定义数组是中括号[]，对象是大括号{}~//Person p = new Person(1,2,3……) var person = { name: '孙笑川', age: 30, tags:['Java','js','css','...'] }每个属性之间使用逗号隔开，末尾不需要逗号取值：person.name > "孙笑川" person.age > 301.4 严格检查模式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 前提：IDEA需设置支持ES6语法 'use strict'; 严格检查模式，预防JavaScript的随意性产生的一些问题 且需写在JavaScript的第一行 局部变量建议都使用let去定义 --> <script> 'use strict'; //局部变量 let i = 1; //ES 6 </script> </head> <body> </body> </html>

定位 5.1 相对定位<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <!--相对定位： 相对于自己原来的位置进行偏移 --> <style> body{ padding: 20px; } div{ margin: 10px; padding: 5px; font-size: 18px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; } #first{ background: #5f85ff; border: 1px dashed orange; position: relative; top: -10px; left: 20px; } #second{ background: #21D4FD; border: 1px dashed yellowgreen; } #third{ background: #ff23bd; border: 1px dashed limegreen; position: relative; bottom: -10px; right: 20px; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>相对定位：position: relative;相对于原来的位置，进行指定的偏移（它任然在标准文档流中，原来的位置会被保留） top: -10px; bottom: -10px; left: 20px; right: 20px;Demo：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 300px; height: 300px; padding: 10px; border: 1px solid red; } a{ width: 100px; height: 100px; text-decoration: none; background: lightblue; line-height: 100px; text-align: center; color: white; display: block; } a:hover{ background: lightsalmon; } .a2,.a4{ position: relative; left: 200px; top: -100px; } .a5{ position: relative; left: 100px; top: -300px; background: #5f85ff; } </style> </head> <body> <div id="box"> <a class="a1" href="#">链接1</a> <a class="a2" href="#">链接2</a> <a class="a3" href="#">链接3</a> <a class="a4" href="#">链接4</a> <a class="a5" href="#">链接5</a> </div> </body> </html>5.2 绝对定位基于xxx定位：上下左右1、在没有父级元素定位的情况下，相对于浏览器定位2、父级元素定位存在时，相对于父级元素进行偏移3、在父级元素范围内移动相对于父级或浏览器的位置进行指定偏移，绝对定位后，不在标准文档流中，原来的位置不被保留<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-size: 18px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; position: relative; } #first{ background: #5f85ff; border: 1px dashed orange; } #second{ background: #21D4FD; border: 1px dashed yellowgreen; position: absolute; left: 2px; } #third{ background: #ff23bd; border: 1px dashed limegreen; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>5.3 固定定位<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1200px; } /*绝对定位：相对于浏览器*/ div:nth-of-type(1){ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0; } /*fixed 固定定位*/ div:nth-of-type(2){ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html>5.4 z-index图层opacity: 0.5; 背景透明度#content{ width: 500px; padding: 0; margin: 0; overflow: hidden; font-size: 18px; line-height: 25px; border: 1px solid black; } ul,li{ padding: 0; margin: 0; list-style: none; } /*父级元素相对定位*/ #content ul{ position: relative; } .tipText,.tipBg{ position: absolute; width: 500px; height: 25px; top: 401px; } .tipText{ color: white; /*z-index: 999;*/ } .tipBg{ background: black; opacity: 0.5;/*背景透明度*/ filter: alpha(opacity=50);/*IE8及以前用filter代替opacity*/ }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="content"> <ul> <li><img src="image/bg.jpg" alt=""></li> <li class="tipText">强风吹拂！</li> <li class="tipBg"></li> <li>时间：16点31分</li> <li>地点：bilibili</li> </ul> </div> </body> </html>

浮动 1.1标准文档流块级元素：独占一行h1~h6,p,div,列表……行内元素：不独占一行span,a,img,strong……行内元素可以被包含在块级元素中，反之不行1.2 display<!-- block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联（可以有行内元素的属性），在一行 --> <style> div{ width: 100px; height: 100px; border: 1px solid red; display: inline; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style>注：display也是实现行内元素排列的一种方式，但通常情况下float使用较多。1.3 floatdiv{ margin: 10px; padding: 5px; } #father{ border: 1px solid red; } .layer01{ border: 1px solid red; display: inline-block; float: right; } .layer02{ border: 1px solid red; display: inline-block; float: right; } .layer03{ border: 1px solid red; display: inline-block; float: right; } .layer04{ border: 1px solid red; font-size: 16px; line-height: 24px; display: inline-block; float: right; }1.4 父级边框塌陷问题clear/* clear: right; 右侧不允许有浮动元素 clear: left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素 clear: none; */ .layer04{ border: 1px solid red; font-size: 16px; line-height: 24px; display: inline-block; float: right; clear: right; }解决方案：1、增加父级元素的高度#father{ border: 1px solid cornflowerblue; height: 800px; }2、增加一个空的div标签，清除浮动.clear{ clear: none; margin: 0; padding: 0; } <div class="clear"></div>3、overflow/*在父级元素中，增加一个 overflow: hidden；方法*/ #father{ border: 1px solid cornflowerblue; overflow: hidden; }4、在父类添加一个伪类：after#father:after{ content: ''; display: block; clear: both }小结：浮动元素后面增加空div简单，但需注意代码中尽量避免空div设置父元素的高度如果元素有固定高度，会被限制overflow在下拉的一些场景中避免使用父类添加一个伪类：after（推荐使用）display：方向不可以控制float：浮动起来后会脱离标准文档流，需解决父级边框塌陷问题