• 14个非常有用的jquery技巧,注意事项和最佳实践


    1. Methods Return the jQuery Object 通过方法返回Jquery对象实例

    jquery大多数方法返回的都是jquery对象,这非常的有用,而且jquery允许链式调用

    $someDiv.attr(‘class’, ’someClass’).hide().html(‘new stuff’);

    因为返回的总是jquery对象,所以我们有时可以移除不必要的代码。比如,考虑下面的代码:

    var someDiv = $(‘#someDiv’);
    someDiv.hide();

    上边的代码非常的好,但是你可以很容易的把两句合成一句,而得到相同的结果。如下所示:

    var someDiv = $(‘#someDiv’).hide();

    通过这种方法我们同样可以隐藏someDiv元素,返回的是someDiv变量的引用

    2. The Find Selector使用find来查找

    jQuery有非常强大的Sizzle引擎来实现选择器,只要你写的选择器不是很差,jQuery都会做出优化,你一般不必担心太多。然而,我们可以稍微做一些改进,这可以使你的脚本性能略有提高。

    一般在jquery中能不要用Sizzle引擎就不要用,当然只要有可能,就尽量使用.find()方法。当然有些时候这是不可能的。

    // Fine in modern browsers, though Sizzle does begin “running”
    $(‘#someDiv p.someClass’).hide();
    // Better for all browsers, and Sizzle never inits.
    $(‘#someDiv’).find(‘p.someClass’).hide();

    上面两行代码执行的结果是完全一样的,但是下面一句的效率要比上面一句的执行效率高。

    现代浏览器(除IE6,IE7)都有QuerySelectorAll支持,能允许你像CSS选择器一样获取对象,而不需要用到jQuery中的Sizzle引擎。jQuery会在使用自己的引擎之前检查是否存在这个函数。

    对于IE6/IE7,就需要jQuery使用Sizzle引擎,jQuery会把你的选择器转化成一个数组,并且通过从右往左来迭代匹配。通过正则 表达式匹配页面每一个元素,所以你的可以尽量减少选择器的层级,尽可能的使用最右边的选择器,比如使用ID选择器等;这个规则和我们的css的查找规则是 一致的,如果你要优化css选择器也要知道这个规则:从右往左来迭代匹配!

    尺度把握:
    1.保持代码简单
    2.尽可能的使用find()查找,使用浏览器的原生查找函数
    3.尽可能使用最右边的选择器,比如ID等
    Context Instead?
    我们还可以给你的选择器添加一个选择环境(限制范围)。例如:

    $(‘.someElements’, ‘#someContainer’).hide();

    这段代码用来获取#someContainer对象下的所有someElements类对象。这种方法可以有效地限制DOM遍历的范围,可是在jquery的实现机制用用的是find()方法。
    $(‘#someContainer’)
    .find(‘.someElements’)
    .hide();
    证明:
    // HANDLE: $(expr, context)
    // (which is just equivalent to: $(context).find(expr)
    } else {
    return jQuery( context ).find( selector );
    }

    3. Don’t Abuse $(this) 不要滥用$(this)

    如果我们不知道DOM各种各样的属性和方法,就会滥用jquery对象
    $(‘#someAnchor’).click(function() {
    alert( $(this).attr(‘id’) );
    });

    $(‘#someAnchor’).click(function() {
    alert( this.id );
    });
    上边两段代码,下边的方法性能会更好。

    请注意,下面的三个属性应该是经常通过jquery访问的,”src”,”href”和”style”。这些属性在旧版本的IE浏览器当中需要使用getAttribute方法来实现。

    证明:
    // jQuery Source
    var rspecialurl = /href|src|style/;
    // …
    var special = rspecialurl.test( name );
    // …
    var attr = !jQuery.support.hrefNormalized && notxml && special ?
    // Some attributes require a special call on IE
    elem.getAttribute( name, 2 ) :
    elem.getAttribute( name );
    更糟糕的是反复的查询DOM和创建jquery对象。例如:
    $(‘#elem’).hide();
    $(‘#elem’).html(‘bla’);
    $(‘#elem’).otherStuff();
    希望你知道这段代码的效率是多么的低和改进它的方法,如果不知道,没有关系,我们这里可以使用jquery链或者缓存#elem对象。

    // This works better
    $(‘#elem’).hide().html(‘bla’).otherStuff();

    // Or this, if you prefer for some reason.
    var elem = $(‘#elem’);
    elem.hide();
    elem.html(‘bla’);
    elem.otherStuff();

    4. jQuery’s Shorthand Ready Methodready的简写形式

    对jquery来说,监听document是否加载完毕非常容易。
    $(document).ready(function() {
    // let’s get up in heeya
    });
    虽然,这是非常可能的,但是你可能碰到一个不同的,更令人困惑的功能来包装。
    $(function() {
    // let’s get up in heeya
    });
    虽然后者的可读性不如前者,但是却是完全相同的。可以查看一下jquery的源代码
    // HANDLE: $(function)
    // Shortcut for document ready
    if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
    }

    5.Keep your Code Safe 让你的代码安全

    方法1(使用noConflict)
    var j = jQuery.noConflict();
    j(’#someDiv’).hide();
    // The line below will reference some other library’s $ function.
    $(’someDiv’).style.display = ‘none’;
    方法2(传入参数Jquery)
    (function($) {
    // Within this function, $ will always refer to jQuery
    })(jQuery);
    方法3(通过ready方法)
    jQuery(document).ready(function($) {
    // $ refers to jQuery
    });

    6.Be Smart 简化代码

    用each代替for,使用数组保存临时变量,使用document fragment,这其实和写原生的Javascript需要注意的一样。

    7.AJAX Methods 使用Ajax的方法

    Jquery提供了get getJSON post ajax这些有用的ajax方法

    8.Accessing Native Properties and Methods 访问原生的属性和方法

    比如获取元素id的方法有
    // OPTION 1 – Use jQuery
    var id = $(’#someAnchor’).attr(’id’);
    // OPTION 2 – Access the DOM element
    var id = $(’#someAnchor’)[0].id;
    // OPTION 3 – Use jQuery’s get method
    var id = $(’#someAnchor’).get(0).id;
    // OPTION 3b – Don’t pass an index to get
    anchorsArray = $(’.someAnchors’).get();
    var thirdId = anchorsArray[2].id;

    9.Detect AJAX Requests with PHP 使用PHP来检查Ajax请求

    通过使用xhr.setRequestHeader(”X-Requested-With”, “XMLHttpRequest”); 服务器端如PHP就可以通过
    function isXhr() {
    return $_SERVER['HTTP_X_REQUESTED_WITH'] === ‘XMLHttpRequest’;
    }
    来检查是不是Ajax请求,在一些禁用Javascript的情况下可能会用到

    10.jQuery and $ Jquery和$的关系

    在Jquery代码的最下面,可以看到下面的代码
    window.jQuery = window.$ = jQuery; $其实就是Jquery的一个shortcut

    11.Conditionally Loading jQuery 条件加载Jquery



    如果CDN没有下载到Jquery,则从本地读取

    12.jQuery Filters Jquery Filters


    注:$.expr[":"]等价于$.expr.filters

    13.A Single Hover Function hover方法

    $(’#someElement’).hover(function() {
    //在这里可以使用toggle方法来实现滑过和滑出的效果
    });

    14.Passing an Attribute Object 传入属性对象

    当创建一个元素的时候,Jquery1.4可以传入一个属性对象
    $(’’, {
    id : ’someId’,
    className : ’someClass’,
    href : ’somePath.html’
    });
    甚至是Jquery指定的属性或事件如text, click

    连接:http://www.iciniao.com/?p=285 ,

    转载请保留.

  • 相关阅读:
    vue中处理过内存泄露处理方法
    Nuxt2.x项目实战相关问题记录
    Android 7.0+模拟器Fiddler抓包详细教程 fiddler443问题解决办法
    inspeckage
    yile接口
    入坑Vue(二)Node.js环境安装
    入坑Vue(一)简介
    入库Vue(三) vuecli全局安装,创建Vue项目
    入坑vue(三)安装VSCode
    入坑Vue(四) 引用element ui组件,配置登录
  • 原文地址:https://www.cnblogs.com/leelike/p/1940465.html
Copyright © 2020-2023  润新知