更高效的使用JQuery 这里总结了8个小技巧

1、DOM遍历是昂贵的，将变量缓存起来。

代码如下:

//不推荐
var h = $('#ele').height();
$('#ele').css('height', h-20);

代码如下:

//推荐
var $ele = $('#ele');
var h = $ele.height();
$ele.css('height',h-20);

2、优化选择符。

代码如下:

//不推荐
$('div#myid')

代码如下:

//推荐
$('#myid')

3、避免隐式通用选择符。

代码如下:

//不推荐
$('.someclass :radio')

代码如下:

//推荐
$('.someclass input:radio')

4、避免通用选择符。

代码如下:

//不推荐
$('.container > *')

代码如下:

//推荐
$('.container').children()

5、尽可能保持代码简洁。

代码如下:

//不推荐
if(arr.length > 0){}

代码如下:

//推荐  
if(arr.length){}

6、尽可能地合并函数。

代码如下:

//不推荐
$f.on("click", function(){
    $(this).css('border','1px solid red');
    $(this).css('color','blue');
});

代码如下:

//推荐
$f.on("click", function(){
    $(this).css({
        'border':'1px solid red',
        'color': 'blue'
    });
});

7、尽可能使用链式操作。

代码如下:

//不推荐
$ele.html();
$ele.on("click",function(){});
$ele.fadeIn('slow');

代码如下:

//推荐
$ele.on("click",function(){
  
}).fadeIn('slow').animate({height:'12px'},500);

8、对DOM元素作大量操作，先分离在追加

代码如下:

//不推荐
var $container = $('#somecontainer');
var $ele = $container.first();
.......一系列复杂操作

代码如下:

//推荐
var $container = $('#somecontainer');
var $ele = $container.first().detach();
.......一系列复杂操作
$container.append($ele);

赞 (0)

相关推荐

  • jQuery中bind()方法用法实例

    本文实例讲述了jQuery中bind()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素的特定事件绑定事件处理方法. 在语法上bind()方法和one()方法是一样的,它们的不同在于绑定的处理方法的执行次数. 语法结构一: 复制代码 代码如下: $(selector).bind(type,data,function) 参数列表: 参数 描述 type 定义绑定到匹配元素中的事件类型. 如果有多个事件使用空格分隔. data 可选.传递给事件对象的额外数据对象. function

  • jQuery使用技巧简单汇总

    1.使用最新的jquery版本 觉得这个建议有待商榷,虽然越新的jquery版本性能上更加优秀,但是有些方法的变迁还是会导致一些bug,比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了.建议是旧的页面的jquery升级需谨慎,新项目可以大胆的使用jquery新版本. 还有个建议是使用google的cdn上的jquery文件,加载速度更快.猛击Google Libraries API 进入查看. 复制代码 代码如下: <!-- Include a specific version of

  • jQuery的bind()方法使用详解

    bind()方法用法详解: 此方法是使用比较频繁的方法之一,虽然在API手册上有着对方法的介绍,但是由于语言简短,例子不够详细,可能会造成不能够完全准确的掌握bind()方法的使用,下面就结合实例介绍一下此方法的使用. 语法格式: $(selector).bind(type,[data],function(eventObject)) 此方法可以为所有匹配元素的特定事件绑定事件处理函数,例如: <!DOCTYPE html> <html> <head> <meta

  • jquery中关于bind()方法的使用技巧分享

    .bind()方法可使用.on()方法来代替 on()方法提高代码易读性,如下 $("input").bind("click", { foo: "hello" }, handler); $("input").on("click", { foo: "hello" }, handler); bind()绑定事件的时候,这些元素必须已经存在,而on()可以处理类似于代理这样的东东,也就是说不存

  • jQuery中unbind()方法用法实例

    本文实例讲述了jQuery中unbind()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除被选元素的事件处理程序,包括通过bind()方法注册的自定义事件. unbind()方法如果不带参数,则删除所有绑定的事件. 此方法如果提供了事件类型作为参数,则只删除该类型的绑定事件. 如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 语法结构: 复制代码 代码如下: $(selector).unbind(type,function) 参数列表: 参数 描述

  • Jquery使用小技巧汇总

    下面列出了一些Jquery使用技巧.比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元素是否为空.替换元素.延迟加载.验证元素是否存在于Jquery集合中.使DIV可点击.克隆对象.使元素居中.计算元素个数.使用Google主机上的Jquery类库.禁用Jquery效果.解决Jquery类库与其他Javascript类库冲突问题. 1. 禁止右键点击 $(document).ready

  • JQuery中Bind()事件用法分析

    本文实例分析了JQuery中Bind()事件用法.分享给大家供大家参考.具体分析如下: 我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件方法的行为.期中它的三个参数的意义分别如下: eventType是一个字符串类型的事件类型,就是你所需要绑定的事件.这类类型可以包括如下:blur, focus, focusin, focusout, load, re

  • jQuery 常见开发使用技巧总结

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge

  • jQuery on()方法使用技巧详解

    jQuery on()方法是官方推荐的绑定事件的一个方法. 复制代码 代码如下: $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. 复制代码 代码如下: bind() $("p").bind("click",function(){ alert("The paragraph was clicked."); }); $("p").on(

  • jQuery unbind()方法实例详解

    jQuery unbind()方法实例详解

    本文实例讲述了jQuery unbind()方法使用方法.分享给大家供大家参考,具体如下: jQuery 中的 unbind() 方法是 bind() 方法的反向操作,从每一个匹配的元素中删除绑定的事件. 语法结构: 复制代码 代码如下: unbind([type][, data]); type是事件类型,data为将要移除的事件.具体说明如下: 1.如果没有参数,则删除所有的绑定事件: 2.如果提供了事件类型(type)作为参数,则只删除该类型的绑定事件: 3.如果把在绑定时传递的处理函数作为

随机推荐