首页 > web前端 > js教程 > Dom 学习总结以及实例的使用介绍_javascript技巧

Dom 学习总结以及实例的使用介绍_javascript技巧

WBOY
发布: 2016-05-16 17:35:42
原创
1215 人浏览过

1、   重新导航到指定的地址:navigate("http://www.jb51.net");

2、

 (1、*setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识。如: 

              setInterval("alert('hello')",5000);

*clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时器的标识,即setInterval的返回值。

var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);

(2、setTimeout也是定时执行,但是不像setInterval那样是定时执行,而是设定时间后只执行一次,clearTimeout也是清除定时。
       很好区分:Interval是定时;Timeout是超时之意。

            var timeoutld=setTimeout("alert('hello')",2000);
(3、案例:实现标题栏走马灯的效果,也就是浏览器的标题文字每隔500ms向右滚动一下

复制代码 代码如下:

跑马灯效果
 
 
    
         欢迎来到daomul的博客,欢迎再来,谢谢
        
    
    

    
 

3、

   (1、onload:网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到body的onload事件中,或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发,而body 里的onload才是全部加载完成。
   (2、onunload:网页关闭(或者离开)后触发。onbeforeunload:窗口离开(比如前进、后退、关闭之前)就会弹出确认消息。如:                                                    

4、

     除了有特有的属性之外,当然还有通用的HTML元素的事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeyup(按键释放)、onkeypress(点击按键)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、
onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。

5、window对象的属性

(1、window.location.href="http://www.sina.com.cn",重新导向新的地址,和navigate方法效果一样。window.location.reload()刷新页面。
(2、window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。
         a、altKey属性,boot类型,表示发生事件时alt键是否被按下,类似的还有ctrlKey、shiftKey属性

复制代码 代码如下:

windows事件样例
 
 
 
    
 
 
    
    
              href="http://www.baidu.com" onclick="alert('禁止访问!');window.event.returnValue=false;">
    

    
    

 
 

 

b、 clientX、clientY 发生事件时鼠标在客户区(浏览器界页面内)的坐标;screenX、screenY发生事件时鼠标在屏幕上的坐标;offsetX、offsetY发生事件时鼠标相对于事件源(按钮button内)的坐标。
c、returnValue属性,如果将returnValue设置为false,就会取消默认事件的处理。
d、srcElement:获得事件源对象
e、KeyCode:发生时间时的按键值
f、button:发生时间时鼠标的按键,1为左键,2为右键,3为左右键同时按。

        

6、clipboardData对象,对粘贴板的操作。clearData("Text")清空粘贴板;getData("Text")读取粘贴板的值,返回值为粘贴板中的内容;setData("Text",val),设置粘贴板中的值。

(1、当复制的时候body的oncopy方法被触发,直接return false就是禁止复制。


(2、很多元素也有oncopy、onpaste事件。

 例子1:禁止复制
                   


 例子2:给粘贴板赋值:复制地址给好友

 例子3:禁止粘贴到文本框

请输入您的手机号码:
请您再次输入手机号码::

 例子4:复制时附带内容

在网站中复制文章的时候,为了防止那些拷贝党不添加文章来源,自动在复制的内容后添加版权声明。

function modifyClipboard(){

   clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自博客园技术专区,转载请注明来源。'+location.href);
}
oncopy="setTimeout('modifyClipboard()',100)"。

用户复制动作发生0.1秒以后再去修改粘贴板中的内容。100ms只是一个经常取值,写1000、10、50、20……都行。不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒以后执行,这样就不再oncopy的执行调用栈上了。

7、页面前进、后退:history操作历史记录

window.history.back()后退;
window.history.forward()前进。也可以用window.history.go(-1)表前进;window.history.go(1)表后退。

实例1:

这里是第2页后退

8、document属性(最复杂的属性)document是window对象的一个属性,因为使用window对象成员的时候可以省略window,所以一般直接写document。

(1、write:向文档中写入内容。writeln和write差不多,只不过最后添加一个回车
(2、
(3、在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载过程中write才会与原有内容融合在一起
(4、

案例1:

复制代码 代码如下:

getElementById
 
 
 
     getElementById
    
 
 
    
    
    

    
    
    

 
 

案例2:
复制代码 代码如下:

getElementByName
 
 
 
     getElementByName的例子
    
 
 
    
    
     保密
    
    

    

    

    

    

    

    
 
 

案例3:
复制代码 代码如下:

getElementByTagName
 
 
 
     getElementByTagName
    
 
 
    
    
    
    
    
 
 

案例4:
复制代码 代码如下:

阅读协议等待计时器
 
 
    
         欢迎来到daomul的博客,欢迎再来,谢谢
        
    
    
        
        
    
 

案例5:
复制代码 代码如下:

美女时钟
 
 
 
     欢迎来到daomul的博客,欢迎再来,谢谢
    
 
 
     Dom 学习总结以及实例的使用介绍_javascript技巧
 
 

案例6:搜索框关键字搜索
复制代码 代码如下:

搜索框关键字搜索
 
 
 
     欢迎来到daomul的博客,欢迎再来,谢谢(文本框关键字3)
    
 
 
    
    
 
 

16、Form表单: Form 对象是表单的 Dom 对象。

 方法: submit() 提交表单,但是不会触发 onsubmit 事件。 实现 autopost ,也就是焦点离开控件以后页面立即提交,而不是 只有提交 submit 按钮以后才提交,当光标离开的时候触发 onblur 事件,在 onblur 中调用 form 的 submit 方法。在点击 submit 后 form 的 onsubmit 事件被触发 ,在 onsubmit 中可以 进行数据校验,数据有问题, 返回 false 即可取消提交。

 案例1:
 

复制代码 代码如下:

 Form表单
 
 
 
     欢迎来到daomul的博客,欢迎再来,谢谢(Form表单提交4)
    
 
 
    

      
        
        
        
        
        
        
        
    

 
 
 

 17、正则表达式

 *JavaScript 中创建正则表达式类的方法:
            var regex = new RegExp("\\d{5}")  或者   var regex = /\d{5}/
           / 表达式 / 是 JavaScript 中专门为简化正则表达式编写而提供的语法,
           写在 // 中的正则表达式就不用管转义符了。
 *RegExp 对象的方法:
      **  test(str) 判断字符串 str 是否匹配正则表达式,相当于 IsMatch
          var regex = /.+@.+/;
         alert(regex.test("a@b.com"));
         alert(regex.test("ab.com"));
     **  exec(str) 进行搜索匹配,返回值为匹配结果 ( * )
     **  compile 编译表达式,提高运行速度。   ( * )
*String 对象中提供了一些与正则表达式相关的方法,相当于对于
               RegExp 类的包装,简化调用:
              match(regexp) ,相当于调用 exec

        var s = "aaa@163.com";
        var regex = /(.+)@(.+)/;
        var match = s.match(regex);
        alert(RegExp.$1 + " ,服务器: " + RegExp.$2);

案例1:

复制代码 代码如下:

正则表达式
 
 
    
         欢迎来到daomul的博客,欢迎再来,谢谢
        
    
    
    
 

 18、不同浏览器的差异

 19、键盘码操作以及金融框案例:    

案例1:

财务相关系统中涉及到金额的文本框有如下要求:

 *进入金额文本文本框不使用中文输入法 不能输入非数字 焦点在文本框中时文本框左对齐;焦点离开文本框时文本框右对齐,显示千 分位   禁用输入法: style="ime-mode:disabled"

*禁止键入非法值,只有这些才能被键入 (k == 9) || (k == 13) ||
(k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 &&
k=96 && k=37 && knumonKeyDown()" 不要写成 onkeydown="numonKeyDown()" 区分事件响应函数 和事件响应函数调用的函数。

* 禁止粘贴 ( 伟大的 Tester) ,    取到粘贴板中的值,然后遍历每个字符,看是否是合法的值,如果全部是合法值才允许粘贴,只要有一个非法值就禁止粘贴。 charAt 、 charCodeAt添加千分位   的方法

* 焦点在的时候左对齐没有千分位,焦点不在时右对齐千分位:this.style.textAlign='right'

复制代码 代码如下:

金融文本框设置
 
 

 
     欢迎来到daomul的博客,欢迎再来,谢谢
    
 
 
     不能输入非数字:
    
    

     禁用输入法:
    
    

     不能输入和粘贴非数字:
    
    

     添加去掉千分位:
              onblur="this.value=commafy(this.value);this.style.textAlign='right';"
         onfocus="this.style.textAlign='left';this.value=this.value.replace(/,/g,'')" />
    

 
 

复制代码 代码如下:

省市选择
 
 
 
 
     欢迎来到daomul的博客,欢迎再来,谢谢(省市选择)
    
 
 
    
    
 
 

案例3:复选框实现全选、全不选、反选
复制代码 代码如下:

复选框选择
 
 
 
     欢迎来到daomul的博客,欢迎再来,谢谢(歌曲选择)
    
 
 
    

        

        

        

        

        


            
            
            
        


    

 
 

案例4:权限选择
复制代码 代码如下:

权限选择
 
 
 
     欢迎来到daomul的博客,欢迎再来,谢谢(权限选择)
    
 
 
    
    

    
    
    
    
    

    
 
 

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板