搜索

jQuery中的39个技巧

web前端开发

共 9044字，需浏览 19分钟

 ·

2020-12-23 11:20

来源 | http://www.fly63.com/article/detial/8896


1、当文档文档就绪时执行JavaScript代码

我们为什么使用jQuery库呢？原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行。

2、使用路线

3、使用JavaScript中的AND技巧

使用&&操作符的特点是如果操作符左边的表达式是false，那么它就不会再判断操作符右边的表达式了。所以：
// Instead of writing this:if($('#elem').length){    // do something}
// You can write this:
$('#elem').length && log("doing something");

4、is（）方法比你想象的更为强大

下面举几个例子，我们先写一个ID为ELEM的DIV的.js代码如下：

// First, cache the element into a variable:var elem = $('#elem');
// Is this a div?elem.is('div') && log("it's a div");
// Does it have the bigbox class?elem.is('.bigbox') && log("it has the bigbox class!");
// Is it visible? (we are hiding it in this example)elem.is(':not(:visible)') && log("it is hidden!");
// Animatingelem.animate({'width':200},1);
// is it animated?elem.is(':animated') && log("it is animated!");

其中判断是否为动画我觉得非常不错。

5、判断你的网页一共有多少元素

通过使用$（“ *”）。length（）；方法可以判断网页的元素数量。

// How many elements does your page have?log('This page has ' + $('*').length + ' elements!');

6、使用length（）属性很笨重，下面我们使用exist（）方法

/ Old waylog($('#elem').length == 1 ? "exists!" : "doesn't exist!");
// Trickshot:
jQuery.fn.exists = function(){ return this.length > 0; }
log($('#elem').exists() ? "exists!" : "doesn't exist!");

7、jQuery方法$（）实际上是拥有两个参数的

你知道第二个参数的作用吗？

// Select an element. The second argument is context to limit the search// You can use a selector, jQuery object or dom element
$('li','#firstList').each(function(){    log($(this).html());});
log('-----');
// Create an element. The second argument is an// object with jQuery methods to be called
var div = $('
',{    "class": "bigBlue",    "css": {        "background-color":"purple"    },    "width" : 20,    "height": 20,    "animate" : {   // You can use any jQuery method as a property!        "width": 200,        "height":50    }});
div.appendTo('#result');

8、使用jQuery我们可以判断一个链接是否是外部的，并来添加一个图标在非外部链接中，并确定打开方式

这里用到了hostname属性。


// Loop through all the links$('#links a').each(function(){
    if(this.hostname != location.hostname){        // The link is external        $(this).append('')               .attr('target','_blank');    }
});

9、jQuery中的end（）方法可以使你的jQuery链更加高效

     
  •  
       
    • No
      •  
    • No
      •  
    • No
      •  
     
    •  
// Here is how it is used:
var breakfast = $('#meals .breakfast');
breakfast.find('.eggs').text('Yes')                      .end() // back to breakfast                      .find('.toast').text('Yes')                      .end()                      .find('.juice').toggleClass('juice coffee').text('Yes');
breakfast.find('li').each(function(){    log(this.className + ': ' + this.textContent)});

10、也许你希望你的网络应用感觉更像原生的，那么你可以阻止contextmenu替换事件。

11、一些站点可能导致你的网页在一个酒吧下面

即我们所看到的在下面的网页是iframe标签中的我们可以这样解决。

// Here is how it is used:
if(window != window.top){    window.top.location = window.location;}else{    alert('This page is not displayed in a frame. Open 011.html to see it in action.');}

12、你的内联样式表并非被设置为不可改变的

如下：

// Make the stylesheet visible and editable$('#regular-style-block').css({'display':'block', 'white-space':'pre'})                         .attr('contentEditable',true);

这样即可改变内联样式了。

13、有时候我们不希望网页的某些部分内容被选择替换复制这种事情

我们可以这么做：

In certain situations you might want to prevent text on the page from being selectable. Try selecting this text and hit view source to see how it is done.

这样，内容就不能被选择啦。

14、从CDN中约会jQuery，这样的方法可以提高我们网站的性能，并且约会最新的版本也是一个不错的主意。

下面会介绍几种不同的方法。

15、保证最小的DOM操作

我们知道js操作DOM是非常浪费资源的，我们可以看看下面的例子。

