您的位置：首页 > Web前端 > CSS

class属性中为什会添加非样式的属性值？

2015-09-06 23:19 597 查看

来由

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

jquery validate：

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

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快。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航