源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-03-03 16:39 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript和JQuery实用代码片段(一)
(一)怎样用JQuery刷新一幅图片? 说明:我们都知道,当我们在请求一个资源(比如网页,图片等)的时候,如果该资源被缓存到浏览器了,那么请求返回的就是缓存的副本,不是我们希望获取的资源(该资源内容已经被更新了),此时最普遍的一个办法就是在请求的页面后面或者图片的src后面加上一个查询字符串"ran=" + Math.random(),这样就会请求到最新版本的资源啦! 代码:
[u]复制代码[/u] 代码如下:
$(imageObj).attr('src',$(imageObj).attr('src') + '?' + Math.random());
(二)怎样用JQuery查看一幅图片是否被完全加载? 说明:在一个页面未加载完全的时候调用JavaScript操作常常会失败,因为此时DOM未解析完毕。可以在windoiw.onload方法中执行要执行的JavaScript/JQuery方法(此时图片肯定加载完成,可以获取其高度等属性),也可以在$(function(){})中执行(此时DOM虽解析完毕,但是所请求的资源未必全部加载完成)。 如果在使用图片之前,要事先检测图片是否加载完成,可以采用如下的代码: 代码:
[u]复制代码[/u] 代码如下:
var imgsrc = "img/img.png"; $(imageObj).load(function() { alert('图片加载完成'); }).error(function() { alert('图片加载出错'); }).attr('src',imgsrc);
(三)怎样用JQuery查看多幅幅图片是否被完全加载? 说明:说明如上,加入你页面有十幅图片要加载,此时可以设置一个变量记录加载图片数,当该变量等于总的图片数时,加载就大功告成了!
[u]复制代码[/u] 代码如下:
var totalImages = 10; var loadedImages = 0; $('img').load(function() { ++loadedImages; //此处为闭包 if(loadedImages == totalImages) { alert('所有图片加载完毕!'); } });
(四)怎样用JQuery对无序列表(ul)排序? 说明:有时候我们需要对一个无序列表(ul)排序(当然可以用有序列表ol),但是ul能够提供更多定制功能,且能自定义排序器。 代码:(1)待排序列表为:
[u]复制代码[/u] 代码如下:
<ul class='to_order'> <li>cloud</li> <li>sun</li> <li>rain</li> <li>snow</li> </ul>
(2)JQuery代码为:
[u]复制代码[/u] 代码如下:
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)? 说明:有时候我们希望用户不能使用鼠标右键,从而避免复制,另存为等行为。
[u]复制代码[/u] 代码如下:
$(function(){ $(document).bind('contextmenu',function(e){ return false; }); });
(六)怎样实现一幅图片淡出(FadeOut)后,另一幅图片淡入(FadeIn)的效果? 说明:是时候展现一些比较cool效果了,淡入淡出的效果可以采用JQuery的FadeIn和FadeOut效果来实现。
[u]复制代码[/u] 代码如下:
$('img').fadeOut(function(){ $(this).load(function(){ $(this).fadeIn(); }).attr('src',AnotherSource); });
(七)检测一个DOM对象是否存在? 说明:在对一个DOM对象操作前,先检测其是否存在。
[u]复制代码[/u] 代码如下:
//方法一 if($('#elementId').length) { //存在 } //方法二 if($('#elementId').size() > 0) { //存在 } //方法三 if($('#elementId')[0]) { //存在 } //方法四~方法N 期待大家补充,哈哈!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部