了解jQuery技巧来提高你的代码

2020-05-24 21:18:57易采站长站整理

$(‘.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单元测试框架。编写测试很容易,它能让您可以放心地修改您的代码,并确保它仍然按预期工作。下面是如何工作的:

//将测试分成若干模块.