了解jQuery技巧来提高你的代码(个人觉得那个j(3)


$.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 href="#">with rel</a>
</li>
<li>
<a href="#">without rel</a>
</li>
<li>
<a 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" );
});

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjgsp.html