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一直到根节点,判断每一级父节点是否与选择器相匹配,为了简化问题,仅以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

时间: 2024-10-29 19:12:12

jQuery原理系列-常用Dom操作的相关文章

jQuery常用dom操作

操作属性节点(type属性不支持修改和删除) attr('name')——取值(如果jq对象是多个,则只取得第一个值,例如:$('.class').attr('name')——只获得第一个class的name属性值) attr('name','value')——赋值 如果参数是json对象,那么则会同时修改多个属性值,例如:var kv = {name:'username',value:'tom'}; $('#username').attr(kv); 还可以通过函数的返回值来修改属性值,例如:$

js常用dom操作

利用dom获得页面元素节点 a) document.getElementById()    //id获得元素节点对象 b) document.getElementsByTagName()   //html标签获得元素节点对象(数组) c) document.getElementsByName(); //常用于表单(数组) 属性判断当前节点类型nodeType a)        1  元素节点 b)        2  属性节点 c)        3  文本节点 d)        9  文档

jQuery之常用DOM操作(一)

DOM操作分主要为三种,DOM Core,HTML-DOM和CSS-DOM 查找节点 查找元素节点 主要通过jQuery的选择器来查找元素节点 查找属性节点 在查找到元素节点之后可以使用attr()来查找或设置对应节点的属性 创建(子)节点 使用$(html标签代码字符串)创建一个节点,然后再使用下面的方法来插入节点;同时下面的方法也可以移动原有的元素节点 append()向每个匹配的元素内部追加内容 appendTo()把所有匹配的元素追加到指定的元素中 prepend()向每个匹配的元素内部

jquery学习:选择器&dom操作

分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值")  获得与指定id属性值匹配的元素 3.类选择器 *  语法:$(".class的属性值")  获得与指定的class属性值匹配的元素 4.并集选择器: *  语法:$("选择器1,选择器2....")  获得多个选择器选中的所有元素 $(function (){ /

Jquery基础入门-3-JQuery DOM操作-3、4、5

11-JQuery DOM操作-332:00 12-JQuery DOM操作-421:38 13-JQuery DOM操作-520:59 八.节点属性操作</strong><br /> 1.设置获取属性方法:attr(),删除属性的方法:removeAttr().<br /> ◆ alert($(“li:eq(1)”).attr(“title”));//获取第二个li元素的title属性.<br /> ◆ $(“ul”).attr({“title”:”列表”

jQuery系列:DOM操作

1. 访问元素 在访问页面时,需要与页面中的元素进行交互式的操作.在操作中,元素的访问主要包括对元素属性.内容.值.CSS的操作. 1.1 元素属性操作 1.1.1 设置或返回被选元素的属性值 语法格式: attr( name | properties | key, value | fn) 其中,参数 name:属性名称 properties:作为属性的“名/值对”对象 key, value:属性名称,属性值 key, function(index, attr): ◊ 属性名称: ◊ 返回属性值

jQuery基础知识点(DOM操作)

使用jQuery的方式来操作DOM更加的简洁.方便,统一的调用方式方便学习并且可降低学习成本. 1.样式属性操作   1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, “red”); ②设置多个样式(也可以设置单个) // 参数为 {}(对象) $(selector).css({“color”: “red”, “font-size”: “30px”}); 2)获取样式属性操作 // 参数

javascript 常用DOM操作整理

1.选取了DOM操作中实用并常用的部分,省略了实用但有明显兼容性的部分2.DOM属性和方法的对象归属可能并不完全准确3.某些一般兼容性和特点做了标识(主要是ie8-9上下) 节点类型 节点类型 节点值 标签节点(Element) 1 属性节点(Attr) 2 文本节点(Text) 3 CDATA节点(CDATASetion) 4 实体引用节点(EntityReference) 5 实体节点(Entity) 6 处理指令节点(ProcessingInstruction) 7 注释节点(Commen

【学习笔记】锋利的jQuery(二)DOM操作

一.获取DOM节点 //找祖宗 parent() parents() closest() //找后代 children(); find(); //找兄弟 next()/nextAll() prev()/prevAll() siblings() 二.元素节点操作 $(html) //创建DOM append()/appendTo() //内部追加 prepend()/prependTo() //内部前置 after()/insertAfter() //后面插入 before()/insertBef