jQuery原理系列-常用Dom操作详解(jquery实现原理)

发布时间：2024-02-27

推荐整理分享jQuery原理系列-常用Dom操作详解(jquery实现原理)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery原理和实现步骤,jquery的理解,jquery技术,jquery工作原理,jquery技术,jquery的底层原理,jquery 原理,jquery工作原理,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

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

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

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

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

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

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等）

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

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

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操作详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持积木网。

jQuery原理系列-css选择器的简单实现 jQuery最强大的功能在于它可以通过css选择器查找元素，它的源码中有一半是sizzlecss选择器引擎的代码，在html5规范出来之后，增加了document.querySelector和do

基于jQuery下拉选择框插件支持单选多选功能代码由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui。下面给大家展示

jQuery封装的屏幕居中提示信息代码本文实例讲述了jQuery封装的屏幕居中提示信息代码。分享给大家供大家参考，具体如下：functionshowLoad(tipInfo,type,autohide){varpic="";switch(type){case0://loadingpic="

标签: jquery实现原理

本文链接地址:https://www.jiuchutong.com/biancheng/386642.html 转载请保留说明！

上一篇：浅谈jQuery 选择器和dom操作(jquery的选择器有哪几种类型)

下一篇：jQuery原理系列-css选择器的简单实现(jquery的底层原理)