在jQuery中，事件委托是一种优化事件处理的技术，它利用事件冒泡的机制，将事件处理程序绑定到一个父级元素上，从而减少事件处理函数的数量，并实现对动态添加的子元素的事件处理。什么是事件委托？...通过事件委托，我们可以避免为每个子元素都绑定事件处理程序，而是将事件处理集中在父级元素上，从而减少了事件处理函数的数量，提高了性能和代码的可维护性。为什么使用事件委托？...提高性能：由于事件委托将事件处理程序绑定到父级元素上，避免了为每个子元素都绑定事件处理程序的开销，从而提高了性能。如何使用事件委托？在jQuery中，我们可以使用on()方法结合选择器来实现事件委托。...通过选择器，我们可以指定要委托的子元素，然后在父级元素上绑定事件处理程序。...事件委托适用于以下场景：当页面上的元素是通过动态方式添加到文档中时。当需要为多个子元素绑定相同的事件处理程序时。当需要减少事件处理函数的数量，提高性能和可维护性时。
介绍 jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。...层级选择器 后代选择器： $("div .c1") //空格分隔 子代选择器： $("div>span") 过滤选择器，需要结合其他选择器使用。...$obj.append(newObj); //在$obj的末尾添加子元素newObj $obj.prepend(newObj); //作为第一个子元素添加至$obj中 作为兄弟元素添加 $obj.after...中对事件做了优化，可以重复书写 ready 方法，依次执行 事件绑定方式 事件名称省略 on 前缀 //on("事件名称"，function) $("div").on("click",function...$("div").click(function(){}); this 表示事件的触发对象，在 jquery 中可以使用，注意转换类型。
1、正确引用jQuery 尽量在body结束前才引入jQuery，而不是在head中。 借助第三方提供的CDN来引入jQuery，同时注意当使用第三方CDN出现问题时，要引入本地的jQuery文件。...选择器 高效正确的使用jQuery选择器是熟练使用jQuery的基础，而掌握jQuery选择器需要一定的时间积累，我们开始学习jQuery时就应该注意选择器的使用。...关于jQuery选择器的性能优先级，ID选择器快于元素选择器，元素选择器快于class选择器。...群里以前有朋友就因为这个导致在IE下输出时出现问题，而关于字符串的拼接可以参考下最快创建字符串的方法。...如在减少代码段中，如果需要根据条件从数组中得到新数组时，可以使用$.grep() 方法，如果你在使用jQuery时有自己心得的话，欢迎在留言中和大家分享！
一、正确引用jQuery 尽量在body结束前才引入jQuery，而不是在head中。 借助第三方提供的CDN来引入jQuery，同时注意当使用第三方CDN出现问题时，要引入本地的jQuery文件。...二、优化jQuery选择器 高效正确的使用jQuery选择器是熟练使用jQuery的基础，而掌握jQuery选择器需要一定的时间积累，我们开始学习jQuery时就应该注意选择器的使用。...在整个DOM中查找class为home的a元素，性能可想而知。...关于jQuery选择器的性能优先级，ID选择器快于元素选择器，元素选择器快于class选择器。...在之前的版本中 on() 就是 bind()。自从jQuery 1.7版本后，on() 附加事件处理程序的首选方法。
微前端的使用场景微前端架构在以下场景中表现尤为出色：大型企业级应用在一个典型的大型企业应用中，前端通常由多个团队协作开发。假设一家银行的在线服务平台包含账户管理、交易历史、贷款申请等多个功能模块。...通过微前端，旧的 jQuery 模块和新的 Vue 模块可以在同一个平台中共存，用户不会察觉到底层技术的变化。...独立部署需求在频繁迭代的产品开发中，不同模块可能有不同的发布周期。微前端允许单个模块快速上线，而无需重新部署整个应用。例如，一个新闻门户网站需要快速发布热点新闻模块的更新，而评论模块可以延后部署。...微前端的优势与挑战优势提升开发效率：团队可以并行开发，减少开发周期。增强代码可维护性：每个模块的代码库相对独立，复杂度降低。灵活的技术选择：不同模块可以选择最佳技术栈，而不受全局技术限制。...尽管在性能优化和通信管理上仍有挑战，但其灵活性和可扩展性使其成为解决复杂前端应用的有效方案。在技术飞速发展的今天，微前端为开发者提供了新的视角和工具，应对多变的市场需求与技术迭代。
运用jQuery时，需要在页面中引入jQuery文件 jQuery的hello world 在页面中引入jQuery支持 --> jquery-1.12.4.js"> #box{width: 200px...代码，写在一对script标签中 // 可以使用最简洁的代码，完成JS中复杂的功能！...// 这里写的代码，就是当页面中的标签全部加载完成执行的代码；类似于window.onload // 标签选择器:$("标签名称") $("#btn_tag_selector...li>选择第一个子元素：选择器.first() 选择最后一个子元素：选择器.last() 判断标签是否包含某个class
享元模式可以避免大量非常相似类的开销，在程序设计中，有时需要生产大量细粒度的类实例来表示数据，如果能发现这些实例除了几个参数以外，开销基本相同的 话，就可以大幅度较少需要实例化的类的数量。...如果能把那些参数移动到类实例的外面，在方法调用的时候将他们传递进来，就可以通过共享大幅度第减少单个实例 的数目。 那么如果在JavaScript中应用享元模式呢？...有两种方式，第一种是应用在数据层上，主要是应用在内存里大量相似的对象上；第二种是应用在DOM层上，享元可以用在中央事件管理器上用来避免给父容器里的每个子元素都附加事件句柄。...这样，如下代码就可以在同一本书里共享同一个对象了，因为不管谁借的书，只要书是同一本书，基本信息是一样的： /*享元模式优化代码*/ var Book = function(title, author,...，而结合冒泡的知识，任何一个子元素有事件触发的话，那触发以后事件将冒泡到上一级元素，所以利用这个特性，我们可以使用享元模式，我们可以对这些相似元素的父级元素进行事件监控，然后再判断里面哪个子元素有事件触发了
计数从最后一个元素开始到第一个 :nth-of-type(index/even/odd/公式)) 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素 :first-of-type 选择所有相同的元素名称的第一个子元素.../odd/公式) 选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个 带有“of-type” 与未带有“of-type”项的选择器有一定的区别。...选择器("input")与 2.3 元素遍历 在操作HTML文档中的DOM元素时，经常需要进行元素遍历。...7.2 jQuery插件库 随着jQuery的发展，诞生了许多优秀的插件。 网站地址为：http://plugins.jquery.com/。 通过在搜索框中输入插件名即可搜索需要的插件。...7.3 jQuery UI jQuery UI是在jQuery基础上新增的一个库。 特点： 拥有强大的可扩展功能，具有吸引人的漂亮页面，能够更轻松地在网页中添加专业级的UI元素。
选择器是 jQuery 最基础的东西，本文中列举的选择器基本上囊括了所有的 jQuery 选择器，也许各位通过这篇文章能够加深对 jQuery 选择器 的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写...jQuery 代码的效率。...本文配合截图、代码和简单的概括对所有 jQuery 选择器进行 了介绍，也列举出了一些需要注意和区分的地方。...:nth-child(index/even/odd) 从 1 算起，匹配子元素等于 index/even/odd 的元素 :first-child ：获取第一个子元素 :last-child ：获取最后一个子元素...原创文章采用CC BY-NC-SA 4.0协议进行许可，转载请注明：转载自：jQuery中的9个选择器
p:only-child 选择属于其父元素的唯一子元素的每个元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。...在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 注意点： HTML5 只需要写代码； ④innerText代表一个元素节点内由所有子文本节点内容组成的文本； 17、在JavaScript中定时调用函数 foo() 如何写？...2、Javascript与jQuery有什么区别？ jquery 就对javascript的一个扩展，封装，就是让javascript更好用，更简单。 3、在jQuery中如何注册事件？...②在jQuery中有专门的获取服务器json数据的方法，getJSON()，在回调中，jQuery会自动将json转换为javascript对象。 8、addClass、css有何用途？
它们允许您基于其在一组元素中的位置来选择一个特定的元素....对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法....jQuery在进行值获取时,只会返回第一个元素对应的值. 1.3 操作样式类名(jQuery获取并设置 CSS 类): $("#div1").addClass("divClass2") //为...事件冒泡的作用: 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件....前端性能优化分为如下几个方面: 一、代码部署: 1、代码的压缩与合并 2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息.
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。...是: easyui-tabs 在easyui-tabs元素中添加一个div就是一个子选项卡 子选项卡可以通过title属性来指定标题, data-options添加关闭按钮 data-options...选项卡的标题1" "> 第一个文章 折叠选项卡 选项卡使用的class是: easyui-accordion 在easyui-tabs...class属性为:easyui-menubutton data-options: menu: 指定弹出的菜单项的选择器(被指定的元素与子元素使用块级元素div) 注意, 如果需要处理点击事件...选择的日期发生改变时 onChange:函数名 编写函数时, 存在两个形式参数: 参数1. 选择的新日期 参数2. 之前的旧日期 2.
所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。...去掉了 JS 中的 .on 语法。 代码实现 jQuery 对象[索引] jQuery 对象.get(索引)：将 jQuery 对象转为 JS 对象。 事件 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。...jQuery 中选择器的语法：$(); 代码实现 <!...，由被添加者对象调用 4. prepend(element) 添加成第一个子元素，由添加者对象调用 5. prependTo(element) 添加成第一个子元素，由被添加者对象调用
image (1).png 这么就会出现问题 开发： 代码量大，打包慢，包体积大，时间越长 整个系统的ui主题不好管理 每一次迭代上线，影响面大 代码耦合混乱，不敢动，牵一发何止动全身 用户：访问会越来越慢...，Vue都是组件框架） 每个子应用需要使用 Web Components 技术编写组件或者使用框架生成 优点：面向未来的技术 缺点：重构代价很大，所有的代码需要用web Components重写 Web...（当然，不可否定，在当时，这是一个架构很好的项目） 优化目标 在不影响原来的项目基础的情况下优化项目，以最小改动，使之既能继承原有的能力，又符合现在的开发习惯和技术方向（注入微服务的思想） 解决方法 针对这个项目...（新建两个子项目vue/react各一个，在原来的架构下，开发访问） 需要解决的问题： 使用iframe，并且路由中以 **“#/iframe”** 开头即可访问并隐藏其他的内容，分开iframe与原有的内容的并且通过显示隐藏进行切换...但是在vue中延迟挂载app.mount('#app')会报错。
基本选择器（*） 在开发过程中，jQuery对象的定义 var $obj=$("选择的对象")； //$obj为自定义的元素名 id选择器 $("#id"); 选中的结果是该元素的jQuery对象 标签选择器...$("标签名称");jquery对象的集合，如果选择结果只有一个，那么是当前对象 类选择器 $(".类名"); jQuery对象的集合，类名是在css中定义 并集选择器 $("selector1seletor2...)：选择索引小于index的元素； :header：选择标签h1~h6的元素； :focus：选择所有获取焦点的元素； :animated 选择所有的动画； :first 选择索引第一个元素； :last...选择索引最后一个元素； :not(选择器) 选择不包含selector选择器的元素； :even 选择索引为偶数的元素； :odd 选择索引为奇数的元素； 注意： 使用等于和小于进行并集选择器时，等于在前...:first-child 匹配所给选择器( :之前的选择器)的第一个子元素； 等同于： :nth-child(1) 注意：但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一 个子元素
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。...+ next 选择所有指定元素后紧跟着的元素，如：$(‘label + input’) prev ~ siblings 选择与指定元素之后有相同父级的同级选择器，如：$(‘#prev ~ div’)...:first-of-type选择同一元素名称的兄弟中的第一个元素。 :last-child选择同父代的最后一个子代元素。 :last-of-type选择同一元素名称的兄弟中的最后一个元素。...:nth-child()选择同父代的第n个子代元素。 :nth-last-child()选择同父代的倒数第n个子代元素。 :nth-last-of-type()选择同父代的倒数第n个子代元素。...不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
在使用 qiankun 时，如果子应用是基于 jQuery 的多页应用，静态资源的加载问题可能会成为一个挑战。这是因为在微前端环境中，子应用的静态资源路径可能需要进行特殊处理才能正确加载。...在选择 qiankun 和 iframe 时，需要根据具体的使用场景来决定。...，一个潜在的缺点是它需要浏览器支持Shadow DOM，这在一些旧的浏览器或者不兼容Shadow DOM的浏览器中可能会出现问题。...动态加载 Webpack 5 联邦模块还支持动态加载模块，这对于微前端应用的按需加载和性能优化非常有用。通过动态加载，可以在需要时动态地加载远程模块，而不是在应用初始化时一次性加载所有模块。...通过动态加载，可以在需要时异步地加载远程模块，并在加载完成后使用模块。 在微前端应用中可以实现模块共享和动态加载，提供了更好的代码复用和可扩展性。
JQuery内含元素内容末尾成为他们的最后一个子元素，形式有append(html),append(Jquery),append(HTMLElements[])，append(function())...这里参数是目标位置，开头调用的时想要插入的内容 $("img:first").clone().appendTo($("img").last().parent()); //选择第一个图片插入到最后一个dcell...将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。...，这里选择第一个元素 wrapAll 在集合中所有匹配元素的外面包裹一个HTML结构,也就是为结果集中的所有元素都设置了一个相同的父级元素来包裹所有的元素，形式为wrapAll(html),wrapAll...当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。
阅读统计和访客统计使用的都是不蒜子，因为使用的是NexT主题，只需要添加一下配置就可以了。...升级NexT就比较操蛋了，theme 文件是以源代码的形式从 GitHub 上 clone 下来的，没有在原本版本升级的办法。...所以我的博客一直比较简洁，没有其他花花绿绿的东西，保证速度优先。下面几项都是对访问速度的优化 博客内所使用的图片都是存储在七牛云中的，图片资源无需再优化。...的版本7.0，使用 next-neat 会有问题，所以我选择使用 gulp 做代码压缩，也方便以后扩展。...本文首发于我的个人博客 https://chaohang.top 作者张小超 转载请注明出处 欢迎关注我的微信公众号 【超超不会飞】，获取第一时间的更新。
解决方案：父级 div 定义 overflow:hidden、结尾处加空 div 标签 clear:both、父级 div 定义伪类 :after（最后一个子元素的后边）和 zoom。...// 此处在绑定函数时的 i 是没有问题的，从 0 到 elements.length - 1；只是在子函数中的 i 是一直保持对父环境对象中的 i 的引用的，所以在调用时一直会输出 elements.length...操作 Attribute 时使用 setAttribute() 和 getAttribute() 来操作，由于 getAttribute() 可能会有浏览器兼容性问题，所以在 jQuery 中，会对该方法进行测试...20、JS 作用域链 在一些类 C 的语言中有“块级作用域”，即花括号的每一段代码都有自己的独立作用域，而 JS 只有函数级作用域；JS 作用域链的第一个对象始终是当前执行代码所在环境的变量对象（VO）...应该是 PipeRender 技术的一种，BigRender 的原理是通过某种方式，将首屏不需要的 HTML 代码先存放起来。渲染好首屏后，再将存储好的 HTML 代码逐步渲染出来。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
