来由

在一些插件中经常看到， 在class属性中出现一些跟样式无关的属性值， 这些值在css样式中没有对应定义， 但是在js中会根据这个值来给dom对象添加特殊的行为， 例如：

jquery validate：

from http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html

<p>
<label for="email">E-Mail</label>
<input id="email" name="email" class="required email" />
</p>

jquery easy ui

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">

为什么要在class中添加非样式内容?

原因

1、 借用class的含义， 类的含义， 标明此dom对象 是属于某一类事物， 事实上html标准上确实有此说法。

http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.5.2

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:

  • As a style sheet selector (when an author wishes to assign style information to a set of elements).
  • For general purpose processing by user agents.

2、 class 索引速度比较快。

关于class索引速度实验

关于使用class索引， 与其对应的可以使用attribute索引， 可以进行这两类方法的对比。

使用 firefox 测试， jquery语法， selector 包括下面四种形式：

.selector

[selector=’selector’]

[class*=’selector’]

[selecotr*=’selector’]

code: 生成500个li对象，填充到#test中， 对于四种方式分别执行1000此索引。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>TestHTML</title>

<script src="jquery.js" type="text/javascript"></script>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

</head>

<body>

<div id="TimeScalar" style="width:0;height:0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 10px solid #cc0606;">

</div>

<ul>

<li>

<ul id="test">

<li><a href="">first</a></li>

<li><a href="">second</a></li>

<li><a href="">third</a></li>

<li><a href="">forth</a></li>

</ul>

lllll

</li>

<li>ooooo</li>

</ul>

<script>

var i = 500;

var ul = $("#test");

ul.html('');

while (i > 0) {

ul.append("<li component=\"list-item my-other-class\" component1=\"list-item\" class=\"list-item my-other-class\">List Item " + i.toString() + "</li>");

i -= 1;

}

/* */

var starttime = (new Date()).getTime();

for (var i = 0; i < 1000; i++) {

$("[component*='list-item']");

};

var endtime = (new Date()).getTime();

console.log("attr selector consume time ="+(endtime - starttime))

var starttime = (new Date()).getTime();

for (var i = 0; i < 1000; i++) {

$("[component1='list-item']");

};

var endtime = (new Date()).getTime();

console.log("attr1 selector consume time ="+(endtime - starttime))

var starttime = (new Date()).getTime();

for (var i = 0; i < 1000; i++) {

$("[class*='list-item']");

};

var endtime = (new Date()).getTime();

console.log("class selector consume time ="+(endtime - starttime))

var starttime = (new Date()).getTime();

for (var i = 0; i < 1000; i++) {

$(".list-item");

};

var endtime = (new Date()).getTime();

console.log("class formal selector consume time ="+(endtime - starttime))

</script>

</body>

</html>

结果：

发现， .selector 方式最快， 对应结果最后一个 46ms

其次是， [selector=’selector’],  对应结果是 92ms

然后是， [selector*=’selector’], 对应结果是 135ms

最后是， [class*=’selector’], 对应结果是 153ms

attr selector consume time =135

test.html (第 54 行)

attr1 selector consume time =92

test.html (第 61 行)

class selector consume time =153

test.html (第 68 行)

class formal selector consume time =46

所以我们看到 .selector 是很有优势的， 所以各种插件有在class中写非样式标签的写法。

同时，我们也要修正对class的认识， 其并不是仅仅是只能容纳 stylesheet中，定义好的样式标签名。

补充实验： [component1] 耗时76秒。 也没有.selector快。

