常用的Jquery工具方法

一、根据后端动态字段，如何把驻点输出在页面上？
1、可以提前写好css，设置li的宽度，在页面中通过模板引擎语法动态加载不同的className。
2、可以根据驻点个数和位置，用jquery去动态计算赋值。

var paths = $('.detail-path');
$.each(paths, function(){
  var points = $(this).children(),
  pointsLen = points.length;
  $.each(points, function(){
    var $this = $(this),
    middleNum = 100 / (pointsLen + 1),
    halfSelfWidth = $this.width() / 2,
    leftPercent = $this.attr('data-left') * middleNum;
    $this.css({'left': leftPercent + '%', 'margin-left': -halfSelfWidth + 'px'}).show();
  });
});

二、信息滚动

1、单行信息滚动

setInterval(this.marquee,3000);
marquee: function(){
    var prizeul=$('#prizeul');//定义滚动区域
    var fli=prizeul.find('li:first');
    var flih=fli.height();//每次滚动高度
    fli.animate({
           marginTop:-flih+'px'
        },600,function(){//通过取负margin值,隐藏第一行
        fli.css('marginTop',0).appendTo(prizeul);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
    })
},

2、鼠标移进停止滚动，移出继续滚动

var vid = setInterval(marquee,3000); 
$('.J-scroll').mouseenter(function(){ 
    clearInterval(vid); 
}).mouseleave(function(){ 
    vid = setInterval(marquee,3000);
});

 三、回到顶部

//页面滚动时，是否显示回到顶部
$(window).scroll(function(){
  if($(window).scrollTop() > 1500){
    $('.returntop').show();
  }else{
    $('.returntop').hide();
  }
});

//回到顶部的点击事件
$('.returntop').click(function(){
  var timer = null;
  timer = setInterval(function(){ 
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    var speed = Math.ceil(top/6);//高度小于6时可以一直递减到0
    document.documentElement.scrollTop = top - speed;//缓慢增加
    document.body.scrollTop = top - speed;
    if(!top){ 
      clearInterval(timer);
    }
  },50);
});

四、懒加载

<script type="text/javascript" src="/js/lazyload/jquery.js">script>
<script>
$(document).ready(function(){
  // 获取页面视口高度
  var viewportHeight = $(window).height();
  var lazyload = function() {
    // 获取窗口滚动条距离
    var scrollTop = $(window).scrollTop();
    $('img').each(function(){
      // 判断视口高度+滚动条距离与图片元素距离文档原点的高度         
      var x = scrollTop + viewportHeight - $(this).position().top;
      // 如果大于0即该元素能被浏览者看到，则将暂存于自定义属性loadpic的值赋值给真正的src    
      if (x > 0){
        $(this).attr('src',$(this).attr('loadpic')); 
      }
    });
  }
  // 创建定时器 “实时”计算每个元素的src是否应该被赋值
  setInterval(lazyload,100);
});
script>

 五、获取文本框的焦点时，如何使光标停留在文字后面？

var t = $("#J_input").val(); 
$("#J_input").val("").focus().val(t); 

先获取内容，将其置空，然后获取焦点，最后填充内容，即可实现光标出现在文字后面的功能。

六、表单复选框，全选，取消子选项

<input name='selectall' type='checkbox' id="J_select_all_btn"> 全选
<input name='jsframe' type='checkbox'>es5
<input name='jsframe' type='checkbox'>es6
<input name='jsframe' type='checkbox'>reactjs
<input name='jsframe' type='checkbox'>vuejs
<input name='jsframe' type='checkbox'>angularjs
<input name='jsframe' type='checkbox'>jquery

//给全选按钮绑定事件
$("#J_select_all_btn").click(function() {
  $('input[name="jsframe"]').attr("checked", this.checked);
});
var $jsframe = $("input[name='jsframe']");
//给每个checkbox绑定事件
$jsframe.click(function() {
  $("#J_select_all_btn").attr("checked", $jsframe.length == $("input[name='jsframe']:checked").length ? true: false);
});

 

转载于:https://www.cnblogs.com/camille666/p/jquery_mytool_function.html