javascript

javascript

1.1定义

解释性脚本语言

在网页中增加动态效果和交互能力

ecmascript //语法

browserobjects(dom，bom) //特性

1.2导入

1.2.1内部

在head或body中使用<script>，在标签内部嵌入js代码

<script type="text/javascript">

</script>

1.2.2外部

外部导入<script src="x.js"></script>

1.3语法基础

1.3.1注释&分号

// 单行

/* */ 多行注释

语句结束使用分号，如果省略，则由解析器确定语句的结尾

1.3.2标识符

变量，函数，属性的名字或者函数的参数

1.1命名规则

• 由字母，数字，下划线或美元符号组成
• 不能以数字开头
• 不能使用关键字，保留字等作为标识符

1.4变量

• ecmascript的变量是松散类型
• 松散类型 //可以用来保存任何类型的数据
• 每个变量仅仅是一个用于保存值的占位符

1.4.1变量声明&赋值

1.1变量声明

声明变量要使用var操作符

var 变量名 //语法

1.2变量赋值

声明的同时赋值：var变量名=值

先声明后赋值：变量名=值

ps：

1. 省略var声明的变量是全局变量
2. 不推荐省略var操作符来定义全局变量

1.5数据类型

1.5.1基本数据类型

1.1Undefined

未定义

• 只有一个值 //特殊的undefined
• 一般，不存在把一个变量设置为undefined
• 如果一个变量定义没有赋值，则值为undefined

1.2null

空

• 空对象指针
• 如果定义的变量准备用于保存对象，那么最好将变量初始化为null

ps：

undefined值是派生于null值，所以undefined=null为true

1.3number

数字

表示整数和浮点数

ps：

• 任何涉及isNAN的操作都会返回isNAN
• isNAN与任何值都不相等，包括isNAN

1.4string

字符串

• 表示由零或多个16位unicode字符组成的字符序列，即字符串
• 可以使用“”/’‘/``表示
• “”/’‘没有区别
• ``可解析变量

tostring()&string()

• str.tostring() //语法
• 将str转换为字符串 //功能
• 返回str的一个副本 //返回值
• str是要转换的内容，可以是数值，布尔值，对象和字符串 //参数
• 在不知要转换的值是不是null或undefined的情况下，还可以使用string()函数，能将任何类型的值转换为字符串

1.5boolean

用于表示真假的类型，true为真，false表假

除0之外的所有数字，转换为布尔都为true

除“”之外的所有字符，转换为布尔都为true

null和undefined转换为布尔都为false

1.6symbol

独一无二

1.5.2引用数据类型

object //对象

array //数组

function //函数

list //列表

空列表为true

1.5.3数值转换

可以把非数值转为数值

number() //可用于任何数据类型

parselnt() //忽略前面空格，直到第一个非空格字符，空字符返回NAN

parsefloat() //只会找到第一个小数点，从头开始，若第一位不是数字则，返回

1.5.4类型判断

typeof()/typeof //获取数据的类型

typeof(变量)/typeof 变量

instanceof //判断数据类型是否属于某个引用类型

变量 instanceof 引用类型

1.5.5isNAN

非数值(notanumber)是一个特殊的数值

isnan() /语法

检测是否为非数值，返回值boolean

1.6表达式&运算符

1.6.1表达式

将同类型的数据(如常量，变量，函数等)，用运算符号按一定的规则来连接起来，有意义的式子

1.6.2运算符

1.1算数运算符

+	加
-	减
*	乘
/	除
%	取余
++	自增
–	自减
**	幂

1.2逻辑运算符

与判断null/undefined/isNAN，谁在首位返回谁，或返回最后一个

或优先级低于与

非优先级最高

或有一个为真就停止，都不为真，返回最后一个

逻辑与

&&

只要有一个条件不成立，返回false

ps：

在有一个操作数不是布尔值的情况，逻辑与操作就不一定返回值，此时它遵循如下规则

1. 如果第一个操作数隐式类型转换后为true，则返回第二个操作数
2. 如果第一个操作数隐式类型转换后为false，则返回第一个操作数
3. 如果有一个操作数是null，则返回null
4. 如果有一个操作数是NAN，则返回NAN
5. 如果有一个操作数是undefined，则返回underfunded

