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

标签： jquery 代码 片段 | 发表时间：2013-07-18 15:42 | 作者：ysq5202121
出处：http://blog.csdn.net

jQuery里提供了许多创建交互式网站的方法，在开发Web项目时，开发人员应该好好利用jQuery代码，它们不仅能给网站带来各种动画、特效，还会提高网站的用户体验。

本文收集了15段非常实用的jQuery代码片段，你可以直接复制黏贴到代码里，但请开发者注意了，要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。

1.预加载图片

1
2
3
4
5
6
7
8
9
10
11
12
( function ($) {
   var  cache = [];
   // Arguments are image paths relative to the current page.
   $.preLoadImages =  function () {
     var  args_len = arguments.length;
     for  ( var  i = args_len; i--;) {
       var  cacheImage = document.createElement( 'img' );
       cacheImage.src = arguments[i];
       cache.push(cacheImage);
     }
   }
jQuery.preLoadImages( "image1.gif" ,  "/path/to/image2.png" );
源码

2. 让页面中的每个元素都适合在移动设备上展示

1
2
3
4
5
6
7
8
9
10
11
var  scr = document.createElement( 'script' );
document.body.appendChild(scr);
scr.onload =  function (){
     $( 'div' ).attr( 'class' ,  '' ).attr( 'id' ,  '' ).css({
         'margin'  : 0,
         'padding'  : 0,
         'width' :  '100%' ,
         'clear' : 'both'
     });
};
源码

3.图像等比例缩放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(window).bind( "load" ,  function () {
     // IMAGE RESIZE
     $( '#product_cat_list img' ).each( function () {
         var  maxWidth = 120;
         var  maxHeight = 120;
         var  ratio = 0;
         var  width = $( this ).width();
         var  height = $( this ).height();
         if (width > maxWidth){
             ratio = maxWidth / width;
             $( this ).css( "width" , maxWidth);
             $( this ).css( "height" , height * ratio);
             height = height * ratio;
         }
         var  width = $( this ).width();
         var  height = $( this ).height();
         if (height > maxHeight){
             ratio = maxHeight / height;
             $( this ).css( "height" , maxHeight);
             $( this ).css( "width" , width * ratio);
             width = width * ratio;
         }
     });
     //$("#contentpage img").show();
     // IMAGE RESIZE
});
源码

4.返回页面顶部

1
2
3
4
5
6
7
8
// Back To Top
$(document).ready( function (){
   $( '.top' ).click( function () { 
      $(document).scrollTo(0,500); 
   });
});
//Create a link defined with the class .top
<a href= "#"  class= "top" >Back To Top</a>
源码

5.使用jQuery打造手风琴式的折叠效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var  accordion = {
      init:  function (){
            var  $container = $( '#accordion' );
            $container.find( 'li:not(:first) .details' ).hide();
            $container.find( 'li:first' ).addClass( 'active' );
            $container.on( 'click' , 'li a' , function (e){
                   e.preventDefault();
                   var  $ this  = $( this ).parents( 'li' );
                   if ($ this .hasClass( 'active' )){
                          if ($( '.details' ).is( ':visible' )) {
                                 $ this .find( '.details' ).slideUp();
                          }  else  {
                                 $ this .find( '.details' ).slideDown();
                          }
                   }  else  {
                          $container.find( 'li.active .details' ).slideUp();
                          $container.find( 'li' ).removeClass( 'active' );
                          $ this .addClass( 'active' );
                          $ this .find( '.details' ).slideDown();
                   }
            });
      }
};

6.通过预加载图片廊中的上一幅下一幅图片来模仿Facebook的图片展示方式

1
2
3
4
5
6
7
8
var  nextimage =  "/images/some-image.jpg" ;
$(document).ready( function (){
window.setTimeout( function (){
var  img = $( "" ).attr( "src" , nextimage).load( function (){
//all done
});
}, 100);
});

源码

7.使用jQuery和Ajax自动填充选择框

1
2
3
4
5
6
7
8
9
10
11
12
13
$( function (){
$( "select#ctlJob" ).change( function (){
$.getJSON( "/select.php" ,{id: $( this ).val(), ajax:  'true' },  function (j){
var  options =  '' ;
for  ( var  i = 0; i < j.length; i++) {
options +=  '
'  + j[i].optionDisplay +  '
' ;
}
$( "select#ctlPerson" ).html(options);
})
})
})
源码

8.自动替换丢失的图片

1
2
3
4
5
6
7
8
// Safe Snippet
$( "img" ).error( function  () {
     $( this ).unbind( "error" ).attr( "src" ,  "missing_image.gif" );
});
// Persistent Snipper
$( "img" ).error( function  () {
     $( this ).attr( "src" ,  "missing_image.gif" );
});

源码

9.在鼠标悬停时显示淡入/淡出特效

1
2
3
4
5
6
7
8
$(document).ready( function (){
     $( ".thumbs img" ).fadeTo( "slow" , 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
     $( ".thumbs img" ).hover( function (){
         $( this ).fadeTo( "slow" , 1.0); // This should set the opacity to 100% on hover
     }, function (){
         $( this ).fadeTo( "slow" , 0.6); // This should set the opacity back to 60% on mouseout
     });
});
源码

10.清空表单数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function  clearForm(form) {
   // iterate over all of the inputs for the form
   // element that was passed in
   $( ':input' , form).each( function () {
     var  type =  this .type;
     var  tag =  this .tagName.toLowerCase(); // normalize case
     // it's ok to reset the value attr of text inputs,
     // password inputs, and textareas
     if  (type == 'text ' || type == ' password ' || tag == ' textarea ')
       this.value = "";
     // checkboxes and radios need to have their checked state cleared
     // but should *not* have their ' value ' changed
     else if (type == ' checkbox ' || type == ' radio ')
       this.checked = false;
     // select elements need to have their ' selectedIndex ' property set to -1
     // (this works for both single and multiple select elements)
     else if (tag == ' select')
       this .selectedIndex = -1;
   });
};
源码

11.预防对表单进行多次提交

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready( function () {
   $( 'form' ).submit( function () {
     if ( typeof  jQuery.data( this ,  "disabledOnSubmit" ) ==  'undefined' ) {
       jQuery.data( this ,  "disabledOnSubmit" , { submited:  true  });
       $( 'input[type=submit], input[type=button]' ,  this ).each( function () {
         $( this ).attr( "disabled" ,  "disabled" );
       });
       return  true ;
     }
     else
     {
       return  false ;
     }
   });
});
源码

12.动态添加表单元素

1
2
3
4
5
//change event on password1 field to prompt new input
$( '#password1' ).change( function () {
         //dynamically create new input and insert after password1
         $( "#password1" ).append( "" );
});
源码

13.让整个Div可点击

1
2
blah blah blah. link
The following lines of jQuery will make the entire div clickable: $( ".myBox" ).click( function (){ window.location=$( this ).find( "a" ).attr( "href" );  return  false ; });
源码

14.平衡高度或Div元素

1
2
3
4
5
var  maxHeight = 0;
$( "div" ).each( function (){
    if  ($( this ).height() > maxHeight) { maxHeight = $( this ).height(); }
});
$( "div" ).height(maxHeight);
源码

15. 在窗口滚动时自动加载内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var  loading =  false ;
$(window).scroll( function (){
     if ((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
         if (loading ==  false ){
             loading =  true ;
             $( '#loadingbar' ).css( "display" , "block" );
             $.get( "load.php?start=" +$( '#loaded_max' ).val(),  function (loaded){
                 $( 'body' ).append(loaded);
                 $( '#loaded_max' ).val(parseInt($( '#loaded_max' ).val())+50);
                 $( '#loadingbar' ).css( "display" , "none" );
                 loading =  false ;
             });
         }
     }
});
$(document).ready( function () {
     $( '#loaded_max' ).val(50);
});
来自：  codegeekz

本文为CSDN编译整理，未经允许不得转载，如需转载请联系market#csdn.net(#换成@)

作者：ysq5202121 发表于2013-7-18 15:42:11 原文链接
阅读：23 评论：0 查看评论

相关 [jquery 代码 片段] 推荐：

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

- - CSDN博客Web前端推荐文章
jQuery里提供了许多创建交互式网站的方法，在开发Web项目时，开发人员应该好好利用jQuery代码，它们不仅能给网站带来各种动画、特效，还会提高网站的用户体验. 本文收集了15段非常实用的jQuery代码片段，你可以直接复制黏贴到代码里，但请开发者注意了，要理解代码再使用哦. 下面就让我们一起来享受jQuery代码的魅力之处吧.

10个超棒jQuery表单操作代码片段

- - 前端观察
jQuery绝对是一个伟大的开源javascript类库，是帮助我们快速和高效开发前端应用的利器. 可能大家在日常的开发过程中常常会处理表单相关的javascript，在今天这篇代码片段分享文章中，这里收集了10个超棒超实用的jQuery表单处理代码，希望能够在大家的开发过程中帮助大家更好更快的处理表单相关问题，希望大家喜欢.

jQuery代码优化：基本事件篇

- - 可咔酷 | 网络杂货铺
jQuery对事件系统的抽象与优化也是它的一大特色. 本文仅从事件系统入手，简要分析一下jQuery为什么提供mouseenter和mouseleave事件，它们与标准的mouseover、mouseout事件有什么区别. 说到事件，就要追溯到网景与微软的“浏览器大战”了. 当时，事件模型还没有标准，两家公司的实现就是事实标准.

50个必备的实用jQuery代码段

- Zhaojing - HTML5研究小组
本文会给你们展示50个jquery代码片段，这些代码能够给你的javascript项目提供帮助. 其中的一些代码段是从jQuery1.4.2才开始支持的做法，另一些则是真正有用的函数或方法，他们能够帮助你又快又好地把事情完成. 如果你发现你任何可以做得更好的地方的话，欢迎把你的版本粘贴在评论中!. 如何修改jQuery默认编码（例如默认UTF-8改成改GB2312）：.

jQuery参考实例 1.2 在DOM加载完毕，页面元素完全加载之前运行jQuery/JavaScript代码

- - CSDN博客推荐文章
本文翻译自jQuery Cookbook (O’Reilly 2009) 1.2 Executing jQuery/JavaScript Code After the DOM Has Loaded but Before Complete Page Load. 主流的JavaScript应用程序一般只在DOM完全加载后才运行JS代码.

10个实用的PHP代码片段

- - ITeye资讯频道
作为一个PHP开发人员，经常收集一些代码片段是非常有益的，以备将来使用. 这些代码片段可以节省您宝贵的时间，也可以提高您的工作效率.  PHP数组生成 CSV 文件. 这的确是一个很简单的功能，从一个PHP数组生成一个.csv文件. 此函数使用 fputcsv PHP 内置函数生成逗号分隔文件（.CSV）.

50个jQuery代码段帮你成为更出色的JS开发者

- - 博客 - 伯乐在线
本文会给你们展示50个jquery代码片段，这些代码能够给你的javascript项目提供帮助. 其中的一些代码段是从jQuery1.4.2才开始支持的做法，另一些则是真正有用的函数或方法，他们能够帮助你又快又好地把事情完成. 这些都是我尽量记住的有着最佳性能的代码段，因此如果你发现你任何可以做得更好的地方的话，欢迎把你的版本粘贴在评论中.

GA小技巧:使用jQuery来方便的布置事件跟踪代码

- - 标点符
Google Analytics的事件跟踪是个神器，基本上你能想到什么他就能帮你做什么. 但是按照Google Analytics的帮助文章中方法去布置可能会让你觉得麻烦. 以下为我使用的小技巧分享给大家. 如果你需要跟踪某几个链接在页面上的点击数. 事先给需要记录的点击链接上添加一个类. 跟踪地址.

jquery实现滚动到页面底部时无限加载内容的代码

- - CSDN博客Web前端推荐文章
由于时间关系没有整理封装，有空的时候再把他做成一个插件. var p="{$other.p}"; if(p=="") p=1; var stop=true;//触发开关，防止多次调用事件 $(window).scroll(function() {. //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载.