标签归档：jquery

RSS feed of jquery

高效jQuery选择器的5个技巧
作者是 发布于 在 JavaScript.

顾名思义，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元素集合对比
作者是 发布于 在 JavaScript.

通过调用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 ...

继续阅读

使用jQuery Spinner替代HTML5标签 input[type=number]
作者是 发布于 在 JavaScript.

jQuery UI中提供的Spinner组件可以将input[type=text]文本框转换为一个数字输入框，类似于HTML中新增的input[type=number]，并支持使用键盘上下键以及鼠标滚轮对其中的数值进行更改。

注：鼠标滚轮事件缺省只支持部分浏览器，可使用jQuery Mousewheel插件添加跨浏览器的鼠标滚轮事件支持

jQuery UI Spinner实例如下：

上例代码如下：

<script src="https://libs.baidu.com/jqueryui/1.10.4/jquery-ui.min.css"></script> ...

继续阅读

jQuery UI百分比滚动条联动
作者是 发布于 在 JavaScript.

原文链接：http://jsfiddle.net/9azJG/2/

下例用jQuery UI实现了5个百分比滚动条联动的效果

继续阅读