概念

JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译) JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行

作用

为网页添加各式各样的动态功能 为用户提供更流畅美观的浏览效果

用法

script标签放在head中可以，body中也可以， 放在最后也可以，对位置要求不严格 script标签不限数量

外部的JavaScript

外部脚本不能包含 script 标签 头部用

标签中的JavaScript

  <a href="javascript:alert('ok')">登录</a>

显示数据

使用windows.alert()弹框输出--windows可以省略 使用document.write()将内容写入到html文档 使用innerHTML写入到html元素

基本语法

变量

声明变量的关键字:var

var myCompany; //声明变量 myCompany='开课吧';//赋值 var x=5;//声明的同时赋值 var y=6; var z=x+y;//变量也可以存储表达式

变量的命名规则

变量必须以字母开头 变量也能以 $ 和 _ 符号开头 变量名称对大小写敏感(y 和 Y 是不同的变量) 不能使用关键字保留字

规范命名

见名知意 驼峰命名法 首字母大写

数据类型 值类型

字符串String

var myCompany; //声明变量 myCompany='开课吧'; //赋值 var x=5;//声明的同时赋值 var y=6; var z=x+y;//变量也可以存储表达式 var gameName="英雄联盟"; var hairstylist='tony'; //PS:注意引号嵌套 var message1='我的发型师是"tony"老师'; var message2="我的发型师是'tony'老师";

布尔Boolean

数字类型Number

前5种是基本数据类型

空Null

var email = null; 只能有两个值:true 或 false var isUnderstand = true; var isSingle = false; 表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。 共有4中情况会出现undefined的值 变量声明且没有赋值 获取对象中不存在的属性时 函数需要实参，但是调用时没有传值，形参是undefined;

未定义Undefined

object

JavaScript拥有动态类型

var param; // param类型为 undefined param = 5; // 现在 param 为数字 param = "John"; // 现在 param 为字符串

数据类型转换

其它->字符串String

调用a的toString()方法 undefined和null没有toString方法 调用string函数，将a转换为字符串 使用String()函数做强制转换时，实际上就是调用toString方法。但对于null和undefined将会转换为字符串，"null"和“undefined”

其它->数字Number

1.使用Number（）函数。 纯数字的字符串直接转换 有非数字的内容，或者是undefined，则转换为NaN 如果字符串是一个空串或者全是空格，或者是null，则会转换成0 boolean转数字，true转换成1，false转换成0 2.使用parseInt()或parseFloat() 这种方法专门对付字符串 如果对非String使用parseInt()或parseFloat()，则会先转换成String，然后再操作。 parseInt()将一个字符串中的从头到第一个非整数的整数内容取出来，然后转换成Number parseFloat()把一个字符串转换为浮点数，取出字符串中的有效小数

其它->转换为Boolean

使用Boolean函数 数字->布尔，除了0，NaN，，其余都是true 字符串->布尔，除了空串，其余都是true null和undefined转换为false 对象转换为true 对任意的数据类型做两次非运算，即可将其转换为布尔值

引用数据类型

对象(Object)

对象是一种复合数据类型，在一个对象中可以存储多个不同的数据类型 js中的变量都是保存到栈内存中的 基本数据类型的值直接在栈内存中存储，值与值之间独立存在，修改一个不会影响其他的变量 对象是保存在堆内存中的，没创建一个新的对象，就会在堆内存中开辟一个新的空间，而变量的保存是对象的内存地址（对象的引用），两个变量保存的是同一个对象引用，当一个改变时，另一个也会受到影响，随之改变。

定义

var obj=new Object();跟var obj={};效果一样 var obj=new Object(); obj.name = "孙悟空"; obj.gender = "男"; 等同于 var obj={name:"孙悟空",gender:"男"};

分类

1.内建对象

由ES标准中定义的对象，在任何的ES的实现中都可以使用 比如，Math，String，Number，Boolean，Function，Object

2.宿主对象

由js运行环境提供的对象，目前主要讲由浏览器提供的对象 比如DOM，BOM

3.自建对象，自定义对象

由开发人员自己创建的对象 在对象中保存的值称之为属性 语法：对象.属性名=属性值; obj.name = "孙悟空"; obj.gender = "男"; obj.age = 1000; // 读取对象中的属性 // 语法：对象.属性名 console.log(obj.name); // 修改对象中的属性 // 语法：对象.属性名=新值; obj.name="猪八戒"; // 删除对象中的属性 // 语法：delete 对象.属性名; delete obj.name;

枚举对象中的属性

  for(var 变量 in obj){} 
  var obj=new Object(); 
  obj.name="高志远"; 
  obj.gender="男"; obj.age="23"; 
  for (var n in obj){ console.log(n+":"+obj[n]); }

函数(Function)

函数创建使用

定义

function fun1(){ console.log("第一种方式创建函数！"); } 
fun1();
 字面量 var fun2=function(){ console.log("第二种方式创建函数！"); }
 fun2();

函数也是一个对象，函数中看可以封装一些功能，在需要时执行这些功能代码 封装到函数中的代码不会立即执行 当参数过多时，可以将参数封装到一个对象中，然后通过对象传递 实参可以是对象也可以是函数 返回值可以是任意的数据类型，也可以是一个对象，也可以是一个函数 自调用函数（立即执行函数） 函数对象();

