class属性中为什会添加非样式的属性值?
来由
在一些插件中经常看到, 在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属性中为什会添加非样式的属性值?的更多相关文章
- JQuery中对option的添加、删除、取值
jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Selec ...
- JS 对html标签的属性的干预以及JS 对CSS 样式表属性的干预
-任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel= ...
- Oracle复合B*tree索引branch block内是否包含非先导列键值?
好久不碰数据库底层细节的东西,前几天,一个小家伙跑来找我,非要说复合b*tree index branch block中只包含先导列键值信息,并不包含非先导列键值信息,而且还dump了branch b ...
- ARC工程中添加非ARC文件
转载自:http://blog.csdn.net/zhenweicao/article/details/16988543 分类: IOS2013-11-27 17:02 626人阅读 评论(0) 收藏 ...
- 为SQL Server表中的列添加/修改/删除注释属性(sp_addextendedproperty、sp_updateextendedproperty、sp_dropextendedproperty)
本篇基本完全参考:sql--sp_addextendedproperty和sp_updateextendedproperty (Transact-SQL) 三个存储过程用法一样,以sp_addexte ...
- 将src非空的属性注入到des中
package lizikj.bigwheel.common.vo.merchandise.util; import java.lang.reflect.Field; import lizikj.bi ...
- js中 给json对象添加属性和json数组添加元素
js中 给json对象添加新的属性 比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre.做法如下: var obj={ &quo ...
- eclipse 中main()函数中的String[] args如何使用?通过String[] args验证账号密码的登录类?静态的主方法怎样才能调用非static的方法——通过生成对象?在类中制作一个方法——能够修改对象的属性值?
eclipse 中main()函数中的String[] args如何使用? 右击你的项目,选择run as中选择 run configuration,选择arguments总的program argu ...
- ClientDataSet中修改,删除,添加数据和Delta属性
ClientDataSet中使用Post提交变更的数据时,实际上并没有更新到后端数据库中,而是提交到了由DataSnap管理的数据缓冲区中.当使用了ClientDataSet.ApplyUpDates ...
随机推荐
- [学点经济]什么是SDR [the IMF's Special Drawing Rights (SDR) basket of currencies]
思考题: 1.什么是SDR?能否用通俗的语言说明. 2.加入SDR对中国有什么好处?能否举1-3个实例说明. 3.加入SDR有没有坏处?能否举例说明. 4.近期关于SDR的新闻有哪些?中国外国的例子都 ...
- PHP 错误与异常 笔记与总结(7)将错误日志以邮件方式发送
当系统发生了很严重的问题,需要立刻发送给管理员.可以通过 error_log() 将错误以邮件形式发送到邮箱. 在 php.ini 中设置: sendmail_from = 472323087@qq. ...
- OAuth2.0协议
简介 OAuth(Open Authorization),协议为用户资源的授权提供了一个安全的.开放而又简易的标准.与以往的授权方式不同之处是OAuth的授权不会使第三方触及到用户的帐号信息(如用户 ...
- MySQL出现大量unauthenticated user的问题
发现这算属MySQL的一个bug,不管连接是通过hosts还是ip的方式,MySQL都会对DNS做反查,IP到DNS,由于反查的接续速度过 慢(不管是不是isp提供的dns服务器的问题或者其他原因), ...
- 微博app中常用正则表达式
/* weibo.app 里面的正则,有兴趣的可以参考下: HTTP链接 (例如 http://www.weibo.com ): ([hH]ttp[s]{0,1})://[a-zA-Z0-9\.\-] ...
- 验证码 mewebstudio/captcha
composer require mews/captcha https://github.com/mewebstudio/captcha
- MetaWeblog 同时管理51cto,csdn,sina,163,oschina,cnblogs等博客
我们技术人一般都会有自己的一个博客,用于记录一些技术笔记,也期望自己的笔记文章可以让更多人知道. 如何让更多人知道自己的博客? 搜索引擎收录,用户通过关键词搜索可能会进入 内容运营,但是一般技术人为了 ...
- Python中布尔类型
我们已经了解了Python支持布尔类型的数据,布尔类型只有True和False两种值,但是布尔类型有以下几种运算:与运算:只有两个布尔值都为 True 时,计算结果才为 True.True and T ...
- BLE-NRF51822-实现简单扫描器
在sdk目录 XXX:\Keil_v5\ARM\Pack\NordicSemiconductor\nRF_Examples\9.0.0\ble_central 下有官方提供的主从连接的demo. 官 ...
- Celery - Best Practices
If you've worked with Django at some point you probably had the need for some background processing ...