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. 正则表达式常用符号:
基本符号 |
说 |
. |
匹配任意字符 |
[] |
当前位置有且只有限定范围内的一个字符。 |
() |
当前位置有且只有当前括号中的字符串。 |
| |
等同于逻辑运算符“或”。 |
^ |
等同于逻辑运算符“非”。 |
数量集符号 |
说 明 |
* |
表示位数从0位到正无穷大位。 |
+ |
表示位数从1位到正无穷大位。 |
? |
重复0次或1次 |
{n} |
重复n次。 |
{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 |
表示一个字符串的开头和结尾。 |
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章 表单验证的高级特效
- 下拉列表框常用事件、属性和方法:
下拉列表框 |
事件 |
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整合的更多相关文章
- 关于ArcGis for javascript整合百度地图 天地图 高德地图进行搜索
1.ArcGis for javascript整合百度地图搜索 1.1.首先引入百度地图的api <!-- 引入百度地图API --> <script type="text ...
- 【读书笔记《Bootstrap 实战》】6.单页营销网站
我们已经掌握了很多实用 Bootstrap 的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...
- [php基础]PHP Form表单验证:PHP form validator使用说明
在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
- http请求 302解决方法
http请求+302解决方法 相关文章 当前,许多站点的部署方式都对自身的性能产生了消极影响,而网站的所有者并没有意识到这个问题.我们今天针对性的讨论以下几个常见的影响网站性能的瓶颈,观察其变化趋势, ...
- JS基础(三)
25.使用JS操作CSS样式 DHTML表示动态HTML(Dynamic HTML,DHTML),不是标记语言,只是一种由微软提出的网页脚本化概念,目标是结合JS+HTML+CSS设计动态特效,得到很 ...
- FckEditor 配置手册中文教程详细说明
http://www.jb51.net/article/17965.htm 首先,FCKEDITOR的性能是非常好的,用户只需很少的时间就可以载入 FCKEDITOR所需文件.对于其他在线编辑器来说, ...
- 【精品分享一】JAVA 精品图书高清PDF下载
更多图书尽在第一云教育book.1eduyun.com JAVA核心技术卷2:高级特征(原书第8版) JAVA软件开发从新手到高手(Java从入门到精通(第3版)+Java项目开发全程实录(第3版)) ...
- 前端异常日志监控 - 使用Sentry
背景 现在的前端项目越来越复杂,在不同的客户端会产生各种在开发人员机器上不会出现的问题.当用户报告一个问题给开发人员的时候,开发人员无法直接定位问题.在此前,听过一次鹅厂的前端人员,他们对QQ里面的网 ...
- 令人惊叹的Visual Studio Code插件
vscode是一款开源且优秀的编辑器,接下来让我吐血推荐一下我工作使用过的令人惊叹的Visual Studio Code插件. 代码编辑插件 vscode-color-highlight ------ ...
随机推荐
- JSR 303标准
JSR 303是Java为bean数据合法性校验提供的标准框架,JSR 303通过在Bean属性上标注类似于@NotNull.@Max等标准的注解指定校验规则,并通过标准的校验接口对bean进行验证. ...
- (九)串行口方式0 拓展并行输出端口 02 74LS164芯片
1.先讲解74LS164 移位芯片: 74HC164.74HCT164 是 8 位边沿触发式移位寄存器,串行输入数据,然后并行输出. 数据通过两个输入端(DSA 或 DSB)之一串行输入:任一输入端可 ...
- 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数009,Measure,测量函数
<zw版·Halcon-delphi系列原创教程> Halcon分类函数009,Measure,测量函数 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替 ...
- 移动前端中viewport(视口) 转
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dpi ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间 ...
- js 的闭包
今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易. 当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为 ...
- Android PullToRefresh (GridView 下拉刷新上拉加载)
做这个需要自己去git hub上下载个pull-to-refresh 里面有个library为依赖包自己导到自己的项目中 (下载地址:https://github.com/chrisbanes/And ...
- InnerJoin分页导致的数据重复问题排查
2016年8月9号美好的七夕的早上,我精神抖擞地来到公司.一会之后,客服宅宅MM微信我,说一个VIP大店铺订单导出报表中一个订单有重复行.于是,我赶紧开始查探问题所在.经过一天的反复仔细追查(当然还包 ...
- Process and Thread
A process is a completely independent program that has its own address space, while a thread is a se ...
- 2015弱校联盟(1) -A. Easy Math
A. Easy Math Time Limit: 2000ms Memory Limit: 65536KB Given n integers a1,a2,-,an, check if the sum ...
- (2) 深入理解Java Class文件格式(一)
好文转载:http://blog.csdn.net/zhangjg_blog/article/details/21486985 Class文件在Java体系结构中的位置和作用 在上一篇博客中, 大致讲 ...