dom | 易学教程

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"开头后面一串数字的字符串，例如前面的

jQuery 结构分析

阅读更多关于 jQuery 结构分析

jquery核心转自 http://www.iteye.com/topic/783260 (function( window, undefined ) { // 构造jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // 工具函数 Utilities // 异步队列 Deferred // 浏览器测试 Support // 数据缓存 Data // 队列 queue // 属性操作 Attribute // 事件处理 Event // 选择器 Sizzle // DOM遍历 // DOM操作 // CSS操作 // 异步请求 Ajax // 动画 FX // 坐标和大小 window.jQuery = window.$ = jQuery; })(window); 一构造jquery. 相对于其它库里传统的构造对象方法. jquery提供了一种截然不同的方法. 它选择创造一个全新的奇异世界. 首先所有的jquery代码被一个自动执行的闭包包裹起来, 只在后面暴露$和jQuery这2个变量给外界尽量避开变量冲突. Java代码 (function(window, undefined){ ….. })

了解文档对象模型DOM（Document Object Model）

阅读更多关于了解文档对象模型DOM（Document Object Model）

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>认识DOM</title> 6 </head> 7 <body> 8 <h2> 9 <a href="https://www.baidu.com">DOM操作</a> 10 </h2> 11 <p>如何用JavaScript去操作HTML元素和CSS样式，实现简单的动态操作</p> 12 <ul title="岁寒知松柏"> 13 <li>群阴彫品物，松柏尚桓桓。</li> 14 <li>老去惟心在，相依到岁寒。</li> 15 <li>霜严御史府，雨立大夫官。</li> 16 <li>牺象沟中断，徽弦爨下残。</li> 17 <li>光阴一鸟过，翦伐万牛难。</li> 18 <li>春日辉桃李，苍颜亦预观。</li> 19 </ul> 20 </body> 21 </html> 如何用JavaScript去操作HTML元素和CSS样式，实现简单的动态操作？可以通过DOM操作，文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）， DOM百度百科如上代码所示，是为一个DOM树状结构html代码

【锋利的jQuery】学习笔记03

阅读更多关于【锋利的jQuery】学习笔记03

第三章 jQuery中的DOM操作一、DOM操作的分类 DOM(document object model)是一种与浏览器、平台、语言无关的接口，使用该接口可以访问页面中的·所有组件。DOM的操作可以分为DOM Core、HTML-DOM和CSS-DOM。 DOM Core：任意支持DOM的程序设计语言都可以使用。JS中getElementById(),getelementByTagName(),getAttribute()和setAttribute()都是它的组成部分。 HTML-DOM:提供了一些更加简明的记号描述各种Html元素，只能用来处理web文档。eg:document.forms CSS-DOM:是针对CSS的操作，用于获取和设置style对象的各种属性。eg:element.style.color 二、jQueryDOM操作——节点操作查找节点查找元素节点可以直接使用选择器进行查找。 1 var $li=$("ul li:eq(1)"); //获取ul中的第二个li节点 2 var li_text=$li.text(); //获取第二个li元素节点的文本内容 3 alert(li_text); //打印文本内容 2.查找属性节点找到元素节点后，使用attr()方法获取设置元素的属性。attr()方法传入参数为一个时为获取该属性的值

订阅 dom