dom | 易学教程

DOM动态加载脚本或者css

阅读更多关于 DOM动态加载脚本或者css

使用<script>元素可以向页面中插入javascript代码有两种方式： 1，通过其src特性包含外部文件 var script=document.createElement('script'); script.type='text/javascript'; script.src='test.js'; document.body.appendChild(script); 在执行最后一行代码把<script>元素添加到页面之前，是不会下载外部文件的但是如何来确定脚本加载完毕呢？ EventUtil.addHandler(window, 'load', function() { var script = document.createElement('script'); EventUtil.addHandler(script, 'load', function(event) { // IE8 及更早版本不支持该事件 //1, event 指向的是script ;2,脚本已经执行完毕 alert('loaded'); }); script.type = 'text/javascript'; script.src = 'test.js'; document.body.appendChild(script); }); 2，用这个元素本身来包含代码行内方式 var script =

HTML DOM classList 属性

阅读更多关于 HTML DOM classList 属性

实例为 <div> 元素添加 class: document.getElementById( "myDIV").classList.add( "mystyle"); 定义和用法 classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。 classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。语法 element .classList 更多案例 vue中案例 html内容： <ul id="shoppingList" v-on:click="addClass($event)" class="iview-admin-draggable-list"> 　　<li v-for="(item, index) in shoppingList2" :key="index" class="notwrap todolist-item" :data-index="index"></li> </ul> js内容 addClass:function(e){ 　　console.log(e.target); 　　if(e.target.parentNode.className=="iview-admin-draggable-list"){ 　　　　e.target.classList

What's the difference between width, naturalWidth, and clientWidth?

阅读更多关于 What's the difference between width, naturalWidth, and clientWidth?

问题 What is the difference between width , naturalWidth , and clientWidth ? 回答1: Read this: Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively example: <img> tag naturalWidth : it is the original width of the image used in tag. width : it is the value/default value of width attribute of tag. 回答2: clientWidth represents the width of the element and is subject to manipulation by the browser. For example, a 300px wide image can be resized and this manipulated value will

jQuery常规选择器

阅读更多关于 jQuery常规选择器

jQuery最核心的组成部分就是：选择器引擎。它继承了CSS的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3的大部分规则之外，还实现了一些自定义的选择器，用于各种特殊状态的选择。一．简单选择器(ID选择器) 在使用jQuery选择器时，我们首先必须使用“$()”函数来包装我们的CSS 规则。而CSS规则作为参数传递到jQuery对象内部后，再返回包含页面中对应元素的jQuery对象。随后，我们就可以对这个获取到的DOM节点进行行为操作了。 #box { //使用ID选择器的CSS规则 color:red; //添加一个样式color:red } 在jQuery选择器里，我们使用如下的方式获取同样的结果： $(function () { $('#box').css('color','blue'); //添加一个行为css('color','blue')，这个行为是添加样式 }); 那么除了ID选择器之外，还有两种基本的选择器，分别为：元素标签名和类(class)： (1)元素名选择器获取所有div元素的DOM对象，CSS模式：div {} ，jQuery模式：$('div') <body> <div>常规选择器</div> <div>常规选择器</div> <div>常规选择器</div> <

Vue组件，组件通信，生命周期

阅读更多关于 Vue组件，组件通信，生命周期

组件系统组件化的出现？前端本身就是从后端分离出来 -> 量大【项目任务重】 -> 团队开发 -> 项目合【难点】 -> 如果分离出去任务是一个独立的整体，那么引用的时候就不会出现太大的问题 -> 组件【独立的整体】组件 - Component 其实是一个html、css、js等的一个聚合体 Vue是如何定义组件的？、 Vue.extend() -> 帮助Vue扩展了组件的概念 Vue组件的结构树形结构根组件：使用 new Vue() 来充当，用来表示组件的使用形式标签化: 组件使用类似标签的形式组件既可以是单标签，也可以双标签组件命名形式大驼峰形式 swiper-item 思考：组件标签化的解析？解决方案：组件的注册全局注册局部注册组件通信父子组件通信使用props实现子父组件通信使用自定义事件 / $emit 实现非父子组件通信 ref链实现 bus事件总线实现路由通信 - vue高级多组件状态共享 - vue高级什么是jsx? jsx其实就是帮助我们来简化vdom结构写法 jsx -> javascript + xml jsx是对js语法的扩展 jsx就是可以让我们在js中书写xml 为什么vdom性能高？操作数据远比操作DOM要快的多如果我们用数据来模拟DOM，然后我们操作这个数据，那么是不是就会比操作dom

(JAVASCRIPT篇)

阅读更多关于 (JAVASCRIPT篇)

1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test("a1a__a1a__a1a__a1a__"); 2 ，截取字符串abcdefg的efg var str = "abcdefg"; if (/efg/.test(str)) { var efg = str.substr(str.indexOf("efg"), 3); alert(efg); } 3 ，判断一个字符串中出现次数最多的字符，统计这个次数 //将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数 var str = "abcdefgaddda"; var obj = {}; for (var i = 0, l = str.length; i < l; i++) { var key = str[i]; if (!obj[key]) { obj[key] = 1; } else { obj[key]++; } } /*遍历这个hash table，获取value最大的key和value*/ var max = -1; var max_key = ""; var key; for (key in obj) { if (max < obj

web前端笔试题

阅读更多关于 web前端笔试题

JavaScript学习笔记——第二天

阅读更多关于 JavaScript学习笔记——第二天

JavaScript学习打卡 JavaScript学习笔记---第二天 JavaScript笔记第二天一．DOM编程【重点】 1. 概念 ---- document object model 文档对象模型 2. DOM提供的API --- 获取标签的api 3. Dom里的常见属性 4. 处理下拉列表的常见属性 5. 从网页中删除标签 6. 向网页中添加标签二．BOM 1. 概念 --- browser object model 浏览器对象模型 2. 与window对象相关的函数和属性三．重构代码 1. 网页中的事件处理 2. 可以将js代码从网页中剥离出来，单独定义在一个以.js为结尾的文件中，在网页里通过标签引入 JavaScript学习笔记—第二天 JavaScript笔记第二天一．DOM编程【重点】 1. 概念 ---- document object model 文档对象模型 1） html是标记语言文档，解析技术一般有两种 DOM SAX DOM：浏览器会将整个文档加载进内存，将文档封装成一棵“文档树”，文档里的所有标签都被封装成“标签对象”，成为这棵树上的一个节点（Element–标签， node – 文本） DOM里的两个重要对象： document对象 — 代表整个文档（特指body部分，浏览器里地址栏以下，状态栏以上的部分） window对象

JavaScript(2)---DOM详解

阅读更多关于 JavaScript(2)---DOM详解

JavaScript(2)---DOM详解米妮 https://www.amini.net 一、DOM概念什么是DOM DOM全称为文本对象模型(Document Object Model),它定义了所有HTML元素的对象和属性，以及访问他们的方法。它的主要作用包括：改变HTML 元素 , 改变HTML属性 , 改变CSS 样式，对页面中的所有事件做出反应。 1、DOM 节点树概念 DOM模型将整个HTML文档看成一个树形结构，并用document对象表示该文档，树的每个子节点表示HTM档中的不同内容。如图上图对应的html代码如下 <!DOCTYPE html> <html> <head> <title>标题</title> </head> <body> <h1>小小</h1> <a href="www.xx.com">链接</a> </body> </html> 通过这幅图也可以看出节点树中有以下几种关系 1、父级关系（图中 html 是 head 的父亲,head是title的父亲。） 2、子级关系（图中 head 是 html 的儿子,title是head的儿子。） 3、兄弟关系（图中 head 和 body是兄弟关系。p 和 h1 是兄弟关系。） 2、DOM 节点类型从上图部分，我用四种颜色区分了不同节点的类型

前端面试大全—VUE部分(1)

阅读更多关于前端面试大全—VUE部分(1)

1，vue的生命周期 1, 创建期间的生命周期函数 beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板 beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示 2, 运行期间的生命周期函数 beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点 updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！ 3, 销毁期间的生命周期函数 beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 1，MVC、MVP、MVVM模式的区别 MVC、MVP和MVVM这些开发模式为了分离视图（View）和模型（Model）而提出来的，直白说就是为了前后端分离 1，MVC（Model View

订阅 dom