JavaScript和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
期待大家补充，哈哈！

赞 (0)

相关推荐

  • 18个非常棒的jQuery代码片段

    1.jQuery实现的内链接平滑滚动 不需要使用太复杂的插件,只要使用下载这段代码即可实现基于内部链接的平滑滚动 $('a[href^="#"]').bind('click.smoothscroll',function (e) { e.preventDefault(); var anchor = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().t

  • 常用的几个JQuery代码片段

    1. 导航菜单背景切换效果 在项目的前端页面里,相对于其它的导航菜单,激活的导航菜单需要设置不同的背景.这种效果实现的方式有很多种,下面是使用JQuery实现的一种方式: //注意:代码需要修饰完善 $('#nav').click(function(e) { // 要知道siblings的使用 $(e.target).addClass('on').siblings('.on').removeClass('on'); }); 2.反序访问JQuery对象里的元素 在某些场景下,我们可能需要反序访问

  • jquery实用代码片段集合

    加载google的jquery库 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> 有利于加快加载速度(已经得到验证). 修改图片src更新图片 $(imageobj).attr('src', $(imageobj).attr('src') + '?' + Math.ra

  • 12个超实用的JQuery代码片段

    本文收集了12段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦.下面就让我们一起来享受jQuery代码的魅力之处吧. 1. 导航菜单背景切换效果 在项目的前端页面里,相对于其它的导航菜单,激活的导航菜单需要设置不同的背景.这种效果实现的方式有很多种,下面是使用JQuery实现的一种方式: <ul id='nav'> <li>导航一</li> <li>导航二</li> <li>导航三&l

  • web前端开发JQuery常用实例代码片段(50个)

    本文给大家展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西. 1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下

  • 非常实用的12个jquery代码片段

    jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了12段非常实用的jQuery代码片段,你可以直接复制黏贴到代码里,但请开发者注意了,要理解代码再使用哦.下面就让我们一起来享受jQuery代码的魅力之处吧. 1. 导航菜单背景切换效果 在项目的前端页面里,相对于其它的导航菜单,激活的导航菜单需要设置不同的背景.这种效果实现的方式有很多种,下面是使用JQuery实现的一种方

  • 直接拿来用的15个jQuery代码片段

    直接拿来用的15个jQuery代码片段

    发表过的一篇<10个超级有用的PHP代码片段果断收藏>吗?本文笔者将继续为你奉上15个超级有用的jQuery代码片段. jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 下面就让我们一起来享受jQuery代码的魅力之处吧. 1.预加载图片 (function($) { var cache = []; // Arguments are image paths relative to

  • 程序员必知35个jQuery 代码片段

    jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果.本文将为你介绍一些jquery实用的技巧,希望可以帮助你更加高效地使用jQuery. 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });

  • 分享12个实用的jQuery代码片段

    jQuery是一款优秀的JavaScript库,它在WEB开发者和网页设计师中非常出名,帮助网页设计师开发出很多有创意和漂亮的WEB页面. 本文主要分享了12个有用的jQuery技巧,具体内容如下 下面是我收集的一些小技巧,这些技巧将帮助你提高你网站布局和应用的创意性以及功能性. 一.在新窗口打开链接 用这个代码,你点击超文本链接时会在新窗口中打开,为用户带来更好的体验: $(document).ready(function() { //select all anchor tags that h

  • 一些实用的jQuery代码片段收集

    下边这些jQuery片段只是很少的一部分,如果您在学习过程中也遇到过一些常用的jQuery代码,欢迎分享.下边就让我们看看这些有代码片段. 1.jQuery得到用户IP: 复制代码 代码如下: $.getJSON("http://jsonip.appspot.com?callback=?", function (data) { alert("Your ip: " + data.ip); }); 2.jQuery查看图片的宽度和高度: 复制代码 代码如下: var t

随机推荐