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技巧来提高你的代码 (彬Go)
本文链接:http://www.blueidea.com/tech/web/2009/7249.asp
出处:彬Go
责任编辑:bluehearts
上一页 jQuery代码的14条改善技巧 [4] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|