来由

在一些插件中经常看到， 在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. IO的生命周期

    ● 将来自cache的数据封装成bio submit_bh->submit_bh_wbc 此时IO还在fs层 ● 进入block IO层 submit_bh_wbc->submit_io- ...

  2. [ZZ] D3D中的模板缓存（3）

    http://www.cppblog.com/lovedday/archive/2008/03/25/45334.html http://www.cppblog.com/lovedday/ D3D中的 ...

  3. Mininet实验 基于Mininet实现BGP路径挟持攻击实验

    参考:基于Mininet实现BGP路径挟持攻击实验 实验目的: 掌握如何mininet内模拟AS. 掌握BGP路径挟持的原理和分析过程. 实验原理: 互联网是由相互连接的自治系统AS组成的,通过一个通 ...

  4. PHP获取当前时间、时间戳的各种格式写法汇总[日期时间]（转）

    今天写下PHP中,如何通过各种方法 获取当前系统时间.时间戳,并备注各种格式的含义,可灵活变通.1.获取当前时间方法date()很简单,这就是获取时间的方法,格式为:date($format, $ti ...

  5. Oracle存储过程基本语法 存储过程

    Oracle存储过程基本语法 存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 IS 3 BEGIN 4 NULL; 5 END; 行1: CREATE OR RE ...

  6. 我的Mac软件集

    哥总算用上了mac,走上了小康了 phpstorm:个人工作中最常用的软件了 pycharm:这个写python的,和phpstorm是一家开发的 sourceTree:git 可视化工具 xcode ...

  7. 那些证书相关的玩意儿(SSL,X.509,PEM,DER,CRT,CER,KEY,CSR,P12等)[zz]

    openssl dgst –sign privatekey.pem –sha1 –keyform PEM –c c:\server.pem 将文件用sha1摘要,并用privatekey.pem中的私 ...

  8. nginx博客系统（内含nginx图片缩略图处理代码，不错）

    一直以来都在Qzone.CSDN等上面写博客,偶尔有些想法就在Paas平台上搭建服务,新浪和曾经的google上都用过其appengine.可是在别人的平台上写东西,总归有些不方便,有受制于人的感觉. ...

  9. mssql 常用SQL语句或函数

    按 OrderDate 的顺序计算 SalesOrderHeader 表中所有行的行号,并只返回行 50 到 60(含). WITH OrderedOrders AS ( SELECT SalesOr ...

  10. Linq&Lumda---LINQ to DataSet的DataTable操作

    1. DataTable读取列表 DataSet ds = new DataSet();// 省略ds的Fill代码DataTable products = ds.Tables["Produ ...