js可以嵌入写入到html中完成动态功能或者html和js结构分开，笔者推介后者，这样感觉起来权责更加明确，就像html和css一样，一个负责结构化，一个负责样式渲染，比如下面的简单例子：
共有四个div对象，让前面前面三个显示红色。
第一种写法（js和html混杂写法）：
<!DOCTYPE html>
<html>
<head>
<style>
div { width:70px; height:70px; background:#abc;
border:2px solid black; margin:10px; float:left; }
div.before { border-color: red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script>$("div:last").prevAll().addClass("before");</script>
</body>
</html>
上面通过：head语句快中 <script src="http://code.jquery.com/jquery-latest.js"></script>引进外部js组件，方便下面$("div:last")对
last属性的调用，下面body语句块中js语句是直接嵌入写在html文件中的<script>$("div:last").prevAll().addClass("before");</script>
第二中方式：
分别在此html文件所在的文件夹中定义js，然后在html文件中通过 <script type="text/javascript" src="..."></script>的方式把js引入进来：
<!DOCTYPE >
<html>
<html>
<head>
<style>
div {
width:70px;
height:70px; background:#abc;
border:2px solid black;
margin:10px ;
float:left;
}
div.before {
border-color:red;
}
</style>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
其中jquery-latest.js是引入的js组件，
而jquery.js文件如下：
$(document).ready(function(){
$("div:last").prevAll().addClass("before");
});
这两种方式中的样式标签式嵌入在html中的，其实这种方式也可以采取进行剥离的方法，然后再html文件中通过标签： <link rel="stylesheet" href="../../css文件" type="text/css" media="screen" charset="utf-8" />把css文件加载进来，css文件如果不是跟html在一个目录下面，就要通过../ 的方式在目录中切换。
总之，css，html，js等结构化文件和动作、渲染文件的功能分开时当时设计的主要思想之一，也是其一直具有生命力的源泉之一。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
