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创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
jQuery参数列表集合
Apr 06 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
Vue.js watch监视属性知识点总结
Nov 11 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数据库备份还原类分享
2014/03/20 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
java script编程起步(第三课)
2007/01/10 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
python实现电子词典
2020/04/23 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
python实现excel读写数据
2021/03/02 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
python如何调用java类
2020/07/05 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
python中xlutils库用法浅析
2020/12/29 Python
商场中秋节广播稿
2014/01/17 职场文书
论文评语大全
2014/04/29 职场文书
媒体宣传策划方案
2014/05/25 职场文书
社团活动总结怎么写
2014/06/30 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
ubuntu下常用apt命令介绍
2022/06/05 Servers