DOM零碎知识点归纳

最新推荐文章于 2021-03-18 02:15:47 发布

秋恨雪

最新推荐文章于 2021-03-18 02:15:47 发布

阅读量726

点赞数

分类专栏： JS & JQuery 文章标签： JavaScript Jquery css css3 DOM

本文链接：https://blog.csdn.net/sinat_27706697/article/details/49905999

版权

JS & JQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

一、各种浏览器的支持性

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

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

3. <a href="http://www.baidu/com" οnclick="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" οnclick="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" οnclick="goLeft();" /> 
	<input type="button" name="name" value="right" οnclick="goRight();" />
</body>
</html>

三、 onload、onunload、onbeforeunload

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

onunload 页面卸载后触发
onbeforeunload 页面卸载前触发最好使用，οnbefοreunlοad="return '提示信息'"。

四、取消默认事件

1. <a href="http://www.baidu/com" οnclick="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" οnclick="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="" οncοpy="alert('fobbiden to copy');return false;" /><br />
	try to paste:<input type="text" name="name" value="" οnpaste="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" οnclick="toCopy();"/>
</body>
</html>

六、 window、document、body的作用

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

秋恨雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM零碎知识点归纳

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。一、各种浏览器的支持性 1. window.navigate(url);//将网页重新导航到url,只支持IE、Opera,建议使用window.location.href=‘url’;//几大浏览器都支持!2. onbeforeunload="window.event.returnValue='...
复制链接

扫一扫