经典的JavaScript和JQuery实用代码片段（一）

（一）怎样用JQuery刷新一幅图片？

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

代码：

$(imageObj).attr( ' src ' ,$(imageObj).attr( ' src ' )  +   ' ? '   +  Math.random());

 

（二）怎样用JQuery查看一幅图片是否被完全加载？

 说明：在一个页面未加载完全的时候调用JavaScript操作常常会失败，因为此时DOM未解析完毕。可以在windoiw.onload方法中执行要执行的JavaScript/JQuery方法（此时图片肯定加载完成，可以获取其高度等属性），也可以在$(function(){})中执行(此时DOM虽解析完毕，但是所请求的资源未必全部加载完成，这里可以参见一篇文章，具体的HTML解析过程)。

         如果在使用图片之前，要事先检测图片是否加载完成，可以采用如下的代码：

代码：

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