数组(Array)

运算符

算数运算符

±* /%、++、 --

赋值运算符

:=、 +=、-=、*=、 /=、%=

字符串的连接符

+

逻辑运算符

&&、||

条件运算符

?:

比较运算符

== 、!=、> 、<、 >=、 <= ==当数据类型不一样时，会进行转换,可以通过括号改变优先级

特殊运算符

=== 绝对等于(值和类型均相等) !== 不绝对等于(值和类型有一个不相等，或两个都不相等)

  var x=5;
    var res=(x===5); // true
    res=(x==='5');// false
    res=(x!==5); // false
    res=(x!=='5');// true

JavaScript对象

JavaScript的String对象

字符串属性

字符串.length 获取字符串的长度 var str="我喜欢看NBA,最喜欢的球员是'小学生'库里"; //注意:字符串中出现的'是一个字符，转义为一个单引号 console.log(str); //获取字符串的长度:，切记:所有转移符号的长度都算一个，即'长度为1 console.log("字符串的长度="+str.length);//22

字符串方法

str.charAt(x) 返回字符串中指定位置的字符 通常使用字符串[];来代替使用 charCodeAt() 获取指定位置字符的字符编码(Unicode编码) String.fromCharCode()可以根据字符串编码获取字符 result=String.fromCharCode(20013); concat()可以链接两个或者多个字符串作用和+一样 indexof()该方法可以检索一个字符串中是否有指定内容，如果有则返回第一次出现的索引，如果没有找到指定的内容，则返回-1，第二个参数是指定开始查找的位置 lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：从后往前找，也可以通过第二个参数指定位置 slice()截取字符串, 参数：第一个为开始的索引，包括开始位置，第二个参数为结束位置的索引，不包括结束的位置。如姑婆省略第二个参数，则会截取到后边所有的，也可以传递一个负数作为参数，从倒数第一个开始往前计算 soilt()将一个字符串拆分为一个数组，第一个参数为分隔符 toUpperCase()将一个字符串全部转换为大写 toLowerCase()将一个字符串全部转换为小写

JavaScript的Array对象

Array 对象用于在变量中存储多个值，也就是数组 数组也是一个对象，功能与普通对象功能相似，数组的存储性能比普通对象好，在开发中经常使用数组来存储一些数据

创建数组

  var names=new Array(); names[0]="贾宝玉1"; names[1]="贾宝玉2"; names[2]="贾宝玉3"; names[3]="贾宝玉4";
   字面量var cars=["大众","保时捷","宝马"]
   构造函数var classes=new Array("1班","2班","3班")

获取数组的长度

语法:数组.length 对于连续的数组可以获取数组长度，对于非连续的数组可以获取最大的索引+1，尽量不要创建非连续的数组 数组中的对象可以是任意类型的数据类型，可以是对象也可以是函数

数组的方法

push()，该方法可以向数组的末尾添加一个或多个元素，并返回数组的新长度 pop() 方法从数组中删除最后一个元素并返回删除的那个元素

var arr=["ji","ya"]; result=arr.pop(); console.log(arr); console.log(result); result即为返回的那个对象

unshift() 方法（在开头）向数组添加新元素，并返回新的数组长度： shift() 方法删除数组中第一个元素，返回被“位移出”的字符串 slice() 方法用数组的某个片段切出新数组。两个参数，第一个是起始位置，第二个是中止位置，如果传递一个负值，则为从后往前数的元素 splice() 删除元素，两个以上的参数，第一个定义了应添加新元素的位置（拼接），第二个是定义应删除多少元素,第三个以及以后将会自动插入到开始位置索引前边，如果只有两个参数，第一个参数为开始删除的索引，第二个为删除的个数。 concat() 方法通过合并（连接）现有数组来创建一个新数组：

 var arr1=["桃子","玉米","花生","大豆"]; var arr2=["你好"]; var arr3=["李焕英"]; var arr4=arr1.concat(arr2,arr3,"新来的"); console.log(arr4);

join()将一个数组转换为一个字符串, 该方法不会对原数组产生影响 在join中，可以指定一个字符串作为参数，这个字符串将会成为数组元素中的连接符。 reverse()反转数组，该方法直接修改原数组 sort()按照unicode编码进行排序，直接修改原数组，从第一个字符进行排序

遍历数组

forEach() 方法为每个数组元素调用一次函数（回调函数）。 浏览器会在回调函数中传递三个参数 浏览器会在回调函数中传递三个参数 1. 第一个参数，是当前遍历的元素 2. 第二个参数，是当前遍历元素的索引 3. 第三个参数，是正在遍历的数组 第三个参数以后的都会显示 undefined var txt = ""; var numbers = [45, 4, 9, 16, 25]; numbers.forEach(myFunction); function myFunction(value, index, array) { txt = txt + value + "
"; } IE8 以下的浏览器均不支持该方法，所以要兼容 IE8 则不要使用 foEach() ,还是使用for 来遍历比较好

JavaScript的Date对象

创建日期对象

 var date1 = new Date(); 
 var date2 = new Date(milliseconds); 
 var date3 = new Date(dateString); 
 var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

日期对象常用方法

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31) getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6) 0表示周日 getFullYear() 从 Date 对象以四位数字返回年份 getHours() 返回 Date 对象的小时 (0 ~ 23) getMinutes() 返回 Date 对象的分钟 (0 ~ 59) getMonth() 从 Date 对象返回月份 (0 ~ 11) 0表示1月，11表示12月 getSeconds() 返回 Date 对象的秒数 (0 ~ 59) getTime（） 获取当前日期对象的时间戳,计算机底层保存的时间都是时间戳 setDate() 设置 Date 对象中月的某一天 (1 ~ 31) setFullYear() 设置 Date 对象中的年份(四位数字) setHours() 设置 Date 对象中的小时 (0 ~ 23) setMinutes() 设置 Date 对象中的分钟 (0 ~ 59) setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59) setMonth() 设置 Date 对象中月份 (0 ~ 11)

