jquery的使用、jquery的使用步骤 收藏 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/

jQuery基础回顾——jQuery中的DOM操作

DOM是Document Object Model的缩写，意思是文档对象模型，根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件，简单来说，DOM解决了Netscape的javaScript和Microsoft的Jscript之间的冲突，给予了Web设计师和开发者一套标准的方法，让他们能够轻松获取和操作网页中的数据、脚本和表现层对象。

一般来说，DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。

• DOM Core

DOM Core并不专属于javaScript，任何一种支持DOM的程序设计语言都可以使用它，它的用途并非仅限于处理页面，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。

javaScript中的document.getElementById()、getElementByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。

• HTML-DOM

在使用javaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性，HTML-DOM的出现甚至比DOM Core还要早，它提供了一些更简明的记号来描述各种HTML元素的属性。

例如：

注：HEML-DOM只能用来处理Web文档。

• CSS-DOM

CSS-DOM是针对CSS的操作，在javaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性，通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。

例如：设置某元素style兑现字体颜色的方法：

jQuery作为javaScript库，继承并发扬了javaScript对DOM对象的操作的特性，使开发人员能方便地操作DOM对象。

样例DOM

1、查找节点

使用jQuery在文档树上查找节点非常容易，可以通过在上一节介绍的来完成。

• 查找元素节点

获取元素节点并打印出它的文本内容，jQuery代码如下：

• 查找节点属性

利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值，attr()方法的参数可以是一个，也可以是两个，当参数是一个时，则是要查询的属性的名字，当参数是两个时，则表示给属性赋值，例如：

2、插入节点

在jQuery中提供了多种插入节点的方法：

3、删除节点

如果文档中某一个元素多余，那么应将其删除，jQuery提供了三种删除节点的方法，即remove()、detach()和empty()。

• remove()

从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选的元素。

当某个节点用remove()方法删除后，该节点所包含的所有后代节点同时被删除，这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

另外，remove()方法也可以通过传递参数来选择性地删除元素如下：

• detach()

detach()和remove()一样，也是从DOM中去掉所有匹配的元素，但需要注意的是，这个方法不会把匹配的元素从jQuery对象中移除，因而可以再将来再使用这些匹配的元素，与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

• empty()

严格来讲，empty()方法并不是删除节点，而是清空节点，它能清除元素中的所有后代节点。

4、属性操作

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

• 获取和设置元素属性

如果要获取<p>元素的属性title，那么只需要给attr()方法传递一个参数，即属性名称。

如果需要设置<p>元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数，即属性名和对应的值。

如果需要一次性为同一个元素设置多个属性，可以使用如下代码：

注意：jQuery中的很多方法都是同一个函数实现获取和设置的，例如上面的attr(),类似的还有html()、text()、height()、width()、val()和css()等方法。

• 删除元素属性

在某些情况下，需要删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成该任务。

如果需要删除<p>元素的title 属性，可以使用下面的代码实现：

prop()方法与attr()方法类似，但有区别，大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = \”disabled\”，checked=\”checked\”，比如用attr(\”checked\”)获取checkbox的checked属性时选中的时候可以取到值,值为\”checked\”，但没选中获取值就是undefined。

jQuery提供新的方法prop()来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回\”checked\”和\”\”,现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr()，什么时候使用prop()？

a) 添加属性名称该属性就会生效应该使用prop();

b) 具有true,false两个属性使用prop();

c) 其他则使用attr();

attr与pop方法对比

5、样式操作

• 获取和设置样式

由于 class 也是元素的属性，因此获取和设置class都可以使用attr()方法来完成，但是attr()方法实现的原理是替换，即以新属性值替换原属性值，如果此处需要的是“追加“效果，那么我们可以使用addClass()方法。

• 追加样式

jQuery提供了专门的addClass()方法来追加样式。

attr()与addClass()的区别

• 移除样式

要删除class的某个值，那么可以使用与addClass()方法相反的removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class。

可以使用如下jQuery代码来删除<p>元素中值为“high”的class：

如果要把<p>元素的两个class都删除，就要使用两次removeClass方法，代码如下：

jQuery提供了更简单的方法，可以以空格的方式删除多个class名，jQuery代码如下：

另外，还可以利用removeClass()方法的一个特性来完成同样的效果，当它不带参数时，就会将class的值全部删除。

• 判断是否含有样式

hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。

注意：这个方法是为了增强代码可读性而产生的，在jQuery内部实际上时调用了is()方法来完成这个功能的，该方法等价于$(\”p\”).is(\”.another\”);

6、设置和获取 HTML、文本和值

• html()

此方法类似于javaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。

• text()

此方法类似javaScript中的innerText属性，可以用来读取或者设置某个元素的文本内容。

• val()

此方法类似于javaScript中的value属性，可以用来设置和获取元素的值，无论元素是文本框、下拉框还是单选框，它都可以返回元素的值，如果元素为多选，则返回一个包含所有选择的值的数组。

若方法有入参，则表示设置对应的值。

7、遍历节点

• children()

该方法用于取得匹配元素的子元素集合。

注意：children()方法只考虑子元素而不是其他后代元素。

• next()

该方法用于取得匹配元素后面紧邻的同辈元素。

• prev()

该方法用于取得匹配元素前面紧邻的同辈元素。

• siblings()

该方法用于取得匹配元素前后所有的同辈元素。

8、CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

可以直接利用css()方法获取元素的样式属性。

无论color属性是外部CSS导入，还是直接拼接在HTML元素里（内联），css()方法都可以获取到属性style里的其他属性的值。

也可以直接利用css()方法设置某个元素的的那个样式。

与attr()方法一样，css()方法也可以同时设置多个样式属性。

注意：

1) 如果值是数字，将会自动转化为像素值。PX

2) 在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如：

$(“p”).css({fontSize: “30px”, backgroundColor: “#888888”})

如果带上了引号，既可以写成“font-size”，也可以写成“fontSize”。

建议加上引号，养成良好的习惯。

如果需要某个元素的height属性，则可以通过如下代码实现：

在jQuery中还有另外一种方法也可以获取元素的高度，即height()，它的作用是获得匹配元素当前计算的高度值（px），如

height()方法也能用来设置元素的高度，如果传递的值是一个数字，则默认单位为px，如果要用其他单位（例如em），则必须传递一个字符串如：

若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！

关注并战法后私信“jQuery基础材料”获取线下资料，包括完整基础资料、chm文档、示例代码及其他参考资料。

上一章：

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