JavaScript和JQuery实用代码片段（一）
更新时间：2010年04月07日 13:53:42 作者：
JavaScript和JQuery实用代码片段，喜欢学习jquery的朋友可以参考下。
（一）怎样用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
期待大家补充，哈哈！
说明：我们都知道，当我们在请求一个资源（比如网页，图片等）的时候，如果该资源被缓存到浏览器了，那么请求返回的就是缓存的副本，不是我们希望获取的资源（该资源内容已经被更新了），此时最普遍的一个办法就是在请求的页面后面或者图片的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
期待大家补充，哈哈！
相关文章
早上打开邮箱，一位朋友问我之前JQuery-Easyui 怎么做可以实现多级菜单2012-01-01
这篇文章主要介绍了jquery实现最简单的滑动菜单效果代码,涉及jQuery基于鼠标事件操作页面元素动态变换的基本技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
jquery 在使用ajax过程中出现调用失败的情况，想必大家都有遇到过吧，在本文有个不错的示例，希望对大家有所帮助2013-09-09
默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行2011-10-10
下面小编就为大家带来一篇老生常谈jquery id选择器和class选择器的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了jQuery实现鼠标拖动图片功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
这篇文章主要介绍了jQuery1.9+中删除了live以后的替代方法 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
本文主要分享了jquery实现自适应banner焦点图的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了jQuery表格插件datatables用法汇总，DataTables是一个非常强大的表格插件，感兴趣的小伙伴们可以参考一下2016-03-03
首先要知道DOM的两级模式：DOM0级和DOM2级 在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。2010-02-02
最新评论