jquery/css学习心得三：js的内嵌写法和分开写法 -

cooldream666

浏览: 64133 次
性别:
来自: 杭州

最近访客更多访客>>

airyoureyes

dagger9527

djjackylei

sosomir

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery/css学习心得三：js的内嵌写法和分开写法

博客分类：

jQuery &css

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等结构化文件和动作、渲染文件的功能分开时当时设计的主要思想之一，也是其一直具有生命力的源泉之一。

查看图片附件

分享到：

jquery的常用api函数总结 | jquery学习心得（二）：一个很好的css和js ...

2012-07-20 17:26
浏览 3559
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery/css学习心得三：js的内嵌写法和分开写法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery/css学习心得三：js的内嵌写法和分开写法

评论

发表评论

相关推荐

JSESSION失效问题

jquery中在一个页面中弹出编辑对话框的实例

一个常用的页面分页插件实例

ajax请求遇到的一些乱码问题及其解决

值得网站开发人员收藏的 10 个网站

12 款简化 CSS3 开发的实用工具

网页输入框的提示实现 placeholder

50个必备的实用jQuery代码段

关于http请求头和响应头的一些疑问

textarea中的输入的规则名称和规则id等生成超链接的js脚本

js 正则表达式用法

js中循环获取checkbox值的方式

js中字符串处理的常用方法replaceAll, split , join, indexOf , Array

JS跳转页面方式

jquery的常用api函数总结

jquery学习心得（二）：一个很好的css和js函数调用的例子

jquery和css的一些学习心得（一）

最近访客更多访客>>