jquery优化02
缓存变量: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的更多相关文章
- 新手必看的jQuery优化笔记十则
jQuery优化 1.简介 jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外,如何提升语言本身的性能也是开发人员应该思考的问题.文章就 ...
- jquery优化引发的思考
无意间看到jquery优化的一个细节让我觉得不可思议记录一下.仅仅只是换个地方代码就能提高数倍的效率,带给我的不是个仅是个小技巧,而是一总编程思想,技术大牛往往是在细节上体现. 通过缓存最小化选择操作 ...
- jquery优化28个建议
我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可 ...
- jquery优化轮播图2
继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- jquery优化
选择器优化执行的速度 选择器 优先:id>元素>类 使用对象缓存:即使用变量来保存对象名,var $myDiv = $("#myDiv"):$myDiv.show(); ...
- jQuery优化性能的十种方法
1,总是从ID选择器开始继承 例如: <div id="content"> <form method="post" action=" ...
- ☀【jQuery 优化】jQuery基础教程(第3版)
jQuery代码优化:选择符篇 √ http://www.ituring.com.cn/article/377 jQuery代码优化:遍历篇 √ http://www.ituring.com.cn/a ...
- jQuery 学习02——效果:隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链
jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...
- jQuery总结02
1 如何搭建一个 jQuery 环境? 2 jQuery 对象与 DOM 对象一样吗?区别是什么? 3 jQuery选择器类型有哪些?
随机推荐
- UITableView 学习笔记
http://www.cnblogs.com/smileEvday/archive/2012/06/28/tableView.html UITableView学习笔记 作者:一片枫叶 看TableVi ...
- sql分页查询语句
有关分页 SQL 的资料很多,有的使用存储过程,有的使用游标.本人不喜欢使用游标,我觉得它耗资.效率低:使用存储过程是个不错的选择,因为存储过程是经过预编译的,执行效率高,也更灵活.先看看单条 SQL ...
- DBhelper封装jdbc并解决特殊字符的问题
1.测试数据库 1.1 数据库数据 1.2 数据库结构 1.3 数据库脚本 DROP TABLE IF EXISTS `school`.`student`; CREATE TABLE `school` ...
- 【数据库】如家汉庭酒店2000万开房数据1.71G/BAK,792M/CSV
多家连锁酒店使用了某网络有限公司,开发的酒店WiFi管理.认证管理系统.用户在酒店连接开放的WiFi,上网时会被要求通过网页认证,填写相关信息.这个认证不是在酒店服务器完成的,而是在 某公司 的认证服 ...
- 暑假热身 B. 下载测速
最近,nono终于结束了每年一次的为期12个月的冬眠,醒来的第一件事就是——看电影!!nono发现最近一年出现了各种很好很强大的电影,例如这个.这个.还有这个. 于是nono直接把这些电影全部扔进了下 ...
- typedef 各类定义,各类问题大全
第一篇:typedef struct与struct的区别 1. 基本解释 typedef为C语言的关键字,作用是为一种数据类型定义一个新名字.这里的数据类型包括内部数据类型(int,char等)和自定 ...
- 又是一个二模02,不过day2
话说比较简单.除了第三题不会写平衡树啊你妹!!边做边写吧. 机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链接~机智的链 ...
- apple配置WIFI热点
打开AirPort打开设置偏好-共享,找到WIFI相关
- 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 ...
- Repairing Company(poj 3216)
题目大意: 有Q个地点,告诉你Q个地点之间的相互距离(从i地点赶到j地点需要的时间).有M项任务, 给你M项任务所在的地点block.开始时间start和任务完成需要时间time.一个工人只有在 他准 ...