目录：
一、简介
二、第一个JS代码
三、数据类型
四、运算符
五、数据类型转换
六、 流程控制
七、常用内置对象
八、函数
九、DOM的事件操作
十、DOM
十一、JS中的面向对象（伪面向对象）
十二、定时器
十三、BOM（Browser Object Model，浏览器对象模型）
十四、client、offset、scroll系列
一、简介
1.
- 布兰登 • 艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的JavaScript。
- ECMAScript是一种由Ecma国际制定的标准。（Javascript标准）
- ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）
2. 组成
- ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
- DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
- BOM：操作浏览器部分功能的API。比如让浏览器自动滚动。
3. 特点
- （1）简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。
- （2）解释执行（解释语言）：事先不编译、逐行执行、无需进行严格的变量声明。
- （3）基于对象：内置大量现成对象，编写少量程序可以完成目标
二、第一个JS代码
1. <script type=”text/javascript”></script>标签中放了JS代码
<script>标签可以放在<body>和<head>部分中
2. 语法规则
1） JavaScript对换行、缩进、空格不敏感。
ps：每一条语句末尾要加上分号，为了程序今后要压缩
2） 所有的符号，都是英语的。比如括号、引号、分号。
3） 单行注释： //
多行注释： /* */
3. 网页中输出信息
1） 弹出警告框：alert("")
2） 控制台输出：console.log("")
3） 用户输入：prompt()语句——弹出能够让用户输入的对话框。
<script type="text/javascript">
var a = prompt('今天是什么天气？');
console.log(a);
</script>
- prompt()语句中，用户不管输入什么内容，都是字符串
4） 直接量：数字和字符串
“直接量”即常量，也称为“字面量”
4. 变量
1） 变量的定义和赋值 — *** let定义局部变量
var a = 100; ——变量提升：只要var声明了变量，就会把变量提到上面
- var就是一个关键字，用来定义变量（在JavaScript中，永远都是用var来定义变量），等号表示赋值，
- const定义常量，不可修改！
2） 命名：
只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。
3） 变量类型： typeof 变量 —获取变量的类型
- 数值型：number
在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的
- 字符串型：string
- 连字符和加号的区别“+”：如果两边都是数值，此时是加，否则就是连字符
console.log("我" + "爱" + "你"); //连字符，把三个独立的汉字，连接在一起了
console.log("我+爱+你"); //原样输出
console.log(1+2+3); //输出6
一个数值和一个字符串“+”的时候，会自动转成字符串拼接
一个数值和一个字符串“-”的时候，会自动转成数值计算
4） 变量格式转换
parseInt(“5”); 字符串转数字（parseInt()可以将字符串转数字。parse表示“转换”，Int表示“整数”（注意Int的拼写））
- 特性：
- 带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。例如：
console.log(parseInt("2018你真帅！！"); //2018
- 自动带有截断小数的功能：取整，不四舍五入。
var a = parseInt(5.8) + parseInt(4.7);
console.log(a); // 9
var a = parseInt(5.8 + 4.7);
console.log(a); // 10
三、数据类型
1. 基本数据类型
1） number（数字） var a1 = 123
var a2 = 5/0 => Infinity 无限大
2） string（字符串） 引号中的任意文本
3） boolean（布尔值） true/false
4） null 空对象
5） undefind 变量未定义
2. 引用数据类型
Function
Object
Arrray
String
Date
四、运算符
① var a = 5
- var x = a++ => x = 5,a = 6 (先将a=5赋值给x，然后a++，对a赋值)
- var x = ++a => x = 6,a = 6 (先++a，在将a的值赋给x)
- var x = a-- => x = 5,a = 4
- var x = --a => x = 4,a = 4
②
== 等于
=== 等同于（值和类型都相等）
!= 不等于
!== 不等同于（值和类型有一个不相等，或两个都不相等）
③
字符串拼接+字符串运算 特殊情况
- 不能对字符串进行+运算 只能拼接
var b1 = 'one';
var b2 = 'two';
// NaN. ==== not a number 是number类型
字符串拼接： `${变量名}` 反引号
var str = `内容${name}内容`
五、数据类型转换
1. 数值 --> 字符串
- 隐式转换
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
console.log(typeof n3);
- 强制类型转换String(),toString()
- var str1 = String(n1);
console.log(typeof str1);
- var num = 234;
console.log(num.toString())
2. 字符串 --》 数值
var stringNum = '789.123wadjhkd';
var num2 = Number(stringNum);
console.log(num2) //——》NaN
// parseInt()可以解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum)) //——》789
console.log(parseFloat(stringNum)); //——》789.123
3. 任何数据类型都可以转换为boolean类型
// 非0既真 Infinity——》True
NaN，undifind，null——》false
六、 流程控制
1. if 、if-else、if-else if-else
var ji = 20;
if(ji >= 20){
console.log('恭喜你，吃鸡成功，大吉大利')
}
alert('alex');//下面的代码还会执行
格式：
if (true) {
//执行操作
}else if(true){
//满足条件执行
}else if(true){
//满足条件执行
}else{
//满足条件执行
}
2. 逻辑与&&、逻辑或||
//代码1.模拟 如果总分 >400 并且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
if(sum>400 && math>90){
console.log('清华大学录入成功')
}else{
alert('高考失利')
}
//代码2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入
//逻辑或 只有有一个条件成立的时候 才成立
if(sum>500 || english>85){
alert('被复旦大学录入')
}else{
alert('高考又失利了')
}
3. switch
switch(n){
case 1:
执行代码块1
break;
case 'better':
执行代码块2
break;
default:
执行代码块3（与case1和case2不同时执行的代码块）
首先设置表达式n（通常是一个变量），n的值与每个case的值比较，如匹配，则执行case关联的代码，break阻止代码自动向下一个case执行
实例： 显示今天的星期名称
var d = new Date().getDay();
swith(d){
case 0：x = "今天是星期日"; break;
case 1：x = "今天是星期一"; break;
case 2：x = "今天是星期二"; break;
.......
}
4. while循环
循环三步走：
1.初始化循环变量
2.判断循环条件
3.更新循环变量
var i = 1; //初始化循环变量
while(i<=9){ //判断循环条件
console.log(i);
i = i+1; //更新循环条件
}
5. do_while
在检查条件是否为真之前执行一次代码块，然后若条件为真的话，就重复这个循环
var i = 3;//初始化循环变量
do{
console.log(i)
i++;//更新循环条件
}while (i<10) //判断循环条件
6. for循环
for(var i = 1; i<=100; i++){
循环开始前执行 条件 代码块执行之后执行
if(i%2==0){
//是偶数
console.log(i)
}
}
7. 双重for循环
for(var i=1;i<=3;i++){
for(var j=0;j<6;j++){
document.write('*')
}
document.write('<br>')
// document—在浏览器上输出
}
七、常用内置对象
1. 数组Array
①.数组的创建方式
- 字面量方式创建 （推荐大家使用这种方式，简单粗暴）
var colors = ['red','color','yellow'];
- 使用构造函数（后面会讲）的方式创建 使用new关键词对构造函数进行创建对象
var colors2 = new Array();
②. 数组的赋值
var arr = []; //通过下标进行一一赋值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'
③. 数组的常用方法
- concat() 把几个数组合并成一个数组
var north = [1,2,3];
var south = ['1','2','3'];
var newCity = north.concat(south);
- join() 将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串
var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str); //98|78|76|100|0
- toString() 将数组转换成字符串
var str = score.toString();
console.log(str); //98,78,76,100,0
- slice(start,end); 返回数组的一段，左闭右开
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.slice(1,3);
console.log(newArr); //["李四", "王文"]
- pop 移除数组的最后一个元素
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.pop();
console.log(newArr); //["张三", "李四"，"王文"]
- push() 向数组最后添加一个元素
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.push('小马哥');
console.log(newArr); //["张三", "李四"，"王文"，"赵六"，"小马哥"]
- reverse() 翻转数组
var names = ['alex','xiaoma','tanhuang','angle'];
names.reverse(); //4.反转数组
console.log(names);
- sort对数组排序
var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names)； // ["alex", "angle", "tanhuang", "xiaoma"]
- unshift() 向数组第一个添加元素
- isArray() 判断是否为数组
布尔类型值 = Array.isArray(被检测的值) ;
2. 字符串String
常用方法：
- chartAt() 返回指定索引的位置的字符
var str = 'alex';
var charset = str.charAt(1);
console.log(charset); //l
- concat 返回字符串值，表示两个或多个字符串的拼接
var str1 = 'al';
var str2 = 'ex';
console.log(str1.concat(str2,str2)); //alexex
- replace(a,b) 将字符串a替换成字符串b
var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr); //123****755
- indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样
var str = 'alex';
console.log(str.indexOf('e')); //2
console.log(str.indexOf('p')); //-1
- slice(start，end) 左闭右开 分割字符串
var str = '小马哥';
console.log(str.slice(1,2)); //马
- split('a',1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.split('a')); //["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]
- substr(statr,end) 左闭右开
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.substr(0,4)); //我的天呢
- toLowerCase()转小写
var str = 'XIAOMAGE';
console.log(str.toLowerCase())； //xiaomage
- toUpperCase()转大写
var str = 'xiaomage';
console.log(str.toUpperCase());
- toFixed() 四舍五入
var num = 132.32522;
var newNum = num.toFixed(2)
console.log(newNum)
3. Date日期对象
创建日期对象 var myDate = new Date();
- getDate() 根据本地时间返回指定日期对象的月份中的第几天（1-31天）
- Date() 根据本地时间返回当天的日期和时间
- getMouth() 根据本地时间返回指定日期对象的月份(0-11)
- getFullYear() 根据本地时间返回指定日期对象的年份(四位数年份时返回四位数字)
- getDay() 根据本地时间返回指定日期对象的星期中的第几天（0-6）
- getHours() 根据本地时间返回指定日期对象的小时(0-23)
- getMinutes() 根据本地时间返回指定日期对象的分钟(0-59)
- getSeconds() 根据本地时间返回指定日期对象的秒数(0-59)
//创建日期对象
var myDate=new Date();
//获取一个月中的某一天
console.log(myDate.getDate());
//返回本地时间
console.log(myDate().toLocalString());//2018/5/27 下午10:36:23
4. Math 内置对象
var x = 1.234;
- Math.ceil() 向上取整，'天花板函数'
var a = Math.ceil(x); ———》 2
- Math.floor 向下取整，'地板函数'
- 求两个数的最大值和最小值
console.log(Math.max(2,5));//5
console.log(Math.min(2,5));//2
- 随机数 Math.random()
var ran = Math.random();
console.log(ran);[0,1)
- 取100-200之间的随机数
100 + Math.random() * (200 - 100)
- 背过公式：min - max之间的随机数： min+Math.random()*(max-min)
八、函数
- 将大量重复的语句写在函数里，需要的时候，可以直接调用函数，避免重复
- 简化编程，让编程模块化。
箭头函数：var func = x => x+1
console.log(func(5)) ——> 6
1. 定义：
function 函数名字(){
// 执行愉快
} 函数名命名和变量规定一样
函数名(); // 调用
- function：是一个关键字。中文是“函数”、“功能”。
- 函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。
- 参数：后面有一对小括号，里面是放参数用的。
- 大括号里面，是这个函数的语句。
2. 参数：形参和实参
(函数提升) sum(3,4); // 可以任意调用函数
sum("3",4);
sum("Hello","World");
//函数：求和
function sum(a, b) {
console.log(a + b);
}
3. 返回值
console.log(sum(3, 4));
//函数：求和
function sum(a, b) {
return a + b;
}
4. 匿名函数
var x = function(a,b){return a+b}
var z = x(4,3)
不需要函数名称，通过变量名调用
- 匿名自调用函数：(function(){var x = "Hello1";})();
5. 函数可以作为一个值调用
函数是对象
6. 伪数组 arguments
① arguments代表的是实参，只在函数中使用。
返回函数实参的个数：arguments.length
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b,c) {
console.log(arguments);
console.log(fn.length); //获取形参的个数
console.log(arguments.length); //获取实参的个数
}
② arguments可以修改元素，但不能改变数组的长短。
function fn(a,b) {
arguments[0] = 99; //将实参的第一个数改为99
arguments.push(8); //此方法不通过，因为无法增加元素
}
③ 清空数组的几种方式：
var array = [1,2,3,4,5,6];
array.splice(0); //方式1：删除数组中所有项目
array.length = 0; //方式1：length属性可以赋值
array = []; //方式3：推荐
7. 默认参数
若函数在调用时未提供隐式参数，参数会默认为undifind，但最好为参数设置一个默认值
function myFunction(x,y){y = y110;}
九、DOM的事件操作
1. 事件： JS是以事件驱动为核心的一门语言
2. 三要素： 事件源，事件，事件驱动程序
- 事件源： 引发后续事件的html标签
- 事件： js已经定义好了
事件名 说明
onclick 鼠标单击
ondblclick 鼠标双击
onkeyup 按下并释放键盘上的一个键时触发
onchange 文本内容或下拉菜单中的选项发生改变
onfocus 获得焦点，表示文本框等获得鼠标光标
onblur 失去焦点，表示文本框等失去鼠标光标
onmouseover 鼠标悬停，即鼠标停留在图片等的上方
onmouseout 鼠标移除，即离开图片等所在的区域
onload 网页文档加载事件
onunload 关闭网页时
onsubmit 表单提交事件
onreset 重置表单时
- 事件驱动程序：对样式和html的操作。也就是DOM
3. 书写步骤
① 获取事件源：document.getElementById(“box”);
② 绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
③ 书写事件驱动程序：关于DOM的操作
代码举例：
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、获取事件源
var div = document.getElementById("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
4. 获取事件源的方式（DOM节点的获取）
var div1 = document.getElementById("box1");
//方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div1");
//方式二：通过 标签名 获得 标签数组，所以有s
var arr2 = document.getElementsByClassName("hehe");
//方式三：通过 类名 获得 标签数组，所以有s
5. 绑定事件方式
① 直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>
② 先单独定义函数，再绑定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
③ 行内绑定
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
// 注意绑定时，是写的"fn()"，不是写的"fn"。
// 因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
6. 事件驱动程序
<style>
#box {
100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
//点击鼠标时，原本粉色的div变大了，背景变红了
oDiv.onclick = function () {
oDiv.style.width = "200px"; //属性值要写引号
oDiv.style.height = "200px";
oDiv.style.backgroundColor = "red"; //属性名是backgroundColor，不是background-Color
}
</script>
注：- 在js里写属性值时，要用引号
- 在js里写属性名时，是backgroundColor，在js中都写成驼峰体
7. onload事件
- 当页面加载（文本和图片）完毕的时候，触发onload事件。
举例：
<script type="text/javascript">
window.onload = function () {
console.log("小马哥"); //等页面加载完毕时，打印字符串
}
</script>
- js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。将js代码写在window.onload = function(){}可以预防使用标签在定义标签之前。
事件案例
1、京东顶部广告栏关闭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.top-banner{
/*position: relative;*/
background-color: rgb(230, 15, 82);
}
.top-banner .w{
1190px;
position: relative;
margin: 0 auto;
}
.top-banner .banner{
display: block;
100%;
height: 80px;
background: url('./close.jpg') no-repeat center 0;
}
.top-banner .close{
position: absolute;
right: 0;
top:0;
text-decoration: none;
color: white;
20px;
height: 20px;
line-height: 20px;
text-align: center;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="top-banner" id="topBanner">
<div class="w">
<a href="#" class="banner"></a>
<a href="#" class="close" id="closeBanner">x</a>
</div>
</div>
<script type="text/javascript">
// /需求：点击案例，隐藏盒子。
//思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
window.onload = function(){
// /1.获取事件源和相关元素
var closeBanner = document.getElementById('closeBanner');
var topBanner = document.getElementById('topBanner');
//2.绑定事件
closeBanner.onclick = function(){
//3.书写事件驱动程序
//类控制
//topBanner.className += ' hide';//保留原类名，添加新类名
//topBanner.className = 'hide';
//替换旧类名
topBanner.style.display = 'none';
}
}
</script>
</body>
</html>
京东
2.要求实现效果：当鼠标悬停在img上时，更换为另外一张图片；鼠标离开时，还原为本来的图片。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload页面加载完毕以后再执行此代码
window.onload = function () {
//需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseover = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseout = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd1.png";
}
}
</script>
</head>
<body>
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>
鼠标悬浮
十、DOM
1. 定义：
- DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
- DOM就是由节点组成的。
- 解析过程：
- HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
- DOM树（一切都是节点）
- 元素节点：HMTL标签。
- 文本节点：标签中的文字（比如标签之间的空格、换行）
- 属性节点：：标签的属性。
- 整个html文档就是一个文档节点。所有的节点都是Object。
2. DOM作用
- 找对象（元素节点）
- 设置元素的属性值
- 设置元素的样式
- 动态创建和删除元素
- 事件的触发响应：事件源、事件、事件的驱动程序
3. DOM节点的获取
- DOM节点的获取方式其实就是获取事件源的方式
- 操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点：
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div1"); //方式二：通过 标签名 获得 标签数组，所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
既然方式二、方式三获取的是标签数组，那么习惯性是先遍历之后再使用。
- 特殊情况：数组中的值只有1个。即便如此，这一个值也是包在数组里的。这个值的获取方式如下：
document.getElementsByTagName("div1")[0]; //取数组中的第一个元素
document.getElementsByClassName("hehe")[0]; //取数组中的第一个元素
4. DOM访问关系的获取
1） 获取父节点
调用者就是节点。一个节点只有一个父节点，调用方式就是：
2） 获取兄弟节点
① nextSibling：指的下一个节点（包括标签、空文档和换行节点）
② nextElementSibling：下一个元素节点（标签）
- 兼容可写成：
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
③ previousSibling：前一个节点（包括标签、空文档和换行节点）
④ previousElementSibling：前一个元素节点（标签）
- 兼容可写成：
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
⑤ 补充：获得任意一个兄弟节点：
- 节点自己.parentNode.children[index]; //随意得到兄弟节点
3） 获取单个子节点
① firstChild： 第一个子节点（包括标签、空文档和换行节点）
② firstElementChild：第一个子元素节点（标签）
- 兼容可写成：
第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
③ lastChild：最后一个子节点（包括标签、空文档和换行节点）
④ lastElementChild：最后一个子元素节点（标签）
- 兼容可写成：
最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild
4） 获取所有的子节点
① childNodes：标准属性、返回的是指定元素的子节点的集合
- 包括元素节点、所有属性、文本节点。是W3C的亲儿子。
用法：
子节点数组 = 父节点.childNodes; //获取所有节点。
② children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】
- 它只返回HTML节点，甚至不返回文本节点。
- 在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。
用法：（用的最多）
子节点数组 = 父节点.children; //获取所有节点。用的最多。
5）nodeType
- nodeType == 1 表示的是元素节点（标签） 。记住：元素就是标签。
- nodeType == 2 表示属性节点
- nodeType == 3 表示文本节点
5. DOM节点操作（重要）
1）创建节点：
新的标签(元素节点) = document.createElement("标签名");
var oDiv = document.createElement("div")
比如，如果我们想创建一个li标签，或者是创建一个不存在的adbc标签，可以这样做：
<script type="text/javascript">
var a1 = document.createElement("li"); //创建一个li标签
var a2 = document.createElement("adbc"); //创建一个不存在的标签
console.log(a1); // <li></li>
console.log(a2); // <adbc></adbc>
console.log(typeof a1); // object
console.log(typeof a2); // object
</script>
2）插入节点
① 父节点.appendChild(新的子节点); 追加子节点
② 父节点.insertBefore(新的子节点,作为参考的子节点);
- 在参考节点前插入一个新的节点。
- 如果参考节点为null，那么他将在父节点最后插入一个子节点。
3）删除节点
父节点.removeChild(子节点);
解释：用父节点删除子节点。必须要指定是删除哪个子节点。
删除自己这个节点：
node1.parentNode.removeChild(node1);
4）复制节点（克隆节点）
格式如下：
要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。
要复制的节点.cloneNode(true);
注意：
① 不带参数/带参数false：只复制节点本身，不复制子节点。
② 带参数true：既复制节点本身，也复制其所有的子节点。
5. 设置节点的属性
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
我们就统一拿下面这个标签来举例：
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
1） 获取节点的属性值
① 元素节点.属性; / 元素节点[属性];
举例：（获取节点的属性值）
<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
<script type="text/javascript">
var myNode = document.getElementsByTagName("img")[0];
console.log(myNode.src); //绝对路径
console.log(myNode.className); //注意，是className，不是class
console.log(myNode.title);
console.log("------------");
console.log(myNode["src"]);
console.log(myNode["className"]); //注意，是className，不是class
console.log(myNode["title"]);
</script>
</body>
② 元素节点.getAttribute("属性名称");（推荐）
例子：
console.log(myNode.getAttribute("src")); // 相对路径
console.log(myNode.getAttribute("class")); // 注意是class，不是className
console.log(myNode.getAttribute("title"));
- ①和②的区别在于：前者是直接操作标签，后者是把标签作为DOM节点。推荐方式2。
2）设置节点的属性值
①举例：（设置节点的属性值）
myNode.src = "images/2.jpg" //修改src的属性值
myNode.className = "image2-box"; //修改class的name
②（推荐）
元素节点.setAttribute(属性名, 新的属性值);
举例：（设置节点的属性值）
myNode.setAttribute("src","images/3.jpg");
myNode.setAttribute("class","image3-box");
myNode.setAttribute("id","你好");
3）删除节点的属性
格式：
元素节点.removeAttribute(属性名);
举例：（删除节点的属性）
myNode.removeAttribute("class");
myNode.removeAttribute("id");
补充：
innerHTML、 获取所有文本
innerText 、 获取标签和文本
value、 表单的value值，表单控件获取值和设置值
十一、JS中的面向对象（伪面向对象）
1. 使用Object或对象字面量创建对象
- JS中最基本创建对象的方式：
var student = new Object();
student.name = "easy";
student.age = "20";
这样，一个student对象就创建完毕，拥有2个属性name以及age，分别赋值为"easy"和20。
- 对象字面量方式创建对象：
var sutdent = {
name : "easy",
age : 20
};
2.工厂模式创建对象
function createStudent(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}
var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);
// student 是object类型
3.构造函数模式创建对象
① 对于任意函数，使用new操作符调用，那么它就是构造函数；不使用new操作符调用，那么它就是普通函数。
② 按照惯例，我们约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分二者。例如上面的new Array()，new Object()。
③ 使用new操作符调用构造函数时，会经历
(1)创建一个新对象；
(2)将构造函数作用域赋给新对象（使this指向该新对象）；
(3)执行构造函数代码；
(4)返回新对象；4个阶段。
ok，了解了构造函数和普通函数的区别之后，我们使用构造函数将工厂模式的函数重写，并添加一个方法属性：
function Student(name, age) {
this.name = name;
this.age = age;
this.alertName = function(){
alert(this.name)
};
}
function Fruit(name, color) {
this.name = name;
this.color = color;
this.alertName = function(){
alert(this.name)
};
}
这样我们再分别创建Student和Fruit的对象：
var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");
这时我们再来用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了：
alert(v1 instanceof Student); //true
alert(v2 instanceof Student); //false
alert(v1 instanceof Fruit); //false
alert(v2 instanceof Fruit); //true
alert(v1 instanceof Object); //true 任何对象均继承自Object
alert(v2 instanceof Object); //true 任何对象均继承自Object
4.原型的模式创建对象
function Student() {
this.name = 'easy';
this.age = 20;
}
Student.prototype.alertName = function(){
alert(this.name);
};
var stu1 = new Student();
var stu2 = new Student();
stu1.alertName(); //easy
stu2.alertName(); //easy
alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数
十二、定时器
1.setTimeOut() 只在指定时间后执行一次
/定时器 异步运行
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器
2.setInterval() 在指定时间为周期循环执行
/实时刷新 时间单位为毫秒
setInterval('refreshQuery()',8000);
/* 刷新查询 */
function refreshQuery(){
console.log('每8秒调一次')
}
十三、BOM（Browser Object Model，浏览器对象模型）
1. window对象是BOM的顶层(核心)对象，所有对象都是window的子对象。DOM是BOM的一部分。全局变量、自定义函数也是window对象的属性和方法。window对象下的属性和方法调用时，可以省略window。
2. 同源：端口号之前一模一样就是同源，不需要跨域
前端跨域： script，jsonp（get请求的跨域）
后端跨域： cors
3. 打开，关闭窗口
1）window。open(url,target)
url: 要打开的地址
target： 新窗口的位置。 _blank, _self, _parent父框架
2）close() 关闭
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--行间的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
<button>打开百度</button>
<button onclick="window.close()">关闭</button>
<button>关闭</button>
</body>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[1];
var closeBtn = document.getElementsByTagName('button')[3];
oBtn.onclick = function(){
//open('https://www.baidu.com')
//打开空白页面
open('about:blank',"_self")
}
closeBtn.onclick = function(){
if(confirm("是否关闭？")){
close();
}
}
</script>
</html>
4. location对象
location相当于浏览器地址栏，可以将url解析成独立的片段。
1）location对象的属性
location.href： 跳转
location.hash 返回url中#后面的内容，包含#
location.host 主机名，包括端口
location.hostname 主机名
pathname url中的路径部分
protocol 协议 一般是http、https
search 查询字符串
location.href属性举例：
举例1：点击盒子时，进行跳转。
<body>
<div>smyhvae</div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "http://www.baidu.com"; //点击div时，跳转到指定链接
// window.open("http://www.baidu.com","_blank"); //方式二
}
</script>
</body>
举例2：5秒后自动跳转到百度。
有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。
举例：
<script>
setTimeout(function () {
location.href = "http://www.baidu.com";
}, 5000);
</script>
2）方法：location.reload()：重新加载，全局刷新
setTimeout(function(){
//3秒之后让网页整个刷新
window.location.reload();
},3000)
5. navigator对象（获取客户端的一些信息）
例子：
console.log(navigator.userAgent);
console.log(navigator.platform);
6. history对象
1）后退：
history.back()
history.go(-1)：0是刷新
2）前进：
history.forward()
history.go(1)
十四、client、offset、scroll系列
1. client系列
clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度
clientLeft 内容区域到边框左部的距离，说白了就是边框的乱度
clientWidth 内容区域+左右padding 可视宽度
clientHeight 内容区域+ 上下padding 可视高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
200px;
height: 200px;
position: absolute;
border: 10px solid red;
/*margin: 10px 0px 0px 0px;*/
padding: 80px;
}
</style>
</head>
<body>
<div class="box">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
<script type="text/javascript">
/*
* clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度
* clientLeft 内容区域到边框左部的距离，说白了就是边框的乱度
* clientWidth 内容区域+左右padding 可视宽度
* clientHeight 内容区域+ 上下padding 可视高度
* */
var oBox = document.getElementsByClassName('box')[0];
console.log(oBox.clientTop);
console.log(oBox.clientLeft);
console.log(oBox.clientWidth);
console.log(oBox.clientHeight)；
</script>
</html>
2. 屏幕的可视区域
document.documentElement 获取的是html标签
window.onresize = function(){
// 窗口大小发生变化时，会调用onresize方法
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
// 屏幕的可视区域
window.onload = function(){
// document.documentElement 获取的是html标签
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
// 窗口大小发生变化时，会调用此方法
window.onresize = function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
</script>
</html>
3.offset系列
offsetWidth 占位宽 内容+padding+border
offsetHeight 占位高
offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值
offsetLeft： 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值
代码如下，注释都挺清楚的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body style="height: 2000px">
<div>
<div class="wrap" style=" 300px;height: 300px;
<div id="box" style=" 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;">
</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box')
console.log(box.offsetTop)
console.log(box.offsetLeft)
console.log(box.offsetWidth)
console.log(box.offsetHeight)
}
</script>
</html>
4.scroll系列
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
</style>
</head>
<body style=" 2000px;height: 2000px;">
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div id = 'scroll' style=" 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
<p>路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
</p>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
//实施监听滚动事件
window.onscroll = function(){ // 滚动时触发
console.log(1111)
console.log('上'+document.documentElement.scrollTop) //滚动时距页面最上部距离
console.log('左'+document.documentElement.scrollLeft) //滚动时距页面最上部距离
console.log('宽'+document.documentElement.scrollWidth) //body的宽
console.log('高'+document.documentElement.scrollHeight) //body的高
}
var s = document.getElementById('scroll');
s.onscroll = function(){
// scrollHeight : 内容的高度+padding 不包含边框
console.log('上'+s.scrollTop) // 竖向滚动距离
console.log('左'+s.scrollLeft)
console.log('宽'+s.scrollWidth)
console.log('高'+s.scrollHeight)
}
}
</script>
</html>