如何分离JS

最新推荐文章于 2022-08-09 21:05:24 发布

Julie_胖胖冰

最新推荐文章于 2022-08-09 21:05:24 发布

阅读量499

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Julie_bing/article/details/108991671

版权

类似于style属性，在html上有一个挂钩，类似于class或id，将css和html分开，可大大的提高性能，网页也灰健壮很多。如果把js和html分离开，也会是的网页更加优化。

<!DOCTYPE html>
<html>
<head>
	<title>chapter5</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="zqq.css">
</head>
<body>
	<h1>Snapshots</h1>
	<ul>
		<li><a href="images/girl.jpg" title="A girl" class="popUp">girl</a></li>
		<li><a href="images/guifei.jpg" title="guifei" class="popUp">guifei</a></li>
		<li><a href="images/zuxian.gif" title="zuxian" class="popUp">zuxian</a></li>
		<li><a href="images/moon.jpg" title="moon" class="popUp">moon</a></li>
	</ul>
	<img id="placeholder" src="images/house1.jpg" alt="My image gallery">
	<p id="description">Choose an image.</p>
	<script type="text/javascript" src="zqq.js"></script>
<script type="text/javascript" src="zqq.js"></script>
</body>
</html>

//平稳退化

/*function popUp(winURL)
{
	window.open(winURL,"popup","width=320;height=480");//调用popup函数的一个办法是使用伪协议；
}*/

//分离js


window.onload = prepareLinks;
function prepareLinks()
{
	if (!document.getElementsByTagName) return false;//向后兼容，如果浏览器不支持脚本代码，但也可以正常浏览，平稳退化。
	var links = document.getElementsByTagName("a");//把文档里所有的链接全放到一个数组里；
	for(var i=0;i<links.length;i++){//遍历数组
		if(links[i].getAttribute("class")=="popUp"){//如果某个链接的class属性等于popup，就调用该函数
			links[i].onclick=function(){
				popUp(this.getAttribute("href"));//A.把这个链接的和href属性值传递给popup函数
				rerurn false;//B.取消这个链接的默认行为,不让这个链接把访问者带离当前窗口
			}
		}
	}
}
function popUp(winURL)
{
	window.open(winURL,"popUp","width=320;height=480");//调用popup函数的一个办法是使用伪协议；
}

Julie_胖胖冰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何分离JS

类似于style属性，在html上有一个挂钩，类似于class或id，将css和html分开，可大大的提高性能，网页也灰健壮很多。如果把js和html分离开，也会是的网页更加优化。<!DOCTYPE html><html><head> <title>chapter5</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="z
复制链接

扫一扫