JavaScript的Math对象

Math常用属性

var pi=Math.PI; //返回圆周率

Math常用方法

var num=Math.random();// 返回 0 ~ 1 之间的随机数。 不会出现0，也不会出现1 var max=Math.max(12,34,-90,9); //返回 n个数值中的最大值。 var min=Math.min(12,34,-90,9); //返回 n个数值中的最小值。 var sqrt=Math.sqrt(9); //返回平方根。3 var abs=Math.abs(-90); //返回绝对值。90 var ceil=Math.ceil(1.5); //返回向上取整的数。2 var floor=Math.floor(1.5); //返回向下取整的数。1 var round=Math.roundl(1.7); //返回四舍五入的数。2 var pow=Math.pow(x, y) //返回x的y此幂的数。

Math和其它对象不同，他不是一个构造函数

生成一个随机数

生成一个x-y之间的数 Math.round(Math.random()*(y-x))+x;

JavaScript的函数

JavaScript的常用全局函数

isNaN(param) 用于检查其参数是否是非数值字 是数值的返回false，不是数值返回true console.log(isNaN(666));//false console.log(isNaN(1+2));//false console.log(isNaN("hello"));//true parseFloat(String) 字符串中只返回第一个数字。 开头和结尾的空格是允许的。 如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。 console.log(parseFloat("66"));//66 console.log(parseFloat("199.99"));//199.99 console.log(parseFloat("1024 2048 4096"));//1024 console.log(parseFloat(" 128 "));//128 console.log(parseFloat("10年"));//10 console.log(parseFloat("今天是8号"));//NaN parseInt(string,radix) 参数 string 必需，要被解析的字符串。 radix 可选，表示要解析的数字的基数。该值介于 2 ~ 36 之间 只有字符串中的第一个数字会被返回。 开头和结尾的空格是允许的。 如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。 在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制 的基数。

console.log(parseInt("66"));//66 
console.log(parseInt("199.99"));//199 
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt(" 128 "));//128 
console.log(parseInt("10年"));//10
console.log(parseInt("今天是8号"));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8 
console.log(parseInt("0x10"));//16 
console.log(parseInt("10",16));//16

JavaScript的自定义函数

自定义函数语法

使用function关键字定义函数 function 自定义函数名称(参数列表){函数体} 结果是"+res+"
");

自定义函数实例

1、函数的形参直接写参数名称，不需要声明类型，即不需要写var. 2、函数的返回取决于函数体中是否有return关键字。 例子

		<script type="text/javascript">
			var fun=function(){
				document.write("fun1</br>");
			}
			var fun2=function(a,b){
				document.write(a+"fun2"+b+"</br>");
			}
			var fun3=function(a,b){
				document.write(a+"fun3"+b+"</br>");
				return a+b;
			}
			fun();
			fun2(1,3);
			var result=fun3(10,10);
			alert(result);
		</script>

JavaScript的构造函数（类）

创建一个构造函数，专门用来创造Person对象的 构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯性首字母大写 构造函数与普通函数的区别是调用方式不同： 普通函数是直接调用，而构造函数需要用new关键字来调用

构造函数的执行流程:

1.立刻创建一个新的对象 2.将新建的对象设置为函数中的this,在构造函数中可以用this来引用新的对象 3.逐行执行函数中的代码 4.将新建的对象作为返回值返回 使用同一个构造函数构造的对象,我们称一类对象,也将一个构造函数成为一个类,我们将一个构造函数的对象,称为是该类的实例

实例

		<script type="text/javascript">
			function print(){
				document.write("你好")
			}
			function getSum(a,b){
				var he=a+b;
				return he;
			}
			print();
			var res=getSum(1,2.2);
			document.write("</br>结果是"+res+"</br>");
		</script>

在Person的构造函数中，为每一个对象都添加了一个sayName方法，造成内存资源浪费，改进方法：将sayName方法放在全局作用域中。

function Person(name,age,gender){
				this.name=name;
				this.age=age;
				this.gender=gender;
				this.sayName=fun;
			}
			function fun(){
				alert(this.name+"你好打工人");
			}
			var per1=new Person("高志远",23,"男");
			var per2=new Person("高运佳",21,"男");
			console.log(per1.name+per2.age);
			per1.sayName();

原型peototype---每创造一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是原型对象

function Person(name,gender,age){
				this.name=name;
				this.gender=gender;
				this.age=age;
			}
			Person.prototype.other=function(){
				document.write("我叫"+this.name+"<br/>");
			};
			var per1=new Person("孙悟空","男",500);
			var per2=new Person("白骨精","女",20);
			per1.other();
			document.write("我叫"+per2.name+",我是个"+per2.gender+"人");

