很棒的jQuery代码片段分享

　jQuery实现的内链接平滑滚动

　　不需要使用太复杂的插件，只要使用下载这段代码即可实现基于内部链接的平滑滚动

$( 'a[href^="#"]' ).bind( 'click.smoothscroll' , function (e) {

e.preventDefault();

 

var anchor = this .hash,

$target = $(target);

 

$( 'html, body' ).stop().animate({

'scrollTop' : $target.offset().top

}, 500, 'swing' , function () {

window.location.hash = anchor;

});

 

});

使用jQuery获取所有节点

var $element = $( '#gbtags' );

     var $nodes = $element.contents();

     $nodes.each( function () {

         if ( this .nodeType === 3 && $.trim($( this ).text())) {

         $( this ).wrap( '' );

     }

});

限制选择框选择个数

$( "#categories option" ).click( function (e){

     if ($( this ).parent().val().length < 2) {

         $( this ).removeAttr( "selected" );

     }

});

jQuery使用通配符来删除class

var _c = 'your-icon-class'

  

$( '.currency' ).removeClass ( function (index, css) {

     return (css.match (/\bicon-\S+/g) || []).join( ' ' );

}).addClass( 'icon-' +_c);

切换启用和禁用

/* HTML

|

|

< input type = "text" value = "欢迎访问www.admin10000.com" />< input type = "button" value = "禁用按钮" />

|

|

*/

 

// Plugin

(function ($) {

     $.fn.toggleDisabled = function () {

         return this.each(function () {

             var $this = $(this);

             if ($this.attr('disabled')) $this.removeAttr('disabled');

             else $this.attr('disabled', 'disabled');

         });

     };

})(jQuery);

 

// TEST

$(function () {

     $('input:button').click(function () {

         $('input:text').toggleDisabled();

     });

});

平滑滚动返回顶端

< h1 id = "anchor" >admin10000.com</ h1 >

< a class = "topLink" href = "#anchor" >返回顶端</ a >

 

$(document).ready(function () {

 

     $("a.topLink").click(function () {

         $("html, body").animate({

             scrollTop: $($(this).attr("href")).offset().top + "px"

         }, {

             duration: 500,

             easing: "swing"

         });

         return false;

     });

 

});

使用jQuery和Google Analytics来跟踪表单

var array1 = [];

$(document).ready( function () {

     $( 'input' ).change( function () {

         var formbox = $( this ).attr( 'id' );

         array1.push(formbox);

         console.log( "you filled out box " + array1);

     });

     $( '#submit' ).click( function () {

         console.log( 'tracked ' + array1);

         //alert('this is the order of boxes you filled out: ' + array1);

         _gaq.push([ '_trackEvent' , 'Form' , 'completed' , '"' + array1 + '"' ]);

     });

});

超简单的密码强度提示

$( '#pass' ).keyup( function (e) {

     var strongRegex = new RegExp( "^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$" , "g" );

     var mediumRegex = new RegExp( "^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$" , "g" );

     var enoughRegex = new RegExp( "(?=.{6,}).*" , "g" );

     if ( false == enoughRegex.test($( this ).val())) {

         $( '#passstrength' ).html( 'More Characters' );

     } else if (strongRegex.test($( this ).val())) {

         $( '#passstrength' ).className = 'ok' ;

         $( '#passstrength' ).html( 'Strong!' );

     } else if (mediumRegex.test($( this ).val())) {

         $( '#passstrength' ).className = 'alert' ;

         $( '#passstrength' ).html( 'Medium!' );

     } else {

         $( '#passstrength' ).className = 'error' ;

         $( '#passstrength' ).html( 'Weak!' );

     }

     return true ;

});

jQuery生成一个自动停靠页尾效果

// Window load event used just in case window height is dependant upon images

$(window).bind( "load" , function () {

     var footerHeight = 0,

         footerTop = 0,

         $footer = $( "#footer" );

     positionFooter();

 

     function positionFooter() {

         footerHeight = $footer.height();

         footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px" ;

         /* DEBUGGING

console.log("Document height: ", $(document.body).height());

console.log("Window height: ", $(window).height());

console.log("Window scroll: ", $(window).scrollTop());

console.log("Footer height: ", footerHeight);

console.log("Footer top: ", footerTop);

*/

         if (($(document.body).height() + footerHeight) < $(window).height()) {

             $footer.css({

                 position: "absolute"

             }).stop().animate({

                 top: footerTop

             });

         } else {

             $footer.css({

                 position: "static"

             });

         }

     }

 

     $(window)

         .scroll(positionFooter)

         .resize(positionFooter);

});

预防对表单进行多次提交

$(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 ;

     }

   });

});

图像等比例缩放

$(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

});

鼠标滑动时的渐入和渐出

$(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

     });

});

让整个DIV可以被点击

< div class = "myBox" >

     < a href = "http://www.admin10000.com" > admin10000.com < / a >

</ div >

 

$(".myBox").click(function(){

     window.location=$(this).find("a").attr("href");

     return false;

});

图片预加载

( 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" );

获取 URL 中传递的参数

$.urlParam = function (name){

     var results = new RegExp( '[\\?&]' + name + '=([^&#]*)' ).exec(window.location.href);

     if (!results) { return 0; }

     return results[1] || 0;

}

禁用表单的回车键提交

$( "#form" ).keypress( function (e) {

   if (e.which == 13) {

     return false ;

   }

});

转载于:https://www.cnblogs.com/wfpanskxin/p/basejquery.html