dom

　　Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM（dom的改变是发生在nextTick()之后），这个方法作用是当数据被修改后使用这个方法，会回调获取更新后的dom再render出来 　　Vue.nextTick()作用：在下次dom更新循环结束之后，执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的dom 在以下两个情况下需要用到Vue.nextTick() 1、Vue声明周期的created() 钩子函数进行的DOM操作一定要放在Vue.nextTick() 的回调函数中，因为created() 执行的时候DOM实际上并未进行任何渲染，此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。 　　与之对应的就是mounted 钩子函数，因为该函数执行时所有的DOM挂载和渲染都已完成，此时再钩子函数中进行任何DOM操作都不会有问题。 2、在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作应该放进Vue.nextTick() 的回调函数中 简而言之，如果你在数据改变之后的操作跟改变之后的DOM有关，那么就应该使用Vue.nextTick() 来源： CSDN 作者：

一、jQuery简介 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。 $：jQuery标识符 二、jQuery选择器 1.基本选择器 ①ID选择器:# $("#div1").css("background-color", "red") ②class选择器：. 1 $(".div2").css("background-color", "red"); ③标签选择器 $("div").css("background-color", "red"); ④并列 $("#div1,#div2").css("background-color", "red"); //并列选择，用逗号隔开 ⑤后代 $("#div1 a").css("background-color", "red"); //后代选择，用空格隔开 2、过滤选择器 （1）、基本过滤 ①首个：:first $(".div:first").css("background-color", "red"); //取首个 ②尾个：:last $(".div:last").css("background-color", "red"); //取最后一个 ③任意个：:eq(索引号) $(".div:eq

Vue-自学笔记 Vue (读音 /vjuː/，类似于 view ) 是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链 以及各种 支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 总之一句话：有问题，查官网。本笔记只适合学习复习使用。如果学习话，请自行查阅 Vue官网 。 本笔记来源于：自学过程， 参考Vue官方文档 。——大娃 基础 安装 https://cn.vuejs.org/v2/guide/installation.html 相关版本介绍 1. 直接引用 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2. CDN <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> 3. 模块化构建 <script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js' </script> 起步 声明式渲染

innerHTML对比DOM方法，哪个性能好？有什么区别？是个老生常谈的问题！跟浏览器版本与发展有关！ innerHTML是w3c制定的行业标准，几乎所有浏览器都做了支持； 作为原生支持，innerHTML在各主流浏览器下的执行效率是很高的； 但是他有他的缺陷，特别是在ie低版本浏览器下，不支持html5、还有一些其他的标签属性。 直接测试的话，速度明显innerHTML比DOM方法要快很多（包括撸代码的速度）,但是有说在webkit内核的浏览器中DOM方法比innerHTML要快。 平时采用jquery框架，对比了html()和append相应的源码，并做了测试，发现在火狐和ie6下，都是html速度快于append。因此建议使用html，当然，涉及事件绑定的话，就没那么方便了。 来源： oschina 链接： https://my.oschina.net/u/656636/blog/465661

React:快速上手(1)——基础知识 React （有时叫 React.js 或 ReactJS ）是一个为 数据提供渲染为HTML视图 的 开 源 JavaScript 库，用于 构建用户界面 。 JSX、元素及渲染 1、关于JSX 　　JSX（JavaScript XML）是 JavaScript语言语法的扩展。与HTML相似 ， JSX提供了一种使用许多开发人员熟悉的语法来构建组件呈现的方法 。 React组件通常使用JSX编写，组件也可以用纯JavaScript编写，只是太麻烦。　　 　　例如，我们使用JSX可以很轻松的描述一个视图 <div> 　　<p>Header</p> 　　<p>Content</p> 　　<p>Footer</p> </div> 　　而如果们用纯JavaScript来描述的话，则要写大量createElement，非常不直观且很难维护。 React.createElement('div', {className: '...'}, React.createElement('p', /* ... p children ... */), React.createElement('p', /* ... p children ... */), React.createElement('p', /* ... p children ... */) ); 2

