我需要 jQuery

你说“你不需要 jQuery”已经很久了，但它对于在用户脚本等中执行 DOM 操作仍然很有用^。1

获取元素

Native 中，元素的 getter 方法种类太多，而且名字太长。jQuery
中$()就是这样。

通过选择器获取元素

本国的

const viewport = document.querySelector('meta[name=viewport]');

jQuery

const $viewport = $('meta[name=viewport]');

通过选择器获取元素

本国的

const externalLinks = document.querySelectorAll('a[target=_blank]');

jQuery

const $externalLinks = $('a[target=_blank]');

按类别获取元素

本国的

const articles = document.getElementsByClassName('article');

jQuery

const $articles = $('.article');

通过 id 获取元素

本国的

const main = document.getElementById('main');

jQuery

const $main = $('#main');

通过名称获取元素

本国的

const buttons = document.getElementsByName('button');

jQuery

const $buttons = $('[name=button]');

通过标签名获取元素

本国的

const links = document.getElementsByTagName('a');

jQuery

const $links = $('a');

设置样式

在原生应用中，你无法同时为元素设置多个样式。但
在 jQuery 中jQuery.css()可以。

本国的

element.style['background-color'] = '#000000';
element.style['color'] = '#ffffff';

jQuery

$element.css({
  'background-color': '#000000',
  'color': '#ffffff'
});

从 HTML 字符串创建元素

在原生应用中，你需要使用长字符串来从 HTML 字符串创建元素。但
在 jQuery 中，$()可以。

本国的

const foo = document.createRange().createContextualFragment(`<div id="foo">Foo</div>`);

jQuery

const $foo = $(`<div id="foo">Foo</div>`);

设置显示状态

在原生中，需要重写 display 属性的值来改变元素的显示状态。
在 jQuery 中，有几种直观的方法。

显示元素

本国的

element.style.display = 'block';  //or 'inline', 'inline-block', 'inline-table'...

jQuery

$element.show();

隐藏元素

本国的

element.style.display = 'none';

jQuery

$element.hide();

切换显示

本国的

const elementIsShowing = element.ownerDocument.defaultView.getComputedStyle(element, null).display !== 'none';
element.style.display = elementIsShowing ? 'none' : 'block';  //or 'inline', 'inline-block', 'inline-table'...

jQuery

$element.toggle();

其他语言

日本人

在我自己的应用程序中，我将使用 Vue.js 等。↩

文章来源：https://dev.to/munieru_jp/i-need-jquery-51dj