JS 封装库调试封装
DOM加载已经做好了,我们需要将他封装到Base中去,然后调用的时候直接通过$(function(){})将需要在dom解析后运行的代码放入圆括号函数中。封装到Base基础库中function Base(args) { this.arr = []; if(typeof args == 'string') { if(args.indexOf(' ') != -1){ var childNodes = args.split(' '); var temNo...
解决超时调用无限调用的问题之前我们并没有给超时调用加上时间设置,所以默认是一毫秒一次无限循环的,这样不好,写法上也是不那么合理,所以这里要加上毫秒数,并且还要运行后删除这个超时调用。超时调用本来是不需要赋予变量名的,但是如果你要删除的话,就需要设置一个变量名,之前我们给超时调用设置了timer的变量名,这里就不多赘述了。function addDomLoaded(fn) { if(document.addEventListener) { addEvent(document,'DOMContentLoaded',function(){ ...
之前我们用的js都是在window.onload事件里面使用的,但是这样会有一个问题,如果页面的内容一直没有加载完毕,我们的js就无法使用,这就很头疼了,我目前为博客加的两个js效果就是处于未加载完毕就无法运行的尴尬局面。解决办法:DOMContentLoaded方法w3c提供了一个事件为DOMContentLoaded;这个事件是在浏览器解析完文档便能触发。那么这个浏览器解析文档是一个什么样的处理过程呢,就是相当于已经把html元素都过了一遍,页面已经初具雏形了,但是一些外部资源,例如图片这些还在加载中,这时便会触发DOMContentLoaded事件。简单点来说DOMContentL...
三元运算一般如下:(s1) ? (s2) : (s3);判断s1得到的值,如果是true就运行s2,false就运行s3。连续三元就是每次都以false运行的值再做判断,再一次三元,如下:(s1) ? (s2) : (s3) ? (s4) : (s5);这里就可以连续判断两次,和if中的else if一样,第二次三元以第一次s1返回false运行s3时,判断s3得到的值,如果为true则运行s4,false运行s5。那么连续三元都是以false运行的值再次判断,然后无限重复,直到你不需要重复了,如果说最后三元判断false不需要再运行什么了,可以打个0.(s1) ? (s2) : (s3...
之前的章节使用都是单一式获取方法,一次只能获得单个或者对应的元素数组,唯一加了获取条件的就是通过class获取元素,我们加了一个用于筛选的idName,当idName存在,class要从这个idName元素下获取,但是这样也不能方便的使用,万一我们要在某个class元素下搜索某个tagName或者class,之前的方法完全不够用了。为此我们衍生出新的获取元素的方法。我们的希望获取元素可以这样写:$('#er span i').css('color','red')获取id为er的元素下的span元素中的i元素,让他的颜色改为红色。...
因为拖拽的功能并不是说常用到,基本上就是弹窗之类的会用到,而且拖拽用到的代码会比较多,如果丢到Base的封装库中,比较费资源,所以我们可以将拖拽打包成插件,然后再通过插入的方式调用。什么是插件?就是通过共有的prototype中的方法,来为这个函数添加共有的方法,也就是在Base.prototype.xxx中又创建了一个Base.prototype.xxx方法,然后名称和function通过传参的方式传入。创建插件//插件入口 Base.prototype.extend = function(name, fn) { Base.prototype[name] = fn; }将拖拽方...
w3c提供了addEventListener和removeEventListener两个方法,而IE提供的是attachEvent和detachEvent;但是ie的方法有很多问题,那么我们要解决以下这些问题:支持同一个元素同一个事件绑定多个监听函数,如window.onload可以有多个,并且都是可以正常执行的。同一个元素的相同事件注册同一个函数,只会运行一次。函数体内的this应当指向调用该事件的对象本身。监听函数的执行顺序应当按照绑定的顺序执行。在函数体内event对象不使用event||window.event来标准化event对象。跨浏览器添加事件:function addEv...
call()对象冒充,最直白的记忆方法,就是更改this的指向,比如:document.onclick = function() { fn(); }; function fn() { if (this === window) alert('window'); if (this === document) alert('document'); }这里我们知道,函数里面的函数,this指向的是window,那么我们使用call便可以让this指向document,用法如下:document.onclick = function...
上一篇我们讲了使用伪元素来实现遮罩层,虽然很方便,但是也有一些缺点,比如:z-index需要设置好,由于伪元素是login里面的,所以哪怕伪元素的z-index:-999;也不可能穿透login元素,这样的话,form元素就要设置一下背景色了。无法为伪元素添加点击事件为此我们还可以单独创建一个遮罩层元素,这个元素一般在login元素的上面并且为同级元素,我们可以利用js创建或者先创建好再设置css,我这里选择js创建,虽然麻烦一点,但是显得有技术啊!233...效果图:css部分:.login_Masked { position: absolute; top: 0; ...
前言:由于DOM2不支持load()从外部加载xml文件,所以只能做loadXML()的兼容方法,有点可惜!创建兼容的loadXML():function createXMLDom(value){ var xmlDom = null; if(typeof window.DOMParser != 'undefined') { xmlDom = (new DOMParser()).parseFromString(value,'text/xml'); //alert((new XMLSerializer()...
主题开启预加载可以加快访问速度,但是在一些程度上还是有一些取舍,比如js中的window.onload事件,就会只运行一次,当你进入到下一个页面的收,window.onload里面执行的内容就完全停止了,甚至可以说没有了,有点像是,你吃着吃着突然就换了一个肚子,这样虽然吃的也多,但是不一样了啊,和原来的对不上了,所以我们还是要针对这种情况,让js代码再次运行,这就相当于换了个肚子,还要接上才能用。询问了下泽泽,他说《Yodu》的预加载在footer.php中,在if (isInitialLoad === false) {}中,具体如下图:我们可以看到在这个里面其实有很多if的判断语句,这...
都是辛酸泪,这几天学这个头大,不过好在我搞定了,并且还不会冲突,兼容ie9以上,相当奈斯!2018-10-5 重新做了兼容,虽然没什么卵用,美名其曰优化代码!效果图:原理就是通过修改class的名字来达到隐藏和显示的效果,并且修复了原来动效不能显示的bug。代码部分(css部分我就不提供了):[hide]//兼容添加事件 function addEvent(obj,type,fn) { if(obj.addEventListener) { obj.addEventListener(type,fn,false); }else if(obj.attachEve...
最近评论