jQuery

Table of Contents

1. jQuery 简介

jQuery 是一个被广泛使用的 JavaScript 类库，使用它你可以更轻松地在文档中找到关心的元素，并对这些元素进行操作：如添加内容、编辑 HTML 属性，定义事件处理程序、以及执行动画。它还包含一些通用的工具函数来操作对象和数组。

参考：
Using jQuery Core: https://learn.jquery.com/using-jquery-core/
jQuery API: http://api.jquery.com/
jQuery Selectors: https://www.w3schools.com/jquery/jquery_ref_selectors.asp
jQuery Utilities: https://api.jquery.com/category/utilities/

1.1. jQuery 基础

jQuery 类库中定义了一个全局函数 jQuery() ，该函数还有一个别名 $() 。jQuery 在全局命名空间中仅仅定义了这两个变量。jQuery 的最常见使用形式是选择一个对象后，在对象上执行一些动作。比如：

$("h1").remove();          // 删除文档中所有<h1>元素

jQuery （或者 $ ）除了是函数名外，还是命名空间名字，在这个命令空间中有一些 utilities 函数，比如 $.each ， $.trim 等。不过，随着 JavaScript 的发展，原生 JavaScript 方法越来越丰富，很多时候不使用 jQuery 工具函数也容易实现相同功能。比如：

$.trim('  hi there!   ');          // jQuery工具函数
'  hi there!   '.trim();           // 原生JavaScript代码，老浏览器可能不支持

1.2. $(document).ready()

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $(document).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

// A $(document).ready() block.
$(document).ready(function() {
    console.log( "ready!" );
});

上面代码可以简写为：

// Shorthand for $(document).ready()
$(function() {
    console.log( "ready!" );
});

参考：https://learn.jquery.com/using-jquery-core/document-ready/

2. jQuery vs. DOM API

使用 jQuery 可以大大简化我们的代码。不使用 jQuery，直接使用 DOM API 也可实现相同的目标。这里介绍一下 jQuery 和 DOM API 的简单对比。

本节内容主要参考：https://blog.garstasio.com/you-dont-need-jquery/

2.1. Selecting Elements

表 1 演示了使用 jQuery 和 DOM API 进行元素选择的不同。

Table 1: jQuery vs. DOM API (Selecting Elements)
使用 jQuery 使用 DOM API 说明
$('#myElement'); document.getElementById('myElement'); 得到 id 为 myElement 的元素
$('.myElement'); document.getElementsByClassName('myElement'); 得到 class 为 myElement 的所有元素
$('div'); document.getElementsByTagName('div'); 得到所有<div>元素
$('[data-foo-bar = "someval"]'); document.querySelectorAll('[data-foo-bar = "someval"]'); 得到所有具有属性"data-foo-bar"，且属性值为 someval 的元素
$('div:not(.ignore)'); or $('div').not('.ignore'); document.querySelectorAll('div:not(.ignore)'); 得到所有<div>元素，但不包含类为 ignore 的<div>元素
$('div, a, script'); document.querySelectorAll('div, a, script'); 得到所有<div>,<a>,<script>元素

参考：https://learn.jquery.com/using-jquery-core/selecting-elements/

2.2. DOM Manipulation

2.2.1. Creating Elements

创建一个<div>元素：

Table 2: jQuery vs. DOM API (Creating Elements)
使用 jQuery 使用 DOM API
$('<div></div>'); document.createElement('div');

2.2.2. Inserting Elements Before & After

假设你有：

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

你想把它变为：

<div id="1"></div>
<div id="1.1"></div>
<div id="2"></div>
<div id="3"></div>

或者：

<div id="0.9"></div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

jQuery 和 DOM API 的实现分别如下：

Table 3: jQuery vs. DOM API (Inserting Elements Before & After)
使用 jQuery 使用 DOM API
$('#1').after('<div id="1.1"></div>'); document.getElementById('1').insertAdjacentHTML( 'afterend', '<div id="1.1"></div>');
$('#1').before('<div id="0.9"></div>'); document.getElementById('1').insertAdjacentHTML( 'beforebegin', '<div id="0.9"></div>');

2.2.3. Inserting Elements As Children

假设你有：

<div id="parent">
    <div id="oldChild"></div>
</div>

你想把它变为：

<div id="parent">
    <div id="newChild"></div>
    <div id="oldChild"></div>
</div>

或者：

<div id="parent">
    <div id="oldChild"></div>
    <div id="newChild"></div>
</div>

jQuery 和 DOM API 的实现分别如下：

Table 4: jQuery vs. DOM API (Inserting Elements As Children)
使用 jQuery 使用 DOM API
$('#parent').prepend('<div id="newChild"></div>'); document.getElementById( 'parent' ).insertAdjacentHTML( 'afterbegin', '<div id="newChild"></div>');
$('#parent').append('<div id="newChild"></div>'); document.getElementById( 'parent' ).insertAdjacentHTML( 'beforeend', '<div id="newChild"></div>');

