可用的jquery代码段（1）

最新推荐文章于 2024-09-09 18:11:22 发布

原创最新推荐文章于 2024-09-09 18:11:22 发布 · 601 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了三种前端开发中常用的实用技巧：实现窗口滚动时自动加载更多内容，防止表单重复提交，以及添加返回页面顶部的功能。这些技巧使用了jQuery来简化DOM操作和Ajax调用，适用于需要增强用户体验和优化交互流程的Web应用。

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

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

});

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

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

    }

  });

});

3.返回页面顶部

// 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>