-
offset()方法允许我们检索一个元素相对于文档（document）的当前位置，它和.position()的差别在于：.position()是相对于父级元素的位移。 offset() top: box.top + win.pageYOffset - docElem.clientTop, left: box.left + win.pageXOffset - docElem.clientLeft position() top: offset.top - parentOffset.top - jQuery.css(elem, "marginTop", true), left: offset.left - parentOffset.left - jQuery.css(elem, "marginLeft", true)查看全部
-
针对参数的多形式 jquery 在之前会通过一个 jQuery.access 方法过滤这些参数，原理就是针对字符串、数组、对象的一个遍历而已。 样式的赋值, jQuery的处理流程： 1. 分解参数 2. 转换为驼峰式，修正属性名 3. 如果有钩子，则调用钩子的set get 4. 最终实现都是依靠浏览器自己的API的查看全部
-
css 参数的处理也跟之前的 attr 属性的处理保持一致，采用了jQuery.access 方法统一调配，这个具体之前就分析了，无非就是递归参数，但是有个可学的设计思路，分离不同的逻辑判断通过回调传递进去。 所以总结 jquery.css 的接口其实也很简单。 1.转化样式命名 2.处理特殊的属性比如float 3.分离出一个钩子，用于处理跟尺寸有关的属性 4.其余元素采用getComputedStyle获取对应的值查看全部
-
.width()是我们经常应用获取对象宽度的方法，但是就Query为了做这个兼容可不是表面上那么简单的，首先整理下涉及到元素宽度处理,我们需要考虑的因素。 1 元素的宽素可以是内联或者通过link定义,所以通过style是不可取的 2 元素在隐藏状态下是不能获取任何尺寸的 display:none 3 CSS3引入了box-sizing的设置 我们看看jquery如何处理的： width，height在内部最终调用的是jQuery.css(elem, type, extra)方法，jQuery.css是最终的一个针对所有CSS处理的接口，我们放在下一章，这里我们只涉及width与height的获取。 display:none的状态下是无法获取元素的尺寸的，所以jQuery在最开始之前必须要检测下这个状态，这个处理是通过钩子jQuery.cssHooks['widht'].get方法调用的： /^(none|table(?!-c[ea]).+)/test(jQuery.css(elem, "display")) //代码很简单通过判断得到的值 当检测到是none的情况下，就要把display置为block？不行这样就改变了布局的原意了，本来就是隐藏的。jQuery就会对元素增加position: absolute; visibility: hidden;这样的属性达到display:none的效果，因为在visibility: hidden的情况下，是可以获取到值的，只是对于用户不可见而已。 获取元素的尺寸值我们有offsetWidth,与offsetHeight,大多情况下是够用了，但是有一种情况如果元素采用boxSizing处理，所以jQuery还要对BorderBox情况的检测，如果如果是采用了border-box样式的话，针对值的获取还要减去padding,border，这又是一个相当繁琐的过程，我们在之前就提到过这个过程的处理了。查看全部
-
W3C的标准 Box Model: 外盒尺寸计算（元素空间尺寸） Element空间高度 = content height + padding + border + margin Element空间宽度 = content width + padding + border + margin 内盒尺寸计算（元素大小） Element Height = content height + padding + border （Height为内容高度） Element Width = content width + padding + border （Width为内容宽度）查看全部
-
IE9/IE8: 这两个差不多，唯一的区别是IE9包含window.innerWidth属性，而IE8不包含window.innerWidth属性。 1、document.documentElement.scrollWidth返回整个文档的宽度，和FF等浏览器一致 2、document.documentElement.offsetWidth返回整个文档的可见宽度（包含滚动条，值和innerWidth一致），注意，这里和FF等浏览器又有点区别。 3、document.documentElement.clientwidth返回整个文档的可见宽度（不包含边框），和FF等浏览器一致。clientwidth = offsetWidth - 滚动条宽度document.body.scrollWidth返回body的宽度。查看全部
-
document.documentElement与document.body的区别： document.body 是 DOM 中 Document 对象里的 body 节点 document.documentElement 是文档对象根节点(html)的引用 比较常见的三个值scrollWidth、offsetWidth和clientwidth： document.documentElement.scrollWidth 返回整个文档的宽度 document.documentElement.offsetWidth 返回整个文档的可见宽度 document.documentElement.clientwidth 返回整个文档的可见宽度（不包含边框 clientwidth = offsetWidth - borderWidth） 不过一般来说，我们不会给document.documentElement来设置边框，所以这里的 clientwidth 与 offsetWidth 一致。 document.body.scrollWidth返回body的宽度: 这里的scrollWidth有个不一致的地方，基于 webkit 的浏览器（Chrome和Safari）返回的是整个文档的宽度，也就是和 document.documentElement.scrollWidth 一致，opera 和 FF 返回的就是标准的 body 的 scrollWidth 个人觉得 opera 和 FF 算是比较合理的。 为什么offsetWidth始终比clientWidth大呢？: 原因就在于这个“边线”。当然，如果出现的滚动条，offsetWidth也会包含滚动条的宽度，而clientWidth是不包含滚动条的宽度的。查看全部
-
学习重点： 文档中：图+代码 ps. scrollHeight计算方式 ： scrollHeight = topPadding + bottomPadding + 内容margix box的高度。 FF、Chrome 认为scrollHeight 是网页内容高度，不过最小值是clientHeight。??根据clientWidth、clientHeight的代码公式，感觉和上边是一样的啊。 浏览器窗口的滚动条位置：window对象的 pageXoffset 和 pageYoffset , IE 8及更早版本可以通过scrollLeft和scrollTop属性获得滚动条位置。查看全部
-
因为操作都是跟data_priv与data_user挂钩的所以我模拟的话实现的代码量太大了，这里就直接给大概的流程吧。 首先我们elem.cloneNode(true)直接给这个元素克隆一份，我们要做的就是把克隆后的元素加入事件与数据。 jQuery内部的数据都缓存在data_priv中，包括事件，data_user是提供给用户操作的，用户的数据。 所以就需要把这个2个缓存给找出来然后混入到新的克隆节点中，jQuery都是提供接口data_priv.access,data_priv.set。 值得注意的是 事件的复制是需要重新jQuery.event.add绑定的，如果节点是有嵌套的话，需要遍历每一个元素节点，在每个节点上都要处理事件与数据。查看全部
-
jQuery.cleanData方法，就是通过元素判断上绑定的expando的这个uuid在与之对应的cache中找到数据与事件句柄加以删除。 移除 涉及节点删除的接口jQuery划分了四个分别是detach，empty，remove，unwrap，因为使用的范围不同，所以功能有所差异，但是总的来说都是用来清理节点的。 .empty() 从DOM中移除集合中匹配元素的所有子节点，为了避免内存泄漏，jQuery先移除子元素的数据和事件处理函数，然后移除子元素。 .remove() 将元素移出DOM，当我们想将元素自身移除时我们用 .remove()，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。remove是empty的加强版，把本身的父节点也清除掉了。因为remove支持过滤器所以支持传递selecor。remove需要删除自身及其所有的子元素包括事件与数据，所以要通过找到父节点parnetNode移除。 .detach() 如果你想删除元素，不破坏他们的数据或事件处理程序（这些绑定的信息还可以在之后被重新添加回来）。.detach() 方法和.remove()一样, 除了 .detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。查看全部
-
after、before、append、prepend都是用原生appendChild、inserBefore实现的查看全部
-
这个总结还行，然后看一下index.html中代码这一节就可以过了： 回顾下几组DOM插入有关的方法： innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 和 outerText 在读取的时候是一样的，只是在设置的时候 outerText 会连带标签一起替换成目标文本 firefox不支持innerText，但是可以用textContent作为替代方案。 jQuery封装的方法html，text，val(放到属性一章） .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value .html() 方法对 XML 文档无效。 1 .text() 在XML 和 HTML 文档中都能使用。 2 .text() 方法返回一个字符串，包含所有匹配元素的合并文本。（由于在不同的浏览器中的HTML解析器的变化，返回的文本中换行和其他空白可能会有所不同。 3 .text() 方法不能使用在 input 元素或 scripts 元素上。 input 或 textarea 需要使用 .val() 方法获取或设置文本值。得到scripts元素的值，使用.html()方法。查看全部
-
一：为什么使用innerHTML? 节点的创建innerHTML是一个很高效的接口，效率上来说至少比createElement快了2-10倍不等，而且还能一次性生成一堆的节点，但是随之而来就有一些兼容性问题。 二：innerHTML的缺陷？ 1、innerHTML在IE下面会对字符串进行trimLeft操作，用户可能的本意就是需要空白 2、IE8有些元素innerHTML是只读 3、IE下面innerHTML会忽略没作用域元素，no-scope element(script,link,style,meta,noscript)等 4、大多情况下不执行script脚本,当然如果是支持defer的IE9之前的浏览器除外 5、一些标签不能作为div的子元素，如tr,tb, col等 三：针对以上缺陷的修复？ jQuery的节点操作最终是需要转化成文档碎片也就是要通过buildFragment()方法处理的，所以innerHTML兼容的修复也自然在buildFragment方法中。 1、如上 2、上边文档看最后一句： 如果遇到wrapMap[‘tr’]的标签就会自动包装一层节点，这样达到支持。对应的应该是二中的 5: 一些标签不能作为div的子元素，如tr,tb, col等查看全部
-
总结下来，domManip主要就做了两件事： 1.根据用户传入的参数，创建了多个fragment，然后通过回调函数参数传入 2.控制script的执行过程，在创建fragment的时候不执行，最后dom操作结束后会统一执行查看全部
-
看提交代码的注释查看全部
举报
0/150
提交
取消