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