如果作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的对象都会有一个隐含的属性，只想构造函数的原型对象，我们可以通过__proto__来访问该属性 原型对象相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象,当访问对象的一个属性或者方法时，它会在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用 使用instanceof可以检查一个对象是否是一个类的实例,语法: 对象 instanceof 构造函数 所有的对象都是Object的后代,所有对象和Object作instanceof检查时都会返回true

    console.log(per1 instanceof Person);

检查属性是否在方法里（原型对象）

使用in检查对象中是否有某个属性时，如果对象中没有但是原型中有，也会返回true 可以使用对象的hasOwnProperty()检查对象自身中是否含有该属性 使用该方法只有对象自身中含有该属性时，才会返回true 例子

function MyClass(){}
			MyClass.prototype.name="原型中的名字";
			var mc=new MyClass();
			mc.age=18;
			console.log("name" in mc);
			console.log(mc.hasOwnProperty("name"));
			console.log(mc.hasOwnProperty("age"));
			console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));
			console.log(mc.__proto__.hasOwnProperty.hasOwnProperty("hasOwnProperty"));

toString()方法

当在页面打印一个对象时，事实上输出的是对象的toString()方法的返回值

function Person(name,age){
				this.name=name;
				this.age=age;
			}
			// 修改Person原型的toString
			Person.prototype.toString=function(){
				return "Person[name="+this.name+",age="+this.age+"]";};
			var per1=new Person("贾宝玉",22);
			var per2=new Person("王熙凤",55)
			console.log(per1);
			console.log(per2);

JavaScript变量的作用域

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是 变量，所以只能在函数内部访问。 当函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用，如果没有则向上一级作用域中寻找，如果上一级中没有找到则会报错。 在函数中要访问全局变量就可以使用window对象 变量的声明提前，使用var关键字声明的变量，会在所有的代码执行之前被声明(但不会被赋值) 在函数中不使用var声明的变量都会成为全局变量

定义形参就相当于在函数作用域中声明了变量

 var e = 123; 
 function fun(e) { alert(e); } 
 fun(); 
 输出结果为undefined

全局 JavaScript 变量

在函数外声明的变量是 变量，网页上的所有脚本和函数都能访问它。 变量的声明提前 使用var关键字声明的变量，会在所有的代码执行之前被声明(但不会被赋值) 函数的声明提前 使用函数声明的形式创建的函数function()函数(){}会在所有代码执行前就被创建，使用var创建的函数不会被提前创建

