欢迎来到Louis的博客

人生三从境界：昨夜西风凋碧树，独上高楼，望尽天涯路。 衣带渐宽终不悔，为伊消得人憔悴。 众里寻他千百度，蓦然回首，那人却在灯火阑珊处。
扩大
缩小

Javascript 基础

01-ECMAScript5基础语法：

　　ECMAScript是一种标准，不是一门语言

　　1.var 声明变量

　　2.测试语句：

　　　　　　1.console.log(变量名)
　　　　　　2.alert(变量）

　　3.数据类型

　　　　　　1.基础数据类型

　　　　　　　　　1.number:
　　　　　　　　　2.string:
　　　　　　　　　3.boolean:
　　　　　　　　　4:null
　　　　　　　　　5.undefined:

　　　　　　2.引用数据类型

　　　　　　　　　　1.Function:
　　　　　　　　　　2.Object:
　　　　　　　　　　3.Array:
　　　　　　　　　　4.Date:

　　4.运算符

　　　　　　1.赋值运算符
　　　　　　2.算术运算符
　　　　　　3.比较运算符


　　5.数据类型转换

　　　　　　1.将数值类型转换为字符串类型

　　6.流程控制

　　　　　　1.if-else
　　　　　　2.&& ||
　　　　　　3.swith
　　　　　　4.while
　　　　　　5.do-while
　　　　　　6.for

　　7.常用内置对象

　　　　1.Array
　　　　2.String
　　　　3.Date
　　　　4.Math内置对象
　　　　5.Function函数

 

02 初识js

　　1.js内置函数：

　　　　typeof a #获取变量的类型

　　2.数值型：number

　　　　在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的。

　　3.字符串型：string

　　　　如果加号两边都是数值，此时是加。否则，就是连字符（用来连接字符串）。
　　　　当字符串与数字用+连接时，这里+是连字符的作用，会把数字隐式转换为字符串，然后进行拼接。
　　　　当字符串与数字用-连接时，这里-是进行数学运算，会把字符串隐式转换为数字。
　　　　example:
　　　　　　var a = '3';
　　　　　　var b = 2;
　　　　　　var c = a + b; //32 string
　　　　　　var d = a - b; //1 number

　　4.变量类型转换

　　　　parseInt():字符串转数字
　　　　example:
　　　　　　parseInt('123') //123 number

　　5.parseInt特性

　　　　1.当字符串中包含非数字字符时，转换后的数据为只保留字符串最开头的数字，后面的非数字截断移除。
　　　　exapmle:
　　　　　　parseInt('2018helloworld') //2018 number　　
　　　　2.得到的结果如果是小数则只取整，非四舍五入。
　　　　example:
　　　　　　parsetInt('3.1415926') //3 number

03 数据类型

　　1.基本数据类型

　　　　1.number:
　　　　　　var a = 123;
　　　　　　console.log(typeof a)
　　　　　　var a1 = 5/0
　　　　　　console.log(typeof a1) //Infinity 无限大，number类型
　　　　2.string

　　　　3.boolean

　　　　4.null. //空
　　　　　　var c1 = null;
　　　　　　console.log(c1)

　　　　5.undefined //未定义类型
　　　　　　var d1;
　　　　　　console.log(typeof d1)

04 运算符

　　1.算术运算符：

　　　　++a 和a++的区别:
　　　　　　a++是先赋值后++运算，
　　　　　　++a是先运算后赋值
　　example:

var a = 10:
var b = a++;
var c = ++a;

console.log(a); //11
console.log(b); //10
console.log(c); //11
View Code

 

　　2.比较运算符：

　　　　== 和 ===的区别：　　
　　　　　　==比较值是否相等
　　　　　　===比较值和类型是否相等
　　　　example:

var a = '1';
var b = 1;
console.log(a==b) //true
console.log(a===b) //false
View Code

05 数据类型转换

1.隐式转换

　　example:

var a = '123';
var b = 456;
var c = a+b; //'123456' string
View Code

2.强制类型转换

　　1.将数字转换为字符串：
　　example:

var n1 = 123;
var s1 = String(n1); //'123' string

var num = 234;
var str1 = num.toString(); //'234' string
View Code

 

　　2.将字符串类型转换为数值类型
　　example:

var stringNum = '3.1415923hahah'
var num = Number(stringNum);
console.log(num2)

console.log(parseInt(stringNum))
console.log(parseFloat(stringNum))
View Code

 

　　3.任何类型都可以转换为boolean

　　　　非0 非空 非未定义都为真

06-流程控制

　　1. if,if-else,if-else if-else

　　　　example:

var ji = 20;
if(ji >= 20){
    console.log('吃鸡啦')
}else if(ji>=10 && ji <= 20){
    console.log('离鸡只剩1cm')
}else{
    console.log('逗比')
}
View Code

 

　　　　语法格式：

if(expression){
    pass
}else if(expression){
    pass
}else{
    pass
}
View Code

 

　　2.逻辑与&&逻辑或||

　　　　example:

var sum = 399;
var math = 80;
if (sum > 450 && math > 90) {
    console.log('清华大学录取成功')
} else if (sum > 400 || math >= 95) {
    console.log('复旦大学录取成功')
} else {
    alert('高考失利')
}
View Code

 

　　3.switch

　　　　example:

var gameSocre = 'better';

switch (gameSocre) {
    case 'good':
        console.log('玩得很好');
        break;
    case 'better':
        console.log('玩得老牛逼了');
        break;
    default:
        console.log('菜鸡');
View Code

 

　　4.while循环

　　　　example:

var i=1;
while(i<10){
    console.log(i);
    i++;
}
View Code

　　　　example:

#1-100内的偶数
var i = 1;
while (i <= 100) {
    if (i % 2 == 0) {
        console.log(i);
    }
    i++
}
View Code

　　5.do_while

　　　　example:

var i = 3;
do{
    console.log(i)
    i++;
}while(i<10)
View Code

　　6.for循环　　

　　　　example1:

    for(var i = 1; i<=10;i++){
        if(i%2==0){
            console.log(i)
        }
    }
View Code

　　　　example2:

    for (var i = 0; i <= 100; i++) {
        if (i % 2 == 0) {
            console.log(i);
        }
    }
View Code

 

　　　　example3:

    var sum=0;
    for (var i =1;i<=100;i++){
        sum+=i;
    }
    console.log(sum);
View Code

　　　　example4:

    for (var i=1;i<=3;i++){
            for(var j=0;j<=6;j++){
                document.write('*')
            }
            document.write('<br>')
    }
View Code

 

　　　　example5:

    #:直角三角型
    for (var i=1;i<=6;i++){
        for(var j=1;j<=i;j++){
            document.write('*');
        }
        document.write('<br>')
    }
View Code

　　　　example6:

    #:等腰三角形
        var num =7;
        for (var i=1;i<=num;i++){
            for(var n=0;n<=num-i;n++){
            document.write('&nbsp;')
            }
            for(var j=1;j<i*2;j++){
                document.write('*')
            }
        document.write('<br>')
        }
View Code

 

07-常用内置对象

　　1.数组

　　　　创建一个数组
　　　　　　var colors = ['red', 'yellow', 'black']
　　　　　　var colors = new Array()

　　2.数组赋值(通过索引赋值)

　　　　　　var arr = [];
　　　　　　arr[0] = 123;
　　　　　　arr[1] = '哈哈哈';
　　　　　　arr[2] = '嘿嘿嘿';

　　3.数组常用方法：

　　　　1.concat() 把几个数组合并，返回新的数组
　　　　example:

var color = ['red', 'yellow'];
var color2 = ['black', 'pink', 'deep blue'];
var new_color = color.concat(color2);
console.log(new_color); //['red', 'yellow','black', 'pink', 'deep blue']
View Code

　　　　2.join() 拼接一个数组中的所有元素。
　　　　example:

var color = ['red', 'yellow'];
var color2 = ['black', 'pink', 'deep blue'];
var str1 = color.concat(color2).join('|');
console.log(str1)//red|yellow|black|pink|deep blue
View Code

　　　　3.pop() 移除数组的最后一个元素,并返回这个移除的值
　　　　example:

var color2 = ['black', 'pink', 'deep blue'];
el = color2.pop();
console.log(el); //deep blue
console.log(color2);    //['black', 'pink']
View Code

　　　　4.shift() 移除数组的第一个元素，并返回这个移除的值
　　　　example:

var color2 = ['black', 'pink', 'deep blue'];
el = color2.shift();
console.log(el); //black
console.log(color2);//{'pink', 'deep blue']
View Code

　　　　5.unshift() 在数组的0位置插入一个元素，返回新的数组长度
　　　　example:

var color2 = ['black', 'pink', 'deep blue'];
new_length = color2.unshift('hot pink');
console.log(color2); //{['hot pink','black','pink', 'deep blue']
console.log(new_length); // 4
View Code

　　　　6.slice[start,end) 字符串切片
　　　　example:

var color = ['red', 'yellow'];
var color2 = ['black', 'pink', 'deep blue'];
color2.unshift('hot pink');
color3 = color2.slice(1,3);
console.log(color3);
View Code

　　　　7.push() 往数组的最后一行添加一个元素，并返回新长度
　　　　example:

var color2 = ['black', 'pink', 'deep blue'];
var new_length = color2.push('hot pink');
console.log(color2); //["black", "pink", "deep blue", "hot pink"]
console.log(new_length); //4
View Code

　　　　8.sort() 对数组进行排序(字母根据首字母a-z排序，数字按从小到大排序)
　　　　example:

var color = ['red', 'yellow'];
var color2 = ['black', 'pink', 'deep blue'];
var new_length = color2.push('hot pink');
console.log(color2.sort()); //["black", "deep blue", "hot pink", "pink"]
View Code

　　　　9.reverse() 对数组进行反转
　　　　example:

var color = ['red', 'yellow'];
var color2 = ['black', 'pink', 'deep blue'];
console.log(color2.reverse()) //["deep blue", "pink", "black"]
View Code

　　　　10.length 属性值，获取数组的长度
　　　　example:

var color2 = ['black', 'pink', 'deep blue'];
console.log(color2.length); //3
View Code

　　　　11.toString() 将数组转换为字符串
　　　　example:

var color2 = ['black', 'pink', 'deep blue'];
var str = color2.toString();
console.log(str); //black,pink,deep blue
View Code

　　　　12.Arrary.isArray(obj) 判断对象是否是数组

　　　　example:

var color2 = ['black', 'pink', 'deep blue'];
console.log(Array.isArray(color2)); //true
View Code

 

　　　　13.toFixed(2) 四舍五入保留两位小数
　　　　example:

var num = 1234.1274;
var new_num = num.toFixed(2);
console.log(new_num); //1234.13
View Code

 

　　　　14.清空数组：

array = [];
View Code

　　4.字符串String,常用方法

　　　　1.charAt() 返回指定索引位置的字符
　　　　example:

var str = 'china';
var charset = str.charAt(2);
console.log(charset); //i
View Code 

　　　　2.concat() 返回字符串值，表示两个或多个字符串的拼接
　　　　example:

var str = 'China';
var str2 = 'America';
var str3 = str.concat(str2);
console.log(str3); //ChinaAmerica
View Code

 

　　　　3.match() 返回正则表达式模式对字符串进行查找的结果
　　　　example:

 

　　　　4.replace(a,b) 替换指定字符串，只会替换一次。
　　　　example:

var str = 'China';
var str2 = 'America';
var str3 = str.concat(str2);
var str4 = str3.replace('a','A');
console.log(str4); //ChinaAmerica
View Code

　　　　5.search(stringObject)
　　　　example：

　　　　6.slice[start,end) 字符串切片
　　　　example：

var str = 'China';
var str2 = 'America';
var str3 = str.concat(str2);
var str4 = str3.slice(1,3);
console.log(str4); //hi
View Code

　　　　7.split('a', 1) 以'a'切割字符串，第二个参数切割后返回的元素个数
　　　　example:

var str = 'China';
var str2 = 'America';
var str3 = str.concat(str2);
var str4 = str3.split('a',1);
var str5 = str3.split('a',2);
console.log(str4); //["chin"]
console.log(str5); //["Chin", "Americ"]
View Code

 


　　　　8.substr[start,end) 字符串切片
　　　　example:

var str = 'China';
var str2 = 'America';
var str3 = str.concat(str2);
var str4 = str3.substr(1,3);
var str5 = str3.slice(1,3);
console.log(str4); //hin
console.log(str5); //hi
View Code

 

　　　　9.toUpperCase() 返回字符串中字母全部是大写的新字符串
　　　　example: 

var str = 'China';
var str2 = 'America';
var str3 = str.concat(str2);
var str4 = str3.toUpperCase();
console.log(str4); //CHINAAMERICA
View Code

　　　　10.toLowerCase() 返回字符串中字母全部是小写的新字符串
　　　　example:

var str = 'China';
var str2 = 'America';
var str3 = str.concat(str2);
var str4 = str3.toLowerCase();
console.log(str4); //chinaamerica
View Code

 

　　　　11.将number类型转换成字符串类型
　　　　example:

var num = 1234.1234;
var str = num.toString();
console.log(str);
View Code

　　5.Date 日期对象

　　　　创建日期对象只有构造函数一种方式,使用new关键字
　　　　example:
　　　　　　var myDate = new Date();

　　　　常用语法：
　　　　1.Date() 根据本地时间返回当天的日期和时间
　　　　example:

console.log(Date());//Thu Sep 27 2018 10:07:43 GMT+0800 (中国标准时间)
View Code

　　　　2.getDate() 根据本地时间返回指定日期对象的月份中的第几天（1-31）
　　　　example:

console.log(myDate.getDate());//27
View Code

 

　　　　3.getMonth() 根据本地时间返回指定日期对应的月份（0-11）
　　　　#注意月份0表示一月，往后类推
　　　　example:

console.log(myDate.getMonth());//9（10月）
View Code

　　　　4.getFullYear()根据本地时间返回指定日期对象的年份（四位数年份时返回四位数字）

　　　　example:

console.log(getFullYear());//2018
View Code

　　　　5.getDay() 根据本地时间返回指定日期对象的星期中的第几天（0-6）
　　　　#0代表星期日，
　　　　example:

console.log(getDay());//4（星期四）
View Code

　　　　6.getHours() 根据本地时间返回指定日期对象的小时（0-23）
　　　　example:

console.log(myDate.getHours())//14（下午两点）
View Code

 

　　　　7.getMinutes() 根据本地时间返回指定日期对象的分钟（0-59）
　　　　example:

console.log(myDate.getMinutes())//8
View Code

 

　　　　8.getSeconds() 根据本地时间返回指定日期对象的秒数（0-59）
　　　　example:

console.log(myDate.getSeconds())//24
View Code

 

　　　　9.toLocalString() 返回本地时间
　　　　example:

console.log(myDate.toLocalString())
View Code

　　　　#使用循环定时器在页面中显示动态时间
　　　　example:

setInterval(function () {
    document.getElementById('timer').innerText =         Date().toLocaleString();
}, 1000)
View Code

　　6.Math 内置对象

　　　　#常用内置对象
　　　　1.Math.floor() 向下取整，地板函数
　　　　example:

var x = 1.789;
var new_x = Math.floor(x);
console.log(new_x)//1
View Code 

　　　　2.Math.ceil() 向上取整，天花板函数
　　　　example:

var x = 1.789;
var new_x = Math.ceil(x);
console.log(new_x)//2
View Code

 

　　　　3.Math.max() 取多个数值中的最大值
　　　　example:

console.log(Math.max(3,2,1,4,5,2))//5
View Code

　　　　4.Math.min() 取两个数的最小值
　　　　example:

console.log(Math.min(3,2,1,4,5,2))//1
View Code

　　　　5.Math.random() 获取0-1之间的随机数
　　　　example:

console.log(Math.random())//0.669789427291309
View Code

　　　　#获取100-300之间的随机整数
　　　　min - max之间的随机数： min+Math.random()*(max-min)
　　　　example2:

var start = 100;
var end = 300;
var num = start+Math.random()*(end-start);
console.log(Math.floor(num))
View Code

 

08-函数
1.函数的定义
example:
function f(){

};

2.函数的调用方式
example:
f();

3.形参和实参
example：形参(函数定义时)
function f(arg1,arg2){
console.log(arg1+arg2);
};
example:实参（函数调用时）
f(100,200);

4.返回值
example:
function f(arg1,arg2){
return arg1+arg2;
};

09-伪数组-arguments
1.arguments代表的是实参，arguments只在函数中使用。
example:
function f(a, b, c) {
console.log(arguments); //实参组成的伪数组
console.log(f.length); //形参的长度
console.log(arguments.length); //实参伪数组的长度

}

2.arguments可以修改元素的值，但不能改变数组的长短。

10-关于DOM(Document Object Model)的事件操作
1.Javascript的组成：
1.ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
2.DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
3.BOM浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

2.事件：
JS是以事件驱动为核心的语言

3.事件3要素：
事件3要素：事件源，事件，事件驱动程序
事件源：html标签，DOM
事件：JS事件，在网页中的某一个行为
事件驱动：因为事件行为而对DOM进行的操作
example:

4.DOM操作实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 300px;
height: 300px;
background-color: #1c6fe2;
}
</style>
</head>
<body>
<button>隐藏</button>
<div id="box"></div>
<script>
var box = document.getElementById('box');
var btn = document.getElementsByTagName('button')[0];
var flag = true;
btn.onclick = function () {

if (flag) {
box.style.display = 'none';
flag = false;
} else {
box.style.display = 'block';
flag = true;
}

}
</script>
</body>
</html>
5.常用JS事件：
onclick: 鼠标单击
ondbcliick: 鼠标双击
onkeyup: 按下并释放键盘上的一个按键时触发
onchange: 文本内容或者下拉菜单中的选项发生改变时触发
onfocus: 获得焦点，表示文本框等获得鼠标光标
onblur: 失去焦点，表示文本框等失去鼠标光标
onmouseover: 鼠标悬停
onmouseout: 鼠标移出
onload: 网页文档加载事件
onunload: 关闭网页时
onsubmit: 提交表单时
onreset: 重置表单时

6.获取事件源的方式：
1.通过标签ID获取：
var box1 = document.getElementById('box1')
2.通过类名获取：(获取到的是数组)
var box2 = document.getElementsByClassName('box2')
3.通过标签获取：（获取到的是数组）
var box3 = document.getElementsByTagName("box3");

7.绑定事件的方式：
1.直接绑定匿名函数：
example:
var box1 = document.getElementById('box1');
box1.onmouseover = function(){
box1.style.backgrandColor = 'black';
}

2.先定义函数，再进行绑定：
example:
var box2 = document.getElementById('box2');
function fn(){
box2.style.width = '200px';
}
box2.onclick = fn;

3.注意事项：
1.在js中的css属性值，都需要加引号
2.在js里写css属性名时，是backgroundColor，不是CSS里面的background-Color。记得所有的像css属性的text-*，line-*、backgroun-*等在js中都写成驼峰

8.onload
当页面加载（文本和图片）完毕的时候，触发onload事件。
有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。

11-DOM介绍
1.什么是DOM：
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的。

2.解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

3.DOM树（一切都是节点）
在HTML当中，一切都是节点：（非常重要）
1.元素节点：HMTL标签。
2.文本节点：标签中的文字（比如标签之间的空格、换行）
3.属性节点：：标签的属性。
整个html文档就是一个文档节点。所有的节点都是Object。

4.DOM可以做什么
1.找对象（元素节点）
2.设置元素的属性值
3.设置元素的样式
4.动态创建和删除元素
5.时间的触发响应：事件源，事件，事件驱动程序

5.DOM节点的获取
1.通过标签ID获取：
var box1 = document.getElementById('box1')
2.通过类名获取：(获取到的是数组)
var box2 = document.getElementsByClassName('box2')
3.通过标签获取：（获取到的是数组）
var box3 = document.getElementsByTagName("box3");

6.DOM访问关系的获取
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。
节点的访问关系，是以属性的方式存在的。
1.JS中的父子兄访问关系：
1.父节点：
parentNode //父节点

2.兄弟节点：
nextSibling //下一个
nextElementSibling
previousSibling //前一个
previousElementSibling

3.子节点
firstChild //第一个子节点
firstElementChild
lastChild //最后一个子节点
lastElementChiled

4.所有子节点
childNodes
children

2.获取父节点
节点.parentNode

3.nextSibling 和nextElementSibling
nextSibling
指的是下一个节点（包括标签、空文档和换行节点）
火狐、谷歌、IE9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。
IE678版本：指下一个元素节点（标签）。
nextElementSibling：
火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）。
总结：为了获取下一个元素节点，我们可以这样做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样:
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
其他类似的节点获取都是同样规则。

4.根据索引获取指定兄弟节点
节点自己.parentNode.children[index]; //随意得到兄弟节点

5.获取所有子节点
children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】
1.它只返回HTML节点，甚至不返回文本节点。
2.在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。

子节点数组 = 父节点.children; //获取所有节点。用的最多。

6.nodeType
nodeType == 1 //表示元素节点
nodeType == 2 //表示属性节点
nodeType == 3 //表示文本节点

7.DOM节点操作（重要）：
节点的访问关系都是属性
节点的操作都是函数

1.创建节点:
var box1 = document.createElement("li")

2.插入节点：

方式一：
父节点.appendChild(新的子节点)
解释：
在父节点中的最后一个子节点的后面插入新的节点


方式二：
父节点.insertBefore(新的子节点,作为参考的子节点);
解释：
1.在参考节点前插入一个新的节点。
1.如果不给定参考节点，则在父节点中的最后一个子节点的后面插入新的节点


3.删除节点：
父节点.removeChild(子节点);

如果想删除节点本身，可以使用下面这种方式：
node1.parentNode.removeChild(node1)

4.复制节点：
要复制的节点.cloneNode();
要复制的节点.cloneNode(true);

1.不给参数和给定false：只复制节点本身，不复制其子节点。
2.给定参数为true：复制节点和节点的所有子节点

8.设置节点的属性
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">

1.获取节点属性值:
node.getAttribute('class')

example:
var img1 = document.getElementById('a1');
console.log(img1.getAttribute('src'))
console.log(img1.getAttribute('class')

2.设置节点属性：
node.setAttribute('src','images/3.jpg')

example:
img1.setAttribute('class','big-box')

3.删除属性：
node.removeAttribute('class')

example:
img1.removeAttribute('alt')

9.获取和设置标签中的内容：
1.innerHTML：取双标签中的内容，可以解析内容中的标签元素（p,a,div）

2.innerText：获取双标签中的内容，只获取内容，不获取标签

3.value：设置单标签中的值（input submit）

example:
<body>
<div id="box1">
<a href="">哈哈哈哈</a>
<p>
我是一个段落
</p>
<form action="">
<input type="submit" name="" id="sb1">
</form>
</div>
<script>
var box1 = document.getElementById('box1');
var sb1 = document.getElementById('sb1');
console.log(box1.innerHTML);
console.log(box1.innerText);
sb1.value='提交你妹啊';
</script>
</body>

12-部分js案例


13-面向对象
创建对象常用的几种方式
1.使用Object或者字面量的方式
example:
var student = new Object();
student.name = 'Alice';
student.age = 20;

example:
var student = {
name:'Alice',
age: 20
};

2.工厂函数创建
example:
funciton createStudent(name,age){
var obj = new Object;
obj.name = name;
obj.age = age;
return obj;
}

var student1 = createStudent('Alice', 18);
var student2 = createStudent('Albort', 30);

3.构造函数方式创建
example:
funciton Student(name,age){
this.name = name;
this.age = age;
}

function Fruit(name,color){
this.name = name;
this.color = color;
}

var s1 = new Student('Alice', 18);
var f1 = new Fruit('apple', 'red');

4.原型的模式创建对象
function Student(){
this.name = name;
this.age = age;
}

Student.protptype.alertName = function(){
alert(this.name);
}

var s1 = new Student('Alice',18);
var s2 = new Student('Albort',20);


14-定时器
JS中定时器分为两种：
1.setTimeout() //一次性定时器
2.setInterval() //循环定时器

1.setTimeout
<body>
<p id="p1">开始倒数3S</p>
<script src="jquery-3.3.1.min.js"></script>
<script>
function sayHi(){
$('#p1').html('Hi')
}
setTimeout(sayHi,3000);
</script>
</body>

2.setInterval
<body>
<p id="p1">开始倒数</p>
<script src="jquery-3.3.1.min.js"></script>
<script>
var count = 10;
var timer = null;

function sayHi() {
$('#p1').html(count);
count -= 1;
if (count == 0) {
$('#p1').html('我爱你呀');
clearInterval(timer);
}
}
timer = setInterval(sayHi, 1000)
</script>
</body>


15-BOM
1.什么是BOM
BOM：Browser Object Model,浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

2.widnow对象
1.window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
2.DOM是BOM的一部分。

3.window对象是JavaScript中的顶级对象。

4.全局变量、自定义函数也是window对象的属性和方法。

5.window对象下的属性和方法调用时，可以省略window。

3.BOM常见内置方法和对象
1.弹出系统对话框
alert(1) //是window.alert(1)的简写

2.打开窗口，关闭窗口
window.open(url,target) //url:要打开的网址， target:新的窗口的位置，_blank, _self, _parent父框架，默认值是_blank
example:
<body>
<!--行间的js中的open() window不能省略-->
<button onclick="window.open('http://www.9158.com')">9158美女直播</button>
<button>网易云音乐</button>
<button onclick="window.close()">关闭</button>
<button>关闭</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
var but2 = document.getElementsByTagName('button')[1];
but2.onclick = function(){
open('http://music.163.com', '_self')
};

var but4 = document.getElementsByTagName('button')[3];
but4.onclick = function () {
if(confirm('是否关闭？')){
close()
}
}

</script>
</body>

4.location对象
window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。
location的属性：
1.href：跳转
2.hash 返回url中#后面的内容，包含#
3.host 主机名，包括端口
4.hostname 主机名
5.pathname url中的路径部分
6.protocol 协议 一般是http、https
7.search 查询字符串
example:（点击DIV跳转）
<body>
<div style="width: 200px;height: 200px;background-color: red;">
点我跳转啊啊啊啊啊啊
</div>
<script>
var box = document.getElementsByTagName('div')[0]
box.onclick = function () {
location.href = 'https://www.baidu.com'
}
</script>
</body>

example:（倒数5S自动跳转到指定网页）
<body>
<h1>
404 Page Not Found!
</h1>
<p>页面将在5秒后跳转 <span></span></p>
<script>
var timer = null;
var sp = document.getElementsByTagName('span')[0];
var count = 5;
timer = setInterval(function () {
sp.innerText = '正在倒数：' + count + 'S';
count -= 1;
if (count == 0) {
location.href = 'http://www.baidu.com';
clearInterval(timer);
}
}, 1000)
</script>
</body>

location对象的方法
location.reload()：重新加载网页（刷新）

5.window.navigator对象
window.navigator 的一些属性可以获取客户端的一些信息。
userAgent：系统，浏览器)
platform：浏览器支持的系统，win/mac/linux
example:
console.log(navigator.userAgent);
console.log(navigator.platform);


15-client、offset、scroll系列
1.client
* clientTop 内容区域到边框顶部的距离 ，说白了就是上边框的宽度
* clientLeft 内容区域到边框左部的距离，说白了就是左边框的宽度
* clientWidth 内容区域+左右padding 可视宽度
* clientHeight 内容区域+ 上下padding 可视高度

2.屏幕的可视区域(可用于监控网页的大小)
<body>
<div></div>
<div></div>
<script>
//屏幕可视化区域
var box1 = document.getElementsByTagName('div')[0];
var box2 = document.getElementsByTagName('div')[1];
window.onload = function () {
// console.log(document.documentElement.clientHeight);
// console.log(document.documentElement.clientWidth);
box1.innerText = '初始窗口大小:' + document.documentElement.clientHeight + ',' + document.documentElement.clientWidth
};

//检测窗口大小发生变化
window.onresize = function () {
// console.log(document.documentElement.clientHeight);
// console.log(document.documentElement.clientWidth);
box2.innerText = '变化的窗口大小:' + document.documentElement.clientHeight + ',' + document.documentElement.clientWidth

};
</script>
</body>

3.offSet
offsetWidth:占位宽, 盒子宽度+padding+border
offsetHeight:占位高, 盒子高度+padding+border
offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值
offsetLeft： 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值


4.scroll 检测窗口滚动
document.documentElement.scrollTop #常用，窗口有向下滚动距离
document.documentElement.scrollLeft
document.documentElement.scrollWidth
document.documentElement.scrollHeight

posted on 2018-10-07 20:50  Louiszj  阅读(71)  评论(0)    收藏  举报

导航