2.2.4. Moving Elements

假设你有：

<div id="parent">
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
</div>
<div id="orphan"></div>

你想把它变为：

<div id="parent">
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
    <div id="orphan"></div>
</div>

或者：

<div id="parent">
    <div id="orphan"></div>
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
</div>

jQuery 和 DOM API 的实现分别如下：

Table 5: jQuery vs. DOM API (Moving Elements)
使用 jQuery 使用 DOM API
$('#parent').append($('#orphan')); document.getElementById( 'parent' ).appendChild( document.getElementById( 'orphan'));
$('#parent').prepend($('#orphan')); document.getElementById( 'parent' ).insertBefore( document.getElementById( 'orphan'), document.getElementById('c1'));

2.2.5. Removing Elements

删除 id 为 foobar 的元素：

Table 6: jQuery vs. DOM API (Removing Elements)
使用 jQuery 使用 DOM API
$('#foobar').remove(); document.getElementById('foobar').parentNode.removeChild( document.getElementById('foobar'));

2.2.6. Adding & Removing CSS Classes

假设你有：

<div id="foo"></div>

你想把它变为：

<div id="foo" class="bold"></div>

或者，你有后者，想删除 class="bold"变为前者。

jQuery 和 DOM API 的实现分别如下：

Table 7: jQuery vs. DOM API (Adding & Removing CSS Classes)
使用 jQuery 使用 DOM API
$('#foo').addClass('bold'); document.getElementById('foo').classList.add('bold');
$('#foo').removeClass('bold'); document.getElementById('foo').classList.remove('bold');

2.2.7. Adding/Removing/Changing Attributes

假设你有：

<div id="foo"></div>

你想把它变为：

<div id="foo" role="button"></div>

或者，你有后者，想删除 role="button"变为前者。

jQuery 和 DOM API 的实现分别如下：

Table 8: jQuery vs. DOM API (Adding & Removing CSS Classes)
使用 jQuery 使用 DOM API
$('#foo').attr('role', 'button'); document.getElementById('foo').setAttribute('role', 'button');
$('#foo').removeAttr('role'); document.getElementById('foo').removeAttribute('role');

2.2.8. Adding & Changing Text Content

假设你有：

<div id="foo">Hi there!</div>

你想把它变为：

<div id="foo">Goodbye!</div>

jQuery 和 DOM API 的实现分别如下：

Table 9: jQuery vs. DOM API (Adding & Removing CSS Classes)
使用 jQuery 使用 DOM API
$('#foo').text('Goodbye!'); document.getElementById('foo').innerHTML = 'Goodbye!';
  document.getElementById('foo').innerText = 'GoodBye!'; // not work in FireFox
  document.getElementById('foo').textContent = 'Goodbye!'; // IE 9+

说明：DOM API 中，设置 innerText 和 textContent 属性时会自动对文本转义，不用担心文本被当作 HTML 特殊字符。

2.2.9. Adding/Updating Element Styles

假设你有：

<span id="note">Attention!</span>

你想把它变为：

<span id="note" style="font-weight: bold;">Attention!</span>

jQuery 和 DOM API 的实现分别如下：

Table 10: jQuery vs. DOM API (Adding/Updating Element Styles)
使用 jQuery 使用 DOM API
$('#note').css('fontWeight', 'bold'); document.getElementById('note').style.fontWeight = 'bold';

2.3. Ajax Requests

下面是使用 jQuery 发送 GET 请求的例子：

$.ajax('myservice/username', {
    data: {
        id: 'some-unique-id'
    }
})
.then(
    function success(name) {
        alert('User\'s name is ' + name);
    },

    function fail(data, status) {
        alert('Request failed.  Returned status of ' + status);
    }
);

使用“Native XMLHttpRequest Object”，也能实现相同的功能：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'myservice/username?id=some-unique-id');
xhr.onload = function() {
    if (xhr.status === 200) {
        alert('User\'s name is ' + xhr.responseText);
    } else {
        alert('Request failed.  Returned status of ' + xhr.status);
    }
};
xhr.send();

其它例子可参考：https://blog.garstasio.com/you-dont-need-jquery/ajax/

2.4. Events

下面是使用 jQuery 注册事件处理函数：

$(someElement).on('click', function() {      // or $(someElement).click(function() {
    // TODO event handler logic
});

直接使用原生 Web API 中的 addEventListener() 也可实现相同的功能：

someElement.addEventListener('click', function() {
    // TODO event handler logic
});

其它例子可参考：https://blog.garstasio.com/you-dont-need-jquery/events/

Author: cig01

Created: <2017-03-11 Sat>

Last updated: <2017-12-10 Sun>

Creator: Emacs 27.1 (Org mode 9.4)