<script>
	var userId = 1001; //全局变量:整个script脚本中都可用,要注意先后顺序
	function printMessage() {
		var userName = "李白";//局部变量:只在当前函数中生效 
		document.write(userId);//使用全局变量的时候，保证使用(方法被调用)之前定义并赋值
		document.write(message);
    printMessage();
</script>
<script>
    function printMessage2() {
		var userName2 = "李白2";
		document.write(userId);//这里也可以使用userId 
		//document.write(userName1);//错误:调用不到printMessage函数中的局部变量 
		document.write(userName2);//正确:可以使用自己函数中的局部变量
}
</script>

This

解析器在调用函数时每次会向函数内部传递进一个隐含的参数this，this指的是一个对象 根据函数的调用方式不同，this会指向不同的对象： 1.以函数形式调用时，this永远都是window 2.以方法的形式调用时，this就是调用方法的那个对象 3.当以构造函数 的形式调用时，this就是那个新创建的那个对象 4.使用call和apply调用时，this是指的那个对象

function fun(){
	console.log(this.name);
			}
			var obj = {
				name : "孙悟空",
				sayName: fun
			};
			fun();
			// this指的对象是window
			obj.sayName();
			// this指的对象是Object

var name = "全局变量";
			function fun() {
				console.log(this.name);
			}
			var obj = {
				name : "孙悟空",
				sayName: fun
			};
			var obj2 = {
				name : "猪八戒",
				sayName: fun
			};
			fun();
			//全局变量
			obj.sayName();
			//孙悟空
			obj2.sayName();
			//猪八戒

在调用call和apply时可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this call方法可以将实参在对象之后依次传递 apply方法需要将实参封装到一个数组中统一传递

function fun(a,b) {
				name: "obj3",
				console.log("a=" + a);
				console.log("b=" + b);
				alert(this.name);
			}
			var obj = {
				name: "obj",
				sayName: function() {
					alert(this.name);
				}
			};
			var obj2 = {
				name: "obj2"
			};
			obj.sayName.call(obj2);
			fun.call(obj,2,3);
			fun.apply(obj, [2, 3]);

arguments

封装实参的对象arguments arguments是一个类数组对象,他可以通过索引来操作数据，也可以获取长度 即使不定义形参，也可以用arguments来使用实参 只不过比较麻烦，arguments[0]表示第一个实参,Arguments[1]表示第二个实参 他里边有一个属性叫callee，就是当前正在指向的函数对象

function fun(){
				console.log(arguments[1]);
				console.log(arguments.callee);
			}
			fun("hello",155);

自定义对象

javascript自定义对象

###定义对象

		var student={name:"贾宝玉",age:18,height:173};
		var student2={
			name:"贾宝玉",
			age:18,
			height:173,
			study:function(){
				alert("好好学习，天天向上");
			}
		};

询问对象的属性

方式1: var n = student.name; 方式2: var n2 = student["name"];

询问对象的方法

student2.study();

使用工厂方法创建对象

该方法可以创建大量对象 使用工厂方法创建的对象构造的函数类型都是Object

windows对象

概念

所有浏览器都支持 window 对象。它表示浏览器窗口。( 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象)。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。 Window 对象表示浏览器中打开的窗口。

windows对象属性

document 对 Document 对象的只读引用 history 对 History 对象的只读引用

   <a href="javascript:window.history.forward()">前进</a>
   <a href="javascript:window.history.back()">后退</a>
   <a href="javascript:window.history.go(1)">前进go</a>
   <a href="javascript:window.history.go(-1)">后退go</a>

location 用于窗口或框架的 Location 对象 window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

    <a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
    <a href="javascript:window.location.reload()">刷新</a><br />
    <a href="javascript:window.location.replace('index.html')">跳转到index</a><br />
    <a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br />

name 设置或返回窗口的名称

window对象方法

alert() 显示带有一段消息和一个确认按钮的警告框 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框

		var res=window.confirm("确认要关闭窗口吗？")
		if(res){
			alert("点击了确定按钮");
		}
		else alert("点击了取消按钮");

prompt() 显示可提示用户输入的对话框

var age=prompt("请输入年龄",19)
alert("输入的年龄是："+age);

open() 设置或返回窗口的名称

<a href="javascript:window.open('https://www.baidu.com')">打开百度</a> 
<a href="javascript:window.open('index.html')">打开-index</a>

close() 打开一个新的浏览器窗口或查找一个已命名的窗口 <a href="javascript:window.close()">关闭当前页面</a>
setTimeout() 关闭浏览器窗口 setInterval() 在指定的毫秒数后调用函数或计算表达式 clearInterval() 取消由 setInterval() 设置的 timeout clearTimeout() 取消由 setTimeout() 方法设置的 timeout

正则表达式

定义

1.计算机可以根据正则表达式，来检查一个字符串是否符合规则 2.获取将字符串中符合规则的内容提取出来

创建正则表达式对象

语法 var 变量=new RegExp("正则表达式","匹配模式"); var reg=new RegExp("a");这个正则表达式可以检查一个字符串中是否含有a 在构造函数中可以传递一个匹配模式作为第二个参数，可以是i-忽略大小写g-全局匹配模式 字面量创建正则表达式 语法：var 变量=/正则表达式/匹配模式 更加简洁，但使用构造函数创建正则表达式更加灵活 正则表达式的方法： test()使用这个方法可以用来检查一个字符串是否符合正则表达式的规则 如果符合返回true否则返回false

正则表达式语法

检查字符串是否有a或b

reg=/a|b/; reg=/[ab]/; 中括号里边内容也是或的关系

检查一个字符串是否有字母

reg=/[A-z]/;

检查一个字符串是否有abc或adc或aec

reg=/a[bde]c/;

检查一个字符串是否没有a或b

reg=/[^ab]/;

检查一个字符串中是否有连续的三个a

量词a{n},用括号内表示a出现的次数，量词只对它前边的一个内容作用 a{m,n}，表示a出现m~n次 a{m,}，表示a出现m次以上 a+表示a至少有一个，相当于{1,} a*表示a有0个或者多个，相当于{0,} a?表示a有0个或1个，相当于{0,1}

   var reg=/a{3}/; 
   var res=reg.test("aaabc");
    console.log(res);
    
   var reg=/ab{3}c/;
   var res=reg.test("abbbc"); 
   console.log(res);

表示检索reg中是否有abbbc var reg=/ab{1,3}c/; var res=reg.test("abbbc"); console.log(res); 表示检索reg中是否有abc,或者abbc，或者abbbc

检查一个字符串中是否以a开头，^表示开头

var reg=/^a/;

检查一个字符串中是否以a结尾，$表示开头

var reg=/a/; 如果在正则表达式中同时使用^则要求字符串必须完全符合正则表达式

检查一个字符串中是否有特殊符号，使用转义字符表示特殊符号

.表示. var reg=/./; \表示
var reg=/\/; 在构造函数里，由于它的参数是一个字符串，而\是字符串中的转义字符，如果需要使用\则需要使用\来代替

    reg=new RegExp("\\.");
     reg=/\./;
    reg=new RegExp("\\\\");
     reg=/\\/;

检查一个字符串中是否

有任意字符

var reg=/./;

任意字母、数字、下划线_

var reg=/\w/;
 [A-z0-9_]

除了字母、数字、下划线_

var reg=/\W/;
 [^A-z0-9_]

有任意数字

var reg=/\d/;
 [0-9]

除了数字

var reg=/\D/;
 [^0-9]

有空格

var reg=/\s/;

除了空格

var reg=/\S/;

是单词边界

var reg=/\bchild\b/;
 表示是否是以单词为独立边界，即前后都没有字母
var reg=/\bchild/;
 表示是否是单词前边为独立边界，后边可以有字母

除了单词边界

案例 案例1 创建一个正则表达式用来检查一个字符串是否是一个手机号

11位15963580186
			1.以1开头
			2.第二位3-9任意数字
			3.三位以后任意数字，长度为9
			^1  [3-9]   [0-9]{9}$

案例2

  用户输入一个用户名，去除用户名中多余的空格，即去除前后空格
    var str=prompt("请输入您的用户名：");
    str=str.replace(/^\s*|\s*$/g,""); 
    console.log(str);

案例3 请创建电子邮件的正则表达式

hell.dsa@qq.com hell.dsa@163.com
			任意字母下划线  .   任意字母下划线  @   任意字母数字 .   任意字母2-5位  .  任意字母2-5位
			\w{3,}  (\.\w+)* @   [A-z0-9]+   (\.[A-z]{2,5}){1,2}
			var str=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

常用正则表达式 正则表达式大全

字符串和正则表达式

spilt()根据任意字母将字符串拆分

   var str="1a2v3d4f5g"; str.split(/[A-z]/);

search()搜索字符串中是否含有指定内容 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜到返回-1 它可以接受一个正则表达式作为参数，然后根据正则表达式去检索字符串 搜索字符串中是否含有abc，adc，aec

 result=str.search(/a[bde]c);

match()可以根据正则表达式，从一个字符串中将符合条件的内容跟提取出来,保存为一个数组

   result=str.match(/A-z/g);

replace()将字符串中指定内容替换为新内容

   result=str.replace(/a/gi,"@"); 把a或者A替换成@，接受正则表达式

DOM

事件

事件就是用户和浏览器之间的交互行为,比如点击按钮，鼠标移动，关闭窗口 我们可以在时间对应的属性中设置一些js代码，这样当时间被触发时，这些代码将会执行 浏览器在加载一个页面时，是按照自上向下的顺序加载的 如果将js标签写到页面上面，在代码执行时，页码还没有加载，所以将js代码编写到页面下边 如果想将js写在上边，则需要将页面加载完毕后，使用onload事件，onload事件将会等整个页面加载完毕后才触发，最佳的办法就是写最下边

DOM查找方法和属性

通过document对象调用

方法

getElementById()--通过id属性获取一个元素节点对象 getElementsByTagName()一通过标签名获取一组元素节点对象,返回当前节点的指定标签名后代节点 这个方法给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到数组中返回 getElementsByName()一通过name属性获取一组元素节点对象 getElementsByClassName()一通过class获取一组元素节点对象， 兼容性差,只有ie9以上兼容， 可以用document.querySelector()代替

属性

childNodes属性---表示当前节点的所有子节点 childNodes属性会获取包括文本节点在内的所有节点 根据DOM标签间空白也会当成文本节点 在ie8以及以下的浏览器中不会将空白文本当成子节点 所以该属性在IE88会返回四个子元素而其他浏览器是9个 children属性可以获取当前元素的所有子元素 firstChild，属性--表示当前节点的第一个子节点，包括空白文本 firstElementChild可以获取当前元素的第一个子元素， 兼容性差,只有ie9以上兼容 lastChild，属性--表示当前节点的最后一个子节点，也可能获取空白文本 parentNode表示当前节点的父节点，也可能获取空白文本 previousSibling表示当前节点的前一个兄弟节点， 也可能获取空白文本 previousElementSibling表示当前节点的前一个兄弟元素，兼容性差,只有ie9以上兼容 nextSibling表示当前节点的后一个兄弟节点，也可能获取空白文本 nextElementSibling表示当前节点的后一个兄弟节点， 兼容性差,只有ie9以上兼容

其它

innerHTML通过这个属性可以获取到元素内部的代码 innerText该属性可以获取到元素内部的文本内容,它和innerHTML类似,不同的是自动将HTML标签去除 文本的nodeValue就是文本的内容 获取body标签 在document中有一个属性就是body的引用document.body 获取html 根标签var html=document.documentElement; 获取所有元素 document..all 用法和document.getElementByTagName用法相同 获取class为box1中的所有div 需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象 使用该方法，只能返回唯一的元素，如果满足条件的元素有多个，则只返回第一个元素，解决方法：document.querySelectorAll()，封装到一个数组中，即使符合条件的元素只有一个，也会返回一个数组

   document.querySelector(.box div)

DOM 增删改方法和属性

方法

createElement()，用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名传教元素节点对象，并将创建好的对象作为返回值返回 createTextNode()用于创建一个文本节点对象，需要将一个文本内容作为参数，将会根据改内容创建文本节点，并将新节点返回 appendChild()向一个父节点中添加一个新的子节点 用法：父节点.appendChild(子节点); insertBefore()可以在指定的子节点前插入新的子节点 语法：父节点.insertBefore(新节点,旧节点); replaceChild()可以使用指定的子节点替代已有的子节点 语法：父节点replaceChild(新节点,旧节点); removeChild()可以删除一个子节点 语法：父节点.removeChild(子节点); 但一般都用子节点.parentNode.removeChild(子节点);更为方便，不用找父节点

DOM操作CSS

通过js修改元素样式 语法:元素.style.样式名=样式值;

注意如果CSS中含有-,这种名称在CSS中是不合法的比如background-color,需要用到驼峰命名法,去掉-将后面的字母改为大写 通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式会立即显示，但是如果在样式中写了!important则此时样式会有最高的优先级，通过修改js样式的会失效，尽量不要使用!important，但是无法读取样式表中的样式,只能读取内联样式 获取元素当前显示的样式，语法：元素.currentStyle.样式名,它可以用来读取当前元素正在显示的样式，但只有IE支持 在其它浏览器中可以使用getComputedStyle()这个方法来获取元素的样式，这个方法是window的方法，可以直接使用，ie9以上兼容， 需要两个参数：1.要获取样式的元素2.可以传递一个伪元素，一般都穿NULL， 该方法会返回一个对象，对象中封装了当前元素对应的样式。 可以通过对象.样式名来读取样式，例如：如果没有width，他不会获取到auto，而是一个长度,解决办法：

alert(getComputedStyle(box1,null).width);
function getStyle(obj, name) {
				// 正常浏览器方式
				if (window.getComputedStyle) {
					return getComputedStyle(obj, null)[name];
				}
				else
				// IE8的方式
				return obj.currentStyle[name];}
function getStyle(obj, name) {
			return window.getComputedStyle?getComputedStyle(obj, null)[name]:obj.currentStyle[name];}

通过currentStyle和getComputedStyle()读取的样式都是只读的，不能修改，如果要修改必须通过style属性 属性如果没找到，返回false，变量如果在内存没找到，浏览器报错

其他样式属性

alert(box1.clientHeight); alert(box1.clientWidth); 这两个属性可以获取元素的可见高度和可见宽度，这两个属性都是不带px的，返回都是一个数字，可以直接进行计算，包括内容区和内边距，这些属性都是只读的 offsetWidth和offsetHeight获取整个元素的宽度和高度，包括内容区，内边距和边框 offsetParent可以用来获取当前元素的定位父元素，或获取到离当前元素最近的开启了定位的祖先元素，如果所有元素都没有开启定位，则返回body offsetLeft当前元素相对于其定位元素的水平偏移量 offsetTop当前元素相对于其定位元素的垂直偏移量 ，如果所有元素都没有开启定位，则返回body scrollHeight可以获取元素整个滚动区域的高度 scrollWidth可以获取元素整个滚动区域的宽度 scrollLeft可以获取水平滚动条滚动的距离 scrollTop可以获取垂直滚动条滚动的距离，当满足scrollHeigth-scrollTop==clientHeigth说明垂直滚动条滚动到底了 当满足scrollWidth-scrollLeft==clientWidth说明水平滚动条滚动到底了 onscroll该属性可以在滚动条滚动的时候触发 onmousemove该事件将会在鼠标在元素中移动时被触发 onmousedown该事件将会在鼠标在元素中按下时被触发 onmouseup该事件将会在鼠标在元素中松开时被触发 setCapture()设置捕获所有鼠标按下的事件 releaseCapture())设置取消捕获所有鼠标按下的事件， ie8以下有用 onmousewheel设置鼠标滚动事件