• 1，2在两个操作数情况下
• 3，4，5在前面的操作数隐式类型转换后为true的情况时

逻辑或

||

只要有一个条件成立，就返回true

ps：

在有一个操作数不是布尔值的情况，逻辑或操作就不一定返回值，此时它遵循如下规则

1. 如果第一个操作数隐式类型转换后为true，则返回第一个操作数
2. 如果第一个操作数隐式类型转换后为false，则返回第二个操作数
3. 如果两个操作数是null，则返回null
4. 如果两个操作数是NAN，则返回NAN
5. 如果两个操作数是undefined，则返回underfunded

• 规则是两个操作数的情况

逻辑非

！

ps：

1. 无论操作数是什么数据类型，逻辑非都会返回一个布尔值
2. ！！同时使用两个逻辑非操作符时：

• 第一个逻辑非操作会基于无论什么操作数返回一个布尔值，第二个逻辑非则对该布尔值取反

1.3赋值运算符

简单赋值	=
复合赋值	+=	-=	*=	/=	%=

1.4比较运算符

返回值为Boolean

>	大于
<	小于
>=	大于等于
<=	小于等于
==	相等，只比较值
===	全等，比较值的同时比较数据类型
!=	不相等，比较值
!==	不全等，比较值的同时比较数据类型

1.5三元运算符

条件？执行代码1：执行代码2

可代替简单的if语句

成立1否则2

1.7条件语句

1.7.1if-else

if（condition）{

​ statement

}else{

​ statement

}

if（condition）{

​ statement

}else if（condition）{

​ statement

}else{

​ statement

}

1.7.2if

if（condition）{

​ statement

}

1.7.3switch-case

switch(expression){

case value:statemant;

break;

case value:statemant;

break;

default:statement;

}

1.7.4length

string.length //语法

获取string字符串长度

1.8循环语句

for //适合已知循环次数的循环体

while //适合未知循环次数的循环体

1.8.1for

for(语句；语句；语句){

​ 代码块；

}

1.8.2while

while(条件){

​ 代码块；

}

1.8.3do-while

do{

​ 代码块；

}while(条件)

至少循环一次

1.8.4break

跳出循环

1.8.5continue

结束本次循环，继续下次

1.9函数

通过函数封装任意多条语句，而且可以在任何地方，任何时候调用执行

1.9.1定义

function //声明

function functionName（[arg0，arg1，…aegn]）{

​ statement

}

ps:

1. functionName是要定义的函数，属于标识符
2. []中的arg0，arg1，…argn为函数的参数，不是必需
3. []只说明里面的内容不是必须的，它不是语法

1.9.2调用

函数名（）

1.9.3返回值

return

默认返回undefined

ps：

执行完return后立即跳出

return语句也可以不带有任何返回值，一般用于需要提前停止函数执行而又不需要返回值的情况下

1.9.4参数

不支持关键字传参

1.1形参&实参

形参 //函数中定义的变量

实参 //在运行时的函数调用时传入的参数。

1.2传参方式

顺序传参

默认传参

不定传参 //在参数前面加上 …arg 类型是数组可以通过下标访问

1.9.5arguments

arguments //伪数组，具备数组的一些特征，可以通过下标访问

length属性确定传递参数的个数

1.9.6匿名函数

function（）{

return x++;

}

定义函数时不起名字

一般是给变量赋值或者作为函数参数，一般都是被动调用

自调用()() //第一个写匿名函数，第二个写实参

主动调用

1.9.7箭头函数

也属于匿名函数

function（）{

return x++; --> x=>x++;

}

1.9.8闭包

词法表示包括不必计算的变量的函数，也就是说，该函数使用了函数外定义的变量

function outer(n1,n2){

​ var n3=99;

​ function inner(){

​ console.log(n1+n2+n3)

}

​ return inner;

}

var inn=outer()

inn()

1.9.9延迟调用

超时调用

settimeout（code，millisec） //语法

在指定的毫米数后调用函数或计算表达式 //功能

