JavaScript课程总结复习（2）
班号：QR2088 姓名： 宋延军
•掌握JavaScript 浏览器对象
•掌握Javascript 文档对象
•掌握JavaScript CSS样式特效
•掌握JavaScript 表单验证和正则表达式
.....，有经验就 不要藏着掖着，贴出来，大家共同的分享分享，谢谢了。
•
Navigator
对象，也称为浏览器对象，该对象包含了
浏览器的整体信息，如浏览器名称、版本号等。
•
早期的
Netscape
浏览器称为
Navigator
浏览器，
Navigator
对象是在
Navigator
浏览器之后命
名的
.
•
HTML
中的
frameset
元素可以创建框架。
•
在
JavaScript
中并不存在
Frame
对象。所谓的
Frame
对象只是
Window
对象的一个实例，该
对象拥有
Window
对象的所有方法和属性以及事件.
•
框架可以在同一个浏览器窗口里打开多个网页，并且
这些
网页之间并
不是独立的
，网页与网页之间的信息
可以有相互的联系。
•
document对象称为文档对象
（是JavaScript中的最重要的一个对象。）
•document对象是window对象中的一个子对象，window对象代表浏览器窗口，而document对象代表了浏览器窗口中的文档。
•document对象为操作文档提供一个统一的接口，其负责管理下级子对象的关系信息。
•HTML文档中相当多的功能是由子级对象提供的，document对象对这些功能组合对象。
•
document对象拥有大量的属性，这些属性主要用于描述HTML文档中的标题、颜色、URL以及HTML文档中的图片、超链接、表单元素等。
•最常用的document对象属性是：
bgcolor 页面背景色
fgcolor 前景色（文字颜色）
•document对象不需要手动创建，在文档初始化时就已经由系统内部创建好了，我们只要直接调用其方法或属性就可以了。
•常用的document 对象方法是：
write() 动态向页面写入内容
createElement(Tag) 创建一个html标签对象
getElementById(ID) 获得指定ID值的对象
getElementsByName(Name) 获得指定Name值的对象集合
getElementsByTagName(Tag) 获取制定标签名的对象集合
•
显示滚动信息的“×××灯”程序
实现思路：
将document对象的title属性与window对象的setInterval方法相结合，
可以让浏览器窗口显示动态标题 。
代码实例：
- <script language="javascript">
- var str = " 欢迎光临本站!"
- function titleMove(){
- strstr = str.substring(1, str.length) + str.substring(0, 1);
- document.title = str; //设置标题栏
- window.status = str; //设置状态栏
- }
- if (str.length > 20) {
- str = " 欢迎光临本站!"; }
- setInterval("titleMove()", 100);
- script>
-
•
使用document对象的write和writeln方法除了可以在当前文档中输出内容之外，还可以在其他浏览器窗口的文档中输出内容。
•writeln 是在原文件中换行，并不是在 html中换行。
•with() 匹配 document 例如：with(document)
•document 的all 属性可以返回整个文档中所有的html元素。
•而在实际运用中，很少有需要获得所有元素的情况，通常需要获取某个元素下的子元素。
•使用getElementById()方法获取指定ID的元素对象 。
•Image对象又称为图像对象。
•它是一个特殊数组中的元素。这个数组就是document对象的p_w_picpaths属性的返回值，这个返回值是一个数组。只是这个数组中的每一个元素都是一个Image对象。它是用来设置图片的属性方法和事件等。
•
数组
中的
元素个数
由
HTML
文档中的
![]()
标签决定。
•
JavaScript
为
每一个
![]()
标签
在
p_w_picpaths[]
数组中
创建一个元素。
因此，
p_w_picpaths[]
数组
的每一个元素都代表着
HTML
文档中的一张图片
，通过对
p_w_picpaths[]
数组元素的作用，
可以达
到引用图片的目的。
•
通常要想使制作的网页图片可以
动态改变大小
，
要使用
Image
对象的
width
属性和
height
属性
，他们可以动态改变图片的宽和高，这是通过改变图片的尺寸来实现
的
.
•
问题
1
：
在页面中随机显示指定的几张图片中的一张？
产生一个随机图片的原理就是产生一个随机数然后去图组里面取相对应得图像路径，然后设置给
img
元素并显示
出随机后的图片。
•
问题
2
：
如何实现带关闭功能的浮动窗口？
把带关闭的图标放到层中，当点击图标时层消失。
制作浮动广告图片的实现思路：
<1> 在页面中插入层，在层中插入图片
<2> 编写脚本
1、使用getElementById( )方法获得层对象
2、设置层的样式style的显示属性display="none “
制作全选/反选多个复选框的实现思路:
<1> 通过document . getElementByName()方法获取复选框集合。
<2> 判断按钮的值是否是全选或全不选。
<3> 根据判断条件循环设置每一个 checkbox 的 checked 属性。
floor
方法是取
大于它
的
最小
整数。
cell
方法是取
小于它
的
最大
整数。
( int )( random * 10 )%5
取
0~4
的数
。
W3C
标准规范
:
document.
documentElememt
.serollTop;
document.
body
.srollTop;
•
Style对象的属性没有连字符。
•例如：
Element.style.font-family:="Arial";
错误
Element.style.fontFamily:=“Arial”;
正确
原来紧接在连字符后面的字母改成大写
•
Style对象保留了float关键字以备将来使用
Style对象属性
|
文本属性
|
说
明
|
|
font
|
在一行设置所有的字体属性
|
|
color
|
设置文本的颜色
|
|
border
|
在一行设置四个边框的所有属性
|
|
borderColor
|
设置所有四个边框的颜色 (
可设置四种颜色
)
|
|
scrollbarHighlightColor
|
设置箭头和滚动条左侧和顶边的颜色，以及滚动条背景
|
利用鼠标相关事件调用JavaScript代码
- onMouseOver=“this.style.fontSize='24px‘“
- onMouseOut=“this.style.fontSize='14px‘"
•
通过改变样式backgroundImage实现
•
- onMouseOver=“this.style.backgroundImage='url(p_w_picpaths/bg.jpg)';“
•
制作鼠标移出的样式，用onMouseOut事件来设定Style对象的backgroundImage的值。
•
- onMouseOut="this.style.backgroundImage='url(p_w_picpaths/bg1.jpg)';“
•
定义样式(利用鼠标相关事件调用类样式代码)
- <LI><A href="#" onMouseOver="this.className =' MouseOverStyle' "
- onMouseOut ="this.className=' MouseOutStyle' ">网站首页A>LI>
层的显示/隐藏特效
显示属性display
适用于所有HTML标签，常用于层DIV、图片Img的显示和隐藏。
inline
按行显示，和其他元素同一行显示
block
默认值。按块显示，换行显示。 用该值为对象之后添加新行
none 不显示，隐藏对象。
与visibility属性的hidden值不同，其不为被隐藏对象保留其物理空间
为什么需要表单验证：
脚本在客户端执行，减轻服务器端的压力
如何编写脚本验证表单？
1
、
获取表单元素的值
（
String
类型），
然后进行判断
2
、
触发表单
（
FORM
）
的提交事件
（
onSubmit
）
客户端验证有
两种形式
：
1.
非空验证
2.
格式验证
常用的String对象
使用 var 语句直接创建一个字符串类型变量 var newstr = "这是我的字符串"
使用 new 关键字创建一个String类型的对象 var newstr = new String("这是我的字符串")
调用方法和属性new 出来的 变量 可以 打点 调用到
字符串对象.属性名
字符串对象.方法名( )
•
String对象常用的属性和方法
length 获取字符串字符的个数
indexOf( “子字符串”，起始位置) 查找子字符串的位置
charAt(index) 获取位于指定索引位置的字符
substring(index1,index2 )
求子串，返回从起始位置到结束位置之间的字符串
toLowerCase( ) 将字符串转换成小写
toUpperCase( ) 将字符串转换成大写
多个元素的多个函数一起调用,用到关系运算符&& 。
•
比如有三个已经写好的验证函数，我们在定义一个总的验证函数，在这个总的验证函数镇南关 加一个 if判读韩，三个函数的并且关系，通过了便返回 true 没有通过的话就返回 false
例如：
- <script language="javascript">
- function validate(){
- if( checkname() && checkpwd() && checkemail() )
- return true;
- else
- return false;
- }
- script>
当表单的提交事件被触发时调用上述的这个函数
onSubmit="return validate()">
.......
文本框对象的常用属性、方法、事件
|
䦋㌌㏒Ü
|
名
称
|
说
明
|
|
属性
|
value
|
设置或获取文本框的值
|
|
方法
|
focus( )
|
获得焦点
|
|
select( )
|
选中文本内容，突出显示输入区域
|
|
|
事件
|
onFocus
|
光标进入某个文本框
脚本运行
|
|
onBlur
|
文本框
失去焦点脚本运行
|
|
|
onKeyPress
|
当一个键按下并释放时去触发一个事件
|
•
如何实现省市级联的效果？
1
、
利用省份下拉框的选项改变事件
onChange
2
、
根据用户选择的省份，
动态添加
城市下拉框的值
•
下拉框控件SELECT：
常用属性
length value options selectedIndex
常用事件
onChange
选项改变事件
onBlur
失去焦点
onFocus
获得焦点
提示：
选项数组
每个选项
Option
可以动态创建
new Option(
"
显示内容
"
，
"
值
"
)
动态添加选项
selCity. options . add( newOption1
）
清除选项
selCity . Options . length = 0
selectedIndex
读取或设置被选项的索引号，第一个为
0
，其他类推。
实例代码1：
- <script language="javascript">
- function changeCity( ) {
-
- var cityList = new Array( );
-
- cityList[0] = ['成都', '绵阳', '德阳', '自贡', … '泸州'];
- cityList[1] = ['济南', '青岛', ‘… '日照'];
- cityList[2] = ['武汉', '宜昌', … '潜江'];
-
- var pIndex = document.myform.selProvince.selectedIndex-1;
- var newOption1;
-
- document . myform . selCity . options . Length = 0 ;
-
- for (var j in cityList[pIndex])
- {
- newnewOption1 = new Option( cityList [pIndex] [j], cityList [pIndex] [j] ) ;
- document.myform.selCity.options.add(newOption1);
-
- }
- }
- script>
实例代码2： 字符串 数组 优化省市级联
- <script language="javascript">
-
- function changeCity( ) {
- var cityList = new Array( );
- cityList[ ‘ 四川省 ’ ] = ['成都', '绵阳', '德阳', '自贡', … '泸州'];
- cityList[ ‘ 山东省 ’ ] = ['济南', '青岛', ‘… '日照'];
- cityList[ ‘ 湖北省 ’ ] = ['武汉', '宜昌', … '潜江'];
-
- var pIndex = document.myform.selProvince.value;
- var newOption2;
- document . myform . selCity . options . Length = 0 ;
-
- for (var j in cityList[pIndex])
- {
- newnewOption2 = new Option( cityList [pIndex] [j], cityList [pIndex] [j] ) ;
- document.myform.selCity.options.add(newOption2);
- }
- }
-
-
-
-
-
- script>
•
正则表达式（regular expression）
•就是用一个“字符串”来描述一个特征，然后去验证另一个“字符串”是否符合这个特征。
•正则表达式的用途：
1）验证字符串是否符合指定特征，比如验证是否是合法的邮件地址。
2）用来查找字符串，从一个长的文本中查找符合指定特征的字符串，比查找固定字符串更加灵活方便。
3）用来替换，比普通的替换更强大。
•
常用元字符
\d : 表示 0~9 任意数字
\w : 任意数字、字母、下划线
\s : 表示任意一个不显示的字符（换行符、制表符、空格）
. : 匹配除了换行符（\n）以外的任意一个字符
^ : 匹配一个字符串的开始
$ : 匹配一个字符串的结束
•
String对象用于操作和处理字符串文本。
•文本框是最常用的表单元素，可以通过使用value属性来读取文本框中的值。
•innerHTML属性表示对象的起始到终止标签的全部内容，动态改变页面内容不但可以用innerHTML来实现，还可以使用display属性来实现。
•数组是具有相同数据类型的一个或多个值的集合，它用同一个名称存储一系列值。
•
几个常用的正则表达式
：
要求是手机
：
^[1]{1}[3]{1}(\d){9}$
要求是电话
：
^((\d){3,4}[-]{1})?([1-9]{1}(\d){5,7})([-]{1}(\d){1,6})?$
要求是日期
(1999-10-02)
：
^\d{4}-\d{1,2}-\d{1,2}
要求是
mail
：
^\w+( [-+.]\w+)*@\w+( [-.]\w+)*\.\w+( [-.]\w+)*$
要求是汉字
：
^[\u4e00-\u9fa5],{0,}$
要求是×××
：
\d{18}|\d{15}
要求是密码（以字母开头，且为
6-16
位）
：
^[a-zA-Z]\w{5,17}$
要求是邮编
：
\d{6}
总结完毕
OVER！！
©著作权归作者所有：来自51CTO博客作者181744926的原创作品，如需转载，请注明出处，否则将追究法律责任
JavaScript 休闲 JavaScript个人总结
JavaScript
2
微博 QQ 微信
收藏
上一篇：我个人的 JavaScript ... 下一篇：在WIN7 系统中安装SQL20...
