缓存变量:DOM遍历是昂贵的,所以尽量将会重用的元素缓存。

$element = $('#element');
h = $element.height(); //缓存
$element.css('height',h-20);

如果你打算对DOM元素做大量操作(连续设置多个属性或css样式),建议首先分离元素然后在添加。

使用var与匈牙利命名法,且避免全局变量 ;  

优化选择符;避免多个ID选择符

ajax:

  • 使用相关函数:

    $("#file").on("click","button",function() {
    $.ajax("confirmation.html",{
    data: {"confNum":1234},
    success: function(res) {},
    error: function(req,errorType,errorMessage) {},
    timeout:3000,
    beforeSend: function() {
    $(".confirmation").addClass('is-loading');
    },
    complete: function() {
    $(".confirmation").removeClass("is-loading");
    }
    })
    });
  • 提交表单:
    $("form").on("submit",function(event) {
    event.preventDefault(); //submit will reflash the page
    var form = $(this);
    $.ajax("/book", {
    type: "POST",
    data: form.serialize(), //use this;
    success: function(result) {
    form.remove();
    $("#vacation").hide().html(result).fadeIn();
    }
    });
    });
  • 优化操作:
    $.ajax('/test.html')
    .done(function(res) {console.log(res,'done1');})
    .fail(function(res) {console.log(res,'fail');})
  • 要多个ajax共同使用的时候
    $.when($.ajax("test1.html"),$.ajax("test2.html"))
    .done(function(res) {console.log(res,'done');})
    .fail(function(res) {console.log(res,'fail');}); //都成功才会执行done;返回第一个ajax的res;

写插件:

  • html:

    <div class="container">
    <div class="col-sm-12 top">
    <button id="all" class="btn btn-primary col-sm-offset-10 show-price">show all</button>
    </div>
    <div class="jumbotron col-sm-3 vacation" data-price="110">
    <h4>Hawaiian Vaction</h4>
    <button class="click btn btn-info">SHOE PRICE</button>
    <p class="no-hide"><a href="#" class="remove-vacation">no thanks!</a></p>
    </div> <div class="jumbotron col-sm-3 col-sm-offset-1 vacation" data-price="150">
    <h4>European Getaway</h4>
    <button class="click btn btn-info">SHOE PRICE</button>
    <p class="no-hide"><a href="#" class="remove-vacation">no thanks!</a></p>
    </div> <div class="jumbotron col-sm-3 col-sm-offset-1 vacation" data-price="90">
    <h4>Visit Japan</h4>
    <button class="click btn btn-info">SHOE PRICE</button>
    <p class="no-hide"><a href="#" class="remove-vacation">no thanks!</a></p>
    </div>
    </div>
  • js:
    $.fn.pricefy = function(options) {
    this.each(function() {
    //使用$.extend添加属性;setting为要操作的数据集合
    var settings = $.extend({
    days: 3,
    vacation: $(this),
    price: $(this).data("price")
    },options);
    var show = function() {
    var details = $("<p>Book" + settings.days +"days for $" + (settings.days * settings.price)+ "</p>");
    settings.vacation.find(".click").hide();
    settings.vacation.append(details);
    };
    var remove = function() {
    settings.vacation.hide().off(".pricefy");
    };
    settings.vacation.on("click.pricefy","button",show);
    settings.vacation.on("show.pricefy",show);
    settings.vacation.on("click.pricefy",".remove-vacation",remove);
    })
    }; $(function() {
    $(".vacation").pricefy();
    $(".show-price").on("click",function(event) {
    event.preventDefault();
    $(".vacation").trigger('show.pricefy');
    });
    });

      

      

  

jquery优化02的更多相关文章

  1. 新手必看的jQuery优化笔记十则

    jQuery优化 1.简介 jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外,如何提升语言本身的性能也是开发人员应该思考的问题.文章就 ...

  2. jquery优化引发的思考

    无意间看到jquery优化的一个细节让我觉得不可思议记录一下.仅仅只是换个地方代码就能提高数倍的效率,带给我的不是个仅是个小技巧,而是一总编程思想,技术大牛往往是在细节上体现. 通过缓存最小化选择操作 ...

  3. jquery优化28个建议

    我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...

  4. jquery优化轮播图2

    继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. jquery优化

    选择器优化执行的速度 选择器 优先:id>元素>类 使用对象缓存:即使用变量来保存对象名,var $myDiv = $("#myDiv"):$myDiv.show(); ...

  6. jQuery优化性能的十种方法

    1,总是从ID选择器开始继承 例如: <div id="content"> <form method="post" action=" ...

  7. ☀【jQuery 优化】jQuery基础教程(第3版)

    jQuery代码优化:选择符篇 √ http://www.ituring.com.cn/article/377 jQuery代码优化:遍历篇 √ http://www.ituring.com.cn/a ...

  8. jQuery 学习02——效果:隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  9. jQuery总结02

    1 如何搭建一个 jQuery 环境? 2 jQuery 对象与 DOM 对象一样吗?区别是什么? 3 jQuery选择器类型有哪些?

随机推荐

  1. UITableView 学习笔记

    http://www.cnblogs.com/smileEvday/archive/2012/06/28/tableView.html UITableView学习笔记 作者:一片枫叶 看TableVi ...

  2. sql分页查询语句

    有关分页 SQL 的资料很多,有的使用存储过程,有的使用游标.本人不喜欢使用游标,我觉得它耗资.效率低:使用存储过程是个不错的选择,因为存储过程是经过预编译的,执行效率高,也更灵活.先看看单条 SQL ...

  3. DBhelper封装jdbc并解决特殊字符的问题

    1.测试数据库 1.1 数据库数据 1.2 数据库结构 1.3 数据库脚本 DROP TABLE IF EXISTS `school`.`student`; CREATE TABLE `school` ...

  4. 【数据库】如家汉庭酒店2000万开房数据1.71G/BAK,792M/CSV

    多家连锁酒店使用了某网络有限公司,开发的酒店WiFi管理.认证管理系统.用户在酒店连接开放的WiFi,上网时会被要求通过网页认证,填写相关信息.这个认证不是在酒店服务器完成的,而是在 某公司 的认证服 ...

  5. 暑假热身 B. 下载测速

    最近,nono终于结束了每年一次的为期12个月的冬眠,醒来的第一件事就是——看电影!!nono发现最近一年出现了各种很好很强大的电影,例如这个.这个.还有这个. 于是nono直接把这些电影全部扔进了下 ...

  6. typedef 各类定义,各类问题大全

    第一篇:typedef struct与struct的区别 1. 基本解释 typedef为C语言的关键字,作用是为一种数据类型定义一个新名字.这里的数据类型包括内部数据类型(int,char等)和自定 ...

  7. 又是一个二模02,不过day2

    话说比较简单.除了第三题不会写平衡树啊你妹!!边做边写吧. 机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链 ...

  8. apple配置WIFI热点

    打开AirPort打开设置偏好-共享,找到WIFI相关

  9. July 19th, Week 30th Tuesday, 2016

    The good seaman is known in bad weather. 惊涛骇浪,方显英雄本色. You can't be afraid to fail. It's the only way ...

  10. Repairing Company(poj 3216)

    题目大意: 有Q个地点,告诉你Q个地点之间的相互距离(从i地点赶到j地点需要的时间).有M项任务, 给你M项任务所在的地点block.开始时间start和任务完成需要时间time.一个工人只有在 他准 ...