DOM零碎知识点归纳

一、各种浏览器的支持性 

1. window.navigate(url);//将网页重新导航到url,只支持IE、Opera,建议使用window.location.href=‘url’;//几大浏览器都支持!

2. onbeforeunload="window.event.returnValue='你确定离开吗?'";好像只有IE支持! 直接使用onbeforeunload="return '你确定离开吗?'";大多数浏览器都支持!

3. <a href="http://www.baidu/com" onclick="window.event.returnValue=false;">去百度</a>取消默认事件window.event.returnValue=false; IE和FF支持,其他的不支持
还是用return false;几乎都支持。

4. 关于innerText与innerHTML的支持问题对于innerHTML所有浏览器都支持,而innerText几乎所有浏览器都支持,但FF不支持! 

二、setInterval,clearInterval,setTimeout,clearTimeout的用法  

1. 每隔一秒钟,文本框的内容自增1。

效果图:


<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <title>dadadfa</title>
       <script type="text/javascript">
			var intervalId = setInterval(function () {
				var num = document.getElementById('txt').value; 
				num = parseInt(num) + 1; 
				document.getElementById('txt').value = num;
				}, 1000);

			function stopIt() { 
				clearInterval(intervalId);
			} 
		</script>
	</head> 
	<body>
		<input type="text" name="name" id="txt" value="1" />
		<input type="button" name="name" value="Stop" onclick="stopIt();" /> 
	</body>
</html>

因为是在1秒钟之后,才执行setInterval方法,那个时候文本框已经加载完毕,所以不会报错! 

2. 流水灯效果。

效果图:


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>12345</title> 
	<script type="text/javascript">
		var direction = 'left'; //定义滚动的方向 
		var intervalId = setInterval(function () {
			var title = document.title; 
			if (direction == 'left') {
				var front = title.charAt(0); 
				var rear = title.substr(1); 
				document.title = rear + front;
			}
			else if (direction == 'right') {
				var front = title.substr(0, title.length - 1); 
				var rear = title.substr(title.length - 1); 
				document.title = rear + front;
			}
		}, 500);
		function goLeft() { 
			direction = 'left';
		}
		function goRight() { 
			direction = 'right';
		} 
	</script>
</head> 
<body>
	Flow
	<input type="button" name="name" value="left" onclick="goLeft();" /> 
	<input type="button" name="name" value="right" onclick="goRight();" />
</body>
</html>

三、 onload、onunload、onbeforeunload  

onload 页面加载后触发 一般用window.onload代替使用

onunload 页面卸载后触发
onbeforeunload 页面卸载前触发 最好使用,onbeforeunload="return '提示信息'"。

四、取消默认事件 

1.   <a href="http://www.baidu/com" onclick="alert('Good');return false;">Baidu</a>

点击文字后,会弹出 "Good", 但是不会跳转到百度。

2.   用js的方式实现

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    	<script type="text/javascript">
			function Judge() { 
				alert('Fobbiden'); 
				return false;
			} 
		</script>
</head>
<body>
	<a href="http://www.baidu.com" onclick="Judge();">Baidu</a> 
</body>
</html>
注意,Judge函数本身的返回值为false,并不是onclick这个方法本身返回false,所以上述的代码执行后,依旧会跳转到百度,正确的写法应该是 onclick = "return Judge();"。

五、clipboardData对象 

setData('text',val); 设置剪贴板中的值

getData('text'); 读取剪切板的值

clearData('text'); 清空剪贴板中的内容

onpaste,oncopy 粘贴,拷贝时执行的操作

Demo效果图:

DOM零碎知识点归纳_第1张图片

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <title></title>
       <script type="text/javascript">
			function toCopy() {
				var comment = document.getElementById('comment').value; 
				comment = comment + '\r\n' + window.location.href; 
				//将复制内容加上网站地址加到剪贴板中 
				clipboardData.setData('text',comment);
			} 
		</script>
	</head> 
<body>
	try to copy:<input type="text" name="name" value="" oncopy="alert('fobbiden to copy');return false;" /><br />
	try to paste:<input type="text" name="name" value="" onpaste="alert('fobbiden to paste');return false;"/><br />
	<textarea cols="40" rows="7" id="comment">contentcontentcontentcontentcontentcontent contentcontentcontentcontentcontentcontent contentcontentcontentcontentcontentcontent contentcontentcontentcontentcontentcontent
	</textarea>
	<input type="button" name="name" value="copy the content of comments" onclick="toCopy();"/>
</body>
</html>

六、 window、document、body的作用 

window是顶级对象,相当于C#中的object
document是浏览器整个浏览区域
body是指,浏览器区域有内容的范围因此要获得onclick事件,最好使用document.onclick,而不是body.onclick 


你可能感兴趣的:(JavaScript,jquery,css,dom,css3)