使用或学习jQuery的新手指南

94 阅读3分钟

无论你对JavaScript框架和库有什么偏好,jQuery在JavaScript生态系统中都扮演着重要角色。

几年前,它曾经更受欢迎,现在jQuery的一些需求已经被现代浏览器取代了(幸运的是!),但这个JavaScript库仍然被很多人使用。

为什么jQuery一开始就变得如此流行?首先,jQuery诞生于一个JavaScript应用还没有出现的世界。在2000年早期和中期,JavaScript主要用于支持幻灯片和其他出现在页面中的小工具,如图片库、日期选择器等等。它还没有强大到可以做很多事情而不至于太慢(当然,当时的电脑也比较慢)。

应该指出的是,jQuery并不是唯一或第一个库。其他的库在当时也非常流行,比如Mootools、YUI、Dojo Toolkit、Scriptaculous和Prototype。

当时的浏览器有很多互操作性的问题。我们有很多跨浏览器的怪癖和标准化问题,而jQuery通过创建一个抽象层和处理所有的变通办法来帮助我们。

jQuery允许你使用CSS选择器的语法来选择DOM元素,它对用户非常友好,扩展起来也非常简单。它使JavaScript的动画变得简单。

它还帮助简化了AJAX的工作(以及它的跨浏览器差异),当时这个词非常流行,这也给jQuery的流行带来了很大的推动。

今天,我们没有太多的浏览器兼容性问题,选择器APIFetch对浏览器的标准化是jQuery的两个最好的功能。

jQuery无疑是一个充满争议的话题。有些人说jQuery是过去的遗物,有些人仍然日复一日地使用它。有些人花时间写为什么我们不需要jQuery

在过去的几年里,它的使用率肯定在下降。

jQuery trends

今天的JavaScript环境已经发生了巨大的变化。虽然如此,知道jQuery能为你做什么还是很有用的。

我们使用jQuery的事情,现在有一个标准化的浏览器API

选择DOM元素

jQuery的方式。

我们现在可以使用选择器API。

document.querySelector('.button')

如果你有更多的元素。

document.querySelectorAll('.button')

等待DOM的加载

jQuery的方式。

$(document).ready(() => {
	 //...
})

DOM的方式。

document.addEventListener("DOMContentLoaded", () => {
  //...
})

从一个DOM元素中添加或删除类

jQuery的方式。

el.addClass('big')
el.removeClass('big')
el.toggleClass('big')

DOM方式。

el.classList.add('big')
el.classList.remove('big')
el.classList.toggle('big')

从DOM中删除一个元素

jQuery的方式。

The DOM way:

(对,没有变化)

改变DOM中一个元素的内容

jQuery的方式。

el.text('Hello')
el.html('Hello')
el.text()
el.html()

DOM的方式。

el.innerHTML = 'Hello'
el.textContent = 'Hello'
el.innerHTML
el.textContent

选择DOM中的父元素

jQuery的方式。

DOM的方式。

监听DOM元素的事件

jQuery的方式。

el.on('click', (e) => { /* ... */ })

DOM方式。

el.addEventListener('click', (e) => { /* ... */ })

AJAX请求

jQuery的方式。

$.ajax({
  url: '/api.json',
  type: 'GET'
  success: (data) => {
    console.log(data)
  }
})

现代JS的方式。

fetch('/api.json')
  .then(response => response.text())
  .then(body => console.log(body))

动画

jQuery的动画现在可以在浏览器中使用CSS Transitions或CSS Animations来完成。

浏览器怪癖

使用Babel将你的代码转码,或使用特定的polyfills(polyfill.io)。

你今天应该使用jQuery吗?

让我们来回答这篇文章在标题中提出的问题。如果你还不知道jQuery,现在是否值得学习它?

在我看来,jQuery不应该再被用在只针对现代浏览器的新项目中,当然,如果你的项目因为某些特殊原因依赖它,或者只是因为你使用的插件或其他代码需要jQuery,肯定要继续使用它。

有些库也有对jQuery的依赖,比如Bootstrap。你也可能买到现成的模板,只是使用它和它的插件。

也许你工作的团队中,前端开发人员并不都是JavaScript向导,他们更习惯于使用jQuery,而不是使用更新的标准。如果这能完成工作,那就很酷了。

你也可能无法使用最新的酷技术(如React或Vue),因为你需要支持旧的浏览器,这些浏览器的标准比较老。在这种情况下,jQuery对你来说仍然是非常重要的。