jQuery代码的14条改善技巧[译](5)
作者:暴风彬彬 来源:彬Go 时间:2009-12-02 10:02:00
12.学会使用自定义选择器
jQuery允许我们在css选择器的基础上定义自定义选择器来让我们的代码更简洁:
$.expr[':'].mycustomselector= function(element, index, meta, stack){
// element- DOM元素
// index - 堆栈中当前遍历的索引值
// meta - 关于你的选择器的数据元
// stack - 用于遍历所有元素的堆栈
// 包含当前元素则返回true
// 不包含当前元素则返回false
};
// 自定义选择器的应用:
$('.someClasses:test').doSomething();
下面让我们来看看一个小例子,我们通过使用自定义选择器来锁定含有”rel”属性的元素集:
$.expr[':'].withRel = function(element){
var $this = $(element);
//仅返回rel属性不为空的元素
return ($this.attr('rel') != '');
};
$(document).ready(function(){
//自定义选择器的使用很简单,它和其他选择器一样,返回一个元素包装集
//你可以为他使用格式方法,比如下面这样修改它的css样式
$('a:withRel').css('background-color', 'green');
});
<ul>
<li>
<a href="#">without rel</a>
</li>
<li>
<a rel="somerel" href="#">with rel</a>
</li>
<li>
<a rel="" href="#">without rel</a>
</li>
<li>
<a rel="nofollow" href="#">a link with rel</a>
</li>
</ul>
13.预加载图片
通常使用JavaScript来预加载图片是个相当不错的方法:
//定义预加载图片列表的函数(有参数)
jQuery.preloadImages = function(){
//遍历图片
for(var i = 0; i<arguments.length; i++){
jQuery("<img>").attr("src", arguments[i]);
}
}
// 你可以这样使用预加载函数
$.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");
14.将你的代码测试完好
jQuery有一个名为QUnit单元测试框架。编写测试很容易,它能让您可以放心地修改您的代码,并确保它仍然按预期工作。下面是如何工作的:
//将测试分成若干模块.
module("Module B");
test("some other test", function() {
//指定多少个判断语句需要加入测试中.
expect(2);
equals( true, false, "failing test" );
equals( true, true, "passing test" );
});
英文原文:More jQuery and General Javascript Tips to Improve Your Code
标签:jQuery,优化,代码,技巧,选择器
0
投稿
猜你喜欢
Python学习笔记(一)(基础入门之环境搭建)
2021-12-26 12:51:40
Python 标准库zipfile将文件夹加入压缩包的操作方法
2021-09-17 14:06:10
PyTorch线性回归和逻辑回归实战示例
2021-09-12 17:50:57
python文件编译为pyc后运行的实现步骤
2021-03-08 22:36:46
Windows上配置Emacs来开发Python及用Python扩展Emacs
2022-07-20 01:55:47
DW CS4初步试用感受
2008-05-30 12:17:00
python开发App基础操作API使用示例过程
2022-01-19 18:00:35
通过实例简单了解python yield使用方法
2023-03-07 23:41:02
如何正确处理数据库中的Null
2007-09-30 19:41:00
Joomla开启SEF的方法
2024-04-30 08:47:39
JS小游戏之象棋暗棋源码详解
2024-04-23 09:24:55
python使用tkinter实现简单计算器
2021-10-01 00:20:57
解决tensorflow模型参数保存和加载的问题
2022-07-19 17:44:00
c#实现数据库事务示例分享
2024-01-28 05:03:02
浅谈Keras中fit()和fit_generator()的区别及其参数的坑
2022-04-18 07:22:26
Pandas多列值合并成一列的实现
2023-02-13 08:39:44
php删除路径下的所有文件夹和文件的代码
2023-05-27 18:44:35
在Python中使用matplotlib模块绘制数据图的示例
2023-08-01 01:39:45
Python实现印章代码的算法解析
2023-10-14 15:18:24
Python中11种NumPy高级操作总结
2023-07-31 00:00:28