dom对象 | 易学教程

jquery源码解读

阅读更多关于 jquery源码解读

最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 jQuery 的整体结构是这样的： jQuery 整体架构不同于 jQuery 代码各个模块细节实现的晦涩难懂，jQuery 整体框架的结构十分清晰，按代码行文大致分为如上图所示的模块。初看 jQuery 源码可能很容易一头雾水，因为 9000 行的代码感觉没有尽头，所以了解作者的行文思路十分重要。整体而言，我觉得 jQuery 采用的是总--分的结构，虽然JavaScript有着作用域的提升机制，但是 9000 多行的代码为了相互的关联性，并不代表所有的变量都要定义在最顶部。在 jQuery 中，只有全局都会用到的变量、正则表达式定义在了代码最开头，而每个模块一开始，又会定义一些只在本模块会使用到的变量、正则、方法等。所以在一开始的阅读的过程中会有很多看不懂其作用的变量，正则，方法。所以，我觉得阅读源码很重要的一点是，摒弃面向过程的思维方式，不要刻意去追求从上至下每一句都要在一开始弄明白。很有可能一开始你在一个奇怪的方法或者变量处卡壳了，很想知道这个方法或变量的作用，然而可能它要到几千行处才被调用到

jQuery源码浅析–整体架构

阅读更多关于 jQuery源码浅析–整体架构

http://www.cnblogs.com/coco1s/p/5261646.html @ChokCoco 最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。另外，阅读源码让我接触到了大量底层的知识。对原生JS 、框架设计、代码优化有了全新的认识，接下来将会写一系列关于 jQuery 解析的文章。我在 github 上关于 jQuery 源码的全文注解，感兴趣的可以围观一下。jQuery v1.10.2 源码注解（https://github.com/chokcoco/jQuery-）。网上已经有很多解读 jQuery 源码的文章了，作为系列开篇的第一篇，思前想去起了个【深入浅出jQuery】的标题，资历尚浅，无法对 jQuery 分析的头头是道，但是 jQuery 源码当中确实有着大量巧妙的设计，不同层次水平的阅读者都能有收获，所以打算厚着脸皮将自己从中学到的一些知识点共享出来。打算从整体及分支，分章节剖析。本篇主要讲 jQuery 的整体架构及一些前期准备，先来看看 jQuery 的整体结构：整体架构不同于 jQuery

源码浅析--整体架构

阅读更多关于源码浅析--整体架构

最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。另外，阅读源码让我接触到了大量底层的知识。对原生JS 、框架设计、代码优化有了全新的认识，接下来将会写一系列关于 jQuery 解析的文章。网上已经有很多解读 jQuery 源码的文章了，作为系列开篇的第一篇，思前想去起了个【深入浅出jQuery】的标题，资历尚浅，无法对 jQuery 分析的头头是道，但是 jQuery 源码当中确实有着大量巧妙的设计，不同层次水平的阅读者都能有收获，所以打算厚着脸皮将自己从中学到的一些知识点共享出来。打算从整体及分支，分章节剖析。本篇主要讲 jQuery 的整体架构及一些前期准备，先来看看 jQuery 的整体结构： jQuery 整体架构不同于 jQuery 代码各个模块细节实现的晦涩难懂，jQuery 整体框架的结构十分清晰，按代码行文大致分为如上图所示的模块。初看 jQuery 源码可能很容易一头雾水，因为 9000 行的代码感觉没有尽头，所以了解作者的行文思路十分重要。整体而言，我觉得 jQuery 采用的是总--分的结构

jQuery

阅读更多关于 jQuery

一. jQuery 1.模块《=》类库，jQuery----DOM的一个类库。 2.查找元素 ---DOM： ---jQuery: ---选择器： ---筛选：注： 1. jQuery版本：1.x 兼容性高（推荐使用1.12）;2.x;3.x jQuery安装：1)jquery.com 官网下载； 2)把.js文件放到HTML同级目录下即可。 2.引用：在HTML中引用CSS样式时，用link链接到同级目录下的css文件即可；也可以在HTML中：<style><style>编写样式；（两种方式）在HTML中引用 .js 文件时，用script 引用同级目录下的 .js 文件；也可以在HTML中：<script><script>编写代码；（两种方式）注：<style>一般放在头部，<script>一般放在尾部 3.调用jQuery中的方法有两种方式： jQuery.方法名； $.方法名。 3.操作元素 3.1获取标签： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">123</div> <script scr="jquery-1.12.4.js"></script> <script> $("

jQuery $ 的作用

阅读更多关于 jQuery $ 的作用

