JavaScript复习整理.docx
《JavaScript复习整理.docx》由会员分享,可在线阅读,更多相关《JavaScript复习整理.docx(14页珍藏版)》请在冰豆网上搜索。
JavaScript复习整理
JavaScript已经学完了,总体感觉良好,但是突然发现原来JS可以做的东西比我想象的还要多!
我整理了一些JavaScript的基础知识,这些内容掌握好的话,对我们深入学习JavaScript会有很大的帮助!
《JavaScript客户端验证和页面特效制作》基础知识文档
目录
第1章JavaScript的基本语法…3
第2章DOM编程—window对象…4
第3章DOM编程—document对象…9
第4章CSS样式特效…10
第5章基本的表单验证技术…11
第6章表单验证的相关事件和辅助特效…14
第7章表单验证的高级特效…15
第1章JavaScript的基本语法
Q/A
1.JS脚本执行原理。
答:
用户通过浏览器提交申请给网站服务器,服务器在接收到正确的请求后,将HTML和JS代码段发送回客户端的浏览器,浏览器通过解析引擎将HTML和JS代码解读成人们可以正常阅读的网页界面。
2.类型转换的方法。
答:
parseInt()方法可以将一个逻辑值转换为整形值;parseFloat()方法可以将一个逻辑值转换为浮点型值;toString()方法可以将一个逻辑值转换为字符串。
3.NaN的含义,isNaN的作用。
答:
NaN的含义:
NotaNumber不是一个数;isNaN的作用是判断当前的值是不是一个数,如果为true则表示不是一个数,如果为false表示是一个数。
第2章DOM编程—window对象
Q/A
1.window对象的常用属性及含义
名
称
说
明
status
指定浏览器状态栏中显示的临时消息
screen
有关客户端的屏幕和显示性能的信息
history
有关客户访问过的URL的信息
location
有关当前URL的信息
document
表示浏览器窗口中的HTML文档
2.window对象的常用方法及作用(至少写5个)
名
称
说
明
alert(“提示信息”)
显示一个带有提示信息和确定按钮的对话框
confirm(“提示信息”)
显示一个带有提示信息、确定和取消按钮的对话框
open(“url”,”name”)
打开具有指定名称的新窗口,并加载给定URL所指定的文档,如果没有提供URL,则打开一个空白文档
close()
关闭当前窗口
showModalDialog
在一个模式窗口中显示指定的HTML文档
3.简述open方法各参数的含义
答:
open(“打开窗口的URL”,“窗口名”,“窗口特征”),窗口特征包括如下内容:
名
称
说
明
height
窗口高度
width
窗口宽度
toolbars
工具栏
scrollbars
滚动条
menubar
菜单栏
location
地址栏
status
状态栏
resizable
改变窗口大小
上述属性中yes或1为允许或显示,no或0为不允许或不显示。
4.简述open方法和showModalDialog方法的区别。
答:
open是打开一个全新的窗体,并且和之前的窗体已再无关系,而showModalDialog则是打开一个子窗体,该子窗体和之前的父窗体具备父子关系,当子窗体尚未执行完之前,父窗体将无法执行任何操作。
5.简述窗口特征值
名
称
说
明
height
窗口高度
width
窗口宽度
toolbars
工具栏
scrollbars
滚动条
menubar
菜单栏
location
地址栏
status
状态栏
resizable
改变窗口大小
上述属性中yes或1为允许或显示,no或0为不允许或不显示。
6.Date对象常用方法
get方法:
方
法
说
明
getDate()
返回Date对象的一个月中的每一天,其值介于1~31之间
getDay()
返回Date对象的星期中的每一天,其值介于0~6之间
getHours()
返回Date对象的小时数,其值介于0~23之间
getMinutes()
返回Date对象的分钟数,其值介于0~59之间
getSeconds()
返回Date对象的秒数,其值介于0~59之间
getMonth()
返回Date对象的月份,其值介于0~11之间
getFullYear()
返回Date对象的年份,其值为4位数
getTime()
返回自1970年1月1日依赖的毫秒数
set方法:
方
法
说
明
setDate()
设置Date对象的一个月中的每一天,其值介于1~31之间
setHours()
设置Date对象的小时数,其值介于0~23之间
setMinutes()
设置Date对象的分钟数,其值介于0~59之间
setSeconds()
设置Date对象的描述,其值介于0~59之间
setTime()
设置Date对象内的时间值
setMonth()
设置Date对象中的月份,其值介于0~11之间
setFullYear()
设置Date对象的年份值
7.history对象常用方法
名
称
说
明
back()
加载history列表中的上一个URL
forward
加载history列表中的下一个URL
go(“url”ornumber)
加载history列表中被指定的URL,或要求浏览器移动指定的页面数
8.location对象常用属性
名
称
说
明
host
设置或返回URL的主机名和端口号
hostname
设置或返回URL的主机名部分
href
设置或返回完整的URL字符串
9.location对象常用方法
名
称
说
明
assign(“url”)
加载URL指定的新的HTML文档
reload()
重新加载当前页
replace(“url”)
通过加载URL指定的文档来替换当前文档
第3章DOM编程—document对象
1.document对象常用方法和属性
属性:
bgColor:
document.bgColor=”#000”;
用于设置背景色的属性
方法:
名
称
说
明
getElementById()
根据HTML元素指定的ID,获得唯一的一个HTML元素
getElementsByName
根据HTML元素指定的name,获得相同名称的一组元素
2.带关闭按钮的浮动广告制作方法:
①.首先,写好相应的HTML代码;②.然后,编写JS代码使层动起来;③.再新增一个层,并定位到前一个广告层的右上角或右下角并编写同时关闭2个层的代码(即:
将2个div层的display属性设置为none)。
3.全选/反选/全不选按钮的制作方法:
将复选框的name设置为一组相同的名称,然后使用getElementsByName方法获取页面中的所有该名称的控件,然后使用for循环遍历整个文档(即:
将文档作为数组,通过for循环遍历文档.length),并将其中的checked属性修改为true或者false,即可实现全选或全不选,如果是反选则在遍历的时候赋值时使用checked=!
checked即可。
第4章CSS样式特效
1.简述一下样式的作用:
position,pixelTop,offsetWidth,display,background-image,
border-left-style,z-index,font-style,font-family,text-decoration
答:
position:
设置HTML容器元素的位置;pixelTop:
获取元素距离Window顶部的距离,不包含px后缀;offsetWidth:
获取该元素的宽;display:
设置元素的显示方式;background-image:
设置背景图片;border-left-style:
设置左边框样式;z-index:
设置当前元素Z轴的坐标;font-style:
设置字体倾斜;font-family:
设置使用何种字体;text-decoration:
设置字体下划线。
2.简述display的value属性值的含义
答:
display的value常用取值
参数值
说
明
block
默认值。
按块显示,换行显示,用该值为对象之后添加新行
none
不显示,隐藏对象
inline
按行显示,和其他元素在同一行显示
第5章基本的表单验证技术
1.表单验证的作用及验证的范围:
作用:
①.避免信息无法更新或出现新错误;②.减轻服务器端的压力;
范围:
①.检查表单元素是否为空;②.验证是否为数字;③.验证用户输入的邮件地址是否有效;④.检查用户输入的数据是否在某个范围;⑤.验证用户输入的信息长度是否足够;⑥.检查用户输入的出生日期是否有效。
2.String对象的属性和常用方法:
属性:
length
方法:
方法名
说
明
indexOf(“子字符串”,起始位置)
查找子字符串的位置,这个位置是要查找的文本出现的第一个位置
charAt(index)
获取位于指定索引的字符
substring(index1[,index2])
返回位于指定索引index1和index2之间的字符串,并且包括索引index1所对应的字符,不包括索引index2所对应的字符
toLowerCase()
将字符串转换成小写
toUpperCase()
将字符串转换成大写
charCodeAt()
根据字符找索引
fromCharCode()
根据索引找字符
3.正则表达式常用符号:
基本符号
说
明
.
匹配任意字符
[]
当前位置有且只有限定范围内的一个字符。
例:
[abc]
()
当前位置有且只有当前括号中的字符串。
例:
(abc)
|
等同于逻辑运算符“或”。
例:
(abc|[abc])
^
等同于逻辑运算符“非”。
例:
[^0-9]
数量集符号
说明
*
表示位数从0位到正无穷大位。
例:
[0-9]*
+
表示位数从1位到正无穷大位。
例:
[0-9]+(至少有一位数字)
?
重复0次或1次
例:
[a-z]?
{n}
重复n次。
例:
[a-z]{3}
{n,m}
重复n次到m次,如果m不填写则表示无穷大。
例:
[A-Z]{2,10}
特殊符号
说明
w
表示可以使用[_$a-zA-Z0-9]的所有字符
W
表示可以使用[_$a-zA-Z0-9]以外的所有字符
d
表示[0-9]之间的字符
D
表示[0-9]以外的字符
b
表示一个字符串的开头和结尾。
例:
b[a-z]+b
表示以a-z字母开头的所有字符串
4.文本框对象的事件处理:
文本框
事件
onBlur
失去焦点事件,当光标离开某个文本框时触发
onFocus
光标聚焦事件,当光标聚焦某个文本框时触发
onChange
值更改事件,当文本值更改且失去焦点时触发
方法
focus()
获得焦点
select()
选中文本内容
属性
value
设置或获得一个文本框值属性的值
第6章表单验证的相关事件和辅助特效
1.图片按钮提交表单的方法:
图片的onclick事件中调用document.myform.submit()方法,onclick不能触发form的onSubmit事件,只有submit按钮可以触发。
2.制作回车切换输入框的方法:
使用onkeydown事件监视键盘按键的点击事件,当使用event.keyCode捕捉到键盘按键unicode码传入的是13时,这时就表示敲击的是键盘的回车键。
此时,将event.keyCode的值修改为9即可实现回车键换行的效果。
与此同时,我们还需要过滤掉文本框以外的对象出现换行效果,例如A标签、按钮、textarea等。
3.event.srcElement、event.fromElement、event.toElement的区别:
srcElement获取到的是来源对象,可以通过.type,.text等属性来获得其中的值;fromElement是从哪个标签来,toElement是到哪个标签去。
4.onkeydown、onkeyup、onkeypress的区别和用法:
onkeydown和onkeyup是onkeypress的分解动作,onkeydown是当按下按键时触发的事件,onkeyup是当抬起按键时触发的事件,而onkeypress则是完成这2个动作后触发的事件。
onkeypress只能监控到字符键、空格键、回车键和组合按键,而onkeydown和onkeyup可以监控到所有单个按键但是不能监控到组合按键。
此外,onkeydown触发的事件是在得到按键值之前触发的,所以在使用这3个属性时需要考虑清楚具体应用场合。
5.制作输入提示特效的方法:
文本框输入内容后发生onBlur事件时判断输入的内容是否符合要求,如果不符合要求,则在相应的td标签或div标签中给出错误提示即可。
第7章表单验证的高级特效
1.下拉列表框常用事件、属性和方法:
下拉列表框
事件
onChange
当选项发生改变时产生
属性
value
下拉列表框中被选选项的值
options
所有的选项组成一个数组,options表示整个选项数组,第一个选项即为options[0],第二个则为options[1],依此类推。
selectedIndex
返回被选择的选项的索引号,如果选中第一个则返回0,第二个则返回1,依此类推。
length
返回下拉菜单中的选项个数
方法
add(new,old)
将新的option对象new插入到option对象old前面,如果old为空,那么直接插入到末尾
1.数组的应用:
①.JS的数组仅支持一维数组:
但是可以通过将一个数组存入另一个数组的方式模拟出多维数组。
且JS的数组是变长的。
②
.
JS数组声明方式:
a)
var
a=newArray(“my”,“you”,“find”,“this”);
b)
var
a=newArray(3);
a[0]=“my”;
a[1]=“you”;
a[2]=“find”;
a[3]=“this”;
c)
var
a=[“my”,“you”,“find”,“this”];
③
.
数组的访问:
可以通过数组值的下标或者键值对去访问。
④
.数组的常用属性和方法:
a)
属性:
length。
length只能够返回具有下标索引的值,如果数组中的某个元素使用了键值对的方式,length将获取不到该位。
如果需要遍历带有键值对的数组我们也可以使用for(variable
inobject){}循环(类似C#的foreach)来遍历数组中的每一个元素。
b)
方法:
方法
说明
join()
将数组拼接为字符串的方法,括号中填写内容:
“可以没有内容”
concat()
将2个数组连接成1个数组,连接对象被拆分出来连接到被连接的对象
sort()
排序方法
reverse()
反转方法
pop()
彻底取出最后一位元素,取出后原数组中的值会被删除
push()
往数组的最后一位添加一个元素
shift()
彻底取出第一位元素,取出后原数组中的值会被删除