code //要调用的函数或要执行的js代码块

millisec //在执行代码前需等待的毫秒数

ps：

• settimeout()只执行code一次，如果要多次调用，使用setinterval()或让code自身再次调用settimeout()

清除超时调用

cleartimeout(id_of_settimeout) //语法

取消由settimeout()方法设置的timeout //功能

id_of_settimeout //由settimeout()返回的id值，该值标识要取消的延时执行代码块

间歇调用

setinterval(code，millisec) //语法

每隔指定的时间执行一次代码 //功能

code //要调用的函数或要执行的js代码块

millisec //周期性执行或调用code之间的时间间隔，以毫秒记

2.1内置对象

2.1.1array数组对象

1.1创建数组

1.使用array构造函数

new array() //语法

ps：对()

• 预先知道数组要保存的项目数量

• 向array构造函数中传递数组应包含的项

2.使用数组字面量表示法

由一对包含数组项的方括号[]表示，多个项之间以逗号隔开

1.2元素的读写

读写和设置值时，使用方括号[]并提供相应的索引

ps：索引是从0开始的正整数

1.3长度

array.length //语法

获取数组长度 //功能

nember //返回值

ps：

1. 通过设置length可以从数组的末尾移除项或向数组中添加新项
2. 当把一个值放在超出当前数组大小的位置上时，数组就会重新计算其长度值，长度值等于最后一项的索引加1

1.4方法

栈方法：

push()

arrayobject.push(newele1,newele2,…,newx) //语法

将他的参数顺序添加到arrayobject的尾部 //功能

把指定的值添加到数组后的新长度 //返回值

unshift()

arrayobject.unshift(newele1,newele2,…,newex) //语法

将他的参数顺序添加到arrayob.ject的开头 //功能

把指定的值添加到数组后的新长度 //返回值

pop()

arrayobject.pop() //语法

删除arrayobject的最后一个元素 //功能

被删除的那个元素 //返回值

shift()

arrayobject.shift() //语法

删除arrayobject的第一个元素 //功能

被删除的那个元素 //返回值

数组的转换，重排序方法

join()

arrayobject.join(separator) //语法

用于把数组中的所有元素放入一个字符串 //功能

字符串 //返回值

reverse()

arrayobject.reverse() //语法

用于颠倒数组中的元素顺序 //功能

数组 //返回值

sort()

arrayobject.sort() //语法

用于对数组元素的排序 //功能

数组 //返回值

ps：

1. 即使数组中的每一项都是数值，sort()方法比较的也是字符串
2. sort()方法可以接收一个比较函数作为参数

如：

.sort(function(a,b)){

​ return a-b

}

数组的操作方法

concat()

arrayobject.concat(arrayx,arrayx,…,arrayx) //方法

用于连接两个或多个数组 //功能

数组 //返回值

slice()

arrayobject.slice(start,end) //语法

从已有的数组中返回选定的元素 //功能

start //必须，规定从何处开始选取，如果是负数，那么它规定从尾部开始

end //可选，规定从何处结束选取，改参数是数组片段结束处的数组下标

ps:

1. 如果没有指定end，那么切分的数组包含从start到数组结束的所有元素
2. 如果slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置

数组 //返回值

splice()方法的删除，插入与替换

删除

arrayobject.splice(index,count) //语法

删除从index处开始的零个或多个元素 //功能

含有被删除元素的数组 //返回值

ps：

count是要删除的项目数量，如果设置为0，则不会删除项目，如果不设置，则删除从index开始的所有值

插入

arrayobject.splice(index,0,item1,…,itemx) //语法

在指定位置插入值 //功能

index //起始位置

0 //要删除的项数

item1…itemx //要插入的项

数组 //返回值

替换

arrayobject.splice(index,count,item1,…,itemx) //语法

在指定位置插入值，且同时删除任意数量的项 //功能

index //起始位置

count //要删除的项数

item1…itemx //要插入的项

从原始数组中删除的项(如果没有删除任何项，则返回空数组) //返回值

查找某元素在数组中的指定位置方法

indexof()

arrayobject.indexof(searchvalue，startindex) //语法

