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的含义:Not a Number 不是一个数;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”or number)

加载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 = new Array(“my”,“you”,“find”,“this”);

b)
var
a = new Array(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
in object){}循环(类似C#的foreach)来遍历数组中的每一个元素。

b)
方法:

方 法

说 明

join()

将数组拼接为字符串的方法,括号中填写内容: “可以没有内容”

concat()

将2个数组连接成1个数组,连接对象被拆分出来连接到被连接的对象

sort()

排序方法

reverse()

反转方法

pop()

彻底取出最后一位元素,取出后原数组中的值会被删除

push()

往数组的最后一位添加一个元素

shift()

彻底取出第一位元素,取出后原数组中的值会被删除

JavaScript整合,布布扣,bubuko.com

JavaScript整合

上一篇:python3.2 简单面向对象编程


下一篇:javascript监听值变化