class属性中为什会添加非样式的属性值？的更多相关文章

  1. JQuery中对option的添加、删除、取值

    jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...});    //为Selec ...

  2. JS 对html标签的属性的干预以及JS 对CSS 样式表属性的干预

      -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写   以下是一段js 作用于 css 的 href的 代码   <link id="l1" rel= ...

  3. Oracle复合B*tree索引branch block内是否包含非先导列键值？

    好久不碰数据库底层细节的东西,前几天,一个小家伙跑来找我,非要说复合b*tree index branch block中只包含先导列键值信息,并不包含非先导列键值信息,而且还dump了branch b ...

  4. ARC工程中添加非ARC文件

    转载自:http://blog.csdn.net/zhenweicao/article/details/16988543 分类: IOS2013-11-27 17:02 626人阅读 评论(0) 收藏 ...

  5. 为SQL Server表中的列添加/修改/删除注释属性（sp_addextendedproperty、sp_updateextendedproperty、sp_dropextendedproperty）

    本篇基本完全参考:sql--sp_addextendedproperty和sp_updateextendedproperty (Transact-SQL) 三个存储过程用法一样,以sp_addexte ...

  6. 将src非空的属性注入到des中

    package lizikj.bigwheel.common.vo.merchandise.util; import java.lang.reflect.Field; import lizikj.bi ...

  7. js中 给json对象添加属性和json数组添加元素

    js中 给json对象添加新的属性 比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre.做法如下: var obj={ &quo ...

  8. eclipse 中main()函数中的String[] args如何使用？通过String[] args验证账号密码的登录类？静态的主方法怎样才能调用非static的方法——通过生成对象？在类中制作一个方法——能够修改对象的属性值？

    eclipse 中main()函数中的String[] args如何使用? 右击你的项目,选择run as中选择 run configuration,选择arguments总的program argu ...

  9. ClientDataSet中修改，删除，添加数据和Delta属性

    ClientDataSet中使用Post提交变更的数据时,实际上并没有更新到后端数据库中,而是提交到了由DataSnap管理的数据缓冲区中.当使用了ClientDataSet.ApplyUpDates ...

随机推荐

  1. HDU 2089 数位dp入门

    开始学习数位dp...一道昨天看过代码思想的题今天打了近两个小时..最后还是看了别人的代码找bug...(丢丢) 传说院赛要取消 ? ... 这么菜不出去丢人也好吧~ #include<stdi ...

  2. POJ 1185 经典状压dp

    做了很久的题 有注释 #include<stdio.h> #include<string.h> #include<algorithm> #include<ma ...

  3. CodeForces 621C 数学概率期望计算

    昨天训练赛的题..比划了好久才想出来什么意思 之前想的是暴力for循环求出来然后储存数组 后来又想了想 自己萌的可以.. 思路就是求出来每个人与他的右边的人在一起能拿钱的概率(V(或)的关系)然后*2 ...

  4. 从个人的角度谈谈本次GNTC大会的收获

    GNTC资料:from sdnlab 从个人的角度谈谈本次大会的收获 从本次大会的主题演讲来看,目前SDN.NFV的最前沿已经不再像五年前持观望态度以及探讨,各大运营商.各大厂商已经将SDN.NFV具 ...

  5. redis列表list

    Redis Rpush 命令  Redis 列表(List) Redis Rpush 命令用于将一个或多个值插入到列表的尾部(最右边). 如果列表不存在,一个空列表会被创建并执行 RPUSH 操作. ...

  6. simplify the design of the hardware forming the interface between the processor and thememory system

    Computer Systems A Programmer's Perspective Second Edition Many computer systems place restrictions ...

  7. android studio 出错

    http://blog.csdn.net/dhx20022889/article/details/44919905

  8. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  9. 【转】Unity3D的输入（Input）——键盘和鼠标

    http://blog.csdn.net/lingyun_blog/article/details/41451565 Unity3D使用input类控制用户的输入,输入包括了用户键盘,鼠标,触摸,重力 ...

  10. jsmooth 中文乱码

    为了一个问题 语言国际国际化  测试了这么多回  ,真佩服自己 jsmooth 中文乱码 语言乱码 的解决办法 : 需要在“JVM” 的参数 中填入一项 : user.language=en  而不是 ...