jQuery基本选择器选择元素使用介绍_H5之家 - 中国HTML5教程资源分享第一站

当前位置: 编程技术>WEB前端

本页文章导读:

jQuery使用技巧简单汇总 1.使用最新的jquery版本觉得这个建议有待商榷，虽然越新的jquery版本性能上更加优秀，但是有些方法的变迁还是会导致一些bug，比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了。建议是旧......

JQuery 图片的展开和伸缩实例讲解代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #img1 { width:400px; height: 400px; border: solid 1px #ccc; display:none; } </style> <script src="jquery-......

jQuery基本选择器选择元素使用介绍代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.基本选择器：是jQuery中使用最频繁的选择器，它由元素Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多......

最新IT科技资讯推荐:

[1]jQuery使用技巧简单汇总

来源: 互联网发布时间: 2013-12-24

1.使用最新的jquery版本
觉得这个建议有待商榷，虽然越新的jquery版本性能上更加优秀，但是有些方法的变迁还是会导致一些bug，比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了。建议是旧的页面的jquery升级需谨慎，新项目可以大胆的使用jquery新版本。

还有个建议是使用google的cdn上的jquery文件，加载速度更快。猛击Google Libraries API 进入查看。

代码如下:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

2.保持选择器的简单
这个建议明河非常赞同，有很多朋友不喜欢给元素增加样式或id，希望保持html的简洁，使用jquery强大的选择器去检索元素，这不是好的习惯。首先越复杂的选择器，遍历的效率越低，这是显而易见的，最高效率无疑是使用原生的getElementById()；其次，复杂的选择器将标签名称和层级结构固化在里面，假如你的html结构发生了改变，或标签发生了改变，都直接造成检索失败。

代码如下:

$('li[data-selected="true"] a') // Fancy, but slow
$('li.selected a') // Better
$('#elem') // Best

访问DOM，是javascript最耗资源和性能的部分，所以尽量避免复杂或重复的遍历DOM。
避免重复遍历DOM的方法就是将$()检索的元素存储到变量，比如下面的代码：

代码如下:

var buttons = $('#navigation a.button');

// 使用$前缀来标示jquery对象，是非常好的习惯，推荐使用。

代码如下:

var $buttons = $('#navigation a.button');
var $buttons = $('#navigation a.button');

jquery选择器支持大部分的css3伪类方法，像:visible, :hidden, :animated，虽然很便利，但请慎用，因为当你使用伪类选择器的时候，jQuery不得不使用querySelectorAll()，性能的损耗更大。

3.jQuery对象作为数组处理
jQuery对象定义了length属性，当使用数组的形式操作时候返回其实是DOM元素而不是子jQuery对象，比如下面代码。

代码如下:

// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');

// 遍历buttons对象

代码如下:

for(var i=0;i<buttons.length;i++){
console.log(buttons[i]); // 是DOM元素，而不是jQuery对象！
}

// We can even slice it:

代码如下:

var firstFour = buttons.slice(0,4);

根据实验，使用for或while循环，执行效率比$.each()来的高。详细测试可以看several times faster。
使用length属性来检查元素存在性：

代码如下:

if(buttons){ // This is always true
// Do something
}

if(buttons.length){ // True only if buttons contains elements
// Do something
}

4.selector属性
jQuery对象都带有一个selector属性，用于获取选择器名称，比如：

代码如下:

$('#container li:first-child').selector // #container li:first-child
$('#container li').filter(':first-child').selector // #container li.filter(:first-child)

留意第二行代码，selector返回的是获取的元素完整的选择器。
这个属性常用于编写jquery插件的时候。

5.创建一个空的jQuery对象
这种情况应用场景不多，当你需要先创建个空的jQuery对象，然后使用add()方法向此对象注入jQuery对象时会用到。

代码如下:

var container = $([]);
container.add(another_element);)

6.选择随机元素
应用场景不多，举个例子，现在你需要随机给li增加一个red的class。
需要扩展jquery的选择器，这段代码很好的演示了jQuery.expr的用法。

代码如下:

7.使用css钩子
jQuery.cssHooks是1.4.3新增的方法，用的不估计不多，当你定义新的CSS Hooks时实际上定义的是getter和setter方法，举个例子，border-radius这个圆角属性想要成功应用于firefox、webkit等浏览器，需要增加属性前缀，比如-moz-border-radius和-webkit-border-radius。你可以通过定义CSS Hooks将其封装成统一的接口borderRadius，而不是一一设置css属性。

代码如下: