jquery遍历,jquery遍历dom元素 收藏 0

jQuery 已“死”？为清除技术债，我们删掉了前端所有 jQuery 依赖

近期，英国公共部门站 GOV.UK 前端开发主管 Matt Hobbs 宣布该公司删除了 jQuery 作为所有前端应用程序的依赖项，这意味着“在所有 13 个 FE 应用程序中，JS 大小减少了 32 KB（31% ～49% 之间）”。

Matt 也在推特上分享了几组数据，说明了在删除 jQuery 后一些关键指标得到了优化。

• 移除页面标签限制并查看所有页面 RUM 数据， 75% 用户的页面都有类似的下降：

• 在 75% 的页面中仅检查 Android 用户，可以看到 JS 长任务改进了 7%：

• 50% 用户的移动设备上的 JS Long Tasks 有 10% 的改进：

• 而对于 95% 用户，阻塞时间则减少了 10% ：

“这些用户会遇到严重不利的网络和设备条件，每一次性能提升对他们来说尤其重要。”Matt 说道。

根据 Matt 说法，删除 jQuery 的本意是清理技术债。“它最初是为了支持浏览器而存在的，但随着时间的推移，情况发生了变化，所以 bits 可以被删除。我想在这之后会重新评估，看看还有什么是不再需要的。” Matt 表示。

jQuery 是一套跨浏览器的 JavaScript 库，可以简化 HTML 与 JavaScript 之间的操作。截至 2021 年，有将近 84% 的移动页面使用 jQuery。jQuery 是最受欢迎的 JavaScript 库之一，它的一些操作已经反映在标准 Web API 中。

JQuery 创建于 2006 年，主要是为了帮助开发者处理当时浏览器的不足。当时谷歌浏览器还未流行，人们饱受 Internet Explorer 之苦。而 JQuery 开发者可以使用 CSS 选择器和函数可以轻松地遍历和操作 DOM，

此外，JQuery 还提供了一些开箱即用的函数来做动画 DOM 元素，而无需弄乱 CSS。在没有 jQuery 之前发出 AJAX 请求很麻烦，但使用 JQuery 只需几行代码即可完成。JQuery 提供了一个可以在大多数浏览器上工作的 API，这在当时使用 JavaScript 是很难实现的。

但在过去的几年里，JavaScript 已经成熟了很多，它支持很多新的 API，其社区也构建了很多库来填补 jQuery 可能留下的任何空白。

现在，开发者几乎可以在原生 JavaScript 中做任何 jQuery 可以做的事情。例如，可以使用带有 querySelector 和 querySelectorAll 的 CSS 选择器语法来选择元素，使用 classList API 在元素上添加、删除和切换类，使用 addEventListener 将事件处理程序附加到 DOM 元素和窗口等等。

同时随着 Angular、Vue 和 React 等框架的出现和流行，一直未有特别创新的 jQuery 更显“老态”。“对我来说，他们 (jQuery ) 就像是那个随着时代变迁没有更新知识的老灰胡子。”有网友直言。

“现在，大多数事情都不再需要 jQuery 了。”有网友评论道，“我个人发现普通的 JS API 和 fetch 甚至比 jQuery 的东西更干净。人们仍然出于习惯使用 jQuery，是因为摆脱它需要做很多工作。”

近几年，业内对于“jQuery 是否已死”的讨论一直没停过。实际上，一些大型、资金充足的网站已经“用脚投票”，正在逐渐摆脱对 jQuery 的依赖。

2018 年，GitHub 宣布从 GitHub.com 的前端代码中完全移除了 jQuery。“早期，jQuery 对我们意义重大。”GitHub 前端工程团队在方式发布的文章里表示。“在 GitHub 的早期阶段，jQuery 让小型的开发团队能够快速进行原型设计并开发出新功能，而无需专门针对每个 Web 浏览器调整代码。”

但随着 GitHub 成长为一家拥有数百名工程师的公司，jQuery 带来的价值已经随着时间的推移而下降。比如技术债会随着依赖项的增多而增长，给企业带来很大的维护成本。因此，GitHub 最终决定删除 jQuery。不过，GitHub 没有选择另外的库或框架，而是使用标准的浏览器 API 来实现。

不只 GitHub，Bootstrap 最新版本也将删除 jQuery。

尽管被认为已经过时，但 jQuery 仍然是占主导地位的 JavaScript 库。今天的开发人员可能没有意识到在使用 jQuery，因为它被嵌入在了许多大型开源项目里面，其中最著名的就是 WordPress。

“大多数网站都不需要复杂的开发框架，它们大多是具有一些动态行为的静态网站，这种网站通常用 WordPress 编写。jQuery 在这个场景下仍然很流行，因为它既简单又有效，人们觉得没必要停止使用它。”jQuery 开发者 Micha Gobiowski-Owczarek 在接受外媒采访时说道。

Micha Gobiowski-Owczarek 也明确表示，为了不与浏览器冲突，jQuery 不会修改原生原型，而是用 jQuery 包装器对象包装 DOM 节点，每个操作都会创建一个新的包装器对象。大多数情况下，这并不重要，但对于具有大量 DOM 操作的、非常复杂的应用程序来说，可能会成为一个问题。

未来的很长一段时间里，jQuery 还继续会是 WordPress 的一部分，因为它很难在不破坏向后兼容性的情况下将它删除。但一些改变已经发生，如 WordPress 创建的 Gutenberg 编辑器不依赖于 jQuery。

随着时间的推移， WordPress 肯定会逐步更新技术，这是一个渐进的过程，jQuery 的最终去留也很难说。但不可否认的是，jQuery 为前端带来了重大的影响。

参考链接：

https://thenewstack.io/why-outdated-jquery-is-still-the-dominant-javascript-library/

利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)

　　作为一个前端工程师，无论公司是什么行业，无论你做什么端，基本都会遇到一个避不开的动画效果：循环轮播。做轮播并不难，市场上的轮播插件有很多，其中比较著名的是swiper，使用也非常简单。但轮播插件这种东西总归是不灵活的，一些简单的场景还可以应付，比较复杂一点的场景处理起来就比较麻烦了。今天我会全程带大家来写一个循环轮播，用到的技术有：html、css、JavaScript、jQuery，都是前端最基础的技术，有基础又爱学肯学的你一定一听就会，如果不会咋整？那多看几遍。

　　以小米官网的图片轮播为例，实际上千篇一律，好啦，看下图：

　　　好啦，看效果，不要看妹子，虽然妹子长得是很好看啦！

　　无限循环轮播的原理是在展示内容的前后各放一组图片，以无限循环展示3张照片为例，三张图片我给它取名为1.jpg,2.jpg,3.jpg,图片展示分别如下：

　　原理示意图展示：

　　原理其实就是复制两组同样的照片分别放在前面和后面(实际上不用完全复制两组，只需要前面可以看到1.jpg，后面也可以到1.jpg就好了，但这里我为了方便大家理解，就采用这样的方式了)。当点左边按钮，图片轮播到第一张1.jpg时，让盛放图片的容器瞬间拉回到第二张1.jpg照片的位置，注意一定要是瞬间。同理，当点右边按钮时，图片轮播到第三张1.jpg的时候，也让盛放图片的容器瞬间拉回到第二张1.jpg照片的位置。这是实现图片循环轮播的关键，稍后会仔细讲解。

　　html代码：

　　css 代码：

　　页面布局是很重要的一部分内容，它是页面的基石。页面布局写得好实现效果的时候能带来很大的方便。因此这里强调几个应该注意的地方：

　　1. 所有的图片要放在一个很长的容器中，这里是slideImageList，每次移动实际上就是它在相对于他的父元素slideImageContainer而移动，所以需要给slideImageContainer 一个 position:relative 的定位，给 slideImageList 一个 position: absoluete 的定位。

　　2. slideImageList要放在一个比较小的容器中，在这里是slideImageContainer，作用是为了显示你想要显示的区域，注意要加 overflow:hidden 属性，让多余的内容不显示。

　　3. 左右按钮我采用的是iconfont的使用方式，这个比较简单，此处不多加以阐述。不会使用iconfont的同学可以直接贴两个图片或者左右箭头符号在上面。

　　4. 容器slideImageList中的图片要排列在一条直线上，并且初始情况下需要给slideImageList一个left值，因为最开始我们想让第四张照片展示，所以此时的left值为-1800px，要记住这个值，因为我们待会儿要常用到这个值。

　　5. @font-face 是引入 iconfont 相关的资源内容，不使用iconfont的可忽略。

　　接下来看javascript代码：

　　现在着重来分析一下JavaScript的代码，同样有几个关键点需要注意，其中部分我已在代码中注释：

