- 浏览: 64122 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (46)
- jvm调优相关 (3)
- java编程语言 (6)
- jQuery &css (11)
- hsf ;spring (3)
- Eclipse 相关 (1)
- 缓存 jvm相关 (2)
- 文件处理 (7)
- html post请求乱码问题 (0)
- java 表单字符处理问题 (2)
- ibitas相关 (2)
- TCP/IP相关 (1)
- 网站架构 (1)
- 编码规范和代码重构 (2)
- spring架构&java web框架原理 (2)
- java web日志相关 (1)
- 网络编程 (1)
- 其他收藏 (0)
- iReport;报表 (0)
- 包和类加载冲突 (0)
- 数据库相关 (1)
- 心得;分享;其他 (1)
- web安全相关 (0)
- 线上问题总结和处理 (0)
- mtee (0)
- xu (0)
- 可心一点 (0)
- 爬虫 (0)
最新评论
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等结构化文件和动作、渲染文件的功能分开时当时设计的主要思想之一,也是其一直具有生命力的源泉之一。
发表评论
-
JSESSION失效问题
2012-11-16 22:17 875问题:在开发环境下的页面进行数据查询时,自动跳到后台权限控制登 ... -
jquery中在一个页面中弹出编辑对话框的实例
2012-10-16 21:05 4603在web开发中,一个页面的某些字段可能需要通过弹出浮出对话框的 ... -
一个常用的页面分页插件实例
2012-10-15 18:24 1199一:(页面分页控件)页面head标签中引进: ... -
ajax请求遇到的一些乱码问题及其解决
2012-10-12 18:12 10451. 在一个系统中的表单数据项很多的编 ... -
值得网站开发人员收藏的 10 个网站
2012-09-27 11:31 0http://www.chinaz.com/free/2010 ... -
12 款简化 CSS3 开发的实用工具
2012-09-27 10:19 0http://www.mangguo.org/10-usefu ... -
网页输入框的提示实现 placeholder
2012-09-21 11:51 0http://blog.csdn.net/trgoofi/ar ... -
50个必备的实用jQuery代码段
2012-09-13 15:00 0http://www.admin10000.com/docum ... -
关于http请求头和响应头的一些疑问
2012-09-12 15:27 01.请求头的值是谁设置上去的?是浏览器自己设置上去的,还是WE ... -
textarea中的输入的规则名称和规则id等生成超链接的js脚本
2012-09-12 11:24 0<script type="text ... -
js 正则表达式用法
2012-09-11 18:24 0正则表达式使用详解 ... -
js中循环获取checkbox值的方式
2012-09-10 15:26 1093在html页面的表单中,有事需要获取checkbox值,由于它 ... -
js中字符串处理的常用方法replaceAll, split , join, indexOf , Array
2012-09-10 15:16 804一:replaceAll的调用方式: 例如1:如想替 ... -
JS跳转页面方式
2012-09-07 20:32 840有的时候在vm页面中,在通过jquery post方式请求完, ... -
jquery的常用api函数总结
2012-07-20 18:00 667.attr( attributeName ): 得到 ... -
jquery学习心得(二):一个很好的css和js函数调用的例子
2012-07-18 17:55 983统一目录下的资源结构图: index.htm ... -
jquery和css的一些学习心得(一)
2012-07-18 16:02 639最近由于项目开发需要,学习一些jquery的东东,有一些 ...
相关推荐
Directory of D:\JQuery 2012/04/01 21:28 <DIR> . 2012/04/01 21:28 <DIR> .. 2010/05/04 06:45 239,835 jquery-1.4.1-vsdoc.js 2010/05/04 06:45 168,792 jquery-1.4.1.js 2010/05/04 06:45 71,922 jquery-1.4.1....
html/css/js/jquery/xml/jsp/servelt/mvc
今天我们要来分享一款很酷的jQuery/CSS3动画特效,它可以让网页中的元素进行抖动,抖动的参数也可以自定义设置。可以定义抖动的快慢、方向以及更为复杂的抖动效果...改应用基于jQuery和CSS3实现,实现起来也比较方便。
1、引入pagination.css和jquery.pagination.js文件; 2、配置可参考jquery.pagination.js文件50行的配置默认参数,含参数注释; var defaults = { totalData: 0, //数据总条数 showData: 0, //每页显示的条数 ...
1、引入pagination.css和jquery.pagination.js文件; 2、配置可参考jquery.pagination.js文件50行的配置默认参数,含参数注释; var defaults = { totalData: 0, //数据总条数 showData: 0, //每页显示的条数 ...
java/hibernate/css/jquery spring api 方便学习
Easy to understand HTML Structure, CSS Classes & Javascript markup Contrast Colors Well Documented HTML pages including: Front end - One Page Parallax (5 Theme Color) Front end - Support Forum ...
jquery-3.1.1.min.js
最近这两天一直在为大家分享一些HTML5、CSS和SVG的炫酷动画,...这次我们来介绍一款实用的jQuery进度条插件,这款jQuery进度条插件的外观利用了CSS3的特性,让进度条外观显得非常时尚漂亮,一共有10种样式,非常实用。
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
* jQuery JavaScript Library v3.5.1 * https://jquery.com/ * * Includes Sizzle.js * https://sizzlejs.com/ * * Copyright JS Foundation and other contributors * Released under the MIT license * ...
JQueryMobile1.4.5.min.js JQueryMobile1.4.5.min.css JQueryMobile1.2全套资源
常用的web开发手册都包含在里面的,有了它,不用找别的 了哦。
CSS JS JQUERY文档 CSS JS JQUERY文档 CSS JS JQUERY文档 CSS JS JQUERY文档
该资源为jquery-ui css及js通用文件
这是一款基于jQuery和CSS3的Android Dock菜单效果,点击底部的按钮即可让应用图标浮动上来,并且按钮也出现3D的翻转效果。jQuery是一款应用十分广泛的javascript类库,很多前端开发者都十分青睐jQuery框架。 在线...
jquery.worklog contentEditable Divs + 自动建议。 使用 conentEditable div 元素生成工作日志元素,具有基于内容的自动建议和自动增长。 支持标题的 HTML 和纯文本格式。 选项 默认值: options: { width : ...
最新官方jQuery UI插件 主流特效Demo,绝不含糊。 好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
105. 推荐jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大 106. 推荐jQuery实用缩略图广告效果插件下载 107. 推荐jQuery模拟Windows视窗的效果实现相册图片拖动特效插件 108. 推荐jQuery网站首页三幅...
Jquery+div+css 鼠标经过内容切换实例,有用到可以拿去参考哦!