1.控制浏览器弹出一个警告
alert(“11111111!”)
2.让计算机再页面中输出一个内容
document.write()可以向body中输出一个内容
document.write("1111111111")
3.向控制台输出一个内容
console.log("11111111111111")
4.编写位置
//可以将js代码编写到标签的onclick属性中
<button onclick="alter('111111')">111</button>
//可以将js代码写在超链接的href属性中
<a href="javascript:alert('1111111')">1111</a>
//在script标签中写
<script>
alert("111111")
</script>
//外部js文件 编写到外部js文件,通过script标签引入.
<script type="text/javascript" src="js/script.js"></script>
//script标签一旦用于引用外部文件了,就不能在编写代码了,编写了也不生效。如果想写 在重新创建一个script标签
<script type="text/javascript" src="js/script.js"></script>
<script>
alert("11111111")
</script>
5.基本语法
/* js注释
多行注释,注释中的内容不会被执行,但是可以在源代码中查看
*/
//单行注释
/*
1.JS中严格区分大小写
2.JS中每一条语句以分号(;)结尾
--如果不写,浏览器会自动添加,但是会消耗一些系统资源,
而且有些时候,浏览器会加错分号,所以开发中分号必须写
3.JS中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化
*/
6.字面量和变量
/*
字面量,都是一些不可以改变的值,都是可以直接使用的,但是我们一般都不会直接使用字面量
比如:1 2 3 4 5
变量:可以用来保存字面量,而且变量的值是可以任意改变的,变量可以更加方便我们使用
x = 1
*/
//声明变量,在JS中使用var关键字声明一个变量
var a;
//为变量赋值
a = 123;
//声明和赋值同时进行
var b = 123;
7.标识符
/*
标识符
在JS中所有的可以由我们自主命名的都可以称为标识符
例如,变量名,函数名,属性名都属于标识符
命名一个标识符时需要遵守如下规则:
1.标识符中可以含有字母,数字,_ ,$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或者保留字 var var = 123;(不可以)
4.标识符一般都采用驼峰命名法
-首字母小写,每个单词的开头字母大写,其余字母小写 helloWord
JS底层保存标识符时,实际上采用Unicode编码UTF-8
所以理论上讲,所有的UTF-8中都可以作为标识符
*/
var abc_
var $c
8.Number
/*
可以使用一个运算符typeof来检查一个变量得类型
语法:typeof 变量
检查字符串时,会返回string
检查数值时,会返回Number
NAN表示的是一个数字,NOT A Number。Number类型
*/
console.log(typeof a)
console.log(Number.MAX_VALUE)//1.7976931348623157+308 如果使用Number表示的数字超过了最大值,则会返回一个Infinity,正无穷
console.log(Number.MIN_VALUE)//大于0的最小值,5e-324
/*
在JS中整数的运算基本可以保证精确
如果使用JS进行浮点运算,可能得到一个不精确的结果。
*/
9.Boolean布尔值
布尔值只有两个 真or假,主要用来做逻辑判断
true
--表示真
false
--表示假
使用typeof检查一个布尔值时,会返回boolean
var bool = true;
console.log(typeof bool);//boolean
console.log(bool);//true
10.Null和undefined
/*Null(空值)类型得值只有一个,就是null
null这个值专门用来表示一个为空的对象
使用typeof检查一个null值时,会返回object
*/
var a = null;
console.log(typeof a);//object
/*Undefined(未定义)类型得值只有一个,就是undefined
当声明一个变量,但是并不给变量赋值时,它的值就是undefined
使用typeof检查一个undefined时,也会返回undefined
*/
var b;
console.log(b);//undefined
11.强制类型转换
/*
强制类型转换
-指一个数据类型强制转换为其他的数据类型
-类型转换只要指,将其他的数据类型,转换为
String Number Boolean
*/
/*
将其他数据类型转换为String
方式一:
-调用被转换数据类型的toString()方法
-该方法不会影响原变量,他会将转换的结果返回
-但是注意:null和undefined这两个值没有toString()方法,如果调用会报错
方式二:
-调用String()函数,并将我们被转换的数据作为参数传递给函数
-使用String()函数被强制类型转换时,
对于Number和Boolean实际上就是调用的toString()方法
但是对于Null和Undefined,就不会调用toString()方法
它会将null 直接转换成“null”
将undefined,直接转换成“undefined”
*/
------------------------------
var a = 123;
//调用a的toString方法
//调用xxx的yyy()方法,就是xxx.yyy()
a.toString();
var b = a.toString();
console.log(typeof a);//number
console.log(a);//"123"
console.log(b);//String
--------------------------------
a = 123;
//调用String()函数。来将a转换为字符串
a = String(a);
console.log(typeof a);string
consloe.log(a);"123"
/*
将其他的数据类型转换为Number
转换方式一:
使用Number()函数
字符串--》数字
1.如果是纯数字的字符串,则直接将其转换为数字
2.如果字符串中有非数字的内容,则转换为NAN
3.如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
布尔--》数字
true 转换1
false 转换0
Null--》数字 ==0
undefined--》数字 NaN
转换方式二:
--这种方式专门用来对付字符串
-parseInt()把一个字符串转换为一个整数
-parseFloat()把一个字符串转换为一个浮点数
如果对非String使用parseInt()或parseFloat()
它会将其转换为String然后再操作
*/
var a = "123";
//调用Number()函数将a转换为Number类型
a = Number(a);
console.log(typeof a);//number
console.log(a);
a = "123px";
a = parseInt(a);//parseInt()可以将一个字符串中的有效的整数内容取出来,然后转换为Number 123a456,只读a之前的123.
console.log(typeof a);//number
console.log(a);//123
/*
将其他的数据类型转换为Boolean
-使用Boolean()函数
-数字--》布尔
除了0和NaN,其余的都是true
-字符串--》布尔
除了空串,其余的都是true
-null和undefined都会转换为false
-对象也会转换为true
*/
var a = 123;
//调用Boolean()函数,将a转换为布尔值
a = Boolean(a);
12.其他进制的数字
/*
再js中,如果需要表示16进制的数字,则需要以0x开头
如果需要表示8进制的数字,则需要以0开头
如果要表示二进制数字,则需要以0b开头,但是不是所有的浏览器都支持
*/
a = 0x10;//16
a = 070;//56
a = "070";
a = parseInt(a,10);//可以在parseInt()中传递一个第二个参数,来指定数字的进制
13.算数运算符
/*
运算符也叫操作符
通过运算符可以对一个或多个值进行运算,并获取运算结果
比如:typeof就是运算符,可以来获取一个值的类型
它会将该值的类型以字符串的形式返回
number string boolean undefined object
算数运算符
当对非Number类型的值进行运算时,会将这些值转换为Number然后再运算 。任何值和NaN做运算都得NaN
+
可以对两个值进行加法运算,并将结果返回
如果对两个字符串进行加法运算,则会做拼串
会将两个字符串拼接为一个字符串,并返回任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
-
可以对两个值进行减法运算,并将结果返回
*
可以对两个值进行乘法运算
/
可以对两个值进行除法运算
%
取模运算(取余数)
任何值做- * /运算时,都会自动转换为Number
我们可以利用这一特点做隐式的类型转换
可以通过为一个-0 *1 /1来将其转换为Number
原理和Number()函数一样,使用起来更加简单
*/
var c = 123;
var b = "123";
c = c + "";//这样可以将c转换为字符串
d = d - 0;//将d转换为number
14.一元运算符
/*
一元运算符,只需要一个操作数
+ 正号
正号不会对数字产生任何影响
- 负号
负号可以对数字进行符号的取反操作
对于非Number的值
先转换为number,然后再运算
可以对一个其他的数据类型使用+,来将其转换为Number
他的原理和Number()函数一样
*/
var a = 123;
a = +a;//直接转换成number类型
console.log(a);
a = true;
a = -a;//类型转换number 值-1
15.自增和自减
/*
自增 ++
通过自增可以使变量再自身的基础上增加1
对一个变量自增以后,原变量的值会立即增加1
自增分成两种:后++(a++)和前++(++a)
无论是a++还是++a,都会立即使变量的值自增1
不同的是a++和++a的值不同
a++的值等于原变量的值(自增前的值)
++a的值等于原变量的值(自增后的值)
自减 --
通过自减可以使变量再自身的基础上减1
自减氛围两种 后--(a--)和前--(--a)
无论是a--还是--a都会立即使原变量的值自减1
不同的是a--和--a的值不同
a--的值是变量的原值(自减前的值)
--a是变量的新值(自减后的值)
*/
var a = 1;
a++;//a=2
++a;//a=2
16.逻辑运算符
/*
JS中为我们提供了三种逻辑运算符
! 非
!可以用来对一个值进行非运算
所谓非运算就是值对一个布尔值进行取反操作,
true变false,false变true
如果进行两次取反,不会变化
如果对非布尔值进行运算,则会将其转换为布尔值,然后取反
所以我们可以利用该特点,来将其他数据类型转换为布尔值
可以为一个任意数据类型取两次反,来将其转换为布尔值
原理和boolean()一样
&& 与
&&可以对符号两侧的值进行与运算并返回结果
运算规则 true&&true
两个值中只要有一个值为false就返回false,只有两个值都为true时,就返回true
JS中的“与”属于短路的与,如果第一个值为false,则不会再看第二个值
|| 或
||可以对符号两侧的值进行或运算并返回结果
运算规则:
两个值中只要有一个true,就返回true
如果两个值都为false,才返回false
JS中的“或”属于短路的或
如果第一个值为true,则不会再看第二个值
*/
var a =true;
a = !a;//false
/*
&& || 非布尔值的情况
对于非布尔值进行与或运算时,
会将其转换为布尔值,然后再运算,并且返回原值
与运算:
如果第一个值为true,则必然返回第二个值
如果第一个值为false,则直接返回第一个值
或运算:
如果第一个值为true,则直接返回第一个值
如果第一个值为false,则返回第二个值
*/
//如果两个值都为true,则返回后面的,
//如果两个值中有false,则返回靠前的fasle
var result = 1 && 2;//2
result = 0 && 2;//0
result = 2 && 0;//0
17.赋值运算符
/*
=
可以将符号右侧的值赋值给符号左侧的变量
+=
a+=5等价于a = a+5;
-=
a-=5等价于 a = a-5
*=
a *= 5 等价于 a = a*5
/=
%=
*/
var a = 123;
a = a + 5;
a +=5;
18.关系运算符
/*
通过关系运算符可以比较两个值之间的大小关系;
如果关系成立它会返回true,如果关系不成立则返回false
>大于号
判断符号左侧的值是否大于右侧的
如果关系成立,返回true,如果关系不成立则返回false
>=大于等于
判断符号左侧的值是否大于或等于右侧的值
<小于号
<=小于等于
非数值的情况
对于非数值进行比较时,会将其转换为数字然后再比较
任何值和NAN做任何比较都是false
如果符号两侧的值都是字符串,不会将其转换成数字进行比较,而会分别比较字符串中的Unicode编码
比较字符编码时是一位一位进行比较
如果两位一样,则比较下一位,所以借用它来对英文进行排序
如果比较的两个字符串型的数字,可能会得到不可预期的结果
注意:比较两个字符串型的数字时,一定要转型
*/
19.Unicode编码
/*
再字符串中使用转义字符输入Unicode编码
\u四位编码
*/
console.log("\u2620");
/*
再网页中使用Unicode编码
&#编码,这里的编码需要的是10进制
将编码转换成10进制的数进行使用。
*/
<h1>☠</h1>
20.相等运算符
/*
相等运算符,用于比较两个值是否相等
如果相等会返回true,否则返回false
使用== 来做相等运算
当使用==来比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换成相同的类型,然后再比较。 console.log("1" == 1);//true
undefined衍生自null 所以两个值相等判断时,会返回true
NaN不和任何值相等,包括他本身
可以通过isNaN()函数来判断一个值是否时NaN
如果该值时NaN返回true,否则false
不相等
不相等用来判断两个值是否不相等,如果不相等返回true,否则返回false
使用!=用来做不相等运算
不相等也会对变量进行自动的类型转换,如果转换后相等也会返回false
===
全等
用来判断两个值是否全等,它和相等类似,
不同的是不会做类型转换
如果两个值的类型不同,不会转换,直接返回false
!==
不全等
用来判断两个值是否不全等,和不等类似
不同的是不会自动的做类型转换
如果两个值的类型不同,直接返回true
*/
21.条件运算符也叫三元运算符
/*
三元运算符
语法:
条件表达式?语句1:语句2;
执行流程:
条件运算符在执行时,首先对条件表达试进行求值,
如果该值为true,则执行语句1,并返回执行结果
如果该值为false,则执行语句2,并返回执行结果
如果条件的表达式的求值结果试一个非布尔值,会将其转换为布尔值然后再运算。
*/
var a = 10;
var b = 20;
a > b ? alert("a大"):alert("b大")
//获取a和b中的最大值
var max = a > b ? a : b;
22.运算符的优先级
/*
,运算符
使用,可以分割多个语句,一般可以再声明多个变量时使用
使用,运算符声明多个变量: var a , b , c;
var a=1 , b=2 , c=3;
*/
/*
JS中的运算符的优先级:
比如:先乘除后加减
再JS中有一个运算符优先级的表,再表中位置越靠上,优先级越高,优先级越高越优先计算,
如果优先级相同,从左向右计算
但是这个表我们并不需要记忆,如果遇到优先级不清楚的,
可以使用()来改变优先级。
*/
23.代码块
/*
我们的程序是一条一条语句构成的
语句是按照自上向下的顺序一条一条执行的
在JS中可以使用{}来为语句进行分组,
同一个{}中的语句我们称为是一组语句
它们要么都执行,要么都不执行
一个{}中的语句我们也称为叫一个代码块
在代码块的后边就不用再编写;了
JS中的代码块,只具有分组的作用,没有其他的用途
代码块内容的内容,再外部是完全可见的
*/
{
var a =10;
alert("hello");
console.log("你好");
document.write("与");
}
console.log("a = " +a);
24.流程控制语句if,switch,while,
/*
流程控制语句
JS中的程序是从上到下一行一行执行的
通过流程控制语句可以控制程序的执行流程
使程序可以根据一定的条件来选择执行
语句分类:
1.条件判断
2.条件分支
3.循环语句
条件判断语句:
使用条件判断语句可以再执行某个语句之前进行判断,如果判断条件成立才会执行语句,条件不成立则语句不执行。
if语句:
语法一:
if(条件表达式)
{语句
}
if语句再执行时,会先对条件表达式进行求值判断,
如果条件表达式的值为true,则执行if后的语句
如果条件表达式的值为false,则不会执行if后的语句
语法二:
if(条件表达式)
{
语句...
}else{
语句...
}
if...else...语句
当该语句执行时,会先对if后的条件表达式进行求值判断,
如果该值为true,则执行if的语句
如果该值为false,则执行else后的语句
语法三:
if(条件表达式)
{
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else{
语句...
}
if...else if...else
当该语句执行时,会从上到下依次对条件表达式进行求值判断
如果值为true,则执行当前语句
如果值为false,则继续向下判断
如果所有的条件都不满足,则执行最后一个else后的语句
条件分支语句也叫switch语句
语法:
switch(条件表达式){
case 表达式:
语句...
break;
case 表达式:
语句...
break;
case 表达式:
语句...
break;
case 表达式:
语句...
break;
default:
语句...
break;
}
执行流程:
switch...case..语句
在执行时会依次将case的表达式的值和switch后的条件表达式的值进行全等比较
如果比较结果为true,则从当前case处开始执行代码,
当前和case后的代码都会被执行,可以在case的后边跟着一个break,这样可以确保
只执行当前语句,不会执行之后的语句。
如果比较结果为false,则继续向下比较
如果所有的比较结果都为false,则执行default后的语句
switch语句和if语句的功能实际上有重复的,使用switch可以实现if的功能,
同样使用if可以实现switch的功能,所以我们使用时,根据自己的习惯选择。
循环语句:
通过循环语句可以反复的执行一段代码多次
while循环
语法:
while(条件表达式){
语句...
}
while语句在执行时,
先对条件表达式进行求值判断,
如果值为true,则执行循环体,
循环体执行完事以后,继续对表达式进行判断
如果为true,则继续执行循环体,以此类推。
如果值为false,则终止循环
do...while循环
语法:
do{
语句...
}while(条件表达式)
执行流程:
do...while语句执行时,会先执行循环体,
循环提执行完毕以后,在对while后的条件表达式进行判断,
如果结果为true,则继续在执行循环体,执行完毕继续判断以此类推。
如果结果为false,则终止循环。
实际上这两个语句功能类似,不同的是,while是先判断后执行。
do...while是先执行后判断。
do...while可以保证循环体至少执行一次, 而while不能。
*/
//向这种将条件表达式写死为true的循环,叫做死循环。该循环不会停止,除非浏览器关闭,死循环在开发中慎用。可以使用break,来终止循环。
while(true){
alert(n++);
//退出循环
if(n == 10){
break;
}
}
25.for循环
/*
for语句,也是一个循环语句,也称为for循环
在for循环中,为我们提供了专门的位置用来放三个表达式:
1.初始化表达式
2.条件表达式
3.更新表达式
for循环的语法:
for(初始化表达式;条件表达式;更新表达式){
语句...
}
for循环的执行流程:
1.执行初始化表达式,初始化变量(初始化表达式只会执行一次)
2.执行条件表达式,判断是否执行循环。
如果为true,执行循环。
如果为false,终止循环。
3.执行循环
4.执行更新表达式,更新表达式执行完毕,继续重复2.
for循环中国的三个部分可以省略,也可以写在外部.
如果在for循环中,不写任何的表达式,只写两个分号“;”。
此时,我们的这个循环,是一个死循环,会一直执行下去。慎用。
for(;i<10;){
alert(i++);
}
*/
---------------------------------
//创建一个执行10次的while循环
//初始化表达式
var i = 0;
//创建一个循环,定义条件表达式
while(i<10){
//设置更新表达式
alert(i++);
}
---------------------------------
//与上方的while循环相同
for(var i = 0 ; i < 10 ; i++){
alert(i);
}
26.break和continue
/*
break关键字可以用来推出switch或循环语句
不能再if语句中使用break和continue
break关键字,会立即终止离他最近的那个循环语句,只对离他最近的循环语句起作用。
continue关键字可以用来跳过当次循环
同样continue也是默认只会对离他最近的循环起作用。
*/
for(var i = 0;i < 10 ; i++ )
{
if(i == 2){
break;//这里的break不作用于if,作用于for循环,可以这么使用。
}
}
/*
可以为循环语句创建一个label,来标识当前的循环
label:循环语句
使用break语句时,可以再break后跟着一个label,
这样break将会结束指定的循环,而不是最近的
*/
27.对象
/*
JS中的数据类型
String 字符串
Number 数字
Boolean 布尔值
Null 空值
Undefined 未定义
以上五种类型属于基本数据类型,以后我们看到的值
只要不是上边的五种,全部是对象
Object对象
基本数据类型都是单一的值 “hello” 123 true,
值和值之间没有任何的联系。
再JS中来表示一个人的信息(name gender age),
var name = "11";
var gender = "11";
var age = "11";
如果使用基本数据类型的数据,我们所创建的变量都是独立的,不能成为一个整体。
对象属于一种复合的数据类型,再对象中可以保存多个不同数据类型的属性
对象的分类:
1.内建对象
由ES标准中定义的对象,再任何的ES的实现中都可以使用
比如:Math String Number Boolean Function Obiect....
2.宿主对象
由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
比如BOM DOM
3.自定义对象
由开发人员自己创建的对象
*/
//创建对象
/*
使用new关键字调用的函数,是构造函数constructor
构造函数是专门用来创建对象的函数
使用typeof检查一个对象时,会返回object
*/
var obj = new Object();
/*
向对象中保存的值称为属性
向对象添加属性
语法:
对象.属性名 = 属性值;
*/
//向obj中添加一个name属性
obj.name = "11";
//向obj中添加一个gender属性
obj.gender= "11";
//向obj中添加一个age属性
obj.age = "11";
/*
读取对象中的属性
语法:
对象.属性名
console.log(obj.name);
如果读取对象中没有的属性,不会报错而是会返回undefined
*/
/*
修改对象的属性值
语法:
对象.属性名 = 新值
*/
obj.name = "22";
/*
删除对象的属性
语法:
delate 对象.属性名
*/
delate obj.name;
/*
向对象中添加属性
属性名:
对象的属性名不强制要求遵守标识符的规范
什么乱七八糟的名字都可以使用
但是我们使用时还是尽量按照标识符的规范去做
*/
obj.name = "张三";
/*
如果要使用特殊的属性名,不能采用.的方式来操作
需要使用另一种方式,
语法:
对象["属性名"] = 属性值
读取时也需要采用这种方式
使用[]这种形式去操作属性,更加的灵活,
再[]中可以直接传递一个变量,这种变量值是多少就会读取那个属性
*/
obj["123"] = 789;
console.log(obj["123"]);
/*
属性值
JS对象的属性值,可以是任意的数据类型
甚至也可以是一个对象
*/
obj.test = "hello";
obj.test = 123;
obj.test = true;
obj.test = null;
obj.test = undefined;
//创建一个对象
var obj2 = new Object();
obj2.name = "11";
//将obj2设置为obj的属性
obj.test = obj2;
/*
in运算符
通过该运算符可以检查一个对象中是否含有指定的属性
如果有则返回true,没有则返回false
语法:
"属性名" in 对象
*/
console.log("test" in obj);
28.基本数据类型和引用数据类型
/*
基本数据类型
String Number Boolean Null Undefined
引用数据类型
Object
JS中的变量都是保存在栈内存中的
基本数据类型的值直接在栈内存中存储
值与值之间是独立存在的,修改一个变量不会影响其他变量
对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间
而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象的
引用,当通过一个变量修改属性时,另一个也会受影响。
当比较两个基本数据类型的值时,就是比较值
当比较两个引用数据类型时,比较的是对象的内存地址
如果两个对象是一摸一样的,但是地址不同,也会返回false
*/
29.对象字面量
/*
使用对象的字面量来创建一个对象
*/
var obj = {};// var obj = new Object();
obj.name = "11";
/*
使用对象字面量,可以在创建对象时,直接指定对象中的属性
语法:
{属性名:属性值,属性名:属性值...}
对象字面量的属性名可以加引号,也可以不加,建议不加。
如果要使用特殊的名字,则必须加引号
属性名和属性值是一组一组的名值对结构,
名和值之间使用:连接,多个名值对之间使用,隔开
如果一个属性之后没有其他的属性了,就不要写。
*/
var obj2 = {name:"11",age:22};
30.函数的简介
/*
函数function
函数也是一个对象
函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
函数中可以保存一些代码在需要的时候调用
使用typeof检查一个函数对象的时候,会返回function
*/
//我们在实际开发中很少使用构造函数来创建一个对象
//创建一个函数对象
//可以将要封装的代码以字符串的形式传递给构造函数
var fun = new Function();
//封装到函数中的代码不会立即执行
//函数中的代码会在函数调用的时候执行
//调用函数 语法: 函数对象()
//当调用函数时,函数中封装的代码会按照顺序执行
fun();
/*
使用函数声明来创建一个函数
语法:
function 函数名(形参1,形参2...形参N){
语句...
}
*/
function fun2(){
console.log("111111111111111");
}
//调用fun2
fun2();
/*
使用函数表达式来创建一个函数
var 函数名 = function(形参1,形参2...形参N){
语句...
}
*/
var fun3 = function(){
console.log("11111111111");
}
fun3();
31.函数的参数
/*
定义一个用来求两个数和的函数
可以在函数的()中来指定一个或多个形参(形式参数)
多个形参之间使用,隔开,声明形参相当于在函数内部声明了对应的变量
但是并不赋值
*/
function sum(a,b){
console.log(a+b);
}
/*
在调用函数时,可以在()中指定实参(实际参数)
实参将会赋值给函数中对应的形参
*/
sum(1,2);
/*
调用函数时,解析器不会检查实参的类型,
所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
函数的实参可以是任意的数据类型
*/
sum(123,"hello");//123hello
sum(true,false);//1
/*
调用函数时,解析器也不会检查实参的数量
多余的实参不会被赋值
如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
*/
32.函数的返回值
/*
创建一个函数,用来计算三个数的和
可以使用return 来设置函数的返回值
语法:
return 值;
return后的值将会作为函数的执行结果返回,
可以定义一个变量来接收结果
在函数中return后的语句都不会执行
如果return语句后不跟任何值,就相当于返回一个undefined
如果函数中不写return,也会返回undefined
return后可以跟任意类型的值
*/
function sum(a,b,c){
var d = a + b + c;
return d;
alert("111")//不执行
}
//调用函数
//变量result的值就是函数的执行结果
//函数返回什么result的值就是什么
var result = sum(1,2,3);
33.实参可以是任何值
/*
实参可以是任意的数据类型,也可以是一个对象
当我们的参数过多时,可以将参数封装到一个对象中,然后通过对象传递
*/
var obj = {
name:"11";
age:11;
}
function sayhello(o){
console.log(o.name + o.age);
}
/*
实参可以是一个对象,也可以是一个函数
mianji(r){
return 3.14*r*r
}
fun(mianji(10));//314
mianji()
调用函数
相当于使用的函数的返回值
mianji
函数对象
相当于直接使用函数对象
*/
34.返回值的类型
/*
使用break可以退出当前循环
使用continue跳过当次循环
使用return可以结束整个函数
*/
/*
返回值可以是任意的数据类型
也可以是一个对象,也可以是函数
*/
function fun(){
var obj = {name:"11"}
return 10;//null undefined true obj
}
var a = fun();
35.立即执行函数
/*
立即执行函数
函数定义完,立即被调用,这种函数叫做立即执行函数
立即执行函数往往只会执行一次
*/
(function(){
alert("11111");
})();
(function(a,b){
console.log(a);//111
console.log(b);//222
alert("11111");
})(111,222);
36.方法
/*
函数也可以成为对象的属性,
如果一个函数作为一个对象的属性保存,
那么我们称这个函数是这个对象的方法
调用这个函数就说调用对象的方法(method)
但是他只是名称上的区别没有其他的区别
*/
37.枚举对象for...in
/*
枚举对象中的属性
使用for...in语句
语法:
for(var 变量 in 对象){
}
for...in语句 对象中有几个属性,循环体就会执行几次
每次执行时,会将对象中的一个属性的名字赋值给我们的变量
*/
var obj = {
name:"11";
age:11;
}
for(var n in obj){
console.log(n);//属性名 name age
console.log(obj[n]);//属性值
}
38.全局作用域
/*
作用域
作用域指一个变量的作用的范围
在JS中一共有两种作用域:
1.全局作用域
直接编写在script标签中的JS代码,都在全局作用域中
全局作用域在页面打开时创建,页面关闭时销毁
在全局作用域中有一个全局对象window,它代表的是一个浏览器的窗口,由浏览器创建,我们可以直接使用
在全局作用域中:
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
变量的声明提前
使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值)
但是如果声明变量时,不使用var关键字,则变量不会被声明提前
函数的声明提前
使用函数声明形式创建的函数function 函数(){}
它会在所有的代码执行之前就被创建,所以我们可以在函数的声明之前调用函数
使用函数表达式创建的函数,不会被声明提前,不能再声明之前调用
2.函数作用域
调用函数时调用函数作用域,函数执行完毕以后,函数作用域销毁
每调用一次函数就会创建一个新的函数作用域,他们之间时互相独立的
再函数的作用域中,可以访问到全局作用域的变量。
再全局作用域中,无法访问到函数作用域的变量
当再函数作用域中操作一个变量时,它会现在自身的作用域中寻找,如果有就直接使用,如果没有就向上一级作用域中寻找。直到找到全局作用域,如果全局作用域中依然没有找到,则会报错ReferenceError。(引用异常)
再函数中要访问全局的变量可以使用window对象
再函数作用域中也有声明提前的特性,使用var关键字声明的变量,会在函数中所有的代码执行之前声明
再函数中,不使用var声明的变量都会成为全局的变量
定义形参就相当于再函数中声明了变量
function(e){
alert(e);
}
*/
var a = 10;
function fun(){
console.log(a);//访问得到a
}
fun();
39.this
/*
解析器再调用函数时每次都会向函数的内部传递进一个隐含的参数
这个隐含的参数就是this,this指向的是一个对象
这个对象我们称为函数执行的上下文对象
根据函数的调用方式的不同,this会指向不同的对象
1.以函数的形式调用 时,this永远都是window
2.以方法的形式调用时,this就是调用方法的对象
*/
function fun(){
}
fun();
40.使用工厂方法创建对象
/*
创建一个对象
*/
var obj = {
name:"11",
age:11,
sayName:function(){
alert(this.name);
}
}
/*
使用工厂方法创建对象
通过该方法可以大批量创建对象
*/
function createPerson(name,age){
//创建一个新的对象
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayName = function(){
alert(this.name);
};
}
var obj1 = createPerson("11",11);
var obj2 = createPerson("22",22);
41.构造函数
/*
用来创建狗的对象
使用工厂方法创建的对象,使用的构造函数都是Object
所以创建的对象都是Object这个类型
就导致我们无法区分多种不同的对象
*/
function createDog(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
sayHello = function(){
alert("wangwang");
}
}
var dog = createDog("gougou",2);
/*
创建一个构造函数,专门来创建Person对象的
构造函数就是一个普通的函数,创建方式和普通函数没有区别
不同的是构造函数习惯上首字母大写
构造函数和普通函数的区别就是调用的方式不同
普通函数就是直接调用
构造函数需要使用new关键字来调用
构造函数的执行流程:
1.立刻创建一个新的对象
2.将新建的对象设置未函数中的this,在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类
我们将通过一个构造函数创建的对象,称为时该类的实例
使用instanceof可以检查一个对象是否是一个类的实例
语法:
对象 instanceof 构造函数
如果是,则返回true,否则返回false
所有的对象都是Object的后代,
所以任何对象和Object在instanceof检查时都会返回true
this的情况
1.当以函数的形式调用时,this是window
2.当以方法的形式调用时,谁调用方法this就是谁
3.当以构造函数的形式调用时,this就是新创建的那个对象
创建一个Person构造函数
在Person构造函数中,为每一个对象都添加了一个sayName方法,
目前我们的方法时在构造函数内部创建的,也就是构造函数每执行一次就会创建一个新的sayName方法
也是所有实例的sayName都是唯一的
这样就导致了构造函数执行一次就会创建一个新的方法
执行1000次就会创建1000个新的方法,而1000个方法都是一模一样的。
将函数在构造函数外定义成全局的,在构造函数内调用就可。
但是将函数定义在全局作用域,污染了全局作用域的命名空间
而且定义在全局作用域中也很不安全
*/
function Person(){
this.name = "11";
}
var Per = new Person();//构造函数的调用
42.原型对象
/*
原型prototype
我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象,这个对象就是我们所谓的原型对象
如果我们的函数作为普通函数调用,prototype没有任何作用
当函数通过构造函数调用时,他所创建的对象中都会有一个隐含的属性
指向该构造函数的原型对象,我们可以通过__proto__来访问该属性
原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象
我们可以将对象中共有的内容,统一设置到原型对象中
当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,如果没有则会去原型对象中寻找,如果找到直接使用。
以后我们创建构造函数时,可以将这些对象共有的属性和方法,同意添加到构造函数的原型对象中,
这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了。
*/
Person.prototype.sayName = function(){
alert("1111");
}
/*
*/
function MyClass(){
}
//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的名字";
var mc = new MyClass();
mc.age = 18;
//使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
console.log("name" in mc);//true
//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性,使用该方法只有当对象自身中含有属性时,才会返回true
console.log(mc.hasOwnProperty("age"))
/*
原型对象也是对象,所以他也有原型
当我们使用一个对象的属性或方法时,会先在自身中寻找
自身中如果有,则直接使用
如果没有则去原型对象中寻找,如果原型对象中有,则使用
如果没有则去原型的原型中寻找,直到找到Object对象的原型,
Object对象的原型没有原型,如果在Object中依然没有找到,则返回undefined
*/
43.toString()
/*
当我们直接在页面中打印一个对象时,实际上是输出的对象的toString()方法的返回值
如果我们希望在输出对象时不输出[object,Object],可以为对象添加一个toString()方法
*/
44.数组
/*
内建对象
数组(Array)
数组也是一个对象
它和普通的对象功能类似,也是用来存储一些值的
不同的是普通对象是使用字符串作为属性名的,
而我们的数组是使用数字来作为索引操作元素的
索引(index):
从0开始的整数就是索引
数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据
*/
//创建数组对象
var arr = new Array();
//使用typeof检查一个数组时,会返回object
console.log(typeof arr);
/*
向数组中添加元素
语法:
数组[索引] = 值
*/
arr[0] = 10;
/*
读取数组中的元素
语法:
数组[索引]
如果读取不存在的索引,他不会报错而返回undefined
*/
console.log(arr[0]);
/*
获取数组长度
可以使用lenth属性来获取数组的长度(元素的个数)
语法:
数组.length
对于连续的数组,使用length可以获取到数组的长度(元素的个数)
对于非连续的数组,使用length会获取到最大的索引加1
尽量不要创建非连续的数组
/*
修改length
如果修改的length大于原长度,则多出的部分会空出来
如果修改的length小于原长度,则多出的元素会被删除
*/
*/
//创建数组
var arr = new Array();
//使用字面量创建数组 语法:[]
var arr = [];
//使用字面量创建数组时,可以在创建时就指定数组中的元素
var arr = [1,2,3,4,5];
//数组中的元素可以是任意的数据类型
arr = ["hello",1,true,null,undefined];
//数组中也可以放数组,如下这种数组就可以称为二维数组
arr = [[1,2,3],[6,5,7]];
//创建数组
var arr = ["11","22","33"];
/*
push()
该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
可以将要添加的元素作为方法的参数床底
这样这些元素将会自动添加到数组的末尾
该方法会将数组新的长度作为返回值返回
*/
arr.push("55","66");
/*
pop()
该方法可以删除数组的最后一个元素,
并将删除的元素作为返回值返回
*/
arr.pop();
/*
unshift()
向数组的开头添加一个或多个元素,并返回新的数组长度
向前边插入元素以后,其他的元素索引会依次调整
*/
arr.unshift("00","11");
/*
shift()
可以删除数组的第一个元素,并将被删除的元素作为返回值返回
*/
arr.shift();
//创建一个数组
var arr = ["111","222","333"];
//所谓的遍历数组,就是将数组中所有的元素都取出来
for(var i = 0; i < arr.length ; i++){}
//创建一个Person对象
var per = new Person("11",11);
var per2 = new Person("22",22);
var per3 = new Person("33",33);
var per4 = new Person("44",44);
var per5 = new Person("55",55);
/*
将这些person对象放入到一个数组中
*/
var perArr = [per,per2,per3,per4,per5];
/*
创建一个函数,可以将perArr中的满18岁的Person提取出来,
然后封装到一个新的数组中并返回
arr
形参,要提取信息的数组
*/
function getAdult(arr){
//创建一个新的数组
var newArr = [];
//遍历arr,获取arr中Person对象
for(var i = 0; i <arr.length ; i++){
var p = arr[i];
if(p.age >=18){
//如果大于等于18,则将这个对象添加到newArr中
//将对象放入到新数组中
newArr.push(p);
}
}
//判断Person对象的age是否大于等于18
//如果大于18,则将这个对象添加到newArr中
//将新的数组返回
return newArr;
}
45.forEach
/*
一般我们都是使用for循环去遍历数组
JS中还为我们提供了一个方法,用来遍历数组
forEach()
这个方法只支持IE8以上的浏览器
IE8及以下的浏览器均不支持该方法,如果兼容IE8,还是用for循环
*/
//创建一个数组
var arr= ["111","222","333"];
/*
forEach()方法需要一个函数作为参数
像这种函数,由我们创建但不由我们调用的,称为回调函数
数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素
以实参的形式传递进来,我们可以来定义形参,来读取这些内容
浏览器会在回调函数中传递三个参数:
第一个参数:就是当前正在遍历的元素
第二个参数:就是当前正在遍历的元素的索引
第三个参数:就是正在遍历的数组
*/
arr.forEach(function(value,index,obj){
console.log("hello");
})
46._slice和splice
var arr = ["111","222","333"];
/*
slice()
可以用来从数组提取指定元素
该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回
参数:
1.截取开始的位置的索引,包含开始索引
2.截取结束的位置的索引,不包含结束索引
第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
索引可以传递一个负值,如果传递一个负值,则从后往前计算
-1倒数第一个
-2倒数第二个
*/
var result = arr.slice(1,2);//222
/*
splice()
可以用于删除数组中的指定元素
使用splice()会影响到原数组,会将只当元素从原数组中删除
并将被删除的元素作为返回值返回
参数
第一个,表示开始位置的索引
第二个,表示删除的数量
第三个及以后,
可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
*/
arr.splice(0,2);
47.数组去重
//创建数组
var arr = [1,1,2,3,3,4,4,4,4,5,6,7];
//去除数组中的重复数字
//获取数组中的每一个元素
for(var i = 0; i < arr.length ; i++){
//获取当前元素后的所有元素
for(var j = i + 1; j<arr.length ; j++){
//判断两个元素是否相等
if(arr[i] == arr[j]){
//如果相等则证明出现了重复的元素,则删除j对应的元素
arr.splice(j,1);
//当删除了当时j所在的元素以后,后边的元素会自动补位
//此时将不会再比较这个元素,我们需要再比较一次j所在位置的元素
//使j自减
j--;
}
}
}
48.数组得其他方法
var arr = ["111","222","333"];
var arr2 = ["444","555","666"];
var arr3 = ["777","888","999"];
/*
concat() 可以连接两个或多个数组,并将新的数组返回
该方法不会对原数组产生影响
*/
var result = arr.concat(arr2,arr3,"000");
/*
join()
该方法可以将数组转换为一个字符串
该方法不会对原数组产生影响,而是将转换后得字符串作为结果返回
再join()中可以指定一个字符串作为参数,这个字符串会成为数组中元素的连接符
如果不指定连接符,则默认使用,作为连接符
*/
result = arr.join(“-”);//111-222-333
/*
reverse()
该方法用来反转数组(前边的去后边,后边的去前边)
该方法会直接修改原数组
*/
arr.reverse();//333,222,111
/*
sort()
可以用来对数组进行排序
也会影响原数组,默认会按照Unicode编码进行排序
对纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序
所以对数字进行排序时,可能会得到错误的结果
我们可以自己来指定排序的规则
我们可以再sort()添加一个回调函数,来指定排序规则
回调函数中需要定义两个形参,
浏览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素调用不确定,但是肯定的是再数组中a一定再b前边
浏览器会根据回调函数的返回值来决定元素的顺序
如果返回一个大于0的值,则元素会交换位置
如果返回一个小于0的值,则元素位置不变
如果返回一个等于0的值,则认为两个元素相等,也不交换位置
*/
arr = ["b","d","e","a","c"];
arr.sort();//a,b,c,d,e
arr = [5,4];
arr.sort(function(a,b){
//前边的大
/* if(a>b){
return 1;
}else if(a < b){
return -1;
}else{
return 0;
}
*/
//简便方法
//升序排列
return a - b;
//降序排列
return b - a;
});
49.call和apply
/*
call()和apply()
这两个方法都是函数对象的方法,需要通过函数对象来调用
当对函数调用call()和apply()都会调用函数执行
在调用call和apply()可以将一个对象指定为第一个参数
此时这个对象将会成为函数执行时的this
call()方法可以将实参在对象之后依次传递
apply()方法需要将实参封装到一个数组中统一传递
this的情况
1.以函数形式调用时,this永远都是window
2.以方法的形式调用时,this时调用方法的对象
3.以构造函数形式调用时,this时新创建的那个对象
4.使用call和apply调用时,this是指定的那个对象
*/
function fun(a,b){
}
fun.call(obj,2,3);
fun.apply(obj,[2,3]);
50._arguments
/*
在调用函数时,浏览器每次都会传递进两个隐含的参数
1.函数的上下文对象 this
2.封装实参二点对象 arguments
是一个类数组对象,也可以通过索引来操作数据,也可以获取长度
在调用函数时,我们所传递的实参都会在arguments中保存
arguments.length可以用来获取实参的长度
我们即使不定义形参,也可以通过arguments来使用实参,
只不过比较麻烦
arguments[0]表示第一个实参
arguments[1]表示第二个实参
它里面有一个属性叫做callee
这个属性对应一个函数对象,就是当前正在执行的函数的对象
*/
function fun(a,b){
console.log(arguments instanceof Array);
console.log(Array.isArray(arguments));
console.log(arguments[1]);
console.log(arguments.length);
console.log(arguments.callee == fun);
}
fun("hello",true);
51.Date对象
/*
Date对象
在JS中使用Date对象来表示一个时间
*/
//创建一个对象
//如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
var d = new Date();
//创建一个指定的时间对象
//需要在构造函数中传递一个表示时间的字符串作为参数
//日期的格式 月份/日/年时:分:秒
var d2 = new Date("12/03/2016 11:10:30");
/*
getDate()
获取当前日期对象是几日
*/
var date = d.getDate();
/*
getDay()
获取当前日期对象是周几
会返回一个0-6的值
0表示周日
1表示周一
----
*/
var day = d.getDay();
/*
getMonth()
获取当前时间对象的月份
会返回要给0-11的值
0表示1月
11表示12月
*/
var month = d.getMonth();
/*
getFullYear()
获取当前日期对象的年份
*/
var year = d.getFullYear();
/*
getTime()
获取当前日期对象的时间戳
从1970年1月1日到当前日期所花费的毫秒数(1秒 = 1000毫秒)
计算机底层在保存时间时使用的都是时间戳
*/
//获取 当前时间戳
time = Date.now();
52.Math
/*
Math
Math和其他的对象不同,它不是一个构造函数
它属于一个工具类不用创建对象,它里边封装了数学运算相关的属性和方法
比如
Math.PI 表示的圆周率
abs()可以用来计算一个数的绝对值
Math.ceil()
可以对一个数进行向上取整,小数位只有有值就自动进1
Math.floor()
可以对一个数进行向下取整,小数部分会被去掉//1.1 1.5 1.6 就是1
Math.round()
可以对一个数进行四舍五入取整
Math.random()
可以用来生成一个0-1之间的随机数,不会出现0不会出现1
生成一个0-10的随机数Math.random()*10
Math.round(Math.random()*10)//生成0-10之间的随机数
生成一个0-x之间的随机数
Math.round(Math.random()*x)
生成一个x-y之间的随机数
Math.round(Math.random()*(y-x)+x)
*/
/*
Math.max() 可以获取多个数中的最大值
Math.min() 可以获取多个数中的最小值
*/
/*
Math.pow(x,y)
返回x的y次幂
Math.sqrt()
用于对一个数进行开方运算
*/
53.包装类,字符串的方法
/*
基本数据类型
String Number Boolean Null Undefined
引用数据类型
Object
在JS中为我们提供了三个包装类,通过这三个包装可以将基本数据类型的数据转换为对象
String()
可以将基本数据类型字符串转换为String对象
Number()
可以将基本数据类型的数字转换为Number对象
Boolean()
可以将基本数据类型的布尔值转换为Boolean对象
但是注意,我们在实际应用中不会使用基本数据类型的对象,
如果使用基本数据类型的对象,在做一些比较时,可能会带来一些不可预期的结果
*/
//创建一个Number类型的对象
var num = new Number(3);
num.hello = "abcdefg";//可以向对象添加属性
/*
方法和属性只能添加给对象,不能添加给基本数据类型
当我们对一些基本数据类型的值去调用属性和方法时,浏览器会临时使用包装类将其转换为对象,然后再调用对象的属性和方法
调用完以后,再将其转换为基本数据类型
*/
/*
在底层字符串是以字符数组的形式保存的 ["H","e","l","l","o"]
lenght可以用来获取字符串长度
charAt()可以返回字符串中指定位置的字符
根据索引可以获取指定的字符
charCodeAt()获取指定位置字符的字符编码(Unicode编码)
String.formCharCode()可以根据字符编码获取字符
concat()可以用来连接两个或多个字符串,作用和+号一样
indexof()该方法可以检索一个字符串中是否会有指定内容,如果字符串中含有该内容,则会返回其第一次出现的索引。 如果没有找到指定的内容,则返回-1.
可以指定一个第二个参数,指定开始查找的位置 str.indexof("h",1)从第一位还是向后找
lastIndexOf()该方法的用法和indexOf()一样,不同的是indexOf是从前向后找,它是从后向前找,也可以指定开始查找位置
slice()可以从字符串中截取指定的内容,不会影响原字符串,而是将截取到的内容返回。
参数:
第一个,开始位置的索引(包括开始位置)
第二个,结束位置的索引(不包括结束位置)
如果省略第二个参数,则会截取到后边的所有
也可以传递一个负数作为参数,负数的话将会从后边计算
substring()可以用来截取一个字符串,和slice()类似
参数:
第一个,开始位置的索引(包括开始位置)
第二个,结束位置的索引(不包括结束位置)
不同的是这个方法不能接收负值作为参数,如果传递了一个负值则默认使用0
而且他会自动调整参数的位置,如果第二个参数小于第一个,则自动交换
split()
可以将一个字符串拆分为一个数组
参数:
需要一个字符串作为参数,将会根据该字符串去拆分数组 str.split(",");
如果传递一个空串作为参数,则会将每个字符都拆分为数组元素。
toUpperCase()可以将字符串转换为大写并返回 会影响原字符串
toLowerCase()可以将字符串转换为小写并返回 会影响原字符串
*/
str = "11111";
result = str.concat("222");
result = str.slice(1,4);
54.正则表达式
/*
正则表达式
admin
admin@atguigu.com
正则表达式用于定义一些字符串的规则,
计算机可以根据正则表达式,来检查一个字符串是否符合规则
获取将字符串中符合规则的内容提取出来
*/
//创建正则表达式的对象
/*
语法:
var 变量 = new RegExp("正则表达式","匹配模式");
在构造函数中可以传递一个匹配模式作为第二个参数
可以是
i 忽略大小写
g 全局匹配模式
*/
var reg = new RegExp(“a”);//这个正则表达式检查一个字符串是否含有a
var str = "abvcdf";
/*
正则表达式的方法:
test()
使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
如果符合则返回true,否则返回false
*/
var result = reg.test(str);//true
55.正则语法
/*
使用字面量来创建正则表达式
语法: var 变量 = /正则表达式/匹配模式
*/
var reg = new RegExp("a","i");
reg = /a/i; //跟上面作用一样
//创建一个正则表达式,检查一个字符串中是否有a或b
/*
使用|表示或者的意思
*/
reg = /a|b/;
/*
创建一个正则表达式检查一个字符串中是否有字母
[]里的内容也是或的关系 [ab] == a|b
[a-z] 任意小写字母
[A-Z] 任意大写字母
[A-z] 任意字母
*/
reg = /[a-z]/;
/*
检查一个字符串中是否含有abc或adc或aec
*/
reg = /a[bde]c/;
/*
[^ ]除了
*/
reg = /[^ab]/;//除了ab以外
56.字符串和正则的相关方法
var str = "1224b4214213nff";
/*
split()
可以将一个字符串拆分为一个数组
方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串
这个方法即使不指定全局匹配,也会全部拆分
*/
/*
根据任意字母来将字符串拆分
*/
var result = str.split(/[A-z]/);
/*
search()
可以搜索字符串中是否含有指定内容
如果所有到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1
它可以接收一个正则表达式作为参数,然后会根据正则表达式去检索字符串
search()只会查找第一个,即使设置全局匹配也没有用
*/
str = "hello 123 abc ";
result = str.search("abcd");//返回索引
/*
搜索字符串中是否含有abc 或aec 或afc
使用正则
*/
result = str.search(/a[bef]c/);
/*
match()
可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
默认情况下我们的match只会找到第一个符合要求的内容,找到以后就停止检索
我们可以设置正则表达式为全局匹配模式,这样就是匹配所有的内容
可以为一个正则表达式设置多个匹配模式,且顺序无所谓 ig gi
match()会将匹配的内容封装到一个数组中返回,即使只查询到一个结果
*/
str = "1fiejdo344523der312";
result = str.match(/[A-z]/g);
/*
replace()
可以将字符串中指定内容替换为新的内容
参数:
1.被替换的内容,可以接收一个正则表达式作为参数
2.新的内容
默认只会替换第一个 可以通过g全局等
*/
result = str.replace(/e/,"Q-Q");
57.正则表达式语法
/*
创建一个正则表达式检查一个字符串是否含有aaa
*/
/*
量词
通过量词可以设置一个内容出现的次数
量词只对它前边的一个内容起作用,可以对想要检查的内容添加括号。
{n}正好出现n次
{m,n}出现m-n次
{m,}m次以上
+ 表示至少一个,相当于{1,}
* 表示0个或多个,相当于{0,}
? 表示0个或1个 相当于{0,1}
*/
var str = "aaacdsdsw";
var reg = /a{3}/;
var reg = /(abcd){3}/;
var reg = /ab{1,3}c/;//abc abbc abbbbbc(false);
/*
检查一个字符串中是否以a开头
^ 表示开头
$ 表示结尾
*/
reg = /^a/;
reg = /a$/;
reg = /^a$/;//如果在一个正则表达式中同时使用^$,则要求字符串完全符合正则表达式。 只有a是对的
/*
创建一个正则表达式,用来检查一个字符串是否是一个手机号
手机号的规则:
11位
第一个位 以1开头 ^1
第二位 不能是0,1,2 [3-9]
三位以后任意数字9个 [0-9]{9}$
*/
reg = /^1[3-9][0-9]{9}$/;
/*
检查一个字符串中是否含有.
.表示任意字符
在正则表达式中使用\作为转义字符
\.来表示.
\\ 才表示一个\
注意 : 使用构造函数时,由于它的参数是一个字符串,而\时字符串中转义字符
如果要使用\则需要使用\\来代替
*/
var reg = /\./;
reg = new RegExp("\\.");
/*
\w
任意字母,数字,_ 相当于[A-z0-9_]
\W
除了字母,数字,_ 相当于[^A-z0-9_] 中括号里面的^表示除了
\d
任意数字 [0-9]
\D
除了数字 [^0-9]
\s
空格
\S
除了空格
\b
单词边界
\B
除了单词边界
*/
/*
创建一个正则表达式检查一个字符串中是否含有单词child
*/
reg = /\bchild\b/ // 必须是一个child 前后不挨着任何单词 achild不行 children不行 child行
//去除字符串中的空格
var str = " hello ";
//去除空格使用“”来替换
str = str.replace(/\s/g,"");//万一是 he llo 中间的空格也会去掉
//去掉开头的空格 /^\s*/,""
//去掉结尾的空格 /\s*$/,""
str = str.replace(/^\s*|\s*$/g,"");//匹配开头结尾空格去掉
58.DOM
/*
什么是DOM
DOM,全名Document Object Model 文档对象模型
JS通过DOM来对HTML文档进行操作,只要理解了DOM就可以随心所欲操作WEB页面
文档
文档表示的就是整个的HTML页面文档、
对象
对象表示将网页中的每一个部分都转换为了一个对象
模型
使用模型来表示对象之间的关系,这样方便我们获取对象
*/
/*
节点
节点:Node--构成HTML文档的最基本的单元
常用节点分为四类
文档节点:整个HTML文档
元素节点:HTML文档中的HTML标签
属性节点:元素的属性
文本节点:HTML标签中的文本内容
*/
<button id="btn">anniu</button>
<script type="text/javascript>
/*
浏览器已经为我们提供文档节点 这个对象是window的属性
可以在页面中直接使用,文档节点代表的整个网页
*/
//获取到button对象
var btn = document.getElementById("btn");
//修改按钮的文字
btn.innerHtML = "1111";
</script>
59.事件
/*
事件,就是用户和浏览器之间的交互行为
比如:点击按钮,鼠标移动。。。。
我们可以在事件对应得属性中设置一些js代码
这样当事件被触发时,这些代码将会执行
*/
60.文档的加载
/*
浏览器在加载一个页面时,是按照自上向下的顺序加载的
读取到一行就运行一行,如果将script标签写到页面的上边
在代码执行时,页面还没有加载,DOM对象也没有加载
无法获取DOM对象
*/
/*
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
window.onload = function(){}
*/
61.DOM查询
获取元素节点
通过document对象调用
1.getElementById()
通过id属性获取一个元素节点对象
2.getElementsByTagName()
通过标签名获取一组元素节点对象
3.getElementsByName()
通过name属性获取一组元素节点对象
通过具体的元素节点调用
1.getElementsByTagName()
方法,返回当前节点的指定标签名后代节点
2.childNodes
属性,表示当前节点的所有子节点
会获取包括文本节点在内的所有节点,根据DOM标签标签间的空白也会当成文本节点
注意:在IE8及以下的浏览器中,不会将空白文本当成子节点,所以该属性在IE8中会返回4哥子元素而其他浏览器是9个
children属性可以获取当前元素的所有子元素
3.firstChild
属性,表示当前节点的第一个子节点(包括空白文本节点)
firstElementChild获取当前元素的第一个元素,不支持IE8及以下的浏览器,如果需要兼容他们尽量不要使用
4.lastChild
属性,表示当前节点的最后一个子节点
获取父节点和兄弟节点
通过具体的节点调用
1.parentNode
属性:表示当前节点的父节点
2.previousSibling
属性,表示当前节点的前一个兄弟节点
3.nextSibling
属性,表示当前节点的后一个兄弟节点
/*
innerText该属性可以获取到元素内部的文本内容
它和innerHTML类似,不同的是它会自动将html去除
document.createElement()
可以用于创建一个元素节点对象,
它需要一个标签名作为参数,将会根据该标签名创建元素节点对象
并将创建好的对象作为返回值返回
document.createTextNode()
可以用来创建一个文本节点对象
需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
appendChild()
向一个父节点中添加一个新的子节点
用法:父节点.appendChild(子节点);
insertBefore()
可以在指定的子节点前插入新的子节点
语法:
父节点.insertBefore(新节点,旧节点);
removeChild()
可以删除一个子节点
语法:父节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点);
使用innerHTML也可以完成DOM的增删改的相关操作
一般我们会两种方式结合使用
*/
62.操作内联样式
/*
通过JS修改元素的样式:
语法:
元素.style.样式名 = 样式值
box.style.width = "300px";
注意:如果CSS的样式名中含有-
这种名称在JS中是不合法的比如:background-color
需要将这种样式名修改为驼峰命名法
去掉-,然后将-后的字母大写
我们通过style属性设置的样式都是内联样式,
而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示
但是如果在样式中写了!important,则此时样式会有最高的优先级,
即使通过JS也布恩那个覆盖该样式,此时将会导致JS修改样式失效
所以尽量不要为样式添加!important
通过style属性设置和读取的都是内联样式
无法读取样式表中的样式 box.style.width
*/
/*
获取元素的当前显示的样式
语法:元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式
如果当前元素没有该样式,则获取他的默认值
currentStyle只有IE浏览器支持,其他的不行
其他浏览器中可以使用
getComputerStyle()这个方法来获取元素当前的样式
这个方法是window的方法,可以直接使用
需要两个参数
第一个:要获取样式的元素
第二个:可以传递一个伪元素 ,一般都是null
getComputerStyle(box,null);
该方法会返回一个对象,对象中封装了当前元素对应的样式
可以通过 对象.样式名 来读取样式
如果获取的样式没有设置,则会获取到真实的值,而不是默认值
比如,没有设置width,他不会获取到auto,而是一个长度
*/
/*
clientWidth
clientHeight
这两个属性可以获取元素的可见宽度和高度
这些属性都是不带px的,返回都是一个数字,可以直接进行计算
会获取元素宽度和高度,包括内容区和内边距
这些属性都是只读的,不能修改
*/
/*
offsetWidth
offsetHeight
获取元素的整个的宽度和高度,包括内容区,内边距和边框
offsetParent
可以用来获取当前元素的定位父元素
会获取到离当前元素最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位,则返回body
offsetLeft
当前元素相对于其定位元素的水平偏移量
offsetTop
当前元素相对于其定位元素的垂直偏移量
*/
/*
scrollWidth
scrollHeight
可以获取元素整个滚动区域的宽度和高度
scrollLeft
获取水平滚动条滚动的距离
scrollTop
获取垂直滚动条滚动的距离
当满足scrollHeight - scrollTop == clientHeight
说明垂直滚动条滚动到底了
当满足scrollWidth - scrollLeft == clientWidth
说明水平滚动条滚动到底
*/
/*
当垂直滚动条滚动到底时使表单项可用
onscroll
该事件会在元素的滚动条滚动时触发
*/
63.事件对象
/*
onmousemove
该时间啊将会在鼠标在元素中移动时被触发
事件对象:
当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数
在事件对象中封装了当前事件相关的一切信息,比如,鼠标的坐标 键盘哪个按键被按下,鼠标滚轮滚动的方向。。。
*/
areaDIv.onmousemove = function(event){
/*
clientX可以获取鼠标指针的水平坐标
clientY可以获取鼠标指针的垂直坐标
var x = event.clientX;
*/
}
64.事件冒泡
/*
事件的冒泡(Bubble)
所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
在开发中,大部分情况 冒泡都是非常有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
可以将事件对象的cancelBubble设置为true,即可取消冒泡
event.cancelBubble = true;
*/
65.事件的委派
/*
事件的委派
指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件被触发时,会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件
事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能。
*/
66.事件的绑定
/*addEventListener()
通过这个方法也可以为元素怒绑定响应函数
参数:
1.事件的字符串,不是on
2.回调函数,当事件触发时该函数会被调用
3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
这样当事件被触发时,响应函数将会被按照函数的绑定顺序执行
attachEvent()
在IE8中可以使用attachEvent()来绑定事件
参数:
1.事件的字符串,要on
2.回调函数
这个方法也可以同时一个事件绑定多个处理函数
不同的是它是后绑定先执行,执行顺序和addEventListener()相反
addEventListener() 中的this,是绑定事件的对象
attachEvent()中的this,是window需要统一两个方法this
*/
67.事件传播
/*
事件的传播
W3C综合了两个微软和网景的方案,将事件传播分成了三个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
2.目标阶段
事件捕获到目标元素,捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
*/
68.BOM
/*
BOM
浏览器对象模型
BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象,用来完成对浏览器的操作
BOM对象
Window
代表的整个浏览器窗口,同时window也是网页中的全局对象
Nacigator
代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
Location
代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
History
代表浏览器的历史记录,可以通过对象来操作浏览器的历史记录
由于隐私的原因,改对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页
而且该操作只在档次访问时有效
Screen
代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的,
可以通过window对象来使用,也可以直接使用
*/
/*
Navigator
代表的当前浏览器的信息,通过该对象来识别不同的浏览器
navigator.appName
由于历史原因,Navgator对象中的大部分属性都已经不能帮助我们识别浏览器了。
一般我们只会使用userAgent来判断浏览器的信息
userAgent是一个字符串,这个字符串中包含有用来表述浏览器信息的内容
不同的浏览器会有不同的userAgent
如果通过UserAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器的信息
比如,ActiveXObject
*/
69.History
/*
History
对象可以用来操作浏览器向前或向后翻页
length
属性,可以获取到当前访问的连接数量
*/、
/*
back()
可以用来回退到上一个页面,作用和浏览器的回退按钮一样
foeward()
可以跳转到下一个页面,作用和浏览器的前进按钮一样
go()
可以用来跳转到指定页面
它需要一个整数作为参数
1, 表示向前跳转一个页面
2, 表示向前跳转两个
-1 向后跳转一个
-2 向后跳转两个
*/
70.Location
/*
Loaction
该对象中封装了浏览器的地址栏的信息
assign()
用来跳转到其他的页面,作用和直接修改location一样
location.assign(http://....);
reload()
用于重新加载当前页面,作用和刷新按钮一样
如果方法中传递一个true,作为参数,则会强制清空刷新页面
replace()
可以使用一个新的页面替换当前页面,调用完毕也会跳转页面
不会生成历史记录,不能使用回退按钮回退
*/
71.定时器
/*
setInterval()
定时调用
可以将一个函数,每隔一段时间执行一次
参数:
1.回调函数,该函数会每隔一段时间被调用一次
2.每次调用间隔得时间,单位是毫秒
返回值:
返回一个Number类型得数据
这个数字用来作为定时器得唯一标识
*/
var num = 1;
var timer = setInterval(function(){
count.interHTML = num++;
if(num == 11){
clearInterval(timer);
}
},500);
/*
clearInterval()可以用来关闭一个定时器
方法中需要一个定时器得标识作为参数,这样将关闭标识对应得定时器
*/
//clearInterval(timer);
72.类的操作
/*
toggleClass可以用来切换一个类
如果元素中具有该类,则删除
如果元素中没有该类,则添加
*/
function toggleClass(obj,cn){
if(hasClass(obj,cn){
removeClass(obj,cn);
}else{
addClass(obj,cn);
})
}
73.JSON
/*
JSON
JS中的对象只有JS自己认识,其他的语言都不认识
JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别
并且可以转换为任意语言中的对象,JSON再开发中主要用来数据的交互
JSON
JavaScript Object Notation JS对象表示法
JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号
其他的和JS语法一致
JSON分类:
1.对象{}
2.数组[]
JSON中允许的值:
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组
json-->js对象
JSON.parse()
可以将以JSON字符串转换为js对象
它需要一个JSON字符串作为参数,会将该字符串转换为JS对象
js-->json对象
JSON.stringify()
可以将一个JS对象转换为JSON字符串
需要一个js对象作为参数,会返回一个JSON字符串
eval()
这个函数可以用来执行一段字符串形式的JS代码,并将执行结果返回
如果使用eval()执行的字符串中含有{},它会将{}当成代码块
如果不希望将其当成代码块解析,则需要再字符串前后各加一个()
eval()这个函数的功能很强大,可以直接执行一个字符串中的js代码
但是再开发中尽量不要使用,首先它的执行性能比较差,然后他还具有安全隐患
*/