$符号总体来说有两个作用： 1、作为一般函数调用：$(param) (1)、参数为函数：当DOM加载完成后，执行此回调函数　　$(function(){//dom加载完成后执行　　　　//代码　　}) （2）、参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象（3）、参数为dom对象：将dom对象封装成jQuery对象如：$(this) 注意：jQuery对象和dom对象的区别：　　jQuery对象可以使用jQuery的方法，但dom对象不行！　　$("li")[0] 为dom对象，再通过$()包装 $($("li")[0] ) 返回的是jQuery对象，则可以使用jQuery方法（4）、参数为html标签字符串（用的少）：创建标签对象并封装成jQuery对象 2、作为对象使用：$.xxx() 如：（1）$.each()：遍历数组或对象（2）$.trim()：去掉两端的空格 http://jquery.cuishifeng.cn/index.html 来源： https://www.cnblogs.com/lihuijuan/p/9170240.html

JQuery.与dom对象互转

阅读更多关于 JQuery.与dom对象互转

1、jQuery对象与DOM对象 - 南曦 - 博客园.html（ https://www.cnblogs.com/daisy-ramble/p/5553621.html ） 2、关键代码：　　2.1、JQuery对象转 DOM对象 var $div = $('div') //jQuery对象 var div = $div[0] //转化成DOM对象 div.style.color = 'red' //操作dom对象的属性　　2.2、DOM对象转 JQuery对象 var div = document.getElementsByTagName('div'); //dom对象 var $div = $(div); //jQuery对象 var $first = $div.first(); //找到第一个div元素 $first.css('color', 'red'); //给第一个元素设置颜色 3、网页内容保存 jQuery对象与DOM对象是不一样的通过一个简单的例子，简单区分下jQuery对象与DOM对象： <p id=”imooc”></p> 我们要获取页面上这个id为imooc的div元素，然后给这个文本节点增加一段文字：“hello,world”，并且让文字颜色变成红色。通过标准JavaScript处理： var p = document

jQuery.data() 的实现方式

阅读更多关于 jQuery.data() 的实现方式

jQuery.data() 的实现方式 jQuery.data() 的作用是为普通对象或 DOM Element 附加（及获取）数据。下面将分三个部分分析其实现方式： 1. 用name和value为对象附加数据；即传入三个参数，第一个参数为需要附加数据的对象，第二个参数为数据的名称，第三个参数为数据的值。当然，只是获取值的话，也可以不传入第三个参数。 2. 用另一个对象为对象附加数据；即传入两个参数，第一个参数为需要附加的数据对象（我们称之为“obj”），第二个参数也是一个对象（我们称之为“another”）；“another”中包含的键值对将会被复制到 “obj” 的数据缓存（我们称之为“cache”）中。 3. 为 DOM Element 附加数据；DOM Element 也是一种 Object ，但 IE6、IE7 对直接附加在 DOM Element 上的对象的垃圾回收存在问题；因此我们将这些数据存放在全局缓存（我们称之为“globalCache”）中，即 “globalCache” 包含了多个 DOM Element 的 “cache”，并在 DOM Element 上添加一个属性，存放 “cache” 对应的 uid 。用name和value为对象附加数据使用 jQuery.data() 为普通对象附加数据时，其本质是将一个 “cache” 附加到了对象上

jQuery.data() 即($.data())的实现方式

阅读更多关于 jQuery.data() 即($.data())的实现方式

jQuery.data() 的作用是为普通对象或 DOM Element 附加（及获取）数据。下面将分三个部分分析其实现方式： 1. 用name和value为对象附加数据；即传入三个参数，第一个参数为需要附加数据的对象，第二个参数为数据的名称，第三个参数为数据的值。当然，只是获取值的话，也可以不传入第三个参数。 2. 用另一个对象为对象附加数据；即传入两个参数，第一个参数为需要附加的数据对象（我们称之为“obj”），第二个参数也是一个对象（我们称之为“another”）；“another”中包含的键值对将会被复制到 “obj” 的数据缓存（我们称之为“cache”）中。 3. 为 DOM Element 附加数据；DOM Element 也是一种 Object ，但 IE6、IE7 对直接附加在 DOM Element 上的对象的垃圾回收存在问题；因此我们将这些数据存放在全局缓存（我们称之为“globalCache”）中，即 “globalCache” 包含了多个 DOM Element 的 “cache”，并在 DOM Element 上添加一个属性，存放 “cache” 对应的 uid 。用name和value为对象附加数据使用 jQuery.data() 为普通对象附加数据时，其本质是将一个 “cache” 附加到了对象上，并使用了一个特殊的属性名称。存放数据的

jQuery.data() 的实现方式

阅读更多关于 jQuery.data() 的实现方式

jQuery源码分析随笔之数据缓存

阅读更多关于 jQuery源码分析随笔之数据缓存

jQuery的数据缓存机制对于js Object和DOM node分别存在两种方式：情况一:对于js Object，数据就存储在Object本身，只不过数据都存储在Object下一个以“jQuery”开头的属性之下例如： var obj = {}; $.data(obj, "username", "scott"); console.log(obj)；此时obj为： { 　　jQuery16302287385049276054：{ 　　　　username: "scott" 　　} } 情况二：对于DOM node，数据则存储在jQuery.cache之中node对应的id号之下例如： var elem = document.createElement("div"); $.data(elem, "password", "tiger");console.log(elem[$.expando]); console.log($.cache); 输出为： 1 {1：{password:"tiger"}} 这个例子中node对应的id为1，存储在其自身的$.expando属性之下，此id即对应$.cache中存储器数据位置的id,即这样建立起的对应关系这里需要说明的是，$.expando的值即是以"jQuery"开头后面一串数字的字符串，例如前面的

订阅 dom对象