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

2016-02-19 13:09 2 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享JavaScript和JQuery实用代码片段(一)教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - Web开发 】

(一)怎样用JQuery刷新一幅图片?
说明:我们都知道,当我们在请求一个资源(比如网页,图片等)的时候,如果该资源被缓存到浏览器了,那么请求返回的就是缓存的副本,不是我们希望获取的资源(该资源内容已经被更新了),此时最普遍的一个办法就是在请求的页面后面或者图片的src后面加上一个查询字符串"ran=" + Math.random(),这样就会请求到最新版本的资源啦!
代码:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
$(imageObj).attr('src',$(imageObj).attr('src') + '?' + Math.random());

(二)怎样用JQuery查看一幅图片是否被完全加载?
说明:在一个页面未加载完全的时候调用JavaScript操作常常会失败,因为此时DOM未解析完毕。可以在windoiw.onload方法中执行要执行的JavaScript/JQuery方法(此时图片肯定加载完成,可以获取其高度等属性),也可以在$(function(){})中执行(此时DOM虽解析完毕,但是所请求的资源未必全部加载完成)。
如果在使用图片之前,要事先检测图片是否加载完成,可以采用如下的代码:
代码:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
var imgsrc = "img/img.png";
$(imageObj).load(function()
{
alert('图片加载完成');
}).error(function()
{
alert('图片加载出错');
}).attr('src',imgsrc);

(三)怎样用JQuery查看多幅幅图片是否被完全加载?
说明:说明如上,加入你页面有十幅图片要加载,此时可以设置一个变量记录加载图片数,当该变量等于总的图片数时,加载就大功告成了!

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
var totalImages = 10;
var loadedImages = 0;
$('img').load(function()
{
++loadedImages; //此处为闭包
if(loadedImages == totalImages)
{
alert('所有图片加载完毕!');
}
});

(四)怎样用JQuery对无序列表(ul)排序?
说明:有时候我们需要对一个无序列表(ul)排序(当然可以用有序列表ol),但是ul能够提供更多定制功能,且能自定义排序器。
代码:(1)待排序列表为:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
ul class='to_order'
licloud/li
lisun/li
lirain/li
lisnow/li
/ul

(2)JQuery代码为:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
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)?
说明:有时候我们希望用户不能使用鼠标右键,从而避免复制,另存为等行为。

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
$(function(){
$(document).bind('contextmenu',function(e){
return false;
});
});

(六)怎样实现一幅图片淡出(FadeOut)后,另一幅图片淡入(FadeIn)的效果?
说明:是时候展现一些比较cool效果了,淡入淡出的效果可以采用JQuery的FadeIn和FadeOut效果来实现。

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
$('img').fadeOut(function(){
$(this).load(function(){
$(this).fadeIn();
}).attr('src',AnotherSource);
});

(七)检测一个DOM对象是否存在?
说明:在对一个DOM对象操作前,先检测其是否存在。

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
//方法一
if($('#elementId').length)
{
//存在
}
//方法二
if($('#elementId').size() 0)
{
//存在
}
//方法三
if($('#elementId')[0])
{
//存在
}
//方法四~方法N
期待大家补充,哈哈!

来源:https://www.tulaoshi.com/n/20160219/1603139.html

延伸阅读
标签: Web开发
删除字符串首尾空字符:$.trim() 像很多高级语言都提供了类似的函数,jQuery类库也提供了这样的函数。具体用法:$.trim(value)从已传入的字符串里删除首尾空白字符并返回结果。 对属性和集合进行迭代: 在JavaScript操作数组和对象可以采用下面的方法: var anArray = ['one','two','three']; for(var n = 0; n anArray.length; n++){......
标签: Web开发
    写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上 实现拖动效果. Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ -->   $(document).ready( function...
标签: Web开发
jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 type (String) : ...
标签: Web开发
本节稍稍深入地讨论关于事件处理的话题,如果你对模式、闭包和面向对象等概念还不太理解,不妨暂且等阅读完相关内容之后再回过头来阅读它,相信你会有很大收获。 1 事件处理模式        在程序设计领域,“事件处理”是一种模式,当一个对象受外部影响而改变状态时,通过消息的方式将这个状态改变...
标签: Web开发
在DW8中创建代码片段--提高CSS布局开发效率 本文介绍的是如何在DW8中创建自定义的代码片段,以提高CSS布局开发效率,文章末端有演示代码下载。 如何创建 1.在DW8的代码片段中新建一个文件夹,命名为:CSS Navigation。 2.右键选中CSS Navigation,新建个代码片段,命名为:Nav01。 3.在对话框中写入代码。 ...

经验教程

830

收藏

48
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部