jQuery原理系列-常用Dom操作

Posted 2020-06-14

1. 事件绑定$(el).bind

ie使用attachEvent，其它浏览器使用addEventListener，不同的是ie多了个on前缀，this绑定在window上，需要用call和apply修正this 的指向。

if (element.addEventListener) {

        element.addEventListener(type, handler, useCapture);

    } else {

        if (element.attachEvent) {

            element.attachEvent("on" + type, function(e){

                 handler.call(element,e);

             });

        }

    }

 

2.获取偏移量 $(el).position();

相对于包含块的偏移量，直接取offsetLeft,offsetTop

{left: el.offsetLeft, top: el.offsetTop}

 

3.获取相对于根元素的绝对位置$(el).offset()

调用dom元素的getBoundingClientRect方法，这个是鲜为人知的。

var rect = el.getBoundingClientRect();

{

  top: rect.top + document.body.scrollTop,

  left: rect.left + document.body.scrollLeft

}

 

4.修改css样式 $(el).css({color:"red"})

style属性是无法直接赋值的，但是给style.cssText属性赋值，可以直接赋值到style属性中，为了不覆盖原有的style，我们在原有的cssText后面追加字符

el.style.cssText+="background:red";

 

5.修改和获取自定义属性$(el).attr(name,val),

  

dom元素的getAttribute和setAttribute可以修改dom的自定义属性，

el.getAttribute(name)

el.setAttribute(name,val);

另外，jquery还有一个prop方法在设置dom节点的固有属性，例如checkbox，radio的checked属性时，用attr可能设置不成功，这时需要用prop ，prop只能用来读写固有属性，而attr是固有属性和自定义都可以，但是有些特殊的固有属性设置不成功时需要用prop

 

 

6.向上查找元素  $(el).parents(selector),$(el).closest(selector)

这个非常常用，原理是遍历parentNode一直到根节点，判断每一级父节点是否与选择器相匹配，为了简化问题，仅以id选择器为例，其它选择器雷同（判断tagName,className,getAtrrbuite等）

 

var el=current,selector="#id1";

while(el.parentNode!=null){

if("#"+el.id==selector){

return el;

}

el=el.parentNode;

}

7.判断元素可见性 $(el).is(":visible")

这个是jquery特有的伪类:visible，只要当前元素或其父节点不可见，就会返回false，和向上查找元素的原理一样，一直向上查找到根节点，如果有style.display为none的，或style.visiblity为hidden的则返回false，否则返回true