例如：a:hover {color: #FF00FF}p:first-child {color: red}总结： 伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。...因为事件在冒泡过程中会上传到父节点，父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件委托（事件代理）。...因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件时再去匹配判断目标元素，所以事件委托可以减少大量的内存消耗，节约效率。...动态绑定事件给上述的例子中每个列表项都绑定事件，在很多时候，需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；...如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的，所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的
静态方法可以在回调函数中通过return对比那里的数组进行处理然后生成一个新的数组返回 ### 其他静态方法 1.$.isWindow():判断传入的对象是否是window对象...可以找一个在入口函数执行之前就有的元素来监听动态添加的某些事件 为什么要事件委托 新增的节点没有click响应,因为jQuery入口函数加载$("ul>li").click时没有把...中如果通过核心函数找到的元素不知一个，那么在添加事件的时候，jQuery 会遍历所有找到的元素，给所有找到的元素添加事件 */...click响应,因为jQuery入口函数加载$("ul>li").click时没有把 新增的节点也绑定事件，因此如果要让新增的节点也要绑定事件，要用到事件委托...什么是事件委托： 可以找一个在入口函数执行之前就有的元素来监听动态添加的某些事件 应用了冒泡原理*/ $("ul
因为事件在冒泡过程中会上传到父节点，父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件委托（事件代理）。...因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件时再去匹配判断目标元素，所以事件委托可以减少大量的内存消耗，节约效率。...动态绑定事件 给上述的例子中每个列表项都绑定事件，在很多时候，需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件...；如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的，所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的...： 只在必须的地方，使用事件委托，比如：ajax的局部刷新区域 尽量的减少绑定的层级，不在body元素上，进行绑定 减少绑定的次数，如果可以，那么把多个事件的绑定，合并到一次事件委托中去，由这个事件委托的回调
元素是页面的根元素，它描述完整的网页； head元素包含了我们想包含在 HTML 页面中，但不希望显示在网页里的内容； body元素包含了我们访问页面时所有显示在页面上的内容，是用户最终能看到的内容;...浏览器在渲染页面的过程需要解析 HTML、CSS 以得到 DOM 树和 CSS 规则树，它们结合后才生成最终的渲染树并渲染。...一般来说，我们使用 JavaScript 来操作 DOM 接口，从而实现页面的动态变化，以及用户的交互操作。 在开发过程中，常常用对象的方式来描述某一类事物，用特定的结构集合来描述某些事物的集合。...四、事件委托 我们知道，浏览器中各个元素从页面中接收事件的顺序包括事件捕获阶段、目标阶段、事件冒泡阶段。其中，基于事件冒泡机制，我们可以实现将子元素的事件委托给父级元素来进行处理，这便是事件委托。...如果我们document.body上被绑定了事件，这时候整个页面都会被标记; 即使我们的页面不关心某些部分的用户交互，合成器线程也必须与主线程进行通信，并在每次事件发生时进行等待。
//（2）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。 //（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。...//（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次 hide([speed,[easing],[fn]]);//中括号表示可以省略此参数，无动画直接显示 3.切换显示和隐藏 toggle...（2）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （3）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。...}) 例如： $(“div”).click(function(){ //事件处理程序 }) ---- jQuery 事件处理 1.事件处理 on() 绑定事件在匹配元素上绑定一个或多个事件的事件处理函数...; }); 注意：事件委派现在大多采用⬆️这种写法： 优势在于当动态创建元素时，可以动态自动为其绑定事件 例如：ol里添加li并动态绑定事件 $("ol").on("click", "li", function
getElementById()查询出来的标签对象时 Dom 对象 通过 getElementName()查询出来的标签对象时 Dom 对象 通过 getElementByTagName()查询出来的标签对象是...tagName/* 根据匹配标签元素/所有元素。 .class 根据给定的类匹配元素。 selector1,selector2,selector3 将每一个选择器匹配到的元素合并后一起返回。...: 将子元素的事件委托给父辈元素处理 事件监听绑定在父元素上, 但事件发生在子元素上 事件会冒泡到父元素 但最终调用的事件回调函数的是子元素: event.target 好处: 新增的元素没有事件监听...减少监听的数量(n==>1) jQuery 的事件委托 API 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback... 删除ul上的事件委托的监听器 // jQuery // 设置事件委托 $("ul").delegate("li", "click
自然地，JavaScript 与 CSS 类的交互就增多了，包括动态修改类名，以及根据给定的一个或一组类名查询元素，等等。...为此，最好通过循环先构建一个独立的字符 串，最后再一次性把生成的字符串赋值给 innerHTML，比如： let itemsHtml = ""; for (let value of values){...17.5.1 事件委托 只要可行，就应该考虑只给 document 添加一个事件处理程序，通过它处理页面中所有某种类型的事件。相对于之前的技术，事件委托具有如下优点。...除了通过事件委托来限制这种连接之外，还应该及时删除不用的事件处理程序。很多 Web 应用性能不佳都是由于无用的事件处理程序长驻内存导致的。 导致这个问题的原因主要有两个。...但也要注意，在事件处理程序中删除按钮会阻止事件冒泡。只有事件目标仍然存在于文档中时，事件才会冒泡。 注意 事件委托也有助于解决这种问题。
样式类 addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。...hasClass();// 判断样式存不存在返回的是布尔值 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。...如果直接动态绑定一个事件是无法触发该事件的执行的，为了解决这个问题，我们采用事件委托的方法。...目的： 我们已经创建好的事件如果想被动态创建的标签使用就需要用到事件委托，比如已经创建好了按钮点击的事件如果我们要将这个事件绑定给动态创建的一个按钮就通过事件委托，将事件绑定给按钮的父标签，这样当子标签....data(key, value): 描述：在匹配的元素上存储任意相关数据。这里存储的值是不可见的。
解释JavaScript中的事件委托（Event Delegation）是什么，并提供一个使用事件委托的示例。 答案：事件委托是指将事件处理程序绑定到父元素上，而不是直接绑定到每个子元素上。...当事件触发时，事件会冒泡到父元素，然后通过判断事件的目标来执行相应的处理逻辑。这样可以减少事件处理程序的数量，提高性能。...答案：事件冒泡是指当一个事件在DOM树中触发时，它会从最内层的元素开始向外传播至最外层的元素。事件捕获是指当一个事件在DOM树中触发时，它会从最外层的元素开始向内传播至最内层的元素。 12....v-on：用于监听DOM事件并执行相应的方法。 v-model：用于在表单元素上实现双向数据绑定。...Vue.js中的动画系统是如何工作的？请提供一个简单的动画示例。 答案：Vue.js的动画系统通过CSS过渡和动画类实现。通过在元素上添加过渡类或动画类，可以触发相应的过渡效果或动画效果。
Props： name - string，用于自动生成 CSS 过渡类名。...默认类名为 "v" appear - boolean，是否在初始渲染时使用过渡。默认为 false。 css - boolean，是否使用 CSS 过渡类。默认为 true。...当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过 name attribute 或配置 move-class attribute 自动生成)。...如果 CSS transform property 是“可过渡”property，当应用移动类时，将会使用 FLIP 技术使元素流畅地到达动画终点。...当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会
因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on() on() 方法在匹配元素上绑定一个或多个事件的事件处理函数...on() 方法优势3： 动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件 $(“div").on("click",”p”, function(){...alert("俺可以给动态生成的元素绑定事件") }); $("div").append($("我是动态创建的p")); 演示代码 </...事件处理 off() 解绑事件 当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。...() 方法可以移除通过 on() 方法添加的事件处理程序。
属性名和属性值用冒号隔开， 属性可以不用加引号 $(this).css({ "color":"white","font-size":"20px"}); 一般来说通过在style中编写样式，通过添加类的方式添加样式...3.切换类 $("div").toggleClass("current"); 在原生js中className会覆盖类名，在jQuery中指操作指定类名，不影响原先的类名 3.2 jQuery效果...div加定位，否则无效 3.2.5 事件切换 jQuery中有hover()事件，功能类似于css中的hover hover(function,function) 传入2个参数，第一个参数是鼠标移入是触发的函数...('属性名'); //更改 attr('属性名','属性值'); 4.1.3 数据缓存 data() 可以在指定的元素上存取数据，但不会修改DOM元素结构。...()解绑事件 解除全部事件 $('div').off() 解除特定事件 $('div').off('click') 解除事件委托 $('div').off('click','li') 只触发一次的事件
数据结构中对堆栈链的理解 以链表形式构建的堆栈数据结构，可以实现动态增加节点，无需预先分配内存。 2. js中哪些数据是放在堆中，哪些数据是放在栈中？...Array.of 创建一个包含所有参数的数组 Array.from 接受可迭代对象或类数组对象，最终返回一个数组 Array.fill 用指定的值填充一至多个数组元素 copyWithin方法 4. const...什么是事件代理，怎么判断是哪个节点触发了，target和currentTarget的区别 当网页中需要触发事件的对象比较多的时候，为了避免内存泄漏，我们把事件委托到其父对象上，比如li上的事件委托到ul...隐藏元素的几种方法 CSS方法 opacity: 0 通过调整透明度从视觉上隐藏元素，元素依旧占据位置并对网页的布局起作用，也会影响用户交互。...diaplsy: none 隐藏元素，确保元素不可见并且连盒模型也不生成，被隐藏的元素不占据任何空间。
因为事件在冒泡过程中会上传到父节点，父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件委托（事件代理）。...因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件时再去匹配判断目标元素，所以事件委托可以减少大量的内存消耗，节约效率。...动态绑定事件 给上述的例子中每个列表项都绑定事件，在很多时候，需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件...；如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的，所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的...#list 元素之下具体被点击的元素，然后通过判断 target 的一些属性（比如：nodeName，id 等等）可以更精确地匹配到某一类 #list li 元素之上； （3）局限性 当然，事件委托也是有局限的
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。...on()方法优势3:动态创建的元素, click0 没有办法绑定事件，on0 可以给动态生成的元素绑定事件 ("div") .on("click","p", function(){alert ("俺可以给动态生成的元素绑定事件...("click", "li", function() { alert(11); }); // (3) on可以给未来动态创建的元素绑定事件...事件处理 off() 解绑事件 当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。...( ) 方法可以移除通过on0方法添加的事件处理程序。
（4）减少回流与重绘：操作DOM时，尽量在低层级的DOM节点进行操作不要使用table布局， 一个小的改动可能会使整个table进行重新布局使用CSS的表达式不要频繁操作元素的样式，对于静态页面，可以修改类名...因为事件在冒泡过程中会上传到父节点，父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件委托（事件代理）。...因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件时再去匹配判断目标元素，所以事件委托可以减少大量的内存消耗，节约效率。...动态绑定事件给上述的例子中每个列表项都绑定事件，在很多时候，需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；...#list 元素之下具体被点击的元素，然后通过判断 target 的一些属性（比如：nodeName，id 等等）可以更精确地匹配到某一类 #list li 元素之上；（3）局限性当然，事件委托也是有局限的
： 代码优化 1、v-if 和 v-show 区分使用场景 实现方式: v-if是动态的向DOM树内添加或者删除DOM元素，v-show是通过设置DOM元素的display样式属性控制显隐。...编译过程: v-if切换有一个局部编译卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件，v-show只是简单的基于CSS切换。...10、使用事件委托 事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术， 使用事件委托可以节省内存。...查找结果 1 中的元素是否有类名为 text 的父元素 查找结果 2 中的元素是否有 id 为 block 的父元素 (2)....根据文件内容生成文件名，结合 import 动态引入组件实现按需加载 通过配置 output 的 filename 属性可以实现这个需求。
另外，如果在实际的应用中，很有可能同过js在 div1下动态生成p 元素，这时候，我们相应地还要添加事件处理函数，像这种动态添加的动作很有可能分散在我们 应用的很多个角落，这样动态添加处理函数将是一个非常蛋疼的事儿...解决方法： 利用 事件冒泡传递的机制，将本来本元素要完成的事件处理逻辑，委托给 父类节点，父类节点根据触发事件的节点信息，执行对应的事件处理逻辑。...如果我们在js中动态地给box1 增加子元素P，相应的处理函数也会对其有效。...算法： 将事件处理函数绑定到容器上， 在事件处理函数内获取 event.target， 根据不同的event.target作相应的处理 应用场景： 需要为子元素用一个事件处理函数 处理相同的动作； 简化不同动作间的结构...第二，理论上委托会导致浏览器额外的加载，因为在容器内的任意一个地方事件的发生，都会运行事件处理函数，所以多数情况下事件处理函数都是在空循环（没有意义的动作），通常不是什么大不了的事儿。
这是我做的第一次做单页应用，也是第一次在正式项目里用Angular，所以遇到了不少坑，记录如下 页面切换时（非页面刷新，只是hash发生变化，ng-view里的内容根据路由进行更新），用jQuery抓取新页面的元素抓不到...或者如果只是给一些元素绑定事件，可以用事件委托。 多次进入同一个页面，导致同一个js被多次执行导致的问题。因为页面没有刷新，事件委托的那元素上的事件会被绑定多次。...解决方案是，绑事件前，先接触绑定事件。 Bootstrap 3弹出框 动态生成元素有时会出现幽灵的情况：元素生成好之后的元素，用jQuery也抓取不到那元素。。。...其双向绑定，不依赖于页面结构 尽量不要用事件委托，如果用，要在绑定事件前解除绑定来避免多绑。当然也有可能导致错绑其他页面的元素。...因为单页应用的页面跳转并没有刷新页面 前后端分离可采用，前后端均用相同的模板引擎。前端在开发时，请求的自己写的模拟的接口，而非后端真正的接口。模拟的接口和后端的接口的格式是一样的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
