dom对象

Jquery DataTable基本使用

你说的曾经没有我的故事 提交于 2020-04-07 09:59:27
原文地址 https://www.cnblogs.com/xiashengwang/p/8087181.html 1,首先需要引用下面两个文件 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 2,DataTable支持的数据类型 https://www.datatables.net/manual/data/ 2.1 数组 vardata = [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120" ], [ "Garrett Winters", "Director", "Edinburgh", "8422", "2011/07/25", "$5,300" ] ] 2.2 对象 [ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date":

【zepto学习笔记03】事件机制

馋奶兔 提交于 2020-04-07 05:51:17
前言 我们今天直接进入事件相关的学习,因为近期可能会改到里面的代码 就zepto来说,我认为最重要的就是选择器与事件相关了,随着浏览器升级,选择器简单了,而事件相关仍然是核心,今天我们就来学习学习 zepto事件处理部分篇幅不大,不到400行,前面篇幅也很小,所以真的很适合移动开发 变量定义 1 var $$ = $.zepto.qsa,2 handlers = {}, _zid = 1,3 specialEvents = {},4 hover = {5 mouseenter: 'mouseover',6 mouseleave: 'mouseout'7 } 事件部分首先定义了几个变量,$$为zepto选择器的方法,暂时不管他(据观察,好像也没有地方用到了,所以无意义) handlers为一个对象,与_zid息息相关,暂时不知道干什么的(据猜测两个应该是保存函数句柄,为removeEvent做准备) hover应该会同时触发两个事件才会触发,我们这里先不管,继续往下看 这里提供一个zid飞方法,该方法用于保证-zid的唯一性 1 function zid(element) {2 return element._zid || (element._zid = _zid++)3 } 算了,我们这里还是用一个实际点的方法跟进来吧,首先说一个关键的 $.Event(type,

【zepto学习笔记01】核心方法$()

此生再无相见时 提交于 2020-04-07 05:51:06
前言 我们移动端基本使用zepto了,而我也从一个小白变成稍微靠谱一点的前端了,最近居然经常要改到zepto源码 但是,我对zepto不太熟悉,其实前端水准还是不够,所以便私下偷偷学习下吧,别被发现了 核心方法$() 我们使用这个方法一般有几个用途(我这里只说我自己用到过的),这里根据使用度排个序: ① 选择器/$(selector) 将返回一个包装过的dom集合对象(有很多选择器) ② html字符串/$(domStr) 仍然返回一个包装过的dom对象,他会将字符串初始化为我们的dom结构 PS:新增了一个方法可以直接赋予dom结构属性,我们这里不关注 ③ 函数/$(function(){}) 我基本没这么用过,他实在文档加载结束后执行 暂时不管这些东西吧。我们这里来一个个看看他们的实现: 1 $('div') 2 //=> all DIV elements on the page 3 $('#foo') 4 //=> element with ID "foo" 5 6 // create element: 7 $("<p>Hello</p>") 8 //=> the new P element 9 // create element with attributes:10 $("<p />",11 {12 text: "Hello",13 id: "greeting",14

虚拟dom和diff算法学习笔记

核能气质少年 提交于 2020-04-05 20:14:45
什么是虚拟dom 用一个对象来描述dom结构,这个对象就是虚拟dom。 为什么要用虚拟dom 因为操作dom 需要耗费性能,dom上有上百个属性和方法。计算出Virtual DOM中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个页面可以减少dom操作、 h方法就是根据dom的类型,属性,子节点、文本。产生一个虚拟dom h.js里有createElement接受参数:type,props,...children,createElement,把key从props里取出来之后,里调用vNode(type,key,props,children),vNode返回一个对象。 render(vnode,container)方法将虚拟节点变为真实节点。看看什么类型,文本 元素 属性比对,比较老属性和新属性的差异,算出最新的,赋给dom上。 怎么比对? 如果type、key不一样,直接replaceChild,新节点替换掉老节点。 type、key一样,都是文本类型,直接修改textContent type、key一样,都是节点类型,比对props,根据新节点的属性更新老节点的属性,对比children ,(老节点有,新节点没有-》删除老节点的innerHtml;老节点没有,新节点有-》给新节点的添加子节点;老节点有,新节点有-》updataChildren

虚拟 DOM 的优缺点?

陌路散爱 提交于 2020-04-04 10:27:05
什么是虚拟dom 用js模拟一颗dom树,放在浏览器内存中 .当你要变更时,虚拟dom 使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中 , 反应到实际的dom树,减少了dom操作. 虚拟DOM将DOM树转换成一个JS对象树, diff算法逐层比较,删除,添加操作 ,但是,如果有多个相同的元素,可能会浪费性能,所以,react和vue-for 引入key值进行区分 . 优点: 保证性能下限 : 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作,它的一些 DOM 操作的实现必须是普适的,所以它的性能并不是最优的;但是比起粗暴的 DOM 操作性能要好很多,因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下,依然可以提供还不错的性能,即保证性能的下限; 无需手动操作 DOM : 我们不再需要手动去操作 DOM,只需要写好 View-Model 的代码逻辑,框架会根据虚拟 DOM 和 数据双向绑定,帮我们以可预期的方式更新视图,极大提高我们的开发效率; 跨平台 : 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关,相比之下虚拟 DOM 可以进行更方便地跨平台操作,例如服务器渲染、weex 开发等等。 缺点: 无法进行极致优化: 虽然虚拟 DOM + 合理的优化,足以应对绝大部分应用的性能需求,

走进Javascript(一)

♀尐吖头ヾ 提交于 2020-04-02 10:23:48
Javascript 组成部分 ECMAScript + DOM + BOM 逐个释义 ECMAScript ECMA-262 定义,提供核心语言功能 语法 类型 对象 语句 关键字 保留字 操作符 DOM Document Object Model 文档对象模型 是针对 XML 但经过扩展用于 HTML 的应用程序编 程接口(API,Application Programming Interface) DOM 把整个页面映射为一个多层节点结构 BOM Browser Object Model 浏览器对象模型 如: 浏览器弹窗 XHR对象 location screen navigator cookies 移动缩放窗口 来源: https://www.cnblogs.com/pengsn/p/12617650.html

HTMLCollection与NodeList

时光总嘲笑我的痴心妄想 提交于 2020-04-01 13:54:26
NodeList v.s. HTMLCollection 主要有两个方面不一样 1.包含节点的类型 2.使用方法 1.包含节点的类型不同(重要) (1)NodeList 一个节点的集合,既可以包含元素和其他节点(注释节点、文本节点等)。 (2)HTMLCollection 元素集合, 只有Element 2.使用方法 相同点: 1) 它们都有length属性 2) 都有元素的getter,叫做item,可以传入索引值取得元素。 3) 都是类数组 不同点: HTMLCollection还有一个nameItem()方法,可以返回集合中name属性和id属性值的元素。(部分浏览器也支持NodeList的nameItem()方法) 详细讲解 涉及获取元素的主要API DOM最初设计是为了解析XML而设计的,之后沿用到HTML上。我们可以把DOM分为两部分 core 和 html,Core 部分提供最基础的 XML 解析API说明,HTML 部分专为 HTML 中的 DOM 解析添加其特有的 API。NodeList接口是在core中体现的,HTMLCollection则是在html部分,不同浏览器也会实现它们的不同接口。但是现在的dom标准已经不分core和html了,反映的是浏览器的实现()。唯一要注意的是 querySelectorAll 返回的虽然是 NodeList

