我是超级链接 这个例子是一个很简单的超级链接...用到了 DIV，实际上 DIV就相当于一个肉眼看不到盒子，盒子里边可以放入很多的文字、图片、flash等等。...而盒子里边内容的样式，就全部靠 DIV的 id所对应的CSS属性值来控制，这就是 DIV的重点之处。...ok，我们已经有了这个盒子，他的 id是navigator，里边的内容是一个超级链接的代码。现在我要控制这个盒子的样式，比如修改这个盒子的背景色，怎么办呢？...我们打开CSS文件，输入以下代码 #navigator{ background:#cccccc; } 这个CSS属性就是定义了 id为navigator的 div盒子中背景的颜色为灰色。
entries.forEach(entry => { console.log('大小位置', entry.contentRect) console.log('监听的DOM...myObserver.observe(document.body) 此外这个API 只能在IE11+，如果想兼容的话，建议 封装下，判断下，如果浏览器有这个API 直接用，没有的话，就使用轮询查询元素大小
在B之前追加A，作为它的兄弟元素 删除节点: remove([selector]) 从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素...该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。...复制节点: $("#id").clone(false); 该方法返回的是一个节点的引用，参数默认为false，为浅复制； 参数是true,为深复制，含义是：复制元素的同时复制元素中所绑定的事件...该方法会删除与节点相关联的所有数据和事件处理程序。 replaceAll(target); 用集合的匹配元素替换每个目标元素。...([selector]) 获得集合中每个匹配元素的祖先元素 事件: on() 在选定的元素上绑定一个或多个事件处理函数。
－－DOM树，或者节点树，一样的概念 js通过dom节点，可以对文档的html标签，属性，css样式，以及具体的内容做出修改，并对页面中的所有事件进行响应 二、节点树 1.节点类型 文档节点－－Document...，添加了很多节点，也可以在dom上呈现，但是每次添加的时候都会调用一次appendChild()方法，产生很多次页面渲染，显得比较臃肿 2.把多次添加的节点放在一个createDocumentFragment...，id为son的元素节点，通过demo.removeChild()已经被删除了 removeAttribute－－删除属性节点 <...－－判断两个元素是否相等 isSameNode－－判断两个元素是否相同 两者分别代表相等和相同 (1) isEqualNode相等，指的是两个节点是否是同一类型，具有相等的属性（包括：nodeName,...，再比较这两种方法，比来比去还是那个对象，所以相同 (2) 而isEqualNode比较两个对象的元素节点是否相等，只要两者一致就可以相等true hasChildNodes()－－判断一个元素是否拥有子节点
由于我们使用v-model将其绑定到所选值的属性值，我们可以通过this.key获取相同的值。 作为替代，我们可以删除($event)并编写，得到相同的结果。...要在鼠标悬停在一个元素上时执行某些操作，我们可以监听mouseover（鼠标悬停）和mouseleave（鼠标离开）事件。...-- 该 DIV 使用了自定义指令 v-click-outside，用来监听点击元素外部的事件 --> hello world...，该对象具有 bind 和 unbind 方法以在 bind 方法中添加 el 方法。...这就需要检测用户是否点击了元素的外部，如果是，那么就触发一个函数来关闭下拉菜单或模态窗口。
如果数据中有HTML标签会将html标签一并输出 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值 ...分支结构 v-if 使用场景 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素 2- 进行两个视图之间的切换 <!...设置为none, 控制元素是否显示（已经渲染到了页面） v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。...v-if是动态的向DOM树内添加或者删除DOM元素 控制元素是否渲染到页面 v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件 3.循环结构 v-for遍历数组...用于循环的数组里面的值可以是对象，也可以是普通元素 <!
b>”); 给某元素设置内容 $(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值 $(”元素名称”).removeClass(”class”) 给某元素删除指定的样式...().css(”border”, “2px red solid”); JQuery Selectors 方法说明 基本选择器 $(”#myDiv”) 匹配唯一的具有此id值的元素 $(”div”) 匹配指定名称的所有元素...”) 匹配所有可见的元素 属性过滤选择器 $(”div[id]”) 匹配所有具有指定属性的元素 $(”input[name =’newsletter’]”) 匹配所有具有指定属性值的元素 $(”input...，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。...p元素上的所有事件 $("p").unbind("click") //删除所有p元素上的单击事件 10、几个实用特效功能 其中toggle()和slidetoggle()方法提供了状态切换功能。
"> 添加 CSS 重置页面所有元素的内外边距和盒模型大小...> `; 最后将删除按钮的点击事件绑定到一个匿名函数上，当点击删除按钮时，它将删除任务列表中的相应任务。...这里使用了 querySelectorAll 方法选择所有具有 delete 类名的元素，并使用 for 循环遍历它们，并将每个元素的点击事件绑定到一个匿名函数上。...在匿名函数中，this 引用当前的删除按钮，this.parentNode 引用该按钮的父元素，也就是任务列表的 div 元素。remove() 方法用于删除该元素。...到这里我们就完成了，需要下载源码可以在我的码上掘金领取：jcode
id="div1"> //1.我们常常把script放在body的内部下方 //2.get 获得 Element 元素 by 通过 Id //...： 用来获得元素，且具有逻辑性地获得元素 节点概述： 节点操作的主要操作时元素节点操作 页面内所有内容都是节点，在DOM中，节点使用node表示 HTML DOM中所有节点均可以通过JavaScript...，不复制内容 节点并未出现在页面，如果希望出现该节点，需要插入该节点 事件高级内容 我们在前面已经掌握了事件的基本方法，接下来我们来学习进阶内容： 注册事件概述 给元素添加事件，被称为注册事件或者绑定事件...注册事件有两种方法： 传统注册方法： 注册事件具有唯一性 同一元素同一事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数 事件监听方法： 注册事件可以有多个处理函数，依次执行 eventTarget.addEventListener...(type,listener[,useCapture]) 该方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数 type：事件类型字符串，比如click
Offset()方法返回或设置匹配元素相对于文档的偏移（位置）。 l 该方法返回的对象包含两个整型属性：top 和 left ，以像素计。此方法只对可见元素有效。...具体区别为： 1、position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。...删除所有子节点），绑定的事件，附加的数据都会移除 2 detach（）从DOM中删除所有匹配的元素（）与remove（）不同的是，绑定的事件，附加的数据都会被保留下来 3...(); $('ol').append(str)//再次点击li，点击事件存在，删除元素，但其绑定的事件，附加的数据都还存在 }) $('#btn3...4 is（）判断所有元素中是否有符合某个条件的元素，返回布尔值 5 has（）方法返回拥有匹配指定选择器的一个或多个元素在其内的所有元素 演示文档</title
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。...将一组元素转换成其他数组（不论是否是元素数组） has 保留包含特定后代的元素，去掉那些不含有指定后代的元素 not 从匹配元素的集合中删除与指定表达式匹配的元素 slice...上面另起一行, 第一行] 3.删除 1. empty（删除匹配的元素集合中内容不删除标签） <div...$("button").mouseup() //元素上放松鼠标按钮时触发事件 $("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件 $("p").mouseover...() //当鼠标指针位于元素上方时触发事件 $("p").mouseout() //当鼠标指针从元素上移开时触发事件 $(window).keydown() //当键盘或按钮被按下时触发事件
，并返回被删除的元素 unshift() 向数组的开头添加一个或多个元素，并返回数组的新的长度 shift() 删除数组的开头的一个元素，并返回被删除的元素 reverse() 可以用来反转一个数组...修改元素的属性： 语法：元素.属性名 = 属性值 innerHTML 使用该属性可以获取或设置元素内部的HTML代码 事件 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8...，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。...事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的我们可以尝试将其绑定给元素的共同的祖先元素 target :...向目标元素进行事件的捕获，但是默认此时不会触发事件 目标阶段 事件捕获到目标元素，捕获结束开始在目标元素上触发事件 冒泡阶段 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件 如果希望在捕获阶段就触发事件
log(user.hasAttributes()) // 查看元素是否有属性 log(user.hasAttribute('value')) // 查看元素是否有特定属性 删除某个属性...删除 var pwd = document.querySelector('#id-input-password') // 以下两种方法都可以删除元素 // 一种是自毁 pwd.remove() //...一种是父节点删除子元素 form.removeChild(pwd) 事件 事件是用来处理响应的一个机制，这个响应可以来自于用户(点击, 鼠标移动, 滚动等)， 也可以来自于浏览器 这里描述了js所有事件...('click', function(event) { console.log(event.target + '按下了') }) 事件委托 可以把事件绑定在父元素上, 然后在运行时检查触发事件的对象...，popstate事件触发时，该对象会传入回调函数。
var vm = new Vue({ el: '#app', // el绑定的id为app的div元素 data: { name: 'vue' } }); ...vm.list.pop() // 数组元素末尾删除 vm.list.push('m4') // 数组元素末尾添加元素 unshift() 在数组元素开头添加元素 shift() 在数组元素开头删除元素...，array.splice 删除位置下标，删除元素个数 splice向数组种添加元素，array.splice 添加位置下标，0, 待添加的元素 条件渲染 v-if指令和v-show指令 判断是否登录...v-show指令式切换渲染css属性的display，v-if指令决定是否生成dom渲染元素。...那么什么是事件委派机制呢？ 就是借助event事件对象，在父元素上绑定事件处理函数，不是在子元素上。
每个input元素都有一个id属性，label元素的for属性使用它来匹配label和input控件。...跟踪控制状态 Angular表单控件可以告诉您用户是否触摸了该控件，值是否改变，或者该值是否失效。...它有一个绿色的边框。 它具有类形式控制和有效性。 2.通过添加一些字符来更改name。 类保持不变。 3.删除名称。 输入框边框变为红色。 is-invalid类替换为is-valid。...如果没有Angular的帮助，你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性？ 对你来说，这很简单： 在（增强的）表单元素上定义一个模板引用变量。 在多处的按钮中引用该变量。...提交的标志变为真，表格消失。 您将看到表格中显示的英雄模型值（只读）。 ? 该视图包含一个编辑按钮，其单击事件绑定将清除提交的标志。 当您单击编辑按钮时，该表消失，并且可编辑的表单重新出现。
对象 对象创建 window.document document 方法 获取Element对象 getElementById() 查找具有指定的唯一 ID 的元素。...getElementsByTagName() 返回所有具有指定名称的元素节点。...Node节点对象 节点对象代表文档树中的一个节点。节点可以是元素节点、属性节点、文本节点，或者也可以是任何一种节点。...--删除内部的div2--> div2 div1...ondblclick 当用户双击某个对象时调用的事件句柄。 焦点事件 onblur 元素失去焦点。 onfocus 元素获得焦点。
对组件功能的封装，可以像搭积木一样开发网页。 Vue官方的示例图对组件化开发的形象展示。左边是一个网页，可以按照功能模块抽象成很多组件，这些组件就像积木一样拼接成网页。...在Vue.js中，可以通过在子组件中触发一个自定义事件并传递数据来实现将子组件数据传递到父组件。父组件可以监听子组件的自定义事件，并在事件处理程序中接收传递的数据并更新父组件的数据。...* 2. splice()是一个JavaScript数组方法，它用于在数组中添加或删除元素 * 第一个参数：要删除或添加元素的起始索引...* 第二个参数：要删除的元素数量 * 3....因此，这行代码将从list列表中删除指定索引的元素 */ this.list.splice(index, 1)
v-if是动态的向DOM树内添加或者删除DOM元素 v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件 循环结构 v-for 用于循环的数组里面的值可以是对象，也可以是普通元素...即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上 在失去焦点 或者 按下回车键时才更新 <!...pop() 删除数组的最后一个元素，成功返回删除元素的值 shift() 删除数组的第一个元素，成功返回删除元素的值 unshift() 往数组最前面添加一个元素，成功返回当前数组的长度 splice...该方法不会改变现有的数组 slice slice() 方法可从已有的数组中返回选定的元素。... 6 删除图书 6.1 给删除按钮添加事件 把当前需要删除的书籍id 传递过来 6.2 根据id从数组中查找元素的索引 6.3 根据索引删除数组元素
互联网建立在与数据交互的基础上：从用户获取数据、存储数据、更新和删除数据。待办事项应用程序是练习这些基本技能的最佳工具。...该allTasks数组将存储所有任务，每个任务都有一个 id（时间戳）、一个名称和一个完成值，该值可以是 true 或 false。...由于所有删除按钮都具有相同的类，因此我们使用该querySelectorAll属性来选择所有按钮。...： 从 data 属性获取任务 id 后，我们使用该findIndex()方法检查该 id 是否存在于allTaksks数组中。...()函数中，我们执行以下操作： 将事件侦听器附加到单选按钮，对于每个按钮，我们从最近的 li 元素的 data 属性中获取任务 id。
原生js拼接字符串 基本上就是将数据以字符串的方式拼接到HTML标 签中，前端代码风格大体上如下图所示。 缺点：不同开发人员的代码风格差别很大，随着业 务的复杂，后期的维护变得逐渐困难起来。...插值表达式存在的问题：“闪动” 如何解决该问题：使用v-cloak指令 解决该问题的原理：先隐藏，替换好值之后再显示最终的值 // v-cloak指令 的用法 /* 1....显示内容之后不再具有响应式功能 v-once的应用场景:如果显示的信息后续不需要再修改，那么可以使用v-once，这样可以提高性能。...this.flag } } }) 2.v-if与v-show的区别 v-if控制元素是否渲染到页面...(基本上不会发生改动用v-if) v-show控制元素是否显示（已经渲染到了页面，频繁改动用v-show） 3.循环结构 v-for遍历数组 <div v-text='item' v-for='item
领取专属 10元无门槛券
手把手带您无忧上云
