jQuery代码的14条改善技巧[译](4)
作者:暴风彬彬 来源:彬Go 时间:2009-12-02 10:02:00
9.绑定jQuery函数到$(window).load事件
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready事件在大多数情况下都OK,但是它的解析顺序是在文档准备就绪,单文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使用$(document).ready事件并不一定能达到我们预期的效果,比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。
$(window).load(function(){
// 将你希望在页面完全就绪之后运行的代码放在这里
});
10.使用jQuery链来限定选择器,让你的代码更简洁更优雅
由于JavaScript支持链结构而且支持断行,所以你的代码可以写成下面这样,这个例子先在元素上移除一个class然后在同一个元素上添加另一个class:
$('#shopping_cart_items input.in_stock')
.removeClass('in_stock')
.addClass('3-5_days');
如果想让它更简单实用,你可以创建一个支持链结构的jQuery函数:
$.fn.makeNotInStock = function() {
return $(this).removeClass('in_stock').addClass('3-5_days');
}
$('#shopping_cart_items input.in_stock').makeNotInStock().log();
11.使用回调函数同步效果
如果你想确保某个事件或动画效果要在另一个事件运行之后再调用,那你就要使用回调函数了。你可以在这些动画效果后面绑定回调函数:slideDown( speed, [回调] ) ie. $(’#sliding’).slideDown(’slow’, function(){… 点击这里预览这个例子.
<style>
div.button { background:#cfd; margin:3px; width:50px;
text-align:center; float:left; cursor:pointer;
border:2px outset black; font-weight:bolder; }
#sliding { display:none; }
</style>
$(document).ready(function(){
// 使用jQuery的click事件改变视觉效果,并开启滑动效果
$("div.button").click(function () {
//div.button 现在看上去是按下的效果
$(this).css({ borderStyle:"inset", cursor:"wait" });
//#sliding 现在将渐隐并在完成动作之后开启渐显效果
//slideup once it completes
$('#sliding').slideDown('slow', function(){
$('#sliding').slideUp('slow', function(){
//渐显效果完成后将会改变按钮的CSS属性
$('div.button').css({ borderStyle:"outset", cursor:"auto" });
});
});
});
});
标签:jQuery,优化,代码,技巧,选择器
0
投稿
猜你喜欢
sql server 2005用户权限设置深入分析
2024-01-19 12:08:21
五个小窍门帮你写出更好的CSS代码
2009-06-09 12:42:00
Pytorch实现将label变成one hot编码的两种方式
2021-08-26 08:45:00
itchat接口使用示例
2022-09-01 05:16:36
python面向对象之类的继承详解
2022-03-20 18:22:22
Python3打包exe代码2种方法实例解析
2022-03-31 14:36:30
跨平台python异步回调机制实现和使用方法
2021-12-18 23:33:26
教你如何在Pycharm中导入requests模块
2023-05-03 13:10:14
Python3 利用face_recognition实现人脸识别的方法
2023-11-05 05:08:02
python中遍历文件的3个方法
2022-10-21 08:41:07
Linux下docker安装mysql8并配置远程连接
2024-01-18 15:53:43
Express的路由详解
2024-05-13 10:06:30
Sql Server使用cursor处理重复数据过程详解
2024-01-27 09:01:35
python进行图像边缘检测的详细教程
2023-08-10 04:53:40
python实现定时发送邮件到指定邮箱
2023-05-02 05:04:02
python 获取星期字符串的实例
2022-08-17 19:14:37
mysql怎么设置最大连接数详解
2024-01-24 04:44:55
关于Python中*args和**kwargs的深入理解
2021-04-07 17:45:06
仿google的asp分页代码
2009-03-08 18:27:00
Python实现多项式拟合正弦函数详情
2023-04-15 09:45:20