从数组的开头(位置0)开始向后查找 //功能

searchvalue //必需，要查找的项

startindex //可选，起点位置的索引

number，查找项的位置，没找到返回-1 //返回值

lastindexof()

arrayobject.lastindexof(searchvalue,startindex) //语法

从数组的末尾开始向前查找 //功能

searchvalue //必需，要查找的项

startindex //可选，起点位置的索引

number，查找项的位置，没找到返回-1 //返回值

ps：

1. 在比较第一个参数与数组中的每一项时，会使用全等操作符，即要求查找的项必须严格相等
2. 数组的位置方法时ecmascript5为数组实例新增的，所以不是支持所有浏览器

2.1.2string对象

1.1方法

拼接可使用+号，除了加号其他都是转成数字进行运算

charat()

stringobject.charat(index) //语法

返回stringobject中index位置的字符 //功能

charcodeat()

stringobject.charcodeat(index) //语法

返回stringobject中index位置字符的字符编码 //功能

ps：charat&charcodeat

ecmascript5中可使用”方括号加字符索引“来访问字符串中特定的字符，但ie7及更早的浏览器会返回undefined

indexof()

stringobject.indexof(“0”) //语法

从一个字符串中搜索给定的子字符串，返回子字符串的位置 //功能

数值 /返回值

ps：

如果没找到该子字符串则返回-1

lastindexof()

stringobject.lastindexof(“0”) //语法

从一个字符串自尾部搜索给定的子字符串，返回子字符串的位置 //功能

数值 //返回值

ps：

如果没找到该子字符串则返回-1

字符串截取

slice()

stringvalue.slice(start,end) //语法

截取子字符串 //功能

start //必需，指定子字符串的开始位置

end //可选，表示子字符串到哪里结束，end本身不在截取范围之内，省略时截取至字符串末尾

当参数为负数时，会将传入的负值与字符串的长度相加

substring()

语法及功能与slice相同

区别：

1. 当参数为负数时，自动将参数转换为0
2. sub会将较小的数作为开始位置，将较大的数作为结束位置

substr()

stringvalue.substr(start,len) //语法

截取子字符串 //功能

start //必需，指定子字符串的开始位置，为负值时，会将传入的负值与字符串的长度相加

len //可选，表示截取的字符总数，省略时截取至字符串末尾，为负值时，返回空字符串

字符串分割替换

split()

stringobject.split(separator) //语法

将一个字符串分割成字符串数组 //功能

array //返回值

separator //必需，分隔符

replace()

stringobject.replace(regexp/substr,replacement) //语法

在字符串中用一些字符替换另一些字符，或将一个与正则表达式匹配的字符串替换

string //返回值

regexp //必需，规定子字符串或要替换的模式的regexp对象

replacement //必需，一个字符串

例：

stringobject.replace(/\d+/,‘1’)

其他方法

touppercase()

stringvalue.touppercase() //语法

将字符串转换为大写 //功能

tolowercase()

stringvalue.tolowercase() //语法

将字符转串换为小写 //功能

2.1.3math对象

1.1方法

min()

math.min(num1,num2…,numx) //语法

求一组数中的最小值 //功能

number //返回值

max()

math.max(num1,num2…,numx) //语法

求一组数中的最大值 //功能

number //返回值

ceil()

math.ceil(num) //语法

向上取整，即大于num的最小整数 //功能

number //返回值

floor()

math.floor(num) //语法

向下取整，num整数部分 //功能

number //返回值

round()

math.round() //语法

将数值四舍五入为最接近的整数 //功能

number //返回值

abs()

math.abs() //语法

返回num的绝对值 //功能

number //返回值

random()

math.random() //语法

返回大于等于0小于1的一个随机数 //功能

number //返回值

ps：

求n-m之间的随机整数的公式:

random=Math.floor(math.random()*(m-n+1)+n)

2.1.4date对象

1.1创建

new date()

1.2方法

获取时间

getfullyear() //返回4位数的年份

getmonth() //返回日期中的月份，返回值为0-11

getdate() //返回日期中的某一天

getday() //返回星期，返回值为0-6

gethours() //返回小时

getminutes() //返回分

