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

最新推荐文章于 2021-09-27 09:14:36 发布

amyloverice

最新推荐文章于 2021-09-27 09:14:36 发布

阅读量216

点赞数

分类专栏：前端

前端专栏收录该内容

56 篇文章

订阅专栏

本文总结了使用jQuery过程中的实用技巧，包括事件委托、元素存储、类检查、元素显示判断、checkbox属性处理、toggleClass使用、多属性过滤、数据存储、select选项处理、自定义方法、DOM操作优化等，旨在提高开发效率和代码性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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("失败回调，跑这里");
});