300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > JavaScript和JQuery实用代码片段(一)

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

时间:2022-10-27 07:08:30

相关推荐

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

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

(一)怎样用JQuery刷新一幅图片?

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

代码:

代码如下:

$(imageObj).attr(src,$(imageObj).attr(src) + ? + ());

(二)怎样用JQuery查看一幅图片是否被完全加载?

说明:在一个页面未加载完全的时候调用JavaScript操作常常会失败,因为此时DOM未解析完毕。可以在方法中执行要执行的方法(此时图片肯定加载完成,可以获取其高度等属性),也可以在$(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

licloud/li

lisun/li

lirain/li

lisnow/li

/ul

(2)JQuery代码为:

代码如下:

var items = $(.to_order li).get(); //获取所有待排序li

(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为排好队的集合

{

();

});

(五)怎样禁止鼠标右键(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

期待大家补充,哈哈!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。