归档 2015年10月

高效jQuery选择器的5个技巧

顾名思义,jQuery专注于查询(queries)。库的核心允许你使用CSS选择器语法,以及通过在集合上执行函数,来查找DOM元素。

jQuery使用浏览器原生API方法获取DOM集合。现代浏览器支持getElementsByClassName, querySelector以及querySelectorAll(可以解析CSS语法)。然而,老版本的浏览器可能只提供getElementById以及getElementByTagName。在最坏的情况下,jQuery的Sizzle引擎必须解析选择器字符串来匹配元素。

下面是可以帮助你优化jQuery选择器的5点提示:

1. 尽量使用ID

HTML ID属性在每一个页面上都是唯一的,并且即使老版本的浏览器也可以非常迅速地定位一个元素:

$("#myelement");

2. 避免只使用类名称

下面的类选择器在现代浏览器中执行迅速:

$(".myclass");

不幸的是,在老版本的浏览器,比如IE6/7和Firefox 2,jQuery必须检查页面上的每一个元素来确定“myclass”是否被元素所包含。

如果通过标签名加以限定可以让选择器更加的高效,例如:

$("div.myclass");

jQuery现在可以将搜索范围限定在DIV元素。

3. 保持简单!

避免过于复杂的选择器。除非你要查找一个极其复杂的HTML文档 ...

继续阅读

jQuery与原生JavaScript选择HTML元素集合对比

通过调用document.getElementsByTagName, document.getElementsByName以及document.getElementsByClassName(部分浏览器不支持),可以返回HTMLCollection对象。表面上,它们与数组很类似,因为它们都包含length属性并且元素都可以通过[index]方式访问。然而,实际上它们并不是数组;诸如push(), slice()与sort()之类的方法不受支持。

考虑下面的HTML文档:

<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</body>

我们使用原生JavaScript的getElementsByTagName方法与jQuery选择器分别获取每一个paragraph节点:

var pCollection = document.getElementsByTagName("p");
var pQuery = $("p ...

继续阅读

IE8标准模式table-layout:fixed隐藏列宽度自动调整

在IE8浏览器的标准模式下,样式设置为table-layout:fixed的表格中的列隐藏之后,表格的宽度并不会自动resize,table中各th, td元素宽度保持不变。

而在IE7,以及chrome、firefox等现代浏览器中,表格中各列的宽度会自动重新调整。

一个简单的针对IE8浏览器的问题解决方案如下:

table.style.display = "inline-table";
window.setTimeout(function(){table.style.display = "";},0);

如果使用jQuery,可以通过下面的方式判断当前浏览器是否为IE8:

jQuery.browser.version == 8.0

继续阅读

每日归档

上个月

下个月

归档