活动公告当前位置:星鸿娱乐 > 活动公告 > >

jQuery原理系列-常用Dom操作详解

  

[jquery,dom,操作]jQuery原理系列-常用Dom操作详解

  

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一直到根节点,判断每一级父节点是否与选择器相匹配,  

  

高级浏览器通过matchesSelector 判断一个dom元素是否匹配某个css 选择器,不同的浏览器有不同的前缀,  

  

var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector ||  
  element.oMatchesSelector || element.matchesSelector  
  

  

低版本的ie需要自己实现选择器的判断,为了简化问题,仅以id选择器为例,其它选择器雷同(判断tagName,className,getAtrrbuite等)  

  
  
  var el=current,selector="#id1";  while(el.parentNode!=null){  if("#"+el.id==selector){ //el.webkitMatchesSelector(selector)  return el;  }  el=el.parentNode;  }  
  
  

7.事件委托 $(selector).live("click",callback)   

  

jQuery的live事件绑定机制非常强大,普通的bind只能在dom元素生成后才能绑定事件,而live则可以在任何时候,即使元素还没有生成时就能绑定事件,使用起来相当的多块好省,live的原理自然是通过事件委托(事件代理)实现的,事件委托是指在父元素或根元素上绑定事件,事件委托可以提升性能,只需要一个点击事件绑定就能处理所有元素的点击事件。通过事件冒泡监听,判断当前点击的元素event.target如果是要查找的目标元素,则触发事件回调函数,event.target只有一个,这会带来一个问题,例如一个li元素包含一个a链接,我想在li元素上绑定事件监听a链接的点击,直接通过event.target是不行的,需要查找父级元素,这就需要借助上一步封装的parents或closest查找父级如果是匹配的目标元素,也要触发事件回调,示例代码如下:  
  

  
  
  function live(selector,callback){  document.body.addEventListener("click",function(e){  var target=e.target || e.srcElement;  var list=closest(target,selector);//向上查找选择器,需要借助上一步封装的closest或parents函数  if(list.length>0){  callback.call(target,e);  }  });  }
  
  

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

  

这个是jquery特有的伪类:visible,只要当前元素或其父节点不可见,就会返回false,和向上查找元素的原理一样,一直向上查找到根节点,如果有style.display为none的,或style.visiblity为hidden的祖先元素则返回false,否则返回true,获取style不能直接使用style属性,因为有些样式可能是定义在css文件中的,使用window.getComputedStyle(element)可以得到一个dom元素的计算样式,在ie8以下使用currentStyle获取。

  

  

以上这篇jQuery原理系列-常用Dom操作详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

  

(责任编辑:admin)

上一篇:星鸿娱乐平台javascript中Date对象应用之简易日历实

下一篇:星鸿娱乐注册微信小程序 Button 组件详解及简单实

推荐内容

客户服务热线

010-400-12345

在线客服