getseconde() //返回秒

gettime() //返回表示日期的毫秒数

设置时间

setfullyear() //设置4位数的年份

setmonth() //设置日期中的月份，0为1月

setdate() //设置日期

sethours() //设置小时

setminutes() //设置分

setseconde() //设置秒

settime() //以毫秒数设置日期，会改变整个日期

2.2错误处理

2.2.1语法错误

不符合js语法的错误

2.2.2运行时错误

运行时的错误

referenceerror //变量引用异常触发

typeerror //类型使用错误时触发

rangeerror //递归爆栈时触发，即递归深度太深

2.2.3逻辑错误

计算结果不符合预期

2.2.4try-catch-finally

主动触发错误

throw语句

不可避免错误

try catch语句

2.3js bom&dom基础

2.3.1bom

1.1定义

browser object model //浏览器对象模型

1.2对象

window

是一个浏览器的实例，在浏览器中，window对象有双重角色，它既是通过js访问浏览器窗口的一个接口，又是ecmascript规定的global对象

window.alert(“content”) //语法

显示带有一段消息和一个确认按钮的警告框 //功能

window.confirm(“message”) //语法

显示一个带有指定消息和ok及取消按钮的对话框 //功能

如果用户点击确定按钮，则confirm()返回false

window.prompt(“text,defaulttext”) //语法

text //要在对话框中显示的纯文本(而不是html格式的文本)

defaulttext //默认的输入文本

如果用户单击提示框的取消按钮，则返回null。如果用户单击确认按钮，则返回输入字段当前显示的文本 //返回值

window.open(pageurl,name,parameters) //语法

打开一个新的浏览器窗口或查找一个已命名的窗口 //功能

pageurl //子窗口路径

name //子窗口句柄

parameters //窗口参数(各参数用逗号分隔)

window.close() //语法

关闭浏览器窗口 //功能

location

属性

提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性

location.href //语法

返回当前加载页面的完整url //功能

ps：

location.href和window.location等价

location.hash //语法

