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 ></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;}">
