jquery常用片段以及性能优化总结
2017-05-11 17:13
701 查看
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("失败回调,跑这里"); });
未完,边做边总结
相关文章推荐
- [转]Flex性能优化常用手法总结
- 性能优化总结:CPU和Load、NIO以及多线程
- Flex性能优化常用手法总结
- 谈谈jquery性能优化的常用策略
- JQuery常用功能的性能优化
- Flex 性能优化常用技巧总结
- 常用AS3性能优化总结
- JQuery常用功能的性能优化
- JQuery常用功能的性能优化
- Flex性能优化常用手法总结 转
- Flex性能优化常用手法总结
- Flex性能优化常用手法总结
- Flex性能优化常用手法总结
- 性能优化总结:CPU和Load、NIO以及多线程
- Flex 性能优化常用手法总结
- 性能优化总结:CPU和Load、NIO以及多线程
- jquery 性能优化的一些总结
- Flex性能优化常用手法总结
- JQuery常用功能的性能优化
- JQuery常用功能的性能优化