返回url中的hash(#后 跟零个或多个字符)，如果不包含则返回空字符串 //功能

location.host //语法

返回服务器名称和端口号(如果有) //功能

location.hostname //语法

返回不带端口号的服务器名称 //功能

location.pathname //语法

返回url中的目录和(或)文件名 //功能

location.port //语法

返回url中指定的端口号，如果没有，返回空字符串 //功能

location.protocol //语法

返回页面使用协议 //功能

location.search //语法

返回url的查询字符串，这个字符串以问号开头 //功能

位置操作

location.replace(url) //语法

重新定向url //功能

ps：

使用location.replace不会在历史记录中生成新记录

location.reload() //语法

重新加载当前显示的页面 //功能

ps：

• location.reload()有可能从缓存中加载
• location.reload(true)从服务器重新加载

history

history.back() //语法

回到历史记录的上一步 //功能

history.forward() //语法

回到历史记录的下一步 //功能

history.go(n) //语法

回到历史记录的前n步 //功能

history.go(-n) //语法

回到历史记录的后n步 //功能

screen

屏幕对象返回可使用部分的宽高

screen.availwidth

返回可使用部分宽

screen.availheight

可使用部分的高

返回屏幕分辨率的宽高

srceen.width

srceen.height

navigator

useragent //用来识别浏览器名称，版本，引擎以及操作系统等信息的内容

2.3.2dom

document object model //文档对象模型

dom描绘了一个层次化的树形结构，允许开发人员

1.1节点

元素节点
属性节点
文本节点
cdata节点
实体引用节点
实体名称节点
处理指令节点
注释节点
文档节点
文档类型节点
文档片段节点
dtd声明节点

增

法1：

document.write()

法2：

document.createcomment()

document.createdocumentfragment()

document.createtextnode()

document.createelement()

法3：

innerhtml

用来设置或获取当前标签的起始和结束里面的内容

ps：

字符串的最左边不能出现空白，ie6-8会自动移除掉它，大多数浏览器不会对script标签进行脚本执行操作，不能单独创建meta，style，link等元素，一定要在前面加上一些字符

outerhtml

返回调用它的元素及所有子节点html标签

innertext

设置或获取位于对象起始和结束标签内的文本

outertext

删

removechild()

删除某个节点中指定的子节点

removenode()

• ie的私有实现
• 将目标节点从文档中删除，返回目标节点
• 参数是布尔值，默认值为false

innerhtml

deletecontents()

textcontent

改

appendchild()

为指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点

insertbefore()

在指定的已有子节点之前插入新的子节点

replacechild()

该方法用于新节点替换某个子节点，有两个参数：

• replacechild(要插入的节点，被替换的节点)
• 返回被替换的节点

clonenode()

创建节点的拷贝。并返回该副本

拷贝的节点要有父节点，如果没有父节点，要通过appendchild(),insertbefore(),replacechild()等方法对齐进行添加

normalize()

合并相邻的text节点

splittext()

按照指定的位置把文本节点分割为两个节点

返回新的文本节点

查

getelementbyid()

getelementsbyname()

getelementsbytagname()S

getelementsbyclassname()

queryselector()

queryselectorall()

1.2属性

固有属性

自定义属性

1.3事件

文档或浏览器窗口中发生的一些特定的交互瞬间，解释器就会创建响应的event对象以描述事件信息

事件周期&冒泡机制

事件周期

解释器创建一个event对象后，会按照如下过程将其在htm元素间进行传播

false //冒泡阶段

true //捕获阶段

第一阶段 //事件捕获，事件对象沿dom树向下传播

第二阶段 //目标触发，运行事件监听函数

第三阶段 //事件冒泡，事件沿dom树向上传播

事件句柄&事件定义

事件句柄

事件句柄(事件处理函数，事件监听函数)，指用于响应某个事件而调用的函数。每个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句

事件定义

直接定义

<button onclick="alert('111')"按钮</button>

<body onload="xxx()">...</body>

缺点：违反了“内容与行为相分离”的原则，应尽可能少用

dom0级事件

ele.事件=执行脚本 //语法

在dom对象上绑定事件 //功能

相同类型事件只能绑定一次，执行后面那个

ps：

执行脚本可以是一个匿名函数，也可以是一个函数的调用

缺点：此语法实现了“内容与行为相分离”，但元素仍只能绑定一个监听函数

dom2级事件

高级事件处理方式，一个事件可以绑定多个监听函数

btn.addeventlistener(“click”,function(){},false) //dom

btn.attachevent(“onclick”,function(){}) //ie

document.body.addeventlistener(“load”,init)

document.body.attachevent(“onload”,init)

function init(){//…}

此语法可以为一个元素绑定多个监听函数，但需要注意浏览器兼容性问题

dom0&dom2区别

1. dom2支持同一dom元素注册多个同种事件
2. dom2新增了捕获和冒泡的概念

1.3.1事件流

添加事件

element.addeventlistener(event,function,usecapture) //语法

用于向指定元素添加事件句柄 //功能

event //必需，字符串，指定事件名

function //必需，指定要事件触发时执行的函数

usecapture //可选，布尔值，指定事件在捕获或冒泡阶段执行

移除事件

element.removeeventlistener(event,function,usecapture) //语法

移除addeventlistener()方法添加的事件句柄 //功能

event //必需，字符串，指定事件名

function //必需，指定要事件触发时执行的函数

usecapture //可选，布尔值，指定移除事件句柄的阶段

ie添加事件

element.attachevent(event,function) //语法

用于向指定元素添加事件句柄 //功能

event //必需，字符串，指定事件名，必须加“on”前缀

function //必需，指定事件触发时执行的函数

ie移除事件

element.detachevent(event,function) //语法

移除attachevent()方法添加的事件句柄 //功能

event //必需，字符串，要移除的事件名称

function //必需，指定要移除的函数

html事件

<tag 事件=“执行脚本”></tag> //语法

在html元素上绑定事件 //功能

ps：

执行脚本可以是一个函数的调用

鼠标事件

onload //页面加载时触发

onclick //鼠标点击时触发

onmouseover //鼠标滑过时触发

onmouseout //鼠标离开时触发

onfocus //获得焦点时触发

onblur //失去焦点时触发

onchange //域的内容改变发生

onsubmit //表单中的确认按钮被点击时发生

onmousedown //鼠标按钮在元素上按下时触发

onmousemove //在鼠标指针移动时发生

onmouseup //在元素上松开鼠标按钮时触发

onresize //在调整浏览器窗口大小时触发

onscroll //拖动滚动条滚动时触发

键盘事件与keycode属性

onkeydown //在用户按下一个键盘按键时发生

onkeypress //在按下键盘按键时发生(只会响应字母与数字符号)

onkeyup //在键盘按键被松开时发生

keycode //返回onkeycode，onkeydown或onkeyup

this指向

在事件触发的函数中，this是对该dom对象的引用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4u3iVsNr-1667303488182)(C:\Users\s1118\AppData\Roaming\Typora\typora-user-images\image-20221101093722187.png)]