CODE// Bad//var elem = $('#elem');//for(var i = 0; i < 100; i++){//    elem.append('
  • element '+i+'
    • ');    //}
    // Goodvar elem = $('#elem'),    arr = [];
    for(var i = 0; i < 100; i++){    arr.push('
  • element '+i+'
    • ');    }
    elem.append(arr.join(''));

    16、更方便的分解URL

    也许你会使用正则表达式来解析网址，绝对绝对不是一种好的方法，我们可以借用a标签来实现它。

    // You want to parse this address into parts:var url = 'http://tutorialzine.com/books/jquery-trickshots?trick=12#comments';
    // The trickshot:var a = $('',{ href: url });
    log('Host name: ' + a.prop('hostname'));log('Path: ' + a.prop('pathname'));log('Query: ' + a.prop('search'));log('Protocol: ' + a.prop('protocol'));log('Hash: ' + a.prop('hash'));

    17、不要害怕使用vanilla.js

    jQuery背负的太多，这便是原因，你可以用一般的js。

    // Print the IDs of all LI items$('#colors li').each(function(){
        // Access the ID directly, instead    // of using jQuery's $(this).attr('id')
        log(this.id);
    });

    18、最优化你的选择器

    // Let's try some benchmarks!
    var iterations = 10000, i;
    timer('Fancy');
    for(i=0; i < iterations; i++){    // This falls back to a SLOW JavaScript dom traversal    $('#peanutButter div:first');}
    timer_result('Fancy');
    timer('Parent-child');
    for(i=0; i < iterations; i++){    // Better, but still slow    $('#peanutButter div');}
    timer_result('Parent-child');
    timer('Parent-child by class');
    for(i=0; i < iterations; i++){    // Some browsers are a bit faster on this one    $('#peanutButter .jellyTime')

    19、缓存你的选择器

    // Bad:// $('#pancakes li').eq(0).remove();// $('#pancakes li').eq(1).remove();// $('#pancakes li').eq(2).remove();
    // Good:var pancakes = $('#pancakes li');
    pancakes.eq(0).remove();pancakes.eq(1).remove();pancakes.eq(2).remove();
    // Alternatively:// pancakes.eq(0).remove().end()//           .eq(1).remove().end()//           .eq(2).remove().end();

    20、对于重复的函数只定义一次

    如果您追求代码的更高性能，那么当您设置事件监听程序时必须小心，只定义一次函数然后把它的名字作为事件处理程序传递是不错的方法。

    $(document).ready(function(){    function showMenu(){        alert('Showing menu!');        // Doing something complex here    }
        $('#menuButton').click(showMenu);    $('#menuLink').click(showMenu);
    });

    21、像对待相同一样地对待jQuery对象

    由于jQuery对象有索引值和长度，所以这意味着我们可以把对象当作普通的拆分处理。这样也会有更好的地性能。

    var arr = $('li'),    iterations = 100000;
    timer('Native Loop');
    for(var z=0;z
        var length = arr.length;    for(var i=0; i < length; i++){      arr[i];    }}timer_result('Native Loop');
    timer('jQuery Each');
    for(z=0;z
        arr.each(function(i, val) {      this;    });}timer_result('jQuery Each');

    22、当做复杂的修改时要分离元素

    修改一个dom元素要求网页重绘，这个代价是高昂的，所以如果你想要再提高性能，就可以尝试着当对一个元素进行大量修改时先从页面中分离这个元素，修改完之后再添加到页面。

    // Modifying in placevar elem = $('#elem');
    timer('In place');
    for(i=0; i < iterations; i++){
        elem.width(Math.round(100*Math.random()));    elem.height(Math.round(100*Math.random()));
    }
    timer_result('In place');
    var parent = elem.parent();
    // Detaching firsttimer('Detached');
    elem.detach();
    for(i=0; i < iterations; i++){
        elem.width(Math.round(100*Math.random()));    elem.height(Math.round(100*Math.random()));
    }
    elem.appendTo(parent);
    timer_result('Detached');

    23、不要一直等待load事件

    我们已经习惯了把我们所有的代码都放在ready的事件处理程序中，但是，如果你的html页面很庞大，decoration ready恐怕会被延迟了，所以对于一些我们不希望ready后才可以触发的事件可以放在html的head元素中。

    24、当使用js给多个元素添加样式时更好的做法是创建一个style元素

    我们之前提到过，操作dom是非常慢的，所以当添加多个元素的样式时创建一个style元素并添加到document中是更好的做法。

       
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  
    • Item
      •  

    var style = $('