javascript dom

动态设置事件：

1. <input type="button" value="val1" onclick="fn1();"/>;

2.

ie支持     attachEvent

w3c标准   addEventListener

if (!window.event) {
                document.getElementById("btn").addEventListener("click", function () {
                    alert("aa");
                });

                document.getElementById("btn").addEventListener("click", function () {
                    alert("bb");
                });
            }
            else {
                document.getElementById("btn").attachEvent("onclick", function () {
                    alert("aa");
                });
            }

 --------------------------------------

window对象方法：

 

1. 产生一个定时器

window.setInterval(code,delay);

var intervalId = setInterval("alert('hello');",1000);

2.停止计时器

window.clearInterval(intervalId);

clearInterval(intervalId);

3. 产生超时定时器，只执行一次

var timerId = setTimeout("alert('hello');",1000);

4. 清除定时器

clearTimeout(timerId);

 

----------------------------------

body、document对象的事件

 

onload（页面加载后触发）、onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）、oncontextmenu（在浏览器中单击鼠标右键显示”右键菜单”时触发）等。

 

----------------------------------

window对象属性

 

1. window.location对象

window.location.href="";//重新导航到新页面

 

2. window.event 是IE下非常重要的属性，用来获得发生事件时的信息。

clientX、clientY 发生事件时鼠标在客户区的坐标；

 

--兼容的写法--

<scripttype="text/javascript">

        document.body.onmousemove=function () {

            if (window.event) {

                document.title='('+window.event.clientX+','+window.event.clientY+')';

            } else {

                document.title='('+arguments[0].clientX+','+arguments[0].clientY+')';

            }

        }

    </script>

 

screenX、screenY 发生事件时鼠标在屏幕上的坐标；

offsetX、offsetY 发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标；

returnValue:如果将returnValue设置为false，就会取消默认行为的处理。window.event.returnValue不兼容火狐浏览器，FireFox:e. preventDefault();取消事件的默认动作。

srcElement：获得事件源对象。FF下用e.target；

screen对象：获取屏幕的信息。

 

      alert("分辨率：" + screen.width + "*" + screen.height);

       if (screen.width < 1024 || screen.height < 768) {

         alert("分辨率太低！");

       }

 

clipboardData对象，对粘贴板的操作。

  setData("Text",val),设置粘贴板中的值；

  getData("Text"),读取粘贴板的值

  clearData("Text"),清空粘贴板；

 

案例：复制地址给友好

<input type="button" value="推荐给好友" onclick="clipboardData.setData('Text','推荐给你一个网站，很好玩'+location.href);alert('已经将网址放到粘贴板中，发给你的好友即可');"/>

 

案例：禁止粘贴帐号

帐号：<input type="text" /><br />

重复帐号：<input type="text" onpaste="alert('为保证帐号的正确，请勿粘贴帐号');return false;" />

 

 修改粘贴板中的内容

function modifyClipboard() {

      clipboardData.setData('Text', clipboardData.getData('Text') + '本文来自**技术专区，转载请注明来源。' + location.href);

}

oncopy="setTimeout('modifyClipboard()',100);“

用户复制动作发生0.1秒以后再去改粘贴板中的内容。

 

history操作历史记录

•window.history.back()后退；window.history.forward()前进。

•window.history.go(-1)后退、window.history.go(1)前进。

 

document

   getElementById(),

   getElementsByName()，

   getElementsByTagName()，

  

--------------------------

事件冒泡

 

事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外”。

取消事件冒泡： window.event.cancelBubble=true;//IE下的写法。

 

--------------------------

动态创建dom

document.write只能在页面加载过程中才能动态创建。

document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。

 

function showIt() {

            var divMain = document.getElementById("divMain");

            var btn = document.createElement("input");

            btn.type = "button";

            btn.value = "我是动态的！";

            divMain.appendChild(btn);

        }

<div id="divMain"></div>

<input type="button" value="ok" onclick="showit()" />

 

几乎所有DOM元素都有innerText、innerHTML属性,分别是元素标签内内容的文本表示形式和HTML源代码.

//FF不支持innerText,在FF下用textContent属性。也可以用innerHTML设置普通文本。

