dom对象

4-Bom&Dom总结篇

久未见 提交于 2020-01-25 05:20:11
其实Bom就是指浏览器的东西,比如弹窗啊、浏览器信息啊等 而Dom则是指文档的东西,就是浏览器里边html的东西,如元素啊、属性啊、事件什么的 但Bom的唯一顶层对象window又包含Dom的顶层对象document,所以说Bom包含Dom。 你仔细想想也是这么个理儿,浏览器肯定要比里边的文档级别大。 更多请信息和实力请参考"JS &BOM& DOM 参考手册" 该手册提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 http://www.w3school.com.cn/jsref/index.asp 来源: https://www.cnblogs.com/dshvv/p/5521942.html

在Vue中通过自定义指令获取元素

一个人想着一个人 提交于 2020-01-25 02:51:30
vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的; 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个 组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是 自定义指令 (directive) ; 自定义指令功能在DOM Element的生命周期内提供了不同的钩子函数,并允许我们监听指令绑定的数据的变化,但是它也是有缺点的,就是在指令的钩子函数内无法通过 this 来访问当前 vue 实例,也就无法进一步进行复杂的操作(虽然一般不需要什么复杂的操作),在 vue 的钩子函数 (lifecycle hook) 和方法 (method) 中也无法像 this.$el 那样轻易的访问到自定义指令绑定的DOM元素; 不过只要通过一点点变通的做法,就可以突破这个限制: HTML代码: <div id="app"> <span class='test' v-run="register('test1')"></span> <p class='test' v-run="register('test2'

react 渲染顺序

大憨熊 提交于 2020-01-25 01:53:28
工作中要对一个表格做再次更新, 可能是渲染后更新或者部分组件渲染之后, 对页面效果做处理 之前对react的理解, 仅仅停留在render渲染. 这次好好理解了下react的生命周期 1 react组件有三种状态 Mounted(已插入真实的DOM) Updating(正在被渲染) 和 Unmounted已移除真实DOM 2 每个状态有两种处理方法 will(进入状态之前调用) 和 did(进入状态之后调用) 3 三种状态总共有5种处理方法, componentWillMount(插入真实DOM之前调用) componentDidMount(插入真实DOM之后调用) componentWillUpdate(被渲染之前调用) componentDidUpdate(渲染之后调用) 和 componentWillUnmount(移除之前调用) 4 当然还有组件初始方法: getDefaultProps(获取默认属性) 和 getInitialState(获取初始状态), 5 还有两种特殊方法: componentWillReceiveProps(object nextProps)(已加载的组件收到新的参数时调用) 和 shouldComponentUpdate(object nextProps, object nextState)(判断组件是否需要重新渲染时调用) 生命周期 1

Dom对象与jQuery对象区别与相互转换

不想你离开。 提交于 2020-01-23 02:42:35
Dom对象与jQuery对象区别与相互转换 1、概念 1.1、Dom对象 Dom对象,即文档对象模型,通过Dom,我们可以访问所有HTML的元素,包括他们的文本和属性。可以对其中的内容进行修改和删除,还可以创建新元素。Dom对象无法无法使用jQuery对象中的方法。 实例: var Obj = document.getElementById(“id”); 1.2、jQuery对象 jQuery对象实际是JavaScript的一个数组,是通过jQuery包装Dom对象后产生的对象,可以使用jQuery对象中的方法,但并不能使用Dom中的方法。 实例: var $obj = $("#id"); 2、相互转换 2.1、jQuery对象转成Dom对象 2.2、Dom对象转换成jQuery对象 来源: CSDN 作者: Axtone 链接: https://blog.csdn.net/qq_39859899/article/details/103879389

Vue响应式原理

纵然是瞬间 提交于 2020-01-23 02:36:52
原文链接:http://www.cnblogs.com/xiaohuochai/p/7371743.html 前面的话   Vue最显著的特性之一便是不太引人注意的响应式系统(reactivity system)。模型层(model)只是普通JS对象,修改它则更新视图(view)。这会让状态管理变得非常简单且直观,不过理解它的工作原理以避免一些常见的问题也是很重要的本文将详细介绍Vue响应式系统的底层细节 追踪变化   把一个普通JS对象传给Vue实例的 data 选项,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是仅ES5支持,且无法shim的特性,这也就是为什么Vue不支持IE8浏览器的原因   用户看不到getter/setter,但是在内部它们让Vue追踪依赖,在属性被访问和修改时通知变化   每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新 变化检测   受现代JS的限制(以及废弃 Object.observe ),Vue 不能检测到对象属性的添加或删除 。由于Vue会在初始化实例时对属性执行 getter

jquery 1.7.2源码解析(二)构造jquery对象

可紊 提交于 2020-01-22 14:21:27
构造jquery对象 jQuery对象是一个 类 数组对象。 一)构造函数jQuery() 构造函数的7种用法: 1.jQuery(selector [, context ]) 传入字符串参数:检查该字符串是选择器表达式还是HTML代码。如果是选择器表达式,则遍历文档查找匹配的DOM元素, 并创建一个包含这些DOM元素引用的jQuery对象。如果没有匹配的DOM,则创建一个length属性为0的空jQuery对象。 默认情况下对匹配元素的查找从根元素document开始,但也可以传入context参数限制查找范围。 如果选择器表达式是简单的'#id'且没有context参数,则调用document.getElementById()查找。 如果不是则调用jQuery的find()方法。 2.jQuery(html [, ownerDocument])、jQuery(html, props) 如果传入的参数是html代码,则尝试用html代码创建新的DOM元素,并创建包含这些DOM元素引用的jQuery对象。 如果html代码是单独的标签,使用document.createElement()创建DOM元素。如果是复杂的html代码,则使用innerHTML. 参数ownerDocument用于创建新DOM元素的文档对象,如果不传入默认为当前文档对象。 如果html代码是单独标签

