Jquery行为层和表示层的分离

网页的结构层、表示层和行为层分离的越彻底,维护及更新就越容易。结构层和表示层可以彻底的分离,结构层和行为层也可以分离,但是当用行为层来操纵表示层时,情况就有些麻烦。

当在javascript里改变css时,我们可能会直接在Javascript代码用诸如tr.style.color="red"这样的语句来操纵。但是如果我们这样做的话就违背了三个层面相互分离的原则,对以后的维护也不利。因为假如以后要把red改为blue,我们就不是在css里来改变,而是得在javascript代码里来寻找改变。那么怎样做到既可以用javascript来改变css样式,而又实现行为层和表示层的分离呢?

其实我们可以给元素节点对象赋予一个类属性,然后在css里设定这个类的值,这样就可以实现既可以操纵css又实现的分离。当我们要改变某个对象的外观时,我们可以给它增加class属性,而不是直接设定style.color这样的语句。color可以在css的类里面来设定。这样我们操纵的就只是一个class属性,而不是直接的css值。

来源: https://blog.csdn.net/hnyysly/article/details/30529197

原文地址:https://www.cnblogs.com/wzdnwyyu/p/11169085.html

时间: 2024-08-30 17:16:08

Jquery行为层和表示层的分离的相关文章

jquery遮罩层的实现

首先,实际上新的窗口并不是创建出来再弹出来,而是将原本隐藏的重新显示出来. html结构如下: <div> <!-->页面内容<--> </div> <div class="mask"> <!-->蒙版<--> </div> <div class="toDisplay"> <!-->弹出层<--> </div> 点击Butt

jQuery遮罩层插件

在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =

JQuery悬浮层 及 CSS3实现悬浮层关闭按钮

我想这样的一个需求很是会经常遇到的,研究了一下,现在记录下来,也希望分享给大家! 先看一下效果图,如下所示: 代码如下: <span style="font-family:Times New Roman;font-size:18px;"><span style="font-family:Times New Roman;font-size:18px;"><DOCTYPE html> <html> <head>

jquery遮罩层

(function () { //遮罩层实现 zhe zhao ceng kexb 2016.2.24 $.extend($.fn, { mask: function (msg, maskDivClass) { this.unmask(); // 参数 var op = { opacity: 0.8, z: 10000, bgcolor: '#ccc' }; var original = $(document.body); var position = { top: 0, left: 0 };

jquery 遮罩层显示img

如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶层添加dom对象,用来显示信息,默认隐藏,需要时在iframe中调用,宽高设置为100%. 实现如下: //遮罩层 .showmask { position: fixed; z-index: 99; width: 100%; height: 100%; background-color: silve

JQuery 遮罩层弹窗

var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0,0,0,0.3); width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 9999;\">"; str += "<div id=\"tanchuang\"

javascript设计模式--Builder

Builder:将一个复杂对象的构建层与其表示层相互分离,同样的构件过程可采用不同的表示. //创建一位人类 var Human = function(param){ //技能 this.skill = param && parma.skill || '保密'; //兴趣爱好 this.hobby = param && param.hobby || '保密'; } //类人原型方法 Human.prototype = { getSkill : function(){ ret

《JavaScript设计模式 张》整理

最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单工厂 又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例. 两种实现方式,第一种是通过类实例化对象创建,第二种是创建一个新对象然后包装增强其属性和功能. demo代码. 2)工厂方法 通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例. 将工厂方法看作是一个实例化对象的工厂类. demo

一、创建型设计模式

包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单工厂 又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例. 两种实现方式,第一种是通过类实例化对象创建,第二种是创建一个新对象然后包装增强其属性和功能. demo代码. 2)工厂方法 通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例. 将工厂方法看作是一个实例化对象的工厂类. demo代码. 3)抽象工厂 通过对类的工厂抽象使其业务用于对产品类簇的创建,而不负责创建某一类产品的实例. 用它作为父类来创建一