JavaScript和JQuery实用代码片段(一)


Posted in Javascript onApril 07, 2010

(一)怎样用JQuery刷新一幅图片?
说明:我们都知道,当我们在请求一个资源(比如网页,图片等)的时候,如果该资源被缓存到浏览器了,那么请求返回的就是缓存的副本,不是我们希望获取的资源(该资源内容已经被更新了),此时最普遍的一个办法就是在请求的页面后面或者图片的src后面加上一个查询字符串"ran=" + Math.random(),这样就会请求到最新版本的资源啦!
代码:

$(imageObj).attr('src',$(imageObj).attr('src') + '?' + Math.random());

(二)怎样用JQuery查看一幅图片是否被完全加载?
说明:在一个页面未加载完全的时候调用JavaScript操作常常会失败,因为此时DOM未解析完毕。可以在windoiw.onload方法中执行要执行的JavaScript/JQuery方法(此时图片肯定加载完成,可以获取其高度等属性),也可以在$(function(){})中执行(此时DOM虽解析完毕,但是所请求的资源未必全部加载完成)。
如果在使用图片之前,要事先检测图片是否加载完成,可以采用如下的代码:
代码:
var imgsrc = "img/img.png"; 
$(imageObj).load(function() 
{ 
alert('图片加载完成'); 
}).error(function() 
{ 
alert('图片加载出错'); 
}).attr('src',imgsrc);

(三)怎样用JQuery查看多幅幅图片是否被完全加载?
说明:说明如上,加入你页面有十幅图片要加载,此时可以设置一个变量记录加载图片数,当该变量等于总的图片数时,加载就大功告成了!
var totalImages = 10; 
var loadedImages = 0; 
$('img').load(function() 
{ 
++loadedImages; //此处为闭包 
if(loadedImages == totalImages) 
{ 
alert('所有图片加载完毕!'); 
} 
});

(四)怎样用JQuery对无序列表(ul)排序?
说明:有时候我们需要对一个无序列表(ul)排序(当然可以用有序列表ol),但是ul能够提供更多定制功能,且能自定义排序器。
代码:(1)待排序列表为:
<ul class='to_order'> 
<li>cloud</li> 
<li>sun</li> 
<li>rain</li> 
<li>snow</li> 
</ul>

(2)JQuery代码为:
var items = $('.to_order li').get(); //获取所有待排序li 
items.sort(function(a,b) //调用javascript内置函数sort,参数为一闭包函数,也就是排序器 
{ 
var keyA = $(a).val(); 
var keyB = $(b).val(); 
if(keyA < keyB) return -1; 
if(keyA > keyB) return 1; 
return 0; 
}); 
var ul = $('.to_order'); 
$.each(items,function(i,li) //此时items为排好队的集合 
{ 
ul.append(li); 
});

(五)怎样禁止鼠标右键(contextmenu)?
说明:有时候我们希望用户不能使用鼠标右键,从而避免复制,另存为等行为。
$(function(){ 
$(document).bind('contextmenu',function(e){ 
return false; 
}); 
});

(六)怎样实现一幅图片淡出(FadeOut)后,另一幅图片淡入(FadeIn)的效果?
说明:是时候展现一些比较cool效果了,淡入淡出的效果可以采用JQuery的FadeIn和FadeOut效果来实现。
$('img').fadeOut(function(){ 
$(this).load(function(){ 
$(this).fadeIn(); 
}).attr('src',AnotherSource); 
});

(七)检测一个DOM对象是否存在?
说明:在对一个DOM对象操作前,先检测其是否存在。
//方法一 
if($('#elementId').length) 
{ 
//存在 
} 
//方法二 
if($('#elementId').size() > 0) 
{ 
//存在 
} 
//方法三 
if($('#elementId')[0]) 
{ 
//存在 
} 
//方法四~方法N 
期待大家补充,哈哈!
Javascript 相关文章推荐
js TextArea的选中区域处理
Dec 28 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
js实现移动端轮播图效果
Dec 09 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
jquery 学习笔记一
Apr 07 #Javascript
ext jquery 简单比较
Apr 07 #Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 #Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 #Javascript
js 小贴士一星期合集
Apr 07 #Javascript
Javascript 实用小技巧
Apr 07 #Javascript
javascript 函数使用说明
Apr 07 #Javascript
You might like
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
php数组转成json格式的方法
2015/03/09 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
利用Psyco提升Python运行速度
2014/12/24 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
个人简历自我评价八例
2013/10/31 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技