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中,设置 innerTexttextContent 属性时会自动对文本转义,不用担心文本被当作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 00:00>

Last updated: <2017-12-10 Sun 20:10>

Creator: Emacs 25.3.1 (Org mode 9.1.4)