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