JavaScript
2020-12-09 16:53:43 0 举报AI智能生成
JavaScript
作者其他创作
大纲/内容
概念
显式定义：使用var关键字定义变量
隐式定义：直接给变量赋值。数据类型取决于变量的值类型
JavaScript是弱类型的脚本语言，使用变量之前无需定义，当使用某个变量的时候直接使用即可。
数据类型
number
包含整数浮点数
布尔类型
只有true和false两个值
string
字符串必须用双引号或单引号括起来
undefined
专门用来确定一个已经创建但是没有初值的变量
null
用于表明某个变量的值为空
object
JavaScript中的对象、数组等
typeof
判断数据类型
常用特殊语句
语句块
{~}
空语句
无实际作用
；分号前的语句，通常用在无循环的循环体
异常抛出语句
throw ~~
异常捕捉语句
try {~}catch（e）{~}finally
catch只能有一个
with语句
with（~）{~}
定义函数
命名函数
function 函数名 （参数列表）{~}
匿名函数
function （参数列表）{~}
使用function类构造匿名函数
new function（”参数列表“ “函数执行体”）；
调用函数
直接调用函数
对象.函数引用
当声明的一个函数没有指明分配给哪个对象使用的时候，默认分配给的window对象
以call方法调用函数
函数引用.call（调用者，参数1，参数2）
以apply方法调用函数
函数引用.apply（调用者，arguments）
arguments相当于时数组，用来存放多个参数。和call调用方式类似
立即执行函数
针对初始化功能的函数
定义：此类函数没有声明，在一次执行过后即释放。适合初始化工作。
（function (){ ~} ()）
常用内置对象
Date
创建Date对象的方法
new Date()
new Date(ms)
Date对象获取时间细节方法
getDate()
从Date对象返回一个月中的某一天（1~31）
getDay()
从Date对象返回一周中的某一天（1~6）
getMonth()
从Date对象返回月份（1~11）
getFullYear()
从Date对象以四位数字返回年份
getHours()
返回Date对象的小时（0~23）
getMinutes()
返回Date对象的分钟（0~59）
getSeconds()
返回Date对象的秒数（0~59）
getTime()
返回1970年1月1日至今的毫秒数
Date对象设置时间的方法
setDate()
设置Date对象中月的某一天（1~31）
setMonth()
设置Date对象中月份（0~11）
setFullYear()
设置Date对象中的年份（四位数字）
setHours()
设置Date对象中的小时（0~23）
setMinutes()
设置Date对象中的分钟（0~59）
setSeconds()
设置Date对象中的秒数（0~59）
setMIlliSeconds()
设置Date对象中的毫秒（0~999）
Math
常用方法
abs(x)
返回数的绝对值
ceil(x)
对数进行上舍入
floor(x)
对数进行下舍入
返回x和y中的最高值
返回x和y中的最低值
返回x的y次幂
random()
返回0~1之间的随机数
round(x)
把数四舍五入为最接近的整数
sqrt(x)
返回数的平方根
DOM
DOM是文档对象模型（Document Object Model）的简称
当网页加载时，可以将结构化文档在内存中转化成对象的树
节点
DOM模型中的节点--文档可以说是由节点构成的集合
元素节点
各种标签
文本节点
包含在元素节点内部
属性节点
用来修饰元素节点的节点
DOM创建节点方法
DOM复制节点的方法
DOM添加、删除节点的方法
appendChild(newNode)
将newNode添加成当前节点的最后一个子节点
在refNode节点之前插入newNode节点
将okdNode节点替换成newNode节点
removeChild(oldNode)
将oldNode子节点删除
访问HTML元素
为了动态修改HTML元素，需先访问HTML元素
根据ID访问HTML元素--通过document对象调用getElementById（）方法来查找具有唯一id属性值的元素
利用节点关系访问HTML元素。
parentNode
返回当前节点的父节点
previousSibling
返回当前节点的前一个兄弟节点
nextSibling
返回当前节点的下一个兄弟节点
childNodes
返回当前节点的所有字节点
firstChild
返回当前节点的第一个子节点
lastChild
返回当前节点的最后一个子节点
getElementsByTagName(tagName)
返回当前节点的具有指定标签名的所有子节点
访问表单控件
action
返回该表单的提交地址
elements
返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件
length
返回表单内表单域的个数
method
返回表单内的method属性，主要有get和post两个值
target
确定提交表单时的结果窗口，主要有_self、_blank、_top等
reset()、submit()
重置表单和确定表单方法
.elements[index]
返回该表单中的第index个表单控件
.elements[elementName]
返回表单内id或name为elementName的表单控件
.elementName
返回表单中id或name为elementName的表单控件
访问列表框、下拉菜单的常用属性
form
返回列表框、下拉菜单所在的表单对象
返回列表框、下拉菜单的选项个数
options
返回列表框、下拉菜单里所有选项组成的数组
selectedIndex
返回下拉列表中选中选项的索引
type
返回下拉列表的类型，多选的话返回select-multiple，单选返回select-one
使用options[index]返回具体选项所对应的常用属性
defaultSelected
返回该选项默认是否被选中
index
返回该选项在列框、下拉菜单中的索引
selected
返回该选项是否被选中
text
返回该选项呈现的文本
value
返回该选项的value属性值
DOM为列表框、下拉菜单添加选项
text:该选项文本、即该选项所呈现的内容
value：选中该选项的值
defaultSelected：设置默认是否显示该选项
selected：设置该选项当前是否被选中
添加创建好的选项至列表框或下拉菜单的方式
直接为<select../>的指定选项赋值
列表框或下拉菜单对象.options[i] = 创建好的option对象
删除列表框、下拉菜单的选项的方式
直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项
直接将指定选项赋值为null
对象.options[index]=null
DOM访问表格子元素
caption
返回表格的标题对象
rows
返回该表格里所有表格行
tbodies
返回该表格里所有<tbody.../>元素组成的数组
tfoot
返回该表格里所有<tfoot.../>元素
thead
返回该表格里所有<thead.../>元素
通过rows[index]返回表格指定行
cells
返回该表格行内所有的单元格组成的数组
rowIndex
返回该表格行在表格内的索引值
sectionRowIndex
通过cells[index]返回表格指定列
cellIndex
返回该表格列在表格内的索引值
DOM动态添加删除表格内容
insertRow(index)
在指定索引位置插入一行
createCaption()
为该表格创建标题
createTFoot()
为表格创建<tfoot../>元素，假如已存在就返回现有的
createTHead()
为表格创建<thead../>元素，假如已存在就返回现有的
deleteRow(index)
删除表格当中index索引处的行
deleteCaption()
删除表格标题
deleteTFoot()
从表格删除tFoot元素及其内容
deleteTHead()
从表格删除tHead元素及其内容
给表格行创建、删除单元格的方法
insertCell(index)
在index处创建一个单元格，返回新创建的单元格
deleteCell(index)
删除某行在index索引处的单元格
JavaScript
正则表达式
对字符串操作的一种逻辑公式
语法
var reg = / parent /
var reg = new RegExp(parent);
exec(str)
检索字符串中指定的值。返回找到的值，并确定其位置。
test(str)
检索字符串中是否有满足指定条件的值。返回true或false
常用通配符
.
可以匹配任何字符
\\d
匹配0-9的所有数字
\\D
匹配所有非数字
\\s
匹配所有空白字符，包括空格、制表符、换行符、回车符等
\\S
匹配所有非空白字符
\\w
匹配所有的单词字符，包括0-9数字、26个英文字母和下划线
\\W
匹配所有的非单词字符
\\b
匹配单词边界
\\B
匹配非单词边界
[abc]
查找方括号之间的任何字符
[^abc]
查找任何不在方括号之间的字符
[0-9]
查找任何从0至9的数字
[a-z]
查找任何从小写a到小写z的字符
[A-Z]
查找任何从大写A到大写Z的字符
[A-z]
查找任何从大写A到小写Z的字符
(red|blue|green)
正则表达式量词
r+
匹配任何包含至少一个n的字符串
n*
匹配任何包含零个或多个n的字符串
n?
匹配任何包含零个或一个n的字符串
n{X}
匹配包含X个n的序列的字符串
匹配包含X或Y个n的序列的字符串
匹配包含至少X个n的序列的字符串
n$
匹配任何结尾为n的字符串
^n
匹配任何开头为n的字符串
正则表达式修饰符
i
执行对大小写不敏感的匹配
g
执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m
执行多次匹配
数组
var aee2=[]； //定义一个空数组
var arr3=new Array();//定义一个空数组并通过索引来赋值
arr3[0]=1;
arr3[3]=\"abc\"
特点
数组长度可变。总长度等于数组的最大索引值+1
同一数组中的元素类型可以互不相同
当访问未赋值的数组元素时，该元素值为undefined，不会数组越界
闭包
当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄漏。
作用
实现公有变量 eg：函数累加器
可以做缓存（存储结构） eg：eater
可以实现封装、属性私有化。eg：Person();
模块化开发、防止污染全局变量
流程控制语句
if
switch
while循环
do while循环
for循环
for in 循环
通常遍历数组中所有元素
for(变量 in 对象）{~}
break
结束所有循环
continue
结束本次循环，进行下次循环
BOM
BOM-JavaScript是运行在浏览器中的
所以提供了一系列对象用于和浏览器窗口进行交互
对象主要包括window、document、location、navigatior、screen等
对象
window
window对象是整个JavaScript脚本运行的顶层对象
属性/子对象
document
返回该窗口内装载的HTML文档
location
返回该窗口装载的HTML文档的URL
navigtor
返回浏览当前页面的浏览器，包含了一系列的浏览器属性，包括名称、版本号和平台等
screen
返回当前浏览者屏幕对象
history
返回该浏览窗口的历史
aler()、confirm()、prompt()
分别用于弹出警告窗口、确认对话框和提示输入对话框
close()
关闭窗口
谷歌浏览器不可用
moveBy()、moveTo()
移动窗口
resizeBy()、resizeTo()
重设窗口大小
scrollBy()、scrollTo()
滚动当前窗口的HTML文档
open()
打开一个新的浏览器窗口加载新的URL所指向的地址，并可指定一系列新的属性，包括隐藏菜单等
setInterval()、clearInterval()
设置、删除定时器
back()
后退到上一个浏览的页面，如果该页面是第一个打开的，则无效果
forword()
前进到下一个浏览页面，如果该页面是第一个打开的，则无效果
go (intValue)
该方法可指定前进或后退多少个页面，正前进，负后退
hostname
文档所在地址的主机名
href
文档所在地址的URL地址
host
文档所在地址的主机地址
port
文档所在地址的服务端口
pathname
文档所在地址的文件地址
protocol
装载该文档所使用的协议，例如HTTP:等
availHeight
窗口可以使用的屏幕高度，单位像素
availWidth
窗口可以使用的屏幕宽度，单位像素
colorDepth
用户浏览器表示的颜色位数，通常为32位
navigator
appCodeName
浏览器代码名的字符串
appName
官方浏览器名的字符表示
appVersion
浏览器版本信息的字符串表示
platform
浏览器所在计算机平台的字符串表示
userAgent
用户代理头的字符串表示
cookieEnabled
如果启用cookie返回true，否则返回false
事件概念和事件监听
事件的概念
JavaScript使我们有能力创建动态页面，网页中的每个元素都可以产生某些可以出发Javascript函数的时间。我们可以认为事件是可以被Javascript侦测到的一种行为
事件流
冒泡型事件 (false)
IE浏览器只支持冒泡型事件
捕获型事件 (true)
支持标准DOM的浏览器，如火狐、chrome等两者都支持
使用返回值改变HTML元素的默认行为
通过在绑定事件中添加return false来阻止它的默认行为
通用性的事件监听方法
绑定HTML元素的属性
<input type=\"button\" value=\"clickMe\" onclick=\"check(this):/>
绑定DOM对象属性
document.getElementById(\"btn1\").onclick=test;test为函数名
IE中的事件监听方法
[objject].attachEvent(\"事件类型\
[objject].detachEvent(\"事件类型\
监听方法中的事件类型写法为：onclick、onmousemove等
标准DOM中的事件监听方法
[objject].addEventListener(\"事件类型\
[objject].removeEventListener(\"事件类型\
监听方法中的事件类型写法为：click、mousemove等
访问事件对象
事件对象封装了事件发生的详细信息，尤其是鼠标、键盘事件
标准DOM中的事件对象
在标准DOM浏览器检测到发生了某个时间时，将自动创建一个Event对象，并隐式的将该对象作为事件处理函数的第一个参数传入
op.onclick=function(oEvent){//作为参数传进来}
IE中得到对象
op.onclick=function(){var oEvent=window.event;}
为了兼容性
op.onclick=funtion(oEvent){ if(window.event){oEvent=window.event;}}
Event事件对象常用属性
IE
按下alt、shift、ctrl为true，否则为false
cancelBubble
可用来阻止冒泡事件
button
对应按下鼠标键的值
clientX，clientY
鼠标指针在客户区域的坐标，不包括工具栏等。
screenX，screenY
鼠标指针相对于整个计算机屏幕的坐标值
KeyCode
按键的代号
returnValue
设置false时取消元素的默认事件
srcElement
引起事件的元素/对象
事件的名称
标准DOM
stopPropagation
常用事件类型
常用鼠标事件
onclick
单击鼠标左键触发
ondbclick
双击鼠标左键时触发
onmousedown
单击任意一个鼠标按键时触发
onmouseout
鼠标指针移出一个元素边界时触发
onmousemove
鼠标在某个元素上移动时持续触发
onmouseup
松开鼠标任意一个按键时触发
onmouseover
鼠标指针移到一个元素上时触发
常用键盘事件
onKeydown
按下键盘上某个按键时触发，一直按会持续触发
onKeyup
释放某个按键时触发
onKeypress
按下某个按键并产生字符时触发，忽略shift等功能键
HTML事件
onload
页面完全加载后在window对象上触发
onunload
页面完全卸载后在window对象上触发
标准DOM浏览器不支持
onselect
选择了文本框的一个或多个字符时触发
onchange
文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发
onsubmit
单击“提交”按钮时在表单form上触发
onfocus
任何元素或窗口获得焦点时触发
onblur
任何元素或窗口失去焦点时触发
0 条评论
回复 删除
下一页
