DOM零碎知识点归纳

原创 2015年11月18日 14:33:51

一、各种浏览器的支持性 

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效果图:



<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 


HTML与CSS零碎知识点归纳

一、HTML 1、主要浏览器: IE、FireFox、Chrome、Opera、Safari Trident引擎,如:IE WebKit引擎,如:Chrome、Safari  Gecko引擎...

JQuery零碎知识点归纳2

一、 评分控件 效果图: 代码: $(function () { $('td').css('cursor', 'pointer').mouseover(function ...

installshield零碎知识点集锦.zip

  • 2011年07月06日 23:21
  • 2.51MB
  • 下载

Java知识点小记(零碎版 超速更新)

声明全部知识点以及部分图片来自中软国际上课时用的PPT。堆、栈、常量池、方法区基本数据类型和引用类型的区别基本数据类型存储在栈中,引用类型存储在堆中; 在函数(方法)中定义的基本数据类型变量存储在栈...

零碎的html和css知识点

1.对于标签可以通过 text-decoration:none;    来去掉标签的下划线 2.或者标签,可以通过 list-style:none;    来去掉默认的序号和点 3.常见的css重...

OpenGL零碎知识点记录<仅供自己查看>

1:在几何着色器中,如果从顶点传入的原始位置坐标,没有被几何着色器作为中介传到片段着色器中的话,则不再显示原始顶点,仅仅显示几何着色器中生成的顶点。 2: uniform image2D 和unif...

动画里关于 CALayer 的一些零碎知识点

重温了一下《IOS 7 Programming: Pushing the Limits》这本书,有许多零碎的知识点,记录一下,勉强算作是学习笔记吧。 CALayer Part 1 动画的基本单元...

零碎知识点static等

*策略模式: 定义:又叫算

JAVA_零碎知识点

1.一个java文件中是否可以包含多个“类”?

安卓零碎知识点

零碎知识点 创建项目前,window-》performance-》workSpace 将编码改成UTF_8安卓系统提供了一个SparseArray,它本质是一个map,但是存储的key只能是...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DOM零碎知识点归纳
举报原因:
原因补充:

(最多只允许输入30个字)