jquery常用片段以及性能优化总结

jquery常用片段以及性能优化总结

使用jquery也有一段时间了,每次都是碰到问题查询问题,有时候一个问题碰到好几次都需要去查询下,这样一来工作效率也有所下降,技术积累也谈不上,今天偶然看到某篇文章后,深受启发,决定总结总结自己写jquery所使用过的一些小技巧片段方便日后自己查询和复习。

采用事件委托的方式绑定事件

//给li绑定点击事件
$("#wrapper li").on("click",function(){
    alert($(this).index());
});
//如果li是后期通过数据交互动态添加的元素呢?上面这种方法显然就绑定不上了,
除非你在动态添加之后去绑定,其实有一个更加简单易懂的办法
//这个方法就是事件委托方式,不论后期动态添加多少次li都只绑定一次事件。
$(document).on("click",'#wrapper li',function(){
   alert($(this).index());
});

对于经常要获取的元素应该用变量存储

//对于多次要多次使用的元素,应该用变量保存起来,避免重复获取增大开销
function fn() {
    var $wrapper = $('#wrapper');
    $wrapper.css("background","red");
}
fn();

使用has()检查某个元素是否包含某个类

<ul id="wrapper">
    <li>
        <div class="mail"></div>
    </li>
    <li>2</li>
</ul>
//获取包含mail类的li元素
$('li').has(".mail").addClass("icon");

判断某个块是否显示的方法

if($("#main").is(':hidden')){
    console.log("目前是隐藏的");
}

checkbox中使用prop,attr的区别(针对jquery1.6+版本)

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
例如:
console.log($("#check_one").attr("checked"));//输出checked;
console.log($("#check_one").prop("checked"));//输出true;

console.log($("#check_two").attr("checked"));//输出undefined;
console.log($("#check_two").prop("checked"));//输出false;

尤其是checkbox这里踩过坑的同学应该要特别注意使用prop去获取值

toggleClass的使用方法

<button id="btn">点击</button>
<ul id="wrapper">
    <li>
        <div class="mail"></div>
    </li>
    <li>2</li>
</ul>
//意义:点击按钮切换wrapper上的show类
//非常适合做某个元素的显示和隐藏
$("#btn").on("click",function(){
    $('#wrapper').toggleClass("show");
});

使用多属性进行过滤

<input type="text" value="hello">
<input type="text" value="good">
//筛选type和value
$('input[type=text][value=hello]').val("world");

使用data在元素上面存储数据

$("#main").data("test",{"a":1,"b":2});
console.log($("#main").data("test"));//输出{a: 1, b: 2}
$("#main").removeData("test");

select中找到被选中的option

$("#main").find("option:selected").addClass("show");

扩展jquery的方法

jQuery.fn.showHide = function(){
   //直接在这里面书写逻辑代码
};
//最后直接这样调用即可
$("#main").showHide();

尽量使用find()查找子元素

$("#parent").find('li')这样选择子元素的方式比起其它的方式性能要高出许多,因为它会调用原生的getElementsByTagName之类的方法

尽量少改动DOM结构

操作DOM也是在所难免的,如果需要多次插入DOM元素的话,可以的话就把它合并,拼接后一次性插入。
var list = '';
for(var i=0;i<100;i++){
    list = '<li>'+i+'</li>';
}
$('ul').html(list);
//性能更加高的办法就是利用数组存储
var arr = [];
for(var i=0;i<100;i++){
    arr[i] = '<li>'+i+'</li>';
}
$('ul').html(arr.join());

正确处理循环

循环是非常耗时的操作,如果可以使用复杂选择器选择的话就尽量不使用循环,
使用循环尽量使用原生的for和while循环,比$.each性能高

使用deferred处理异步问题

var d = $.Deferred();
var wait = function(d){
    var task = function(){
        setTimeout(function(){
            console.log("业务逻辑代码");
            d.resolve();
        },3000);
    };
    task();
    return d.promise();
};
$.when(wait(d)).done(function(){
    console.log("成功回调,跑这里");
}).fail(function(){
    console.log("失败回调,跑这里");
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值