文章关键字 ‘class’

如何继承自定义元素及其他JS中扩展新方法

2022年06月19日,星期日

占位封面图

相似内核但语义不同的Web组件该如何更高效的组织代码才能兼顾可维护性和可阅读性呢?如何在任意位置对已由的自定义元素组件进行方法或属性的扩展呢?一点实战经验分享,希望可以帮到大家的工作。

阅读全文…

聊聊JS DOM变化的监听检测与应用

2019年08月30日,星期五

DOM变化与检测

实际开发的时候,我们需要知道DOM元素是否发生了变化,或属性变化,或DOM节点的新增或删除,从IE9浏览器开始,浏览器启用了多种方法,可以监听DOM树的变化,本文就将结合实例详细聊聊其中的各种方法。

阅读全文…

翻译:稳定、地道HTML书写原则

2013年01月4日,星期五

关于HTML书写的一篇译文,大家有兴趣可以看看,根据自己的实际情况,提炼出有帮助的信息。

阅读全文…

有趣:256个class选择器可以干掉1个id选择器

2012年08月20日,星期一

我突然想起了在微博上看到的一个视频:日本蜜蜂团团围住并热死大黄蜂的那个视频,——虽然小蜜蜂战斗力就是个渣渣,但是,足够多的数量也会搞出一些有趣的现象——热死足以以一敌千的大黄蜂。
但是,在CSS的世界里,居然有类似的“以数量取胜”有趣现象。比方说,这里要展示的:256个级联class选择器 击败 1个id选择器的有趣故事……

阅读全文…

精简高效的CSS命名准则/方法

2010年09月12日,星期日

老子有云:“天下万物生于有,有生于无”。具体解释就是:天下万物都是由看得见的具体事物(“有”)产生的,而看得见的具体事物(“有”)又是由看不见的,无形无状的东西(“无”)产生的,这个看不见的“无”也就是“道”,或叫做“根”、“母”。

我们看武侠片,经常听到“无招胜有招”这句话,这也是道家“无”之思想之体现。因为你心中没有招式,你才能有无限的可能,生成其他的招式以克敌,即所谓以不变应万变;相反,如果你心中牢记一套“华山剑法”,当你与人交手时,势必按照此套路走,要是遇到相克之剑法,结局就是一败涂地。“无招”是一种境界,是你功夫修炼到一定程度才能领悟到的。

可见,要想发挥更大,就需要“无”,把一些“限制的东西”通通去掉。没有限制才能发挥出最大的潜能。站在最简单,最原始的那个点上,你才能自由驰骋,应变自如。

阅读全文…

CSS+JavaScript实现页面不同布局的切换

2010年03月25日,星期四

我们平时使用windows操作系统,应该见过文件才查看功能,我们可以选择“平铺”、“图标”、“列表”、“详细信息”等,这是一个不错的功能,可以让用户自定义一些自己喜欢的偏好的显示方式,我们再web页面上,同样可以做。这可能说是一种提高用户体验的方法。
本文就将展示如何在web页面上轻松的实现布局的切换,查看方式的转换。提供详尽的插图,提供详尽的demo,以及对应的代码,希望能对您有所帮助。

阅读全文…

jQuery之addClasas与removeClass使用实例

2009年10月27日,星期二


上图为人人网好友分组功能模块,我用firebug对其高度进行了改动,所以这里显示的高度比实际的低。图示效果源自facebook,结构比较精细,体验上佳,图中的深色表选中状态。
本文就将演示如何使用jQuery的addClasas与removeClass轻松实现上面很赞的样式效果。本文实例效果包括两个主要部分,一是单击单个好友样式的切换,还有一个就是单击“已选”“未选”文字选项卡按钮后的样式的筛选,均使用ddClasas与removeClass实现。
提供完整的css样式以及JavaScript代码,提供demo实例演示页面和源文件下载。希望对您有所帮助。

阅读全文…