在此祝大家新年快乐,祝大家新年快乐,合家幸福,步步为营!回到正题,在《不要太依赖JQuery(一)》和《不要太依赖JQuery(二)》两篇文章中已经有很多使用原生JavaScript代替JQuery的例子,而我本文将一一列举!1.表单获得焦点$('#test').focus();$('#test').focus(function(){});vart=document.getElementById('test');functionaddEvent(dom,type,handle,capture){if(dom.addEventListener){dom.添加事件监听器(类型、句柄、捕获);}elseif(dom.attachEvent){dom.attachEvent("on"+type,}});functionfocus(elem,fn){if(fn&&typeoffn==='function'){addEvent(elem,'focus',fn);}else{elem.focus();}}focus(t,function(){});失去焦点$('#test').blur();$('#test').blur(function(){});functionblur(elem,fn){if(fn&&typeoffn==='function'){addEvent(elem,'blur',fn);}else{elem.blur();}}模糊(t,函数(){});实时监控$('#test').on('inputpropertychange',fn);functioninputChange(dom,fn,capture){capture=capture||错误的;添加事件(dom,'输入',fn,捕获);addEvent(dom,'propertychange',fn,capture);}inputChange(t,function(){});2.判断类型判断类型$.type(obj);Object.prototype.toString.call(obj).replace(/^\[object(.+)\]$/,'$1').toLowerCase();判断是否为函数$.isFunction(fn)functionisFunction(fn){returntypeoffn==='function';}判断是否为数字$.isNumeric(num);functionisNumber(num){vartype=数字类型;return(type==='number'||type==='string')&&!isNaN(num-parseFloat(num));}判断是否为数组$.isArray(obj);functionisArray(obj){if(Array.isArray){返回Array.isArray(obj);}else{returnObject.prototype.toString.call(obj)==='[objectArray]';}}3.Time获取当前时间$.now()newDate().getTime();/*Easier*/+newDate();4.改变上下文(this)$.proxy(fn,context);fn.bind(上下文);5.空函数创建一个空函数varfn=$.noop();varfn=function(){}6.将数组合并成数组$.merge(arr1,arr2)function(arr1,arr2){returnarr1.concat(arr2);}将类数组对象转换为数组vardivs=document.querySelectorAll('div');vararr=$.makeArray(divs);vararr=Array.prototype.slice.call(divs);//ES6vararr=Array.from(divs)7.iframe获取iframe的文档$('#iframe').contents();variframe=document.getElementById('iframe');iframe.contentDocument;8.元素包含关系检查DOM元素是另一个DOM元素的后代$.contains(parent,child);functioncontains(root,el){/*Chrome/Firefox*/if(root.compareDocumentPosition){returnroot===埃尔||!!(root.compareDocumentPosition(el)&16);}/*IE*/if(root.contains&&el.nodeType===1){returnroot.contains(el)&&root!==el;}while((el=el.parentNode)){if(el===root){returntrue;}返回假;}}9.滚动设置/获取窗口滚动位置/*get*/$(window).scrollTop();(document.documentElement&&document.documentElement.scrollTop)||document.body.scrollTop/*设置*/$(window).scrollTop(10);(document.documentElement&&document.documentElement.scrollTop=10)||文档.body.scrollTop=10;设置元素的滚动位置$('#test').scrollTop(10);vart=document.getElementById('test');t.scrollTop=10;注意:不要添加单位!10、节点获取元素的最近祖先(位置不是静态的)元素$('#test').offsetParent();vart=document.getElementById('测试');t.offsetParent;到这里《不要过度依赖JQuery》系列结束啦!