1.4查找方法

document.getelementbyid(“id”) //语法

返回对拥有指定id的第一个对象的引用 //功能

dom对象 //返回值

ps：

id为dom元素上id属性的值

document.getelementsbytagname(“tag”) //语法

返回一个对所有tag标签引用的集合 //功能

数值 //返回值

ps：
tag为要获取的标签名称

1.5设置样式&属性

元素样式

ele.style.stylename=stylevalue //语法

设置ele元素的css样式 //功能

ele //要设置样式的dom对象

stylename //要设置的样式名称

stylevalue //设置的样式值

innerhtml&classname

ele.innerhtml //语法

返回ele元素开始和结束标签之间的html //功能

ele.innerhtml=“html” //语法

设置ele元素开始和结束标签之间的html内容为html //功能

ele.classname //语法

返回ele元素的class属性 //功能

ele.classname=“11” //语法

设置ele元素的class属性为11 //功能

对属性操作

ele.getattribute(“attribute”) //语法

获取ele元素的attribute属性 //功能

attribute //要获取的html属性

ele.setattribute(“attribute”,value) //语法

在ele元素上设置属性 //功能

attribute //要获取的html属性

value //要设置的值

ele.removeattribute(“attribute”) //语法

attribute //要删除的html属性

2.4面向对象

对代码的一种抽象，对外统一提供调用接口的编程思想

2.4.1基于原型的面向对象

对象(object)则是依靠构造器(constructor)利用原型(prototype)构造出来的

2.4.2名词解释

方法 //事物的功能

属性 //事物的特性

对象 //事物的一个实例

原型 //js函数中由prototype属性引用了一个对象，即原型对象

2.4.3闭包

闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)

2.4.4声明对象

{}方式

//obj本身就是对象

var obj = {

​ name:‘xiao ming’,

​ age :18,

​ say : func tion(){

​ console. log(‘hello’);

​ }

};

构造函数方式

function Studen t(name, age){

​ this.na me = name;

​ thi s.age = age;

​ thi s.info = function() {

​ console.log(this.nam e, this.age);

​ }

}

​ //创建对象

​ var obj = n ew Student(‘xiaomin g’, 18);

class方式

class Student{

​ constr uctor(name, age){

​ this.name = name;

​ this.age = age; }

​ in fo(){

​ console.log(this.na me, this.age);

​ }

}

​ //创建对象

​ var obj = n ew Student(‘xiaomin g’, 18);

2.4.5封装

把对象内部数据和操作细节进行隐藏

2.4.6原型和原型链

原型 //是利用prototype添加属性和方法

原型链 //js在创建对象(不论是普通对象还是函数对象)的时候，都有一个叫做_proto_的内置属性，用于指向创建它的函数对象的原型对象protoype

原型继承

利用原型让一个引用类型继承另一个引用类型的属性和方法

2.4.7构造函数继承

在子类内部构造父类的对象实现继承

2.4.8关键字

instanceof
delete
call //调用一个对象的一个方法，以另一个对象替换当前对象
apply //应用某一个对象的一个方法，用另一个对象替换当前对象
arguments
callee
this //谁调用，指向谁

2.4.9对象冒充

将父类的属性和方法一起传给子类作为特权属性和特权方法

2.5正则表达式