常用js/jquery代码片段（学习更新）

1.吸顶条

$(window).on("scroll", function () {
                var oHeight = $(".fill-box").offset().top;
                var dTop = $(window).scrollTop();
                if (dTop >= oHeight) {
                      //吸顶
                } else {
                    //不吸顶
                }
            });

2.H5移动端页面分页(滑动到底部，自动加载)

$(document).ready(function(){
    //使用了模板渲染数据
    var showData = function(data){
        var html = template("moduleA",data);
        $(html).appendTo($("#record-wrapper"));
    };
    var n = 1;
    var bok = true;
    var pageNum = 10;
    //发送请求
    $.ajax({
        url:'/webapp/cps/findIncomeDetail.html?pageNo='+n,
        dataType:"json",
        success:function(res){
            if(res.c==100){
                n++;
                showData(res);
                if(res.d.length<pageNum){
                    return false;
                }
                //loading消失
                scrollFn(function(){
                    $.ajax({
                        url:'/webapp/cps/findIncomeDetail.html?pageNo='+n,
                        dataType:"json",
                        success:function(res){
                            if(res.c==100){
                                if(res.d.length==0){
                                    //给出无数据提示,并且锁住无法继续请求
                                    return false;
                                }
                                n++;
                                showData(res);
                                //loading消失
                                bok = true;
                            }
                        },
                        error:function(err){
                            //loading消失
                        }
                    });
                });
            }
        },
        error:function(err){
            //loading消失
        }
    });
    function scrollFn(ajaxFn){
        var oldScrolTop = $(document).scrollTop();
        $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if((scrollTop - oldScrolTop)>0){
                if(scrollHeight - (scrollTop + windowHeight) <=3 ){
                    //出现loading
                    if(bok){
                        bok = false;
                        ajaxFn&&ajaxFn();
                    }
                }
            }
            oldScrolTop = scrollTop;
        });
    }
});

3.使用事件委托方式绑定事件

//给li绑定点击事件
$("#wrapper li").on("click",function(){
    alert($(this).index());
});
//如果li是后期通过数据交互动态添加的元素呢？上面这种方法显然就绑定不上了，
除非你在动态添加之后去绑定，其实有一个更加简单易懂的办法
//这个方法就是事件委托方式，不论后期动态添加多少次li都只绑定一次事件。
$(document).on("click",'#wrapper li',function(){
   alert($(this).index());
});

4.对于经常要获取的元素应该用变量存储

//对于多次要多次使用的元素，应该用变量保存起来，避免重复获取增大开销
function fn() {
    var $wrapper = $('#wrapper');
    $wrapper.css("background","red");
}
fn();

5.使用has()检查某个元素是否包含某个类

<ul id="wrapper">
    <li>
        <div class="mail"></div>
    </li>
    <li>2</li>
</ul>
//获取包含mail类的li元素
$('li').has(".mail").addClass("icon");

6.判断某个块是否显示的方法

if($("#main").is(':hidden')){
    console.log("目前是隐藏的");
}

7.checkbox中使用prop，attr的区别(针对jquery1.6+版本)

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//例如：
console.log($("#check_one").attr("checked"));//输出checked;
console.log($("#check_one").prop("checked"));//输出true;

console.log($("#check_two").attr("checked"));//输出undefined;
console.log($("#check_two").prop("checked"));//输出false;

//尤其是checkbox这里踩过坑的同学应该要特别注意使用prop去获取值

8.toggleClass的使用方法

<button id="btn">点击</button>
<ul id="wrapper">
    <li>
        <div class="mail"></div>
    </li>
    <li>2</li>
</ul>
//意义：点击按钮切换wrapper上的show类
//非常适合做某个元素的显示和隐藏
$("#btn").on("click",function(){
    $('#wrapper').toggleClass("show");
});

9.使用多属性进行过滤

<input type="text" value="hello">
<input type="text" value="good">
//筛选type和value
$('input[type=text][value=hello]').val("world");

10.使用data在元素上面存储数据

$("#main").data("test",{"a":1,"b":2});
console.log($("#main").data("test"));//输出{a: 1, b: 2}
$("#main").removeData("test");

11.select中找到被选中的option

$("#main").find("option:selected").addClass("show");

12.扩展jquery的方法

jQuery.fn.showHide = function(){
   //直接在这里面书写逻辑代码
};
//最后直接这样调用即可
$("#main").showHide();

13.尽量使用find()查找子元素

$("#parent").find('li')//这样选择子元素的方式比起其它的方式性能要高出许多，因为它会调用原生的getElementsByTagName之类的方法

14.尽量少改动DOM结构

//操作DOM也是在所难免的，如果需要多次插入DOM元素的话，可以的话就把它合并，拼接后一次性插入。
var list = '';
for(var i=0;i<100;i++){
    list = '<li>'+i+'</li>';
}
$('ul').html(list);
//性能更加高的办法就是利用数组存储
var arr = [];
for(var i=0;i<100;i++){
    arr[i] = '<li>'+i+'</li>';
}
$('ul').html(arr.join());

15.正确处理循环

循环是非常耗时的操作，如果可以使用复杂选择器选择的话就尽量不使用循环，
使用循环尽量使用原生的for和while循环，比$.each性能高

16.动态插入JS文件

var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");    
  hm.src = "https://hm.baidu.com/hm.js?b925bd654cebcae0016bff744ba20def";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();

17.未完待续