　　1. 全局变量 slideIndex 指的是图片的下标，一共有九张照片，下标从0开始，所以九张照片的下标值分别为0-8，此处我们默认展示第四张照片，所以slideIndex 的初始值置为 3 。另外需要注意的是，slideIndex 是全局变量，所以函数内函数外都可以访问到，并且只初始化一次。

　　2. 局部变量 animateLength 指的是想要 slideImageLists 运动到的位置，注意要加单位，并且需要赋值给 slideImageList 的 left 属性。

　　3. jQuery的 animate 方法 ,详情见下图：

　　接下来完整地分析一下流程，以点击左按钮为例：

　　1. 初始情况下展示第四张图片，下标为 3 。 ( var slideIndex = 3 )

　　2. 给左按钮绑定一个点击事件

　　3. 点击左按钮的时候，想要展示当前照片的前一张，所以图片下标需要减去1 ( slideIndex– )

　　4. 计算 slideImageLists 要移动的位置 （ slideIndex * (-600) + \”px\” ），记得加单位。为什么要乘以 -600 ，首先 600 是一张照片的宽度，上面我们分析过了如果要默认展示第四张照片的话 slideImageLists 的 left 属性值为 -1800px，同理，点击左按钮，想要展示第三张照片，那么此时需要 slideImageLists 的 left 属性值为 -1200px，所以就是 ( 3 – 1 ) * ( -600 ) + \”px\” = -1200px 。

　　5. 利用 animate 来执行动画。将上一步计算出来的值赋值给 slideImageLists 的 left 属性。注意 animate方法本身就是含有过渡的，所以切记不需要在 slideImageLists 上面再加 transtion 属性来实现过渡。

　　6. 实现循环轮播的重点来了。以上步骤实现了轮播，但没有实现循环轮播，回忆我们刚才讲的内容，一共有三组 1.jpg、2.jpg、3.jpg 这张照片，默认展示第四张照片，也就是第二组照片中的 1.jpg ，如果点击左按钮，会分别展示第一组照片中的 3.jpg 、2.jpg、1.jpg , 假设一直点击左按钮，展示到第一张照片，也就是第一组的 1.jpg 的时候，此时图片的下标 slideIndex 的值为 0 。当此时展示的图片的下标 slideIndex 的值为 0 并且执行完这个动画的时候，我们需要做一个操作，将 slideImageLists 的 left 值瞬间改变为 -1800px，这个值我们上面强调过了，是初始情况下展示第四张照片也就是第二组中的 1.jpg 的时候 slideImageLists 的 left 值，并且将当前展示的图片的下标 slideIndex 的值变为 3 。

　　animate有一个非常方便的地方在于他提供了一个回调函数，回调函数在动画执行完之后自己执行。

　　另外，这里还有一个需要格外注意的地方，我们一直强调一定要瞬间将 slideImageLists 拉回到 left 值为 -1800px 的地方，那是因为如果也类似于用animate来实现的话用户会看到一个动画的过程，这是我们不能接受的。所以在瞬间拉回的时候我采用的是jQuery的css方法去改变 left 属性。

　　但是讲到这里，实际上还是有不完美的地方，如果你多次点击按钮，就会发生错乱，此时我们需要做的是在动画的执行过程中点击按钮无效，只有动画结束完成才可以继续点击实现动画。我这里采用的方案是引入一个布尔类型的变量 isClickable，初始值为true，表示初始情况下可点击。当用户点击按钮的时候会进行判断当前 isClickable 的值，如果值为true的时候才会去执行 slideIndex– 的操作，否则会 return false ,不会再执行下面的代码。

　　此时我们来分析一下流程：

　　1. 初始情况下isClickable的值为true，表示当前按钮是可以点击的。

　　2. 此时我们去点击左按钮，isClickable 的值为 true , 会执行slideIndex– 的操作。并且将 isClickable的值设置为 false，表示现在已经处在动画中。此时再去点击左按钮就无法再执行slideIndex–的操作，而是进入 return false，终止当前代码。

　　3. 需要注意的是，我们需要在动画执行完成后，也就是在回调函数中将 isClickable 的值变为 true，所以当动画结束后再点击按钮的时候就可以进行下一次动画了。

　　具体代码如下：

　　以上就是左按钮点击时候的思路，点击右按钮的思路和点击左按钮的思路是一样的，相信聪明的你一定能够一点即通，有问题欢迎大家和我交流。

　　祝工作顺利 ~

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com