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 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
JavaScript的继承实现小结
May 07 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
js实现跟随鼠标移动的小球
Aug 26 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python中的随机函数小结
2018/01/27 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
药物学专业学生的自我评价
2013/10/27 职场文书
二年级数学教学反思
2014/01/21 职场文书
收银员岗位职责
2014/02/07 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
进口业务员岗位职责
2014/04/06 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
汉语拼音教学反思
2016/02/22 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript