JavaScript
1.输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js输出</title>
<script type="text/javascript">
alert("卧槽");//再浏览器输出一个警告框
document.write("看我出现再那里");//向html中的body标签输入内容
console.log("console出现在哪里");//向控制台输入内容
/*
Js代码严格控制大小写
JS语句每一句以; 结束
如果不加分号，浏览器会自动加上，但是会消耗系统资源，有可能加错地方
会忽略多个空格
*/
</script>
</head>
<body>
</body>
</html>
2. 编写位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS编写位置</title>
<script type="text/javascript" src="./hello.js"></script>
<script type="text/javascript">
alert("html 文件中的代码");
</script>
</head>
<body>
<!--
可以将js代码写在onclick标签里面
当我们点击按钮时代码运行
也可以写在超链接的href标签里面
可以但是不推荐，不方便代码维护
-->
<!-- <button οnclick="alert('点我干哈');">点击</button>-->
<!-- <a hred="javascript:;">点我</a>-->
<!-- <a href="javascript:alert('叫你点就点');">点我</a>-->
</body>
</html>
3.字面量、变量、标识符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字面量与变量，标识符</title>
<script type="text/javascript">
/*
字面量就是直接输出的量
变量是可以代替字面量
标识符：
标识符可以用字母，数字和下划线，$符号，不能以数字开头，中文也可以坐变量名
不能用js关键字
通常首字母小写，其他每个单词首字母大写。
js底层保存实际上是使用uicode编码
所以理论上说只要是utf-8中含有的内容都可以用作标识符
*/
var a;
a=11111;
document.write(a);
</script>
</head>
<body>
</body>
</html>
4. 字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串</title>
<script type="text/javascript">
/*
js里面有4中类型
String 字符串
Number 数值
Boolean 布尔值
Undefined 未定义
Object 对象
Null 空值
使用String 需要用引号引起来 双引号和单引号一样
*/
var str="hello";
var ss="我说：\"今天天气真不错\"";
</script>
</head>
<body>
</body>
</html>
5.对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象</title>
<script type="text/javascript">
/*
+ 任何与字符串相加，转化成字符串
- 任何number转化为Number
* / 都转化为number
- ++ -- 转化为Number
用\u****编码使用unicode编码
&# 使用编码时要用十进制的编码
*/
//创建jd对象
var object = new Object();
/*
在对象中添加属性
语法： 对象.属性=属性值//对象["属性名“]=属性值
访问
语法：对象.属性//对象["属性名“]=属性值
修改
语法：对象.属性=新的属性值//对象["属性名“]=属性值
删除
语法：delete 对象.属性//对象["属性名“]=属性值
in 运算符可以检查对象中是否含有某个属性
语法：”属性名“ in 对象
*/
object.name="hahhhh";
object["sb"]="hahhaaaaaa";
console.log("name" in object);
</script>
</head>
<body>
</body>
</html>
6.数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型</title>
<script type="text/javascript">
/*
基本数据类型：
Number Boolean String Undefined Null
引用数据类型
Object
引用对象指向的是同一个内存空间地址
对象与对象之间的比较是比较的内存地址是否一样
如果不要一样则返回false
也可以用对象字面量
var a={};
字面量里面可以直接指定对像属性
语法：{属性名：属性，属性名：属性}；
使用特殊属性名的时候必须要加”“引号
属性名和属性值是一组一组的
对象字面量的嵌套使用时，需要用:冒号语法
var a=
{
name:...
age:...
test:{属性名：属性值。。。。。}
}
*/
var obj1=new Object();//var obj1={};
var obj2=new Object();
var obj3=new Object();
var obj4=new Object();
obj1.name="sb";
obj2=obj1;
obj3.name="sb";
obj4.name="sb";
alert(obj3===obj4);
</script>
</head>
<body>
</body>
</html>
7.函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
<script type="text/javascript">
//函数function（）
//函数中高可用封装一些代码和功能
//在js里面函数也是对象
//使用typeof可以检查函数的类型，会返回function
//创建一个函数对象，可以在函数中创建一个函数
/*
1.可以将代码封装成字符串的形式传递给构造函数
封装到函数中的代码不回立即执行，而是在调用函数的时候执行，语法是函数对象（）
2.通过函数声明来构建一个函数对象
语法：function 函数名（形参1 ...形参n）
{
函数体
}
3.还宽裕用匿名函数来创建一个函数对象
语法：
var 函数名 =function(形参列表）
{
函数体
}
*/
// var fun = new Function ("console.log('hello');") ;
// fun();
function fun2()
{
console.log('这个是我的第二个函数');
}
fun2();
var fun3= function () {
console.log("这个是匿名函数");
}
fun3();
/*
可以在函数的（）中给指定一个参数或者多个参数
多个参数之间用,隔开，声明形参就相当于声明了对应的变量，但是并不是赋值
如果实参多余形参： 多余的实参不会被复制；
如果实参数量少于形参的数量，，没有被赋值的形参将会成为undefined
*/
function sum(a,b,c) {
console.log(a+b+c);
}
sum(1,2,3);
sum(123,234,345);
/*
函数返回可以通过return返回
如果return不写返回值，返回undefined
*/
function sum(a,b) {
return (a+b);
}
var a=sum(4,5);
document.write(a);
/*
如果参数太多可以封装成对象再传递过去
函数本身也是对象，所以传参数的时候也可以传函数，传过去的函数一样可以直接调用
通常将一个匿名函数作为一个实参传递给形参
函数名（）调用函数
函数名 函数对象
*/
function out(os) {
console.log("我叫"+os.name+os.age+"岁");
}
var obj={
name:"周迎川",
age:21
};
out(obj);
/*
立即执行函数
见整个函数封装成一个整体，用小括号括起来，然后在后面加一个括号就调用了函数
*/
(function () {
alert("这是一个立即执行函数");
})();
</script>
</head>
<body>
</body>
</html>
8.基础方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础方法</title>
<script type="text/javascript">
var obj=new Object();
obj.name="周迎川";
obj.age=18;
obj.say=function () {
console.log(obj.name+" "+obj.age);
}
obj.say();
/*
对象中可以是任意的数据类型
如果说第项中存放的函数，则称该函数为方法
*/
/*
枚举对象中的属性
用 for in
语法： for(var 变量 in 对象)
*/
for(var n in obj)
{
console.log(n);
//如果要访问变量中的属性值，用console.log(obj[n]);[]里面可以是变量
}
</script>
</head>
<body>
</body>
</html>
9.作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域</title>
<script>
/*
在全局创建的任何东西都是window的方法
var a；
console.log(a)==console.log(window.a)
使用var定义的变量会在程序运行之前，但是不能赋值
函数声明会在程序执行之前创建，所以可以在函数定义之前调用函数
function fun（）{}
但是 var fun = function（）{}不会在程序运行前执行
函数作用域
每次调用函数都会创建
*/
fun1();
fun2();
function fun1()
{}
var fun2=function ()
{}
fun1();
fun2();
</script>
</head>
<body>
</body>
</html>
10.this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this</title>
<script>
/*
解析器每次都会向函数内部传递一个隐含的参数this、
以函数的形式调用时，this就是window
以方法的形式调用时，this就是调用方法的对象
*/
function fun() {
alert(this.name);
}
var obj={
name:"sun",
age: 10,
say:fun
}
var obj2={
name:"sddd",
age: 10,
say:fun
}
obj2.say();
</script>
</head>
<body>
</body>
</html>
11.用函数创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用函数创建对象</title>
<script>
/*
创建很多的对象具有相似性的话，可以用函数创建对象
*/
function person(name,age) {
var obj= new Object();
obj.name=name,
obj.age=age,
obj.say=function(){
console.log(this.name);
}
return obj;
}
var obj1=person("sun","18");
var obj2=person("su","18");
var obj3=person("sn","14");
var obj4=person("un","19");
obj1.say();
obj2.say();
obj3.say();
obj4.say();
</script>
</head>
<body>
</body>
</html>
12.伪造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>构造函数</title>
<script>
/*
创建一个构造函数，专门用来创建对象的函数
构造函数的创建方式与普通方式一样
首字母通常大写
构造函数的调用与普通函数不一样，需要用new关键字
构造函数：
创建对象的，返回值就是对象
*/
function fun() {
alert(this.name);
}
function Person(name,age) {
this.name=name,
this.age=age,
this.say=fun
}
var per=new Person("sss",18);
var per2=new Person("aaa",18);
var per3=new Person("saa",18);
var per4=new Person("sees",18);
per.say();
per2.say();
per3.say();
console.log(per.name);
console.log(per2.name);
console.log(per3.name);
console.log(per4.name);
</script>
</head>
<body>
</body>
</html>
13.原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数原型/原型对象</title>
<script>
/*
原型函数
我们所创建的每一个函数都会在其中添加一个prototype属性
这个属性对应一个对象，这个对象就是原型对象
该属性是隐含的，是所有对象公共的，所有对象都可以访问
所以通常将公共的部分放在原型里面，节省空间而且方便
如果函数作为普通函数调用prototype没有任何作用
如果作为构造函数调用，每个创建的对象中都会有一个隐含的属性
指向该构造函数的原型对象，我们可以通过 __proto__ 来访问属性
以后创建构造函数时可以将公共的属性放在原型中，
原型对象也是对象，所以也有原型，当我们使用对象方法的时候，如果对象里面没有，则自动去原型对象里面找
如果原型对象里面也没有，则取原型的原型对象里面找，直到找到Object原型，如果没有找到则返回undefined
最多3个原型
*/
function Myclass()
{
};
Myclass.prototype.say = function () {
alert(this.name);
}
//给原型中创建一个原型属性
Myclass.prototype.name = "原型中的名字";
var mc = new Myclass();
console.log(mc.__proto__===Myclass.prototype);
document.write(mc.name);
//使用in检查对象中是否含有属性值,如果说对象里面没有，原型里面有也会返回true
document.write("name" in mc);
//hasOwnPrototype() 检查对象自身是否含有某个属性值，如果对象里面有，返回true
document.write(mc.hasOwnProperty("name"));
document.write(mc.__proto__.__proto__.__proto__);//极限只有3个原型
</script>
</head>
<body>
</body>
</html>
14.toString
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>toString</title>
<script>
function Person(name,age) {
this.name=name,
this.age=age
}
var per = new Person("周",21);
var per2 = new Person("王",20);
console.log(per);
//直接打印一个对象的时候，实际上是打印的对象的toString（）方法返回值
//如果不希望输出[Object Object] 只需要在对象中添加一个toString（）方法
//想要给类的全部对象都添加toString（）方法
/*
per.__proto__.toString = function () {
// return "我是一个努力的boy";
return "name="+this.name+"age"+this.age;
};
*/
per.toString = function () {
// return "我是一个努力的boy";
return "name="+this.name+"age"+this.age;
};
console.log(per.toString());
</script>
</head>
<body>
</body>
</html>
15.数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
<script>
//数组 Array
/*
数组也是对象，
用中括号访问数组
使用length获取长度
修改length的值可以改变数组长度
*/
//使用new可以直接在数组中赋值，但是参数只有一个数的时候，表示创建一个多长的数组
var arr = new Array(1,2,3,4,5,5);
var arr3 = new Array(10);
//使用字面量来创建数组
var arr1= [];
//使用字面量可以在创建数组的时候指定以元素值
var arr2=[1,2,3,4,5];
console.log(arr2);
//数组元素可以是任意元素，对象也可以，基本变量，也可以是函数对象
arr=[{name:"wu"},{name:"wu"}];
arr=[function () {
},function () {
}];
//数组里面放数组就是二维数组
arr = [[1,2,3],[2,4,6,7]];
</script>
</head>
<body>
</body>
</html>
16.数组的基本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组的基本操作</title>
<script>
var colors = ['red', 'green', 'blue', 'brown']; //colors是一个数组
//传统遍历（基本不用了）
for(var i=0;i<colors.length;i++){
console.log(colors[i]);
}
//for-in，专注下标
for(var c in colors){
console.log(colors[c]);
}
//for-of，专注元素
for(var c of colors){
console.log(c);
}
//高级遍历
colors.forEach(c => console.log(c));
var other = colors.map(c => c + 'X');//map不仅遍历，还返回另一个数组
console.log(other);
var arr = ["sun","tang","zhu"];
//数组的增加和删除
//push 方法，想数组末尾添加元素,可以一个和多个，返回值为数组的长度
//pop 方法是删除数组元素的最后一个方法，返回值是删除的元素
//unshift 方法是象数组前面添加元素，返回值是数组长度
//shift 方法删除数组第一个元素，返回值是删除的元素
var res=arr.push("sha","zhou");
var ob=arr.pop();
arr.unshift("wang1");
document.write(arr);
document.write(res);
document.write(ob);
//数组的遍历
for(var i = 0;i<3;i++)
document.write(arr[i]+" ");
//遍历数组还可以用forEach函数 IE8后面才兼容
/*
这函数的参数是一个函数，我们创建但是我们不调用，叫做回调函数，浏览器会在函数中传递三个参数
第一个参数：正在遍历的元素
第二个参数：当前元素的索引
第三个元素：所有的元素，也就是正在遍历的数组
*/
arr.forEach(function(value,index,obj){
document.write(value+" ");
});
//slice 方法，从某个已有的数组返回选定元素，提取出指定元素
//含有两个参数 第一个是开始，第二个是结束,包含开始，不包含结束
//含有一个参数是从第一个元素开始剔除元素 注意：该方法不会改变原来数组的长度
//如果是负值，表示倒数第几个
res=arr.slice(1,2);
res = arr.slice(3);
console.log(res);
//splice 方法，删除指定元素
//使用splice会将指定元素删除，而且会删除原数组的，返回值为删除对象，也可以象数组中添加元素
/*
两个参数：第一个代表开始索引的位置，
第二个代表删除的个数
三个参数：第三个参数就是添加到数组的对象
*/
res=arr.splice(1,2);
arr.splice(1,0,"fang","qu");
/*
concat（）将多个数组连接在一起，返回新的数组，
该方法不会对原来数组产生影响
*/
var arr2=["111"];
var arr3 = ["4444"];
res=arr.concat(arr2,arr3,"周迎川");
document.write(res);
/*
join（）将一个数组转换成字符串
该方法不会对原来数组产生影响，而将转换后的字符串结果返回
join()中可以指定参数，这个字符串将会成为数组的连接符号
如果不指定参数，默认使用，作为连接
*/
res=arr.join();
console.log(res);
/*
reverse（）会反转数组的顺序，会对原数组产生影响
sort（）函数会按照元素的unicode编码按照从小到大的顺序
可以自己指定排序的
使用回调函数，浏览器会根据回调函数的返回值决定函数的返回值，如果返回值大于0交换位置
*/
arr.sort(function (a,b) {
// if(a>b)
// return 1;
// else if(a<b)
// return -1;
// else return 0;
return a-b;
});
</script>
</head>
<body>
</body>
</html>
17.函数的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的方法</title>
<script>
/*
call()和apply()
两个方法都需要通过函数对象调用
call和apply都可以将对象指定为第一个参数，此时这个对象将会成为执行时的this
call方法可以将实参在对象之后一次传递
apply方法需要将实参封装在数组中
this的情况：
以函数形式，this是window
以方法的形式，this是对用方法的对象
以构造的形式，this是创建的对象
使用call和apply调用时，this是指定的对象
*/
function fun(a,b) {
alert("我是fun函数");
console.log("a="+a);
console.log("b="+b);
}
var obj={};
fun.call(obj,2,3);
fun.apply(obj,[2,3]);
//fun.call();
/*
在调用函数时，浏览器每次都会传递两个隐含的参数
1.函数会传递一个this参数，代表调用的对象
2.还会传递一个arguments参数
arguments 调用函数时保存实参，arguments.length()可以用来获取实参的长度
*/
function func() {
alert(arguments.length);
console.log(arguments.callee);
}
func("hello",true);
</script>
</head>
<body>
</body>
</html>
18.Date对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date对象</title>
<script>
/*
Date创建一个对象，表示创建的时间对象，
1.如果直接调用Date中的无参构造函数，默认显示当前时间
2.如果要指定一个时间的对象，则现需要传递一个表示时间的字符串作为参数
格式为：日/月/年 时：分：秒
Date中封装的方法：
getDate（）返回值是对象是第几天
getDay（）返回值是星期几0-6表示星期天-星期六
getMonth()返回当前时间对象的月份0-11 表示1-12月
getFullYear（）返回当前对象的年份
getTime（）获取当前时间戳
表示当前时间与1970年1月1日0时0分0秒的时间差，单位为毫秒
可以用Date.now()获取当前的时间戳
*/
var d = new Date();
var d2 = new Date("15/11/2020 21:22:50");
document.write(d.getDay());
</script>
</head>
<body>
</body>
</html>
19.Math对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math对象</title>
<script>
/*
Math和其他对象不同，没有构造函数，里面只是封装了数学运算的方法
直接用Math.方法（）直接调用不需要创建对象
Math.PI 表示pi的大小
Math.abs()计算绝对值
Math.ceil() 向上取整
Math.floor()向下取整
Math.round()四舍五入
Math.random()生成随机数，默认为0-1，想生成更大的直接在后面乘以x
Math.max()可以传递参数，n个数的最大值//min最小
Math.pow() 计算次方
*/
</script>
</head>
<body>
</body>
</html>
20. 包装类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>包装类</title>
<script>
/*
基本数据类型
String，NUmber，Boolean，Null，Undefined
引用数据类型：
Object
提供了3个包装类
这3个包装类能将基本数据类型转换成对象
String（）将基本数据类型转换成String对象
NUmber（）将基本数据类型转换成NUmber对象
Boolean（）将基本数据类型转换成Boolean对象
如果用基本数据类型去调用属性和方法时，浏览器会自动使用包装类将其转换为对象，然后调用方法和属性
注意：只是临时的，改语句执行完毕自动变回原类型，如果连续两次临时定义的，两个对象不是同一个对象
*/
var num = new Number(3);
var str = new String("hello");
var bool = new Boolean(true);
var s = 123;
s=s.toString();
s.hello = "你好";//这里两次临时转换，所以这两个对象不同
//是对象了，就可以给他们添加属性
</script>
</head>
<body>
</body>
</html>
21. 字符串方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串</title>
<script>
/*
字符串在底层是字符数组，
length属性是代表字符串的长度
charAt()返回指定位置的字符
charCodeAt（）返回指定位置的字符的Unicode编码
fromCharCode（）根据字符编码获取字符 用String.fromCharCode（65）表示16进制用0x
concat（）连接字符串
indexOf（）搜索字符，返回第一次出现字符下标，如果没有返回-1
可以指定一个参数，表示从某个位置开始搜索
lastIndexOf() 从后往前搜索用法同上
slice（）从指定字符串中类容截取，指定参数，0-2，前闭后开，第二个参数可以省略
subString（）和slice类似，会自动交换参数位置，前面是小的后面是大的
substr（）第一个参数是截取开始位子，第二个是截取长度
split（）将字符串分开成数组 参数需要一个字符串，会根据这个字符串拆分，如果传递一个空船，就会将字符串拆分成一个一个
toLowerCase（）toUpperCase（）将字符串转换成大小写
*/
</script>
</head>
<body>
</body>
</html>
22.正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
<script>
/*
正则表达式可以定义一些字符串规则
通过正则表达式来检查一共字符串是否符合规则
或则将字符串复合规则的内容提取出来
创建一个正则表达式的对象
var reg=new RegExp("正则表达式","匹配模式")
正则表达式的方法：
test（）
使用这个方法可以用来检查一共字符串是否符合正则表达式的规则
符合返回true，不符合返回false
第二个参数可以忽略：
i 忽略大小写
g 全局匹配模式
第二种创建方法：
var reg=/a/i;这种方式根简单，不如构造函数灵活
创建一个正则表达式，判断是否含有a或者b
var reg=/a|b/i
创建一共正则表达式，检查是都含有字母
var reg=/[a-z]/;0-9，，这个范围是unicode编码A-z表示字母中括号里面表示或则关系
创建一个判断是否含哟abc或者aec或者adc的正则表达式
reg= /a[ebd]c/;
reg=/[^ab]/;表示除了ab的正则表达式
*/
var reg= new RegExp("a","i");//表示找到字符串中是否含有a
var str="a";
document.write(reg.test("abc"));
var reg2=/a|b/i;
document.write(reg2.test("aBcd"));
</script>
</head>
<body>
</body>
</html>
23.字符串和正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串和正则表达式</title>
<script>
/*
split（）将字符串分割成数组
将参数写成正则表达式，这样可以根据正则表达式拆分字符串
默认删除正则表达式的匹配默认是全局的
search() 搜索字符串中含有指定内容
如果搜索到内容返回第一次的索引，没有搜索到返回-1
将参数携程正则表达式，会根据正则表达式去搜索，不能搜索全局的
match（）根据正则表达式将符合要求的字符串提取出来
可以根据字符串提取符合要求的字符串，
默认情况下提取一个，如果将正则表达式设置为全局的，就可以提取字符串中全部的字母
可以直接设置多个匹配模式，顺序无所谓
var res5=str.match(/[A-z]/gi);//提取出全部字母不区分大小写
将会封装到数组中返回
replace（） 将字符串的的指定字符串替换为新的内容
参数
第一个被替换的字符串
第二个新的字符串
默认只会替换第一个
*/
var str="1q2w3e4r5t6y7u";
var res=str.split(/[a-z]/);//字符串根据字母分开
var res2=str.split(/[abc]/);//将字符串以a，b，c分开
var res3= str.search(/[abc]/);//在字符串中搜索a或者b或者c返回第一次搜索到的索引
var res4=str.match(/[A-z]/);//提取出一个字母
var res5=str.match(/[A-z]/g);//提取出全部字母
var res6=str.replace(/[a-z]/gi,"@_@");//将所有字符串中的字母不区分大小写替换成@_@
document.write(res);
</script>
</head>
<body>
</body>
</html>
24.正则表达式语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式的语法</title>
<script>
/*
正则表达式
量词：通过量词可以设置一个内容的出现次数
语法： var res=/a{量词}/;量词是就近原则只会对前边最近的起作用
res=/a{m,n}/;表示出现次数是m-n次
res=/a{m,}/;表示超过m次
a+ 表示至少一个a
a* 表示0个或则多个a
a？表示0个或者1个a
^a 表示以a开头
a$ 表示以a结尾
^a$ 表示只有一个a
^a|a$ 以a开头或者以a结尾
如果想检查字符串中是否含有.或者\，有特殊意义的符号必须要用转义符号
在构造函数中也是，如果需要使用\必须要用\\代替，以为参数是字符串，必须要用转义符号
res = /\./;res = /\\/;
\w 任意字母和数字下划线[A-z0-9_]
\W 除了字母和数字下划线[^A-z0-9_]
\s 空格[ ]
\S 除了空格
\b 单词边界 res= /child/; res.test("children")返回true
\B 除了单词边界 res=/\bchild\b/; 测试返回false
\d 任意数字[0-9]
\D 除了数字[^0-9]
*/
/*
创建一个字符串是不是手机号
*/
var phonenum="17384017268";
var phreg=/^1[3-9][0-9]{9}$/;
document.write(phreg.test(phonenum));
var res=/a{3,3000}/;
res =/ab{3000}/;//3000个b
res =/(ab){200}/;//200次ab
/*
接收一个用户输入
用户输入可能会产生空格，一个要去除空格，所以就是用空串去替换空格
但是一般只去前后的空格，
str.replace(/^\s*|\s*$/g,"");//将*换成+也行
*/
var str=prompt("请输入密码：");
str = str.replace(/\s/g,"");
document.write(str);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子邮件正则表达式</title>
<script>
/*
任意字母数字下划线开头 766623393@qq.com
任意数字和字母 @ qq .com
*/
var emailreg=/^[0-9]{5,10}@q{2}\.[a-z]{2,5}$/;//开头的^末尾的$不难少，少了代表含有这些，不代表一直待最后
var email = "766623393@qq.comyyyyyy";
document.write(emailreg.test(email));
</script>
</head>
<body>
</body>
</html>
25.DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> DOM</title>
</head>
<body>
<button id="button">打开</button>
<script>
var btn = document.getElementById("button");
btn.innerHTML="关闭";
</script>
</body>
</html>
26.事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<button id="btn" onmousemove="alert('傻逼');" >打开</button>
<script>
/*
事件是用户和浏览器之间的交互
比如说点击按钮和鼠标移动，关闭窗口
通过给对象绑定事件完成响应，可以在标签中完成，也可以通过设置对象的属性，绑定事件
*/
var botton = document.getElementById("btn");
botton.onclick = function () {
alert("憨批");
}
</script>
</body>
</html>
27.文档加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档加载</title>
<script>
/*
文档加载是从上往下依次加载的，所以代码执行也是从上往下执行的，如果讲JS代码写在body前面没有用
但是要是事件绑定成功，必须要要让JS代码在按钮加载完成之后执行
onload事件可以会在整个页面加载完成之后执行，所以为window设置一个onload事件
可以让对应的事件在网页加载完成后执行
*/
window.onload = function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("Hello");
};
};
</script>
</head>
<body>
<button id="btn">按钮</button>
<!-- <script>
/*
文档加载是从上往下依次加载的，所以代码执行也是从上往下执行的，如果讲JS代码写在body前面没有用
但是要是事件绑定成功，必须要要让JS代码在按钮加载完成之后执行
onload事件可以会在整个页面加载完成只会执行，所以为window设置一个onload事件
可以让对应的事件在网页加载完成后执行
*/
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("Hello");
}
</script>-->
</body>
</html>
28.DOM查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM查询</title>
<script>
//首先设置最后执行
window.onload = function () {
var cbj = document.getElementById("cbj");//获取id为cbj对象
cbj.onclick = function () {//为cbj按钮绑定事件
var bj = document.getElementById("bj");
alert(bj.innerHTML);//访问对象的文本
};
var cli = document.getElementById("cli");
cli.onclick = function () {
//查询所有的li结点
//通过getElementsTagName()返回所有的li元素结点对象
//返回值为一组对象，即使是一个对象
var btn = document.getElementsByTagName("li");
alert(btn.length);
for(var i=0;i<btn.length;i++)
{
alert(btn[i].innerHTML);
}
};
var gen= document.getElementById("cin");//查找cin按钮
gen.onclick = function () {
//查找gender结点
//输出长度
var btn = document.getElementsByName("gender")
alert(btn.length);
//innerHTML用于获取元素内部的HTML代码
//对于自结束标签没有意义
alert(btn[0].innerHTML);
//可以读取元素的属性值
//直接通过元素.属性名，但是不能用访问class属性，要用className访问
alert(btn[0].name);
alert(btn[0].className);
};
//获取文件里面的bcity按钮
var btn2 = document.getElementById("ccity");
btn2 .onclick = function () {
//获取city下面的的所有li结点
var city=document.getElementById("city");
//获取city的元素
var list =city.getElementsByTagName("li");
for(var i=0;i<list.length;i++)
{
alert(list[i].innerHTML);
}
};
var btn3 = document.getElementById("bcity");
btn3.onclick = function () {
//获取id为city的节点
var city = document.getElementById("city");
//会获取所有的元素包括文本节点
var res = city.childNodes;
//返回所有元素的子元素不包括文本节点
var res2 = city.children;
alert(res.length);
alert(res2.length);
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
你喜欢哪个城市？
<ul id="city">
<li id="bj">北京</li>
<li >上海</li>
</ul>
</div>
</div>
<div class="inner">
<input name="gender" class="111">
</div>
<button id="cbj">查询北京</button>
<button id="cli">查询LI</button>
<button id="cin">查询input</button>
<button id="ccity">获取city里面的元素</button>
<button id="bcity">查询city下面的全部字节点</button>
</body>
</html>
29.卡片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>卡片切换</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#outer{
width: 300px;
margin: 50px auto;
padding: 10px;
background-color: greenyellow;
text-align: center;
}
</style>
<script>
window.onload=function(){
/*
点击按钮切换卡片
*/
var over= document.getElementById("over");
var begin = document.getElementById("begin");
var img = document.getElementsByTagName("img");
over.onclick = function () {
img[0].src = "../images/gameover.png";
};
begin.onclick=function () {
img[0].src ="../images/pause_nor.png"
};
}
</script>
</head>
<body>
<div id="outer">
<img src="../images/pause_nor.png" alt="游戏结束">
<button id="begin">暂停</button>
<button id="over">结束</button>
</div>
</body>
</html>
30.DOM其他查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM其他查询</title>
<script>
window.onload=function () {
/*
在document里面有一个body属性值，可以直接获取body标签，他是body的引用
还要一个documentElement属性值是html标签的属性值
all 属性代表所有标签元素
*/
var body = document.body;
var html = document.documentElement;
console.log(body);
document.write(html);
var all = document.all;
// all = document.getElementsByTagName("*");//这个也可以获取全部的标签
/*
根据元素的class属性查询元素,IE9才支持
*/
var box=document.getElementsByClassName("box");
console.log(box.length);
document.querySelector(); 参数是一个CSS选择器,IE8也支持，缺点只会返回一个元素对象，有多个只返回第一个
var div = document.querySelector(".box div")
console.log(div.innerHTML);
//document.querySelectorAll(),可以返回多个满足条件的元素，以数组形式返回
//即使只有一个，也是返回数组
};
</script>
</head>
<body>
<div class="box">
<div>box中的div</div>
</div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
31. DOM对象的增删改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM对象的增加删除修改</title>
<script>
/*
增加一个元素结点，一个先创建一个元素结点，然后再创建一个文本结点，将文本结点设置为元素结点的子节点
然后再将元素结点设置为父元素的子节点
append 在父元素里面插入指定元素
insertBefore 在指定的字节点后面添加新的字节点，用父节点调用该方法参数为新节点，旧结点
replace 将指定的子节点替换成新的字节的，参数是新节点，旧结点
*/
window.onload=function () {
var btn =document.getElementById("cbj");
btn.onclick=function () {
var li = document.createElement("li");
var text =document.createTextNode("广州");
li.append(text);
var bj = document.getElementById("bj");
bj.append(li);
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
你喜欢哪个城市？
<ul id="city">
<li id="bj">北京</li>
<li >上海</li>
</ul>
</div>
</div>
<div class="inner">
<input name="gender" class="111">
</div>
<button id="cbj">查询北京</button>
<button id="cli">查询LI</button>
<button id="cin">查询input</button>
<button id="ccity">获取city里面的元素</button>
<button id="bcity">查询city下面的全部字节点</button>
</body>
</html>
32.DOM操作CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作CSS</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script>
window.onload=function () {
/*
点击按钮修改div大小
*/
var box1=document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
//修改box1样式
/*
通过JS修改元素样式，改变的是内联样式，有较高的优先级
语法：元素.style.样式名=样式值//样式值是一个字符串
样式名不能有特殊符号，要将特殊字符去掉，将后面的字母改成大写
通过JS设置的是内联样式，读取的也是内联样式
*/
box1.style.width="300px";
box1.style.backgroundColor="yellow";
};
var btn02=document.getElementById("btn02");
btn02.onclick=function () {
alert(box1.style.width);
};
}
</script>
</head>
<body>
<button id="btn01">点击1</button>
<button id="btn02">点击2</button>
<br><br>
<div id="box1"></div>
</body>
</html>
33.DOM元素获取样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM获取元素样式</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script>
window.onload=function () {
var box1=document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
// alert(box1.style.width);
/*
获取元素当前元素显示的样式，
语法：元素.currentStyle.样式名
只能IE支持
*/
alert(box1.currentStyle.width);
};
var btn02=document.getElementById("btn02");
btn02.onclick=function () {
/*
在其他浏览器中，
可以用getComputedStyle（）方法，该方法是window的方法，可以直接使用
需要两个参数，
第一个：要获取元素
第二个：传递一个伪元素，一般都传递null
该方法会返回一个对象，将所有的样式封装在一个对象中
可以通过对象名.样式名获取对象样式的值
但是IE8及以下的浏览器不支持
*/
alert(getComputedStyle(box1,null).width);
};
//定义一个获取元素样式的函数，让所有浏览器都支持
function getStyle(obj,name,) {//boj:获取元素，name：获取样式名
//需要判断浏览器版本
//除IE以外
//return getComputedStyle(obj,null).[name];
//IE支持
// return obj.currentStyle.[name];
//判断方法是否存在
if(window.getComputedStyle)//判断window是否有该属性
return getComputedStyle(obj,null)[name];
else
return obj.currentStyle[name];
//可以替换成3目运算符
}
}
</script>
</head>
<body>
<button id="btn01">点击1</button>
<button id="btn02">点击2</button>
<br><br>
<div id="box1"></div>
</body>
</html>
34. 操作其他样式的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他样式操作的属性</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
border: solid 10px yellow;
}
</style>
<script>
window.onload=function () {
var box1=document.getElementById("box1");
var btn01 =document.getElementById("btn01");
btn01.onclick=function () {
/*
以下属性只能读，不能改，都不带单位
clientWidth
clientHeight
这两个属性口语获取元素的可见高度和宽度
只包括内容去和内边距，不包括外边框，
offsetHeight
offsetHeight
获取元素的可见宽度和高度，包括内边距，内容区，外边框
offsetParent
获取当前元素的定位父元素，会获取最近开启了定位的祖先元素，如果所有祖先元素都没有开启，返回body
offsetLeft
当前元素相对于其定位父元素的水平偏移量
offsetTop
当前元素相对于其定位父元素的垂直偏移量
scrollWidth 可以滚动的宽度
scrollHeight 可以滚动的高度
scrollLeft 水平滚动的距离
scrollTop 垂直滚动的距离
*/
alert(box1.offsetHeight);
}
}
</script>
</head>
<body>
<button id="btn01">点击</button>
<br><br>
<div id="box1"></div>
</body>
</html>
35.事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象</title>
<style>
#eareDiv{
height: 100px;
width: 200px;
background-color: red;
}
#showMsg{
height: 50px;
width: 200px;
}
</style>
<script>
window.onload = function () {
var eareDiv=document.getElementById("eareDiv");
var showMsg = document.getElementById("showMsg");
//当事件被触发时，浏览器会自动将时间对象作为形参传递给响应函数
//在事件中封装了该事件的一切信息，比如说：鼠标i的坐标，键盘那个按键被按下，鼠标滚动方向
eareDiv.onmousemove = function (event) {
//解决兼容性问题
//在IE8中，响应函数触发时不会传递事件对象，在IE8中事件是作为window属性值存储的
//所以要判断是否又event对象，如果没有，则是window.event
if(!event)
event=window.event;
//event = event || window.event 这样也可以
//获取x，y坐标
var x= event.clientX;
var y=event.clientY;
showMsg.innerHTML="x="+x+",y="+y;
}
}
</script>
</head>
<body>
<div id="eareDiv"></div>
<div id="showMsg"></div>
</body>
</html>
36. Div跟随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div跟随鼠标移动</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
/*不开启定位也不行，必须开启定位*/
}
</style>
<script>
window.onload = function () {
//div跟随鼠标移动
var box1=document.getElementById("box1");
document.onmousemove = function (event) {
//解决兼容问题
event=event || window.event;
//获取可见窗口坐标
var left = event.clientX;
var top = event.clientY;
/*
pageX属性是相对于整个页面的位置
pageY
有滚动条的时候，只是可见窗口就不行
IE8不兼容
解决不兼容问题
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl= document.body.scrollLeft || document.documentElement.scrollLeft;
box1.style.left=left+sl+"px";
box1.style.top = top+st+"px";//注意一定要加上“px"右边只能是字符串
*/
//设置偏移量
box1.style.left=left+"px";
box1.style.top = top+"px";//注意一定要加上“px"右边只能是字符串
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
37.冒泡事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒泡事件</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: red;
}
#s1{
background-color: #bbffaa;
}
</style>
<script>
window.onload=function () {
//给s1绑定事件
//此时点击s1后面的事件也会触发，也就是点击的元素是后代元素，其祖先元素的相同事件也会触发
//如果不希望后续的事件发生，需要取消事件的冒泡
var s1=document.getElementById("s1");
s1.onclick = function (event) {
event=event||window.event;
alert("我是s1");
event.cancelBubble=true;//取消事件冒泡
}
var box1=document.getElementById("box1");
box1.onclick=function (event) {
event=event||window.event;
alert("我是box1");
event.cancelBubble=true;
}
document.body.onclick=function (event) {
event=event||window.event;
alert("我是body");
event.cancelBubble=true;
}
}
</script>
</head>
<body>
<div id="box1">
我是box1
<span id="s1">我是一个span</span>
</div>
</body>
</html>
38.事件委派
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的委派</title>
<script>
window.onload = function () {
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var li = document.createElement("li");
li.innerHTML = "<a href=\"javascript:;\" class=\"link\">新建超链接</a>";
var u1 = document.getElementById("u1");
u1.appendChild(li);
}
//为每一个超链接绑定一个事件
//这种方式只能给已经有的元素绑定事件，不能给新加的绑定事件
// var alla = document.getElementsByTagName("a");
// for(var i=0;i<alla.length;i++)
// alla[i].οnclick= function () {
// alert("111");
// }
//改进之后，只绑定一次事件，可以应用到多个元素，包括新添加的元素
//尝试将事件绑定给共同的祖先元素
//将事件绑定给共同的祖先元素，这样当后代的元素事件触发时，会传到祖先元素
//从而将通过祖先元素的响应赖 处理事件，就叫做事件的委派，可以减少事件绑定次数，提高性能
var u1 =document.getElementById("u1");
u1.onclick = function (event) {
event = event || window.event;
if(event.target.className === "link")
alert("u1单击函数");
}
}
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #bfa">
<li><a href="javascript:;" class="link">超链接1</a></li>
<li><a href="javascript:;" class="link">超链接2</a></li>
<li><a href="javascript:;" class="link">超链接3</a></li>
</ul>
</body>
</html>
39.事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的绑定</title>
<script>
window.onload = function () {
var btn01=document.getElementById("btn01");
/*
使用对象.事件 = 函数的形式只能绑定一个响应函数，不能绑定多个，后面会覆盖前面
addEventListener() 使用事件监听器，可以绑定相应的响应函数
其中的this是绑定事件的对象
可以给一个事件绑定多个响应函数 IE8以下不支持，响应函数是用队列存储的
参数：
1.事件的字符串，不要on
2.回调函数，当事件触发时调用的函数
3.是否在捕获阶段触发事件，需要一个Bool值一般为false
在IE8以下的浏览器使用attachEvent（）
其中的this是window
也可以给事件绑定多个响应函数，响应函数是用栈存储的
参数：
1。事件字符串，要on
2.回调函数，事件触发的函数
*/
// btn01.onclick = function () {
// alert(111);
// }
btn01.addEventListener("click",function () {
alert(1);
},false);
btn01.addEventListener("click",function () {
alert(2);
},false);
}
</script>
</head>
<body>
<button id="btn01">点击</button>
</body>
</html>
40.事件传播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的传播</title>
<style>
#box1{
width: 300px;
height: 300px;
background-color: red;
}
#box2{
width: 200px;
height: 200px;
background-color: yellow;
}
#box3{
width: 150px;
height: 150px;
background-color: blue;
}
</style>
<script>
window.onload = function () {
//分贝为3个div绑定事件
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
/*
事件的传播：
1.事件的捕获阶段，有最外层元素向目标元素，捕获，不触发事件
2.目标阶段，事件捕获到目标元素，触发事件
3.冒泡阶段，从目标元素向祖先元素传递，
如果希望在捕获时期就触发事件，就将addEventListener的第3个参数设置为true
IE8以下只有冒泡
*/
bind(box1,"click",function () {
alert("我是box1");
});
bind(box2,"click",function () {
alert("我是box2");
});
bind(box3,"click",function () {
alert("我是box3");
});
}
function bind(obj, eventStr,callback) {
if(obj.addEventListener)
obj.addEventListener(eventStr,callback,false);
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>
41.鼠标滚动事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标滚动事件</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script>
window.onload = function () {
var box1 = document.getElementById("box1");
/*
为box1绑定鼠标滚动事件
onmousewheel鼠标滚动事件，会在鼠标滚动时触发
火狐中要用;
DOMMouseScroll 来绑定滚动事件，要通过addEventListener（）来添加绑定函数
*/
box1.onmousewheel = function(event){
//alert("滚了");
//event.wheelDelta 可以获取鼠标滚动的方向
//火狐中不支持，要用event.detail来获取，向上为证，向下为－
//向上为120，向下为-120
if(event.wheelDelta>0)
//alert("向上");
box1.style.height = box1.clientHeight -10 +"px";
else
//alert("向下");
box1.style.height = box1.clientHeight +10 +"px";
}
/*
当浏览器中滚轮滚动时，如果有滚动条，滚动条会随之滚动
这是浏览器的默认行为，需要取消这个默认行为，直接return false
使用addEventListener 绑定事件需要用event来取消，preventDefault（）
*/
bind(box1,"DOMMouseScroll",function () {
alert("滚了");
});
event.preventDefault();
return false;
}
function bind(obj, eventStr,callback) {
if(obj.addEventListener) {
obj.add(eventStr, callback, false);
}
}
</script>
</head>
<body>
<div id="box1" ></div>
</body>
</html>
42.键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<script>
window.onload = function () {
/*
键盘事件：
onkeydown
一直按的话会一直触发事件，但是第一次和第二次触发事件之间时间间隔稍微就一点，防止误操作
键盘按下
onkeyup
键盘弹起
键盘事件一般绑定给可以获取焦点的对象或者是document
*/
document.onkeydown = function (event) {
//alert("键盘按下");
event = event ||window.event;
//可以通过keyCode获取按下键盘按键的编码
//时间对象中还有其他的key值，如果按下，返回true，入ctr，alt，shift这几个，分别用ctrkey
if(event.keyCode===89 && event.ctrlKey===true)
alert("ctr+y");
}
document.onkeyup = function () {
alert("键盘松开");
}
var input = document.getElementsByTagName("input")[0];
input.onkeydown = function () {
return false;//取消文本框显示文字的默认行为
}
}
</script>
</head>
<body>
<input type="text">
</body>
</html>
43.BOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM对象</title>
<script>
/*
BOM
-浏览器对象模型
-BOM中可以通过JS来操作浏览器，DOM是通过JS操作文档
在BOM中提供了一组对象，来完成浏览器的操作
-BOM对象
window
代表浏览器窗口，同时window也是浏览器的全局变量
navigator
代表浏览器的信息，通过改对象可以识别不同的浏览器
但是这个对象中大部分属性都已经不能帮助识别浏览器了
只有userAgent还有用，用户代理，也就是浏览器的意思
谷歌浏览器的userAgent：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/88.0.4324.146 Safari/537.36
通过正则表达式可以判断除不同的浏览器
但是IE11中没有与IE相关的标识，MSIE
如果userAgent不能判断，可以通过浏览器特有的对象或者属性判断
location
代表浏览器的地址栏信息，可以通过该对象获取地址栏信息，或者操作浏览器跳转页面
可以直接修改location的值，并且跳转页面，生成历史记录
location = "http://www.baidu.com"
assign（）方法：可以用来直接跳转耶尔缅，作用直接修改location的作用一样
reload（）方法，用于重新加载页面，相当于刷新按钮，如果将参数设置为true就会将页面的所有类容刷新
replace（）方法，可以使用一个新的页面替换当前页面，调用完毕后会跳转页面，但是没有历史记录
history
代表浏览器的历是记录，可以通过该对象操作浏览器的历是记录，
由于隐私原因，该对象不能获取具体的历史记录，只能向前或者向后跳转浏览器页面
而且该操作只能在当次访问有效
length 属性，返回历史记录中的页面的个数
back（）方法，返回上一个页面，和浏览器的回退按钮作用一样
forward方法，跳转到i当前页面的下一个页面，和浏览器的前进按钮作用一样
go（）方法，可以用来指定跳转页面，参数是一个整数，如果为正，跳转到前面的任意指定页面
如果为负，返回当前页面的任意指定页面
screen
代表用户的屏幕信息，通过该对象可以获取到用户的显示器信息
上面的四个浏览器对象既可以通过window对象的属性访问，也可以直接访问
//console.log(window.navigator.appName)
// console.log(navigator.appName);
*/
var ua= navigator.userAgent;
document.write(ua);
if(/chrome/i.test(ua))
alert("你是谷歌浏览器");
</script>
</head>
<body>
</body>
</html>
44.定时与延时调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时与延时调用</title>
<script>
window.onload = function () {
var count = document.getElementById("count");
/*
如果希望程序间隔一段时间调用一次，可以用定时调用
setInterval（）方法，定时调用，，可以将会一个函数每隔一段时间调用一次，
参数：
1.回调函数
2.每次调用间隔时间ms
会有一个返回值，类型为Number
clearInterval（）方法，关闭定时器，，参数需要一个识别定时器的参数，将对应的定时器关闭
setInterval返回值就是定时器的唯一标识
setTimeout（）延时调用
定时调用会执行多次，延时调用只执行一次
clearTimeout（）关闭延时调用，用法和定时调用一样
*/
var num=1;
var timer=setInterval(function () {
count.innerHTML=num++;
if(num===11)
clearInterval(timer)
},1000);
}
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
45.类的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类的操作</title>
<style>
.d1{
width: 100px;
height: 100px;
background-color: red;
}
.d2{
width: 200px;
height: 200px;
background-color: blue;
}
.b2{
height: 200px;
background-color: yellow;
}
</style>
<script>
window.onload = function () {
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function () {
/*
修改box的css样式，通过修改class属性
只需要修改一次，就可以修改很多样式，这种方式将表现和行为分离
*/
box.className = "d2";
//如果需要兼容两个样式，两个样式相互补充的话
box.className+=" b2"//其中空格一定不能少，将两个类名分开
}
}
</script>
</head>
<body>
<button id="btn">点击切换样式</button>
<br><br>
<div id = "box" class="d1"></div>
</body>
</html>
46.JSON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON</title>
<script>
/*
JS中对象只有JS自己认识
JSON是一种特殊格式的字符串，可以被任意语言识别，并且可以转换成任意语言中的对u想，
JSON在开发中主要是数据交互
JSON
JavaScript Object Notation JS对象表示法
JSON和JS对象格式一样，只是属性名必须要双引号
JSON分类：
1.对象 {}
2.数组 []
JSON中允许的值：
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组
*/
var obj ={"name":"zhou","age":21};
var arr = '[1,2,3,true,obj]';
/*
JSON转换成JS对象，在JS中有一个JSON工具类，可以帮助将JSON转换成JS对象
JSON中的
parse方法可以将JSON字符串转换成JS对象，她需要一个JSON字符串作为参数，会将该字符串转换成JS对象
stringify可以将JS对象转换成JSON格式字符串
JSON在IE7以下不兼容
eval（）函数，可以执行一个字符串形式的代码，并且返回执行结果
如果eval中字符串含有大括号，会将其视为代码块，如果不能将其视为代码块，需要在字符串前后各加一个（）
该函数功能强大，可以直接执行JS代码，尽量不要使用，可能会异常，需要用捕捉异常
兼容的时候可以通过一个外部JS文件来存储JSON
*/
var json ='{"name":"zhou","age":21}';
var o=JSON.parse(json);
document.write(o.name);
var json2=JSON.stringify(obj);
//document.write(json2);
var ss=eval("("+json+")");
console.log(ss);
</script>
</head>
<body>
</body>
</html>
4520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