事件对象

clientX，clientY可以获取鼠标指针相对于当前可视窗口的水平坐标和垂直坐标。 只兼容IE9以上，在IE8及一下中响应函数被触发时，浏览器不会传递事件对象，是将事件对象作为window对象的属性保存的，但window.event火狐中没有，解决办法：

 if(!event)
  {event=window.event} 
  var x=event.clientX;
   var y=event.clientY;
event=event||window.event; 
var x=event.clientX; 
var y=event.clientY;

pageX，pageY可以获取鼠标相对于当前页面的坐标 在ie8以及一下不能使用 cancelBubble用事件对象取消冒泡 事件的冒泡，所谓的冒泡指的就是时间的像上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发、如果不希望触发事件冒泡，可以用事件对象取消冒泡

       s1.onclick=function(event){ 
       event=event||window.event;
        alert("1");
         event.cancelBubble=true; };

event中的target表示的触发事件的对象 event中的twheelData用于表示滚轮上下滑动

事件的委派

  我们希望只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试绑定其元素的共同祖先元素 事件的委派：将事件同意绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理,事件委派是利用冒泡,通过冒泡可以减少事件绑定的次数. 如果触发事件的对象是我们期望的元素,则执行否则不执行

事件的绑定

addEventListener()可以同时为一个元素绑定多个响应函数,当事件被触发时,响应函数会按照绑定顺序执行 addEventListener参数,第一个时间的字符串,不要on.第二个回调函数,当事件触发时该函数会被调用,第三个参数,是否在捕获阶段出发事件,需要一个布尔值,一般都是false， ie9以下不支持，在ie8中可以使用attachEvent()来绑定事件，但是后绑定的先执行，与addEventListener()相反 参数1：事件的字符串，要onclick 参数2：回调函数