PC 浏览器前端优化策略 PC 端优化的策略很多，如 YSlow（YSlow 是 Yahoo 发布的一款 Firefox 插件，现 Chrome 也可安装，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则，或者 Chrome 自带的 Audits 等，总结起来主要包括网络加载类、页面渲染类、CSS 优化类、JavaScript 执行类、缓存类、图片类、架构协议类等几类，下面逐一介绍。 网络加载类 1．减少 HTTP 资源请求次数 在前端页面中，通常建议尽可能合并静态资源图片、JavaScript 或 CSS 代码，减少页面请求数和资源请求消耗，这样可以缩短页面首次访问的用户等待时间。通过构建工具合并雪碧图、CSS、JavaScript 文件等都是为了减少 HTTP 资源请求次数。另外也要尽量避免重复的资源，防止增加多余请求。 2．减小 HTTP 请求大小 除了减少 HTTP 资源请求次数，也要尽量减小每个 HTTP 请求的大小。如减少没必要的图片、JavaScript、CSS 及 HTML 代码，对文件进行压缩优化，或者使用 gzip 压缩传输内容等都可以用来减小文件大小，缩短网络传输等待时延。前面我们使用构建工具来压缩静态图片资源以及移除代码中的注释并压缩，目的都是为了减小 HTTP 请求的大小。 3．将 CSS 或 JavaScript 放到外部文件中，避免使用

文本整理了javascript操作DOM的一些常用的api，根据其作用整理成为创建，修改，查询等多种类型的api，主要用于复习基础知识，加深对原生js的认识。 基本概念 在讲解操作DOM的api之前，首先我们来复习一下一些基本概念，这些概念是掌握api的关键，必须理解它们。 Node类型 DOM1级定义了一个Node接口，该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的。在IE9以下版本无法访问到这个类型，JS中所有节点都继承自Node类型，都共享着相同的基本属性和方法。 每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一： Node.ELEMENT_NODE:1 Node.ATTRIBUTE_NODE:2 Node.TEXT_NODE:3 Node.CDATA_SECTION_NODE:4 Node.ENTITY_REFERENCE_NODE:5 Node.ENTITY_NODE:6 Node.PROCESSING_INSTRUCTION_NODE:7 Node.COMMENT_NODE:8 Node.DOCUMENT_NODE:9 Node.DOCUMENT_TYPE_NODE:10 Node.DOCUMENT_FRAGMENT_NODE:11 Node

摘自：https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口，中文叫节点，很多类型的DOM元素都是继承于它，都共享着相同的基本属性和方法。常见的Node有 element，text，attribute，comment，document 等（所以要注意 节点 和 元素 的区别，元素属于节点的一种）。 Node有一个属性 nodeType 表示Node的类型，它是一个整数，其数值分别表示相应的Node类型，具体如下： [javascript] view plain copy { ELEMENT_NODE: 1, // 元素节点 ATTRIBUTE_NODE: 2, // 属性节点 TEXT_NODE: 3, // 文本节点 DATA_SECTION_NODE: 4, ENTITY_REFERENCE_NODE: 5, ENTITY_NODE: 6, PROCESSING_INSTRUCTION_NODE: 7, COMMENT_NODE: 8, // 注释节点 DOCUMENT_NODE: 9, // 文档 DOCUMENT_TYPE_NODE: 10, DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片 NOTATION_NODE: 12, DOCUMENT

起因 一直想着要写一定深度的文章，然后觉得学习Vue是一个好的过程，本文将带你走进Vue的世界，支持国内框架！ 如果看完本文还不懂Vue是什么的小伙伴，可以随便打博主！（斜眼笑），前方高能，本文可能篇幅比较长，建议收藏在闲暇时间学习，也欢迎伙伴们讨论留言学习！ Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 提问！你真的懂 前端框架（framework ） 与 库（library） 怎么区别吗？ Library 库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者 代表：jQuery jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作 Framework 框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码 框架规定了自己的编程方式，是一套完整的解决方案 使用框架的时候，由框架控制一切，我们只需要按照规则写代码 主要区别 You call Library, Framework calls you 核心点：谁起到主导作用（控制反转） 框架中控制整个流程的是框架 使用库，由开发人员决定如何调用库中提供的方法（辅助） 好莱坞原则：Don’t call