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方法相结合, 可以让浏览器窗口显示动态标题 。
 
代码实例:
    
    
    
    
  1. <script language="javascript">   
  2.  var str = "     欢迎光临本站!"   
  3.  function titleMove(){   
  4.      strstr = str.substring(1, str.length) + str.substring(0, 1);   
  5.      document.title = str;           //设置标题栏   
  6.      window.status = str;           //设置状态栏   
  7.    }   
  8.    if (str.length > 20) {   
  9.       str = "     欢迎光临本站!";    }   
  10.    setInterval("titleMove()", 100);   
  11. script> 
  12.  

 
 
 
使用document对象的writewriteln方法除了可以在当前文档中输出内之外,还可以在其他浏览器窗口的文档中输出内容。
 
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代码
    
    
    
    
  1. onMouseOver=“this.style.fontSize='24px‘“  
  2. onMouseOut=“this.style.fontSize='14px‘"  
 
 
 
 
通过改变样式backgroundImage实现
        
        
        
        
  1. onMouseOver=“this.style.backgroundImage='url(p_w_picpaths/bg.jpg)';“  
 
 
制作鼠标移出的样式,用onMouseOut事件来设定Style对象backgroundImage的值。
        
        
        
        
  1. onMouseOut="this.style.backgroundImage='url(p_w_picpaths/bg1.jpg)';“  
 
  
定义样式(利用鼠标相关事件调用类样式代码)
        
        
        
        
  1. <LI><A href="#" onMouseOver="this.className =' MouseOverStyle' "   
  2. 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
 
例如:
    
    
    
    
  1. <script language="javascript"> 
  2.   function validate(){   
  3.     if( checkname() && checkpwd() && checkemail() )  
  4.         return true;  
  5.     else  
  6.        return false;  
  7.   }   
  8. 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:
    
    
    
    
  1. <script language="javascript"> 
  2. function changeCity( ) {  
  3.                                       
  4.     var cityList = new Array( );  
  5.                                      
  6.     cityList[0] = ['成都', '绵阳', '德阳', '自贡', … '泸州'];  
  7.     cityList[1] = ['济南', '青岛', ‘… '日照'];  
  8.     cityList[2] = ['武汉', '宜昌', … '潜江'];  
  9.                                         
  10.     var pIndex = document.myform.selProvince.selectedIndex-1;   
  11.     var newOption1;  
  12.                                     
  13.     document . myform . selCity . options . Length = 0 ;  
  14.  
  15.     for (var j in cityList[pIndex])   
  16.     {  
  17.          newnewOption1 = new Option( cityList [pIndex] [j], cityList [pIndex] [j] ) ;   
  18.         document.myform.selCity.options.add(newOption1);    
  19.                                     
  20.      }  
  21. }  
  22. script> 
 
实例代码2: 字符串 数组 优化省市级联
    
    
    
    
  1. <script language="javascript"> 
  2.  
  3. function changeCity( ) {  
  4.     var cityList = new Array( );         
  5.     cityList[ ‘ 四川省 ’ ] = ['成都', '绵阳', '德阳', '自贡', … '泸州'];  
  6.     cityList[ ‘ 山东省 ’ ] = ['济南', '青岛', ‘… '日照'];  
  7.     cityList[ ‘ 湖北省 ’ ] = ['武汉', '宜昌', … '潜江'];  
  8.                          
  9.     var pIndex = document.myform.selProvince.value;   
  10.     var newOption2;                  
  11.     document . myform . selCity . options . Length = 0 ;     
  12.                       
  13.     for (var j in cityList[pIndex])       
  14.     {  
  15.          newnewOption2 = new Option( cityList [pIndex] [j], cityList [pIndex] [j] ) ;   
  16.         document.myform.selCity.options.add(newOption2);    
  17.      }  
  18. }  
  19.  
  20.  
  21.  
  22.  
  23.  
  24. 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!!

 
JavaScript 休闲 JavaScript个人总结 JavaScript

2

收藏

上一篇:我个人的 JavaScript ... 下一篇:在WIN7 系统中安装SQL20...
我个人的 JavaScript 结科总结(2)_第2张图片
181744926

6篇文章,6W+人气,0粉丝

关注