JavaScript—DOM编程核心.

此生再无相见时 提交于 2020-04-01 01:16:32
DOM Core常用部分: DOM方法 创建节点:createElement(),createTextNode() 复制节点:cloneNode() 插入节点:appendChild(),insertBefore 删除节点:removeChild() 替换节点:replaceChild() 查找节点:getAttribute(),getElementById(),getElementsByTagName,hasChildNodes 设置节点属性:setAttribute() DOM属性 节点的属性:nodeName,nodeType,nodeValue 遍历节点树:childNodes,firstChild,lastChild,nextSibling,parentNode,previousSibling 下面给出这部分的简要用法,做个索引似帮助文档 1.document.createElement(“节点名”):新建一个节点 2.document.createTextNode(“文本内容”):新建一个文本节点 3.节点.cloneNode(true|false):复制该节点,参数true则连同子结点一同复制,false则不复制子结点 4.节点.appendChild(子节点):在节点下添加子结点 5.父节点.insertBefore(新节点,参照点)

JavaScript DOM 基础

天大地大妈咪最大 提交于 2020-03-30 16:21:42
JavaScript DOM 基础 DOM 即文档对象模型,是操作 HTML/XML 文档的一套方法。通过 DOM 操作节点,使页面发生改变,是动态文档技术的核心内容 DOM 的含义 DOM 即 document object model,文档对象模型 JavaScript 中有三类对象 本地对象 Native Object Object Function String Number Boolean Error EvalError SyntaxError TypeError RageError ReferenceError URIError Date RegExp 内置对象 Built-in Object Global: 一类对象的统称,是虚拟的,代表全局 任何方法和属性都在对象之下 如 isNaN()、parseInt、Number()、decodeURL() 等都是 Global 下的方法 如 Math、Infinity、NaN、undefined 等都是 Global 下的属性 本地对象、内置对象是 ECMAScript 的内部对象 宿主对象 Host Object 执行 JS 的环境提供的对象,即浏览器对象 window 对象 -> BOM,不同浏览器间没有固定规范 document 对象 -> DOM,遵从 w3c 规范 document 是 window 下的对象,即

jquery获取dom元素身上的绑定事件的问题

一个人想着一个人 提交于 2020-03-30 16:07:07
在 jQuery 1.8.0版本之前,我们要想获取某个DOM绑定的事件处理程序可以这样: $.data(domObj,'events');//或者$('selector').data('events') jQuery 1.8.0版本开始,jQuery突然不支持这样使用了,而是改到了一个叫'_data'的函数功能上了,即,1.8.0及以后的版本你可以这么用: $._data(domObj,'events');//注意,这里不能像$('selector')._data('events')这样用了。 /*例如可以写成*/ $._data($('#box').get(0),'events') // 这里是获取id为box的dom元素身上绑定的所有事件 $._data($('#box').get(0),'events')['click']// 这里是获取id为box的dom元素身上绑定的click事件 /*或写成*/ $._data($('#box').get(0)).events /*或还可以写成*/ $.cache[$('#box').get(0)[$.expando]].events 兼容兼容各个jQuery版本的方式,这样获取即可: var eventsData = $.data(domObj,'events') || $._data(domObj,'events');/