3.19 addClass、removeClass、toggleClass、mstgcls、remove的扩展设计

作者: 夏天出处:电子工业出版社博文视点　2008-04-16 12:51　砖好评论条　进入论坛

阅读提示：《JavaScript高级应用与实践》第3章给大家介绍了Object扩展和性能及Web应用之神兵利器，本节为大家展示的是addClass、removeClass、toggleClass、mstgcls、remove的扩展设计。

3.19 addClass、removeClass、toggleClass、mstgcls、remove的扩展设计
这里就Object原型做一些扩展，使得开发Web开发中更加得心应手。请看下面的代码：

   <html>
<head><meta http-equiv=content-type content="text/html;charset=utf-8">
<title>addClass、removeClass、toggleClass、mstgcls、remove的扩展设计</title>
<style>
.myDiv
{
width:200px;
height:350px;
border:1px solid red;
float:left;
}

  .myDiv2
{
border:10px solid green;
}
</style>
</head>
<body>
<table width="300" border="2"><tr><td>测试表格支持鼠标调整大小功能。”7.12”章节的功能</td></tr></table>
<div></div>
<div id="TestDiv"></div>
<div></div>
<div></div>
<script type="text/javascript" language="JavaScript" src="/jcore/resource /javascript/Jcore.js"></script>
<script type="text/javascript" language="JavaScript" src="/jcore/resource /javascript/Jweb.js"></script>
<script type="text/javascript" language="JavaScript">
<!--

// 用扩展原型的方式
Object.exo({ 

// 功能描述：给当前对象集合中的HTML对象增加给定的class
// 返回信息：返回当前对象
// 使用指南：J("table :input").addClass("myInput");
// 应用范围：各种Web客户端
addClass:function(s)
{
this.each(function()
{
if(!hasClassName(this, s))
this.className = (this.className ? this.className + " " : "") + s;
}, false);
return this;
}, // 注意：这里必须是逗号，下面也是一样

  // 功能描述：从当前对象集合中找到并移除给定的对象
// 返回信息：返回处理后的Array对象
// 使用指南：J("table :input").remove("myInput");
// 应用范围：各种Web客户端
remove:function(o)
{
var n = this.indexOf(o);
// 如果对象是HTML对象就移除节点
-1 < n && (n = this.splice(n, 1)[0], n.nodeName && n.removeNode && n.removeNode(true));
return this;
},

  // 功能描述：给当前对象集合中的HTML对象去除给定的class
// 返回信息：返回当前对象
// 使用指南：J("table :input").removeClass("myInput");
// 应用范围：各种Web客户端
removeClass:function(s)
{
this.each(function()
{
this.className = this.className.split(" ").remove(s).join(" ");
}, false);
return this;
},

  // 功能描述：如果前对象集合的HTML对象中class里有给定的值就移除，否则就加上
// 因此这个功能很容易给对象增加鼠标移动上去的效果
// 返回信息：返回当前对象
// 使用指南：J("table :input").toggleClass("myInput");
// 应用范围：各种Web客户端
toggleClass:function(s)
{
this.each(function()
{
hasClassName(this, s) ? [this].removeClass(s) : [this].addClass(s);
}, false);
return this;
},

  // 功能描述：鼠标移动到对象上就设置相应的class, mouse toggleClass[mstgcls]
// 返回信息：返回当前对象
// 使用指南：J("table :input").mstgcls("myInput");
// 应用范围：各种Web客户端
mstgcls:function(s)
{
this.mouseover(function()
{
[this].addClass(s);
}).mouseout(function()
{
[this].removeClass(s);
});
return this;
}
});

var oDivs = J("div");
// 4 个div，最后移除一个，剩下3个
oDivs.remove(TestDiv).addClass("myDiv").rmrsobjs().mstgcls('myDiv2');

J("table").rmrsobjs();
-->
</script>
<button onclick="oDivs.removeClass('myDiv2')">去除class myDiv2</button>
<button onclick="oDivs.addClass('myDiv2')">加上class myDiv2</button>
</body>
</html>

【责任编辑：夏书 TEL：（010）68476606】

回书目 上一节 下一节

关于 JavaScript Object addClass removeClass toggleClass mstgcls remove JavaScript高级应用与实践的

文章

博文

帖子