vue 中的ref和$refs用法

隐身守侯 提交于 2020-01-22 13:25:57
<div id="app">    <input type="text" ref="input1"/>   <button @click="add"> 添加 </ button> </div> <script>    new Vue({     el: "#app",      methods:{       add(){         this.$refs.input1.value ="22"; //this.$refs.input1 减少获取 dom 节点的消耗       }      }    }) </script> 要点: 1.ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上,就比如我们想访问子组件的一些数据和方法,就可以使用ref为子组件指定一个引用的id,调用方式为 const child = parent.$refs.id 2.一般来讲,获取 DOM 元素,需 document.querySelector ( ".input1" )获取这个 dom 节点,然后在获取 input1 的值。 但是用 ref 绑定之后,我们就不需要在获取 dom 节点了,直接在上面的 input 上绑定 input1 ,然后 $refs 里面调用就行。 然后在 javascript 里面这样调用: this.$refs.input1

Vue 概况以及核心

妖精的绣舞 提交于 2020-01-22 10:45:10
2013年底作为尤雨溪个人实验项目开始开发 2014年2月 公开发布 截至目前所经历的版本vue0.11、 vue1.0、vue2.0(2016年10月) vue本身并不是框架而是结合周边生态构成一个灵活的、渐进式的框架(主张最少—是轻量级视图,做了自己该做的事,没有做不该做的事情。他对项目的参与性小,在项目中还可以使用其他类库) React 2010年01月出来的,作者:Misko Hevery PHP 94年 JS 95年 作者:布莱登·艾克 核心思想 - 数据驱动 在做传统的JQ数据开发过程中,我们会发现给一个Dom在js里面去绑定Dom的click事件,我们在dom里面可能需要对一块dom进行操作,我们就需要获取这个dom的节点通过test或者是class方法修改这个dom也就是说我们js和dom是耦合的,我们需要去js里面大量操作我们的dom,在vue数据驱动中在单页面或者是多页面的开发过程中都会发现在js里仅仅是去调接口,查数据,查完数据之后把这些数据保存在我们的data里面,更多关注的是如何把数据存储在data里面,至于data里面的变量怎么去和dom交互呢,我们只需要关注数据的变动,不需要考虑这个dom节点,我们只需要关注数据,我们把我们的数据拼装好以后,整个页面就构建出来了 (自己理解) - 组件化 我们做页面的过程中,都会有很多页面,有的东西都是公用的

vue知识点,面试题考试

三世轮回 提交于 2020-01-22 06:43:41
vue面试题 1.Vue和react的相同与不同 相同点: 都支持服务器端渲染 都有virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范 数据驱动视图 都有支持native的方案,react native,Vue的weex 都有管理状态,react有redux,vue有自己的VueX 不同点: react严格上只针对MVC的view层,Vue则是MVVM模式 virtual DOM不一样,Vue会跟踪每一个组建的依赖关系,不需要重新渲染整个组件树。而对于react而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldcomponentUpdate这个生命周期函数方法来进行控制 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件; .数据绑定: vue实现了数据的双向绑定,react数据流动是单向的 .state对象在react应用中不可变的,需要使用setState方法更新状态; 在vue中,state对象不是必须的,数据由data属性在vue对象中管理; 2

javaScript系列 [28]

試著忘記壹切 提交于 2020-01-21 23:15:47
本文介绍JavaScript事件相关的知识点,主要包括事件流、事件处理程序、事件对象(event)以及常见事件类型和事件委托等相关内容。 在网页开发涉及的三种基础技术( HTML CSS JavaScript )中,JavaScript主要负责处理页面的 行为 ,而所谓行为大多指的是 交互行为 。 JavaScript和HTML间的交互通过事件来实现 ,换句话来说事件其实就是页面文档或浏览器窗口中发生的特定交互,譬如页面中的按钮标签被点击我们称之为按钮的点击( click )事件,类似的还有页面加载事件、鼠标的移入移除等等。 通常,我们在开发中对事件的操作(处理)主要由两部分组成,即 事件注册 和 事件函数 。我们总是需要先通过特定的方式来给标签添加(注册)事件监听,当事件发生时事件函数将得以调用执行。本文以 能够清晰明确的把事件的传递过程、事件注册的方式、事件对象以及常见的事件类型讲解清楚 为目标。 事件流 事件流 描述的其实是事件内在的传递过程(顺序)。 我们的开发经验是,当我们给某些标签注册(绑定)了事件后,该事件被触发就会执行对应的事件处理函数。这似乎是一个顺理成章的经验,但事件到底是如何传递的呢 ?我们知道在网页中有很多的Node节点,而Node节点之间是复杂的树结构,事件在接收、传递和处理的时候,是按照 目标节点->上层节点->根节点 还是 根节点->下层节点-