分享10个超实用的jQuery代码片段

素颜马尾好姑娘i 2022-01-10 18:17 241阅读 0赞

日期：2013-7-9  来源：[GBin1.com][]

[![分享10个超实用的jQuery代码片段][10_jQuery]][10_jQuery_10_jQuery]

[jQuery][]以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库，在这里我们分享一组实用的[jQuery][]代码片段，希望大家喜欢！

## jQuery平滑回到顶端效果 ##

$(document).ready(function() {
    
    	$("a.topLink").click(function() {
    		$("html, body").animate({
    			scrollTop: $($(this).attr("href")).offset().top + "px"
    		}, {
    			duration: 500,
    			easing: "swing"
    		});
    		return false;
    	});
    
    });

运行代码：

GBdebug在线调试地址： [http://www.gbin1.com/gb/debug/20864b59-a995-4318-a242-b3038f83f2c3.htm][http_www.gbin1.com_gb_debug_20864b59-a995-4318-a242-b3038f83f2c3.htm]

## jQuery处理图片尺寸 ##

$(window).bind("load", function() {
    	// 图片修改大小
    	$('#imglist 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;
    		}
          
    		if(height > maxHeight){
    			ratio = maxHeight / height;
    			$(this).css("height", maxHeight);
    			$(this).css("width", width * ratio);
    			width = width * ratio;
    		}
    	});
    
    });

运行代码：

GBdebug在线调试地址： [http://www.gbin1.com/gb/debug/5a2271a5-f363-4b34-8d2f-f0ad03121ced.htm][http_www.gbin1.com_gb_debug_5a2271a5-f363-4b34-8d2f-f0ad03121ced.htm]

## jQuery实现的滚动自动加载代码 ##

## jQuery测试密码强度 ##

$('#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!');
         }
    ........
    GBdebug在线调试地址：http://www.gbin1.com/gb/debug/b1a87e30-e33f-4369-92fc-55e8fd628816.htm

希望大家喜欢这些实用的jQuery代码，如果你也有更多的jQuery代码片段，请与我们分享，谢谢！

via [极客社区 ][Link 1]

#### 来源：[分享10个超实用的jQuery代码片段][GBin1.com] ####

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130709-10-useful-jquery-snippets/
[10_jQuery]: http://www.gbin1.com/technology/javascript/20130709-10-useful-jquery-snippets/title.jpg
[10_jQuery_10_jQuery]: http://www.gbin1.com/technology/javascript/20130709-10-useful-jquery-snippets/index.html
[jQuery]: http://www.gbin1.com/bloghome.html?tag=jquery
[http_www.gbin1.com_gb_debug_20864b59-a995-4318-a242-b3038f83f2c3.htm]: http://www.gbtags.com/gb/debug/20864b59-a995-4318-a242-b3038f83f2c3.htm
[http_www.gbin1.com_gb_debug_5a2271a5-f363-4b34-8d2f-f0ad03121ced.htm]: http://www.gbtags.com/gb/debug/5a2271a5-f363-4b34-8d2f-f0ad03121ced.htm
[Link 1]: http://www.gbtags.com/gb/share/1373.htm