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