键盘事件

键盘事件：onkeydown按键按下 onkeyup 按键松开 // 键盘事件一般都绑定到一些可以获取到焦点的对象或者document，一般比如输入框在编辑状态 对于onkeydown来说，只要键盘一直按着不松手，就会一直触发onkeydown事件。对于onkeydown来说，键盘第一次触发于第二次触发时间稍微有点长，但是后来就会快很多。是为了防止误操作。

属性

event.keyCode用来获取按键的编码 event.altkey用来获取按键alt的是否被按下 event.ctrlkey用来获取按键ctrl的是否被按下 if(event.keyCode===89&&event.ctrlKey){ console.log("ctrl+y被按下了"); } event.shiftkey用来获取按键shift的是否被按下

BOM对象

BOM_浏览器对象模型，BOM可以使我们通过JS操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作

对象

window代表的是整个浏览器的窗口，同时也是网页中的全局对象 navigator代表的是当前浏览器的信息，可以通过该对象来识别不同的浏览器 appName无法使用 navigator对象中大多数属性都不能正常识别浏览器 userAgent来判断浏览器的信息，是一个字符串包含有用来描述浏览器信息的内容，不同浏览器会有不同的userAgent 在ie11中已经将微软和ie相关的表示都已经去除，五哦已基本不能通过userAgent判断浏览器类型 如果通过userAgent不能识别浏览器，只能判断是否有对象ActiveObject inwindow判断浏览器信息

	if ("ActiveXObject" in window){alert("是IE");}
				else{alert("不是ie");}
				
	var ua=navigator.userAgent;
				if(/firefox/i.test(ua)){alert("是火狐");}
				else if(/chrome/i.test(ua)){alert("是谷歌");}
				else if(/msie/i.test(ua)){alert("是IE");}
				else if ("ActiveXObject" in window){alert("是IE11");}

