jquery学习笔记五：杂项纪录

jquery core 工具方法$.each $.map $.noop

1 事件代理

　　$("table").on("click","td",fn)　　优于　　$("table td").bind("click",fn)

2 数据存储于HTML中的Data属性

　　设值：$("div").data("name",value)　　

　　获取：$("div").data("name")　　

　　<div data-name="yinshen">

3.扩展jquery对象方法：

　　居中 $("div").center()

$.fn.center=function(){

           this.css("position","absolute");

           this.css("top",($(window).height()-this.height())/2+$(window).scrollTop()+"px");

           this.css("left",($(window).width()-this.width())/2+$(window).scrollLeft()+"px"); 

}        

　日志 console

$.log=$.fn.log=function(msg){

        if(console){

                 console.log(msg)

        }    

}        

4.重置新窗口打开

　　$("a[href^='http://']").attr("target","_blank")

5.禁用页面右键菜单

　　$(document).bind("contentmenu",function(e){return false;})

6.本地存储

　　localStorage.name=value;

　　localStorage.setItem(name,value);

 　  localStorage.getItem("name");

7.类型判断、空方法

$.isFunction()　　　

$.isPlainObject()

$.noop()

 

 延迟加载插件

/**

 * @author yinshen

 * img标签lazy时data_src属性不能为空,相对于window容器,

 * callback 回调方法

 * pre    预加载区

 */

$.fn.scrollLoading=function(opt){

    var _default={

        callback:$.noop,

        pre:100        

    };

    opt=$.extend({}, _default, opt || {})

    var scrollData=[];

    $(this).each(function(){

        scrollData.push({

            obj:this,

            src:this.data_src,

            tag:this.nodeName.toLowerCase()

        });            

    });

    

    //判断元素是否全部显示在窗口

    function isInner(obj){

        return 

            (obj.offset().top-$(window).scrollTop()>0&&obj.offset().top-$(window).scrollTop()<opt.pre)&&//obj头在页面区

            (obj.offset().top+o.height()-$(window).scrollTop()<$(window).height()+opt.pre);//obj底在页面区

    }

    

    function loading(){

        $.each(scrollData,function(i,o){

            if(isInner($(o.obj))){

                //如果是图片，则替换data_src为src

                if(o.src&&o.nodeName.toLowerCase()=="img"){

                    o.obj.src=o.src;

                    o.obj.data_src=o.src="";

                }

                $.isFunction(opt.callback)?opt.callback.apply(o.obj):"";

            }

        });            

    }

        

    loading();    

    $(window).bind("scroll", loading);

}