· 3.8 推荐的对象模型方法[优点：一个名称空间..(04/15)

· 3.18 泛型设计之保留四舍五入保留小数：toFix..(04/16)

· 3.17 不要被怪物吓倒：0.1234[“each”]、tru..(04/16)

· 3.16.6 实现代码及使用举例(04/16)

· 3.16.5 选择后的对象集合如何支持HTML事件的..(04/16)

· GDI Graphics In Delphi(Drawing Bitmaps, the..

· Adobe Flash Player DeclareFunction2 Invalid..

· RemoveIT Pro XT SE 01.04.2008 绿色免安装免..

· IT Control Objectives for SOX--萨班斯法案的..

· javascript

专题

我也说两句

叫好

拍砖

中国最大的网络技术网站 ·
技术成就梦想

·假期读书充电

· 上周真题冲刺测试获奖..
· 全国计算机等考四级模..
· 08年3月各大网上书店及..
· 网络工程师模拟测试获..
· 全国计算机软考考试指..
· 3月24日WCF聊天活动积..

· 全国计算机等级考试四..
· 软件项目估计：第2版
· 系统分析师基础知识自..
· 构建可扩展的Web站点的..
· 2008年全国计算机等级..
· 网络数据安全与保密自..

排行榜

·假期读书充电 (查看5664次)
·1.2 网络定义 (查看1084次)
·《网管员必读—网络应用》自测.. (查看840次)
·历次技术自测获奖网友详细信息 (查看814次)
·免费讲座：搜索引擎营销打造成.. (查看749次)

·SQL Server入门到精通技术自测试题答案 (5个砖)
·免费讲座：搜索引擎营销打造成功网站 (3个砖)
·网管员全真面试题自测获奖结果及答案解析 (3个砖)
·超级网管员——网络应用技术自测试题答案 (3个砖)
·历次技术自测获奖网友详细信息 (3个砖)

·假期读书充电 (9个好)
·1.2 网络定义 (3个好)
·Visual C++数字图像处理开发入门与编程实践 (3个好)
·《游戏开发核心技术-剧本与角色创造》阅读不枯燥 (3个好)
·SQL Server入门到精通技术自测试题答案 (3个好)

·C和指针 (04月)
·思科全球CEO钱伯斯第七次访华 (04月)
·应试捷径—典型考题解析与考点贯通（系统分析师考.. (04月)
·软件安全：使安全成为软件开发必需的部分 (04月)
·Linux系统管理技术手册（中文第二版） (04月)

·Windows XP SP3正式版详细发布进程
·史上最彪悍的IT产品诞生时什么样？

· 2010年我国互联网出口..
· IBM否认放弃Windows 称..
· 红帽放弃开发消费Linux..
· 家乐福中国网站昨被黑 ..
· 10G网络线缆如何测？
· Domino+Qucikplace+Sam..
· DB2 Runtime Client Li..
· 在Django中使用自定义T..

· Struts2教程4：使用val..
· Java开源的OLAP引擎
· 趋势科技中国区总经理..
· Linux管理技术手册:日..
· 实测AMD双路四核巴塞罗..
· 封杀木马病毒十绝招
· iPhone有漏洞致浏览器..
· 杀毒软件高管齐称免费..

订阅技术快讯

电子杂志下载

名称：SQL Server数据库管理精品黄皮书
简介：书中文章经过精挑细选，便于用户能根据自己的实际工作和学习，快速在本书寻找到相关资料。内容涵盖了SQL Server的安装与升级、语句查询、数据备份和恢复、自动化任务、数据同步、数据字典、安全和预防、性能和优化、集群等各方面应用信息，以及DBA管理人员在数据库管理工作中

名称：2007路由技术大全
简介：《2007路由技术大全》由51CTO.com网站特别策划制作，该书包括路由器技术、路由器产品、路由器配置、安全设置、路由器故障处理、路由器密码恢复，以及广大网友在实践使用中的心得经验和技巧文章，内容注重实用性，适用于初学者入门，也适合多年从业者提高，是一本实践和理论完

名称：网络安全精品应用黄皮书
简介：《2007精品网络安全黄皮书》包括了9个大类24个小类， 800余篇文章，内容包含了熊猫烧香病毒、DDOS攻击、ARP病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范，涉及到了安全应用的全部领域, 由浅至深内容全面。

专题

最多好

最多砖