location代表的时浏览器的地址栏信息，通过location可以获取地址栏信息，或者操作浏览器跳转页面 如果直接将location修改为一个完整的路径，或相对路径，页面会自动跳转到该路径，并且会生成相应的历史记录 方法assign()用来跳转到其他的页面，作用和location一样 方法reload()重新加载当前页面，即刷新 加参数true，则会强制清空缓存页面 方法replace()可以使用新的页面替换当前，调用完毕也会跳转页面，不会生产历史记录，不能使用回退按钮回退 history代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私的原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后，而且该操作只在当次访问有效 属性-length，可以获取到当前访问的链接数量 方法-back()可以回退到上一个页面，作用和浏览器的回退按钮一样 方法-forward()可以前进到下一个页面，作用和浏览器的前进按钮一样 方法-go()可以跳转到指定的页面，需要一个整数作为参数，1表示向前跳转一个页面，2表示向前跳转2个页面，-1表示向后跳转一个页面，-2表示向后跳转2个页面 screen代表用户的屏幕信息，通过该对象可以获取用户显示器的相关信息 这些对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用

定时器

setInterval()

 参数1：回调函数，每隔一段时间执行一次
 参数2：每次调用间隔时间，单位是毫秒
 有返回值，返回一个Number类型的数据，这个数字用来作为定时器的唯一标识

clearInterval()

 可以用来关闭一个定时器，方法中需要一个定时器的表示作为参数，这样将关闭标识对应的定时器
  window.onload=function(){ var count=document.getElementById("count"); var num=1; var timer= setInterval(function(){ count.innerHTML=num++; if(num==12){clearInterval(timer);} },1000); };
 可以接受任何参数，如果参数是一个有效的定时器标识，则停止定时器，如果不是有效表示，则什么也不做。

setTimeout()

 一个函数不马上执行，而是隔一段时间再执行，而且只会执行一次 延时调用和定时调用的区别就是，定时调用会执行多次，而延时调用只会执行一次

clearTimeout()

 使用clearTimeout()来关闭一个延时调用，延时调用和定时调用实际上是可以互相调用的，在开发中可以跟据自己的需要求使用

JSON

JS中的对象只有JS自己认识，其他的语言都不认识
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
JSON javascript object notation
 json和js的格式一样，只不过json字符串中的属性名必须加双引号，其它的和js语法一样

JSON的分类

 1.对象{}
  var obj='{"name":"孙悟空","age":18,"gender":"男"}';
 2.数组[]
  var arr='[1,2,3,true,"hello"]';

JSON中允许的值

 1.字符串
 2.数值
 3.布尔值
 4.null
 5.对象
 6.数组

将JSON字符串转换为JS的对象

在JS中，提供了一个工具类，就叫JSON 这个对象可以帮助我们将一个JSON转换为JS对象，也可以将JS对象转换为JSON

json->js对象

JSOn.parse();将JSON字符串转换为JS对象 需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回

var obj='{"name":"孙悟空","age":18,"gender":"男"}';
var arr='[1,2,3,true,"hello"]';
var o=JSON.parse(obj);
var o2=JSON.parse(arr);
console.log(o.name);
console.log(o2[1]);

可以将一个js对象转换为json字符串 需要将一盒js对象作为参数，会返回一个JSON字符串

var obj2={name:"猪八戒",age:28,gender:"男"};
			var str=JSON.stringify(obj2);
			console.log(str);

JSON这个对象在IE7及以下的浏览器中不支持，所以

eval()这个函数可以执行一段字符串形式的js代码，并将执行结果返回 如果eval()执行的字符串中含有{}，它会将{}当成是代码块 如果不希望将其当成代码块解析，则需要在字符串前后各加一个()

var obj2={name:"猪八戒",age:28,gender:"男"};
var obj3=eval("("+obj2+")");
console.log(obj3);

  eval()这个函数功能很强大，它可以直接执行一个字符串中的字符串中的js代码，但在开发中尽量不要使用，首先执行性能比较差，然后还有安全隐患
  如果需要兼容，可以通过外部引入一个外部的js文件