用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建。

示例：

function createlink() {

    var divMain = document.getElementById("divMain");

    divMain.innerHTML = "<a href='http://www.baidu.com'>百度</a>";

}

 

浏览器兼容性的例子：ie6，ie7对table.appendChild("tr")的支持和IE8不一样，用insertRow、insertCell来代替。

 

 <script type="text/javascript">

        function AddComment() {

            var txtContent = document.getElementById('txtArea1').value; //获得评论文字

            var txtNickname = document.getElementById('txtNickname').value; ; //获得昵称

 

            var tableObj = document.getElementById('tabComment');

            var trTag = tableObj.insertRow(-1);

            var tdTag1 = trTag.insertCell(-1);

            tdTag1.innerHTML = txtNickname;

            var tdTag2 = trTag.insertCell(-1);

            tdTag2.innerHTML = txtContent;            

        }

 </script>

删除节点：

divObj

While(divObj.firstChild){

      divObj.removeChild(divObj.firstChild);

}

 与

divObj.innerHTML=‘’;的区别

后一种方式来删除节点，在某些情况下会存在内存问题。

例如divObj下面有很多其他元素，每个元素都绑定有事件处理程序。此时，innerHTML只是把当前元素从节点树上移除了，但是那些事件处理程序依然占用内存。

-----------------------------------------

js动态修改样式

 

注意在css中属性名与在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为JavaScript中-是不能做属性、类名的。

所以CSS中背景颜色是background-color，而JavaScript则是style. backgroundColor；元素样式名是class，在JavaScript中是className属性；

font-size→style.fontSize；margin-top→style.marginTop //驼峰命名法。

 

操作float样式的时候，IE与其他浏览器不太一样。IE：obj.style.styleFloat=‘right’;其他浏览器：obj.style.cssFloat=‘right’;

//通用代码：

           var vv=document.getElementById('dv1');

            if (typeof (vv.style.styleFloat) =='string') {

                vv.style.styleFloat='right';

            } else {

                vv.style.cssFloat='right';

            }

 

-------------------------------------

javascript去掉字符串两端空格

<script type="text/javascript">
　　function trim(str){ //删除左右两端的空格
　　     return str.replace(/(^\s*)|(\s*$)/g, "");
　　}
　　function ltrim(str){ //删除左边的空格
　　     return str.replace(/(^\s*)/g,"");
　　}
　　 function rtrim(str){ //删除右边的空格
　　     return str.replace(/(\s*$)/g,"");
　　}
</script>

 

--------------------------------------------------

js中的正则表达式

JavaScript中创建正则表达式类的方法：

 1.var regex = new RegExp("\\d{5}") 或者 2.var regex = / \d{5} /

/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法，写在//中的正则表达式就不用管转义符了。

 

RegExp对象的方法：

（1）test(str)判断字符串str是否匹配正则表达式，相当于IsMatch

       var regex = /.+@.+/;

       alert(regex.test(a@b.com));

（2）exec(str)进行搜索匹配，返回值为匹配结果(*)，相当于c#中match()和matches()。

     •如果 exec() 找到了匹配的文本，则返回一个结果数组（完全匹配的字符串以及提取组的结果。）。否则，返回 null。 要提取多个需要反复调用exec()类似于matches()方法。//注意全局模式/…../g

     •在非全局模式下，调用一次exec()相当于match()；在全局模式下连续多次调用相当于matches()

 

2.string的正则表达式方法

  （1）match(regexp)，非全局模式下相当于调用exec(),全局模式下相当于调用c#的matches()。

        var s = "aaa@163.com";

        var regex = /(.+)@(.+)/;

        var match = s.match(regex);

  （2）replace方法，字符串.replace(/正则/g,”要替换的字符串$1”);

       var str="Welcome to Microsoft!We are proud to announce that Microsoft has";

        str.replace(/Microsoft/g, "W3School"));

-----------------------------------

常用keyCode

8：退格键

9： Tab

13：回车

46：delete

37-40：方向键

48-57：小键盘区的数字

96-105：主键盘区的数字

110、190：小键盘区和主键盘区的小数点

189、109：小键盘区和主键盘区的负号

 

<body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9;}">