zoukankan      html  css  js  c++  java
  • 分享10个超实用的jQuery代码片段

    日期:2013-7-9  来源:GBin1.com

    分享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

    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

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

    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);
    });
    

    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 极客社区

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

  • 相关阅读:
    HTTP Header 详解
    nginx负载均衡配置
    Win10安装Oracle11g
    MySQL如何让别人远程连接自己的数据库
    Maven的安装以及配置
    linux上安装jdk,tomcat,mysql
    Centos7上安装docker
    ActiviMQ快速入门
    2018年上海后半年JAVA软件工程师面试真题
    Docker安装MySQL、Redis、Tomcat
  • 原文地址:https://www.cnblogs.com/java20130725/p/3215514.html
Copyright © 2011-2022 走看看