缓存变量: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. 悦动达人 (多维dp)

    悦动达人 Description 一个游戏,在屏幕上有5个格子形成一行,每一秒都会有一个格子闪烁,格子闪烁时你需要保证至少有一只手指在格子上面, 现在我们已经知道第i秒时,第xi个格子会闪烁,我们假设 ...

  2. Window_搭建SVN服务器

    http://wenku.baidu.com/link?url=614FLi_VlhiJpyG5bq8JcwFBHroMjsV3FvBDzyyn0snZ85jbWx7xh-RPJdH7stxlgM9i ...

  3. Leetcode 之Construct Binary Tree(52)

    根据先序和中序构造二叉树.根据中序和后序构造二叉树,基础题,采用递归的方式解决,两题的方法类似.需要注意的是迭代器的用法. //先序和中序 TreeNode *buildTree(vector< ...

  4. 替罪羊树—BZOJ3224: Tyvj 1728 普通平衡树

    冬令营被平衡树坑了之后,打算苦练一番数据结构(QAQ). 先是打了一下想学好久的替罪羊树. 替罪羊树实现方法很简单,就是在不满足平衡条件的时候暴力重构子树. 调试小结: 1.删除操作分两类情况:如果某 ...

  5. css排版

    先介绍如何设定字体.颜色.大小.段落空白等比较简单的应用,后面再介绍下比如首字下沉.首行缩进.最后讲一些常用的web页面中文排版,比如中文字的截断.固定宽度词内折行(word-wrap和word-br ...

  6. js 函数定义三种方式

    <p>Js 函数定义的三种方式:</p> <br> <p>方式一:function</p> <script type="te ...

  7. 【转】如何调试bash脚本

    本文转自:http://coolshell.cn/articles/1379.html Bash 是Linux操作系统的默认Shell脚本.Shell是用来处理操作系统和用户交互的一个程序.Shell ...

  8. cocos2dx阴影层的实现

    效果图 //ShadowLayer.h class ShadowLayer : public CCLayer { protected: ShadowLayer() :m_pRender(NULL) , ...

  9. php-fpm 进程管理

    2015年2月26日 15:40:15 先查找 PHP-FPM 的进程号 ps -ef | grep php-fpm root Feb12 ? :: php-fpm: master process ( ...

  10. 【JAVA、C++】LeetCode 006 ZigZag Conversion

    The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...