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

By | 07月20日
Advertisement

js可以嵌入写入到html中完成动态功能或者html和js结构分开,笔者推介后者,这样感觉起来权责更加明确,就像html和css一样,一个负责结构化,一个负责样式渲染,比如下面的简单例子:

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

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

Similar Posts:

  • win32调试API学习心得(三)

    win32调试API学习心得(三) 要学习如何修改被调试进程,先让我们来了解几个与此有关的函数.一.读指定进程内存:ReadProcessMemory 此函数的定义为:function ReadProcessMemory(hProcess: THandle; const lpBaseAddress: Pointer; lpBuffer: Pointer; nSize: DWORD; var lpNumberOfBytesRead: DWORD): BOOL; stdcall; hProcess指

  • Jquery的学习(三)选择器

    1.Jquery中最重要的就是选择器了. 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 ①简单选择器. 最简单的也就是最常用的,最常用的一般也是最简单的. 在使用 jQuery 选择器时,我们首先必须使用"$()"函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了. #box { //使用 ID 选择器的 CSS 规则 color

  • Struts1.2.4学习心得!(三)

    第三次学习: 1.从Bean中取得数组并显示(其中intArray为BEAN返回的数组) java代码: 1 2 <jsp:useBean id="test3" scope="page" class="org.apache.struts.webapp.exercise.TestBean" /> 3 <table border="1"> 4 <tr> 5 <th>Correct V

  • CSS学习笔记(三)

    定位 静态定位:意味着内容遵循正常从上到下的HTML流.除非你要使前面一个已经创建的absolute.relative.fixed的定位样式失效,否则你不需要指定static. 固定定位:让HTML元素脱离文档流固定在浏览器的某个位置.固定元素是创建固定工具条或者在只有某种网页滚动的特定比例的地方复制HTML框架效果的好办法. 绝对定位:凡是采用position:absolute:之后,对象便开始进行绝对定位,绝对定位主要通过设置对象的top,right,bottom和left四个方向的边距值来

  • IOS总结 学习心得三

    一.一定要多敲代码,程序是敲会的,不是看会的. 二.每天或是每个礼拜一定要有总结,总结能让自己知道学到了什么. 三.多研究一些开源代码(包括别人怎么开发APP,怎么做UI,在开发APP中遇到的问题). 另附一个面试网站和一个网上下载的OC基础知识和语法总结: http://mianwww.com/ 网上下载的OC基础知识和语法: 点击打开链接

  • jquery【学习心得】常用方法中的注意点

    .end()和.parent()的区别,前者不单单只是能够寻找到父节点也可以找到相邻节点 .toggleClass()是指指定样式和默认样式之间的转换. .offset()是获取相对于视口的绝对位置 .position()是相对于父元素的偏移位置 .scrollTop()获取垂直滚动条的高度 .clone()复制节点:值得注意的是此方法中如果没有传参或者传的是false,则只是复制的内容,并没有复制事件的处理,若是传的是ture则内容和事件处理都复制了 删除节点的几种方法: .remove()

  • opencv学习心得三----读取摄像头

    学习了opencv打开摄像头,代码如下: 提醒:1.标点是在半字符下写的,我以下的程序为了方便没进行区分,大家要注意: 2.我的代码是凭记忆写的,没用vs2010运行,可能会有错误,如果发现请指出. #include<highgui.h> #include<cv.h> int main(int argc,char** argv) { IplImage* frame=NULL; CvCapture* camera=NULL; camera=cvCreateCameraCapture(

  • HTML、JavaScript和CSS学习总结

    网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写,是最基础的网页语言 . Html是通过标签来定义的语言,代码都是由标签所组成 .Html代码不用区分大小写 . Html代码由<html>开始</html>结束.里面由头部分<head></

  • 前端学习 CSS学习

    前言 这块开始深入学习CSS,从基础开始.大概就是整理一下所有的资料,形成知识,便于以后查阅. CSS基础知识: CSS概念 Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言,将网页内容和显示样式进行分离,方便维护. 文档 是信息的集合,它使用一门 标记语言 作为结构.一个文档并不等同于一个文件.它甚至可能不会保存在一个文件中. CSS 并非仅仅用于浏览器,也不仅限于视觉展现.按照 CSS 的正式术语来讲,将文档呈现给用户的程序称为用户代理(UA).

  • 内嵌Realplayer播放器 参数的含义

    最近在学习的过程学习了在web页面内嵌realplayer播放器的技术,在内嵌realplayer播放器的过程,有许多的参数,在这里收集到的参数和大家分享一下. 参数:autostart 属性:True或是False 作用:指定是否自动播放指定的源文件 参数:backgroundcolor 属性:任何用符号"#"开头的16进制数值或是任何预定义的颜色 作用:指定图像窗口的背景颜色 参数:center 属性:True或是False 作用:指定片断使用初始编码大小播放,并且在图像窗口的中央

Tags: