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操作的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. jQuery 第二章 实例方法 DOM操作选择元素相关方法

    进一步选择元素相关方法:  .get() .eq() .find() .filter() .not() .is() .has() .add()集中操作  .end()回退操作 .get() $(&qu ...

  3. js常用DOM操作

    在博客园看到了苏夏写的常用DOM整理文章,地址:http://www.cnblogs.com/cabbagen/p/4579412.html,然后抽时间都试了一下这些常用的DOM操作.在这里记录一下. ...

  4. jQuery(3)——DOM操作

    ---恢复内容开始---   jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...

  5. jQuery学习笔记(DOM操作)

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

  6. jQuery总结02_jq的dom操作+属性操作

    一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...

  7. jquery学习:选择器&dom操作

    分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值" ...

  8. Git 工作原理以及常用命令操作

    GIT工作原理 要了解GIT工作原理,先了解GIT的这几块区域: 工作区域划分 工作区:指的是本地工作空间,如果刚拉取下来的代码,没有修改的内容,这块区域是空白的 (modified-已修改状态) 暂 ...

  9. jquery接触初级-----juqery DOM操作 之二

    DOm 操作之: 1.1  children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...

随机推荐

  1. 《iOS设计模式解析》书籍目录

    1.你好,设计模式 2.案例分析:设计一个应用程序 3.原型 4.工厂方法 5.抽象工厂 6.生成器 7.单例 8.适配器 9.桥接 10.外观 11.中介者 12.观察者 13.组合 14.迭代器 ...

  2. pytorch中tensor张量数据基础入门

    pytorch张量数据类型入门1.对于pytorch的深度学习框架,其基本的数据类型属于张量数据类型,即Tensor数据类型,对于python里面的int,float,int array,flaot ...

  3. JavaScript引用类型与对象

    1.引用类型 引用类型的值(对象)是引用类型的一个实例.引用类型有时候也被称为对象定义,因为它们描述的是一类对象所具有的属性和方法. 对象是某个特定引用类型的实例.新对象是使用new操作符后跟一个构造 ...

  4. Intent的常用属性action和category

    设置隐式跳转 首先在我们按钮监听器中添加 Intent i=new Intent(); //参数为字符串,可以添加包名.活动名 i.setAction("com.example.aaaaa. ...

  5. MongoDB in 数量限制

    1.查询语句本身其实是一个document, 最大为16MB(3.4,4.0 的限制,官方文档)2.查询语句本身,也就是{ '' : { '$in' : [] }}, 大小为 22字节3.每增加一个字 ...

  6. 「JLOI2014」聪明的燕姿

    传送门 Luogu 解题思路 很容易想到直接构造合法的数,但是这显然是会T飞的. 我们需要考虑这样一件事: 对于一个数 \(n\),对其进行质因数分解: \[n=\sum_{i=1}^x p_i^{c ...

  7. Masonry与UITableView+FDTemplateLayoutCell搭配使用

    打个小广告:本人开发了一个宠物相关的App,欢迎大家下载体验~ 下载二维码: 进入正文: 之前发过一篇博客,也是对这两个的练习使用,但是之后遇到些问题,所以删除重写了.抱歉 Masonry是一款轻量级 ...

  8. Java 推荐读物与源代码阅读

    Java 推荐读物与源代码阅读                                                     江苏无锡  缪小东 1. Java语言基础     谈到Java ...

  9. Jmeter插件解释

    Jmeter插件解释 1.jp@gc - Actiive Threads Over Time:不同时间活动用户数量展示(图表)  2.jp@gc - AutoStop Listener :自动停止监听 ...

  10. MQTT v5 (MQTT 5.0) 新特性介绍

    https://blog.csdn.net/mrpre/article/details/87267400 背景 MQTT v3.1.1 作为一个经典的版本,一般能够满足大部分需求:为了避免落后,我们也 ...