JQuery 杂记

Posted on 繁/简： set

COMP3322 课程 JQuery 相关内容拾遗。

JQuery 是一个 JavaScript 库，我们可以将其视作整个 JavaScript 语言的一个超大语法糖。JQuery 的内容其实也是 JavaScript 的一部分，但因为内容比较多也比较重要，还是单独开一篇文章来记一记，以便后续查阅。


  This article is a self-administered course note.

  It will NOT cover any exam or assignment related content.


Including JQuery

在这里下载 JQuery 库。

查看下载的文件，我们能够更加认识到 JQuery 的本质：它仅仅只是一个 JavaScript 文件，提供了各种可供调用的 JavaScript 函数。也有人称 JQuery 为一种框架 (framework)，这样的说法其实有点故弄玄虚了。

在 HTML 的 <head> 标签中引入 JQuery 库。

1
2
3
<head>
    <script src="jquery-3.5.1.js"></script>
</head>

或是引用第三方 (如 Google，Microsoft) 提供的 CDN 源。

1
2
3
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>


JQuery Syntax

JQuery 的基本语法如下：$ 符号后跟着括号包围的 selector，再对被选中的元素调用对应的方法。

1
$('#divTest1').text("Hello World");

其等价于以下 vanilla JavaScript：

1
document.querySelector('#divTest1').innerHTML = "Hello World";

JQuery 中 selector 的格式与 CSS 完全一致 (支持 element selector, id selector, class selector, attribute selector, compound and contextual selector, pseudo-classes)；除此之外，它还提供了更加丰富的 JQuery custom selector。举两个例子：

  • $(ul li:lt(3)): select list elements with an index less than 3.
  • $(div:contains('Hello')): select all div element contains the text "Hello".

这些好用的 custom selectors 都是原生 CSS 中没有的。

$() 返回的是一个 JQuery object，其包含了所有被选中的元素。JQuery object 有时也被称为 matched set (匹配集)。我们通过访问或调用 JQuery object 的各种 properties 与 methods 来操纵被选中的元素。


JQuery Listeners

JQuery object 对大多数常用的 event 定义了对应的 event methods，从而大大简化了添加 event listener 的过程。以下是一些常用的 event methods：

Mouse Events Keyboard Events Form Events Document/Window Events
click() keypress() submit() load()
dblclick() keydown() change() resize()
mouseenter() keyup() focus() scroll()
mouseleave() blur() unload()

大多数在 <head> 处引用的 JavaScript 代码在 DOM 构建完成后才开始执行。对应的 JQuery 实现如下：

1
2
3
4
5
6
$(document).ready(function() {
    // your code goes here
});
$(function() {
    // a shorter version
})

再来看一个例子：对于一系列 <input> 元素，我们想要实现如下效果：被选中的 <input> 元素高亮显示，同时，其他未被选中的元素以深色显示。默认情况下，只有第一个 <input> 元素被选中。

当某个 form 元素被选中，focus 事件将被触发；反之，当其被取消选中时，blur 事件将被触发。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input id='first'> <input> <input> <input>
<script>
    var Blk = document.querySelectorAll('input');
    Blk[0].focus();
    for (var i = 0; i < Blk.length; ++i) {
        let obj = Blk[i];
        obj.addEventListener('focus', function() {
            this.style.backgroundColor = '$ff0';
        });
        obj.addEventListener('blur', function() {
            this.style.backgroundColor = '#aaa';
        })
    }
</script>

在 vanilla JavaScript 中，我们通过循环的方式为每个 <input> 元素添加 focus 与 blur 事件对应的 event listener。接下来我们再来看看应用了 JQuery 之后的代码：

1
2
3
4
5
6
7
8
9
10
<input id='first'> <input> <input> <input>
<script>
    $('#first').focus();
    $('input').focus(function() {
        $(this).css('background', '#ff0');
    });
    $('input').blur(function() {
        $(this).css('background', '#aaa');
    });
</script>

只要三句话！这得益于 event method 支持对 JQuery object 对应的所有 matched elements 统一添加 event listener，而传统的 addEventListener() 只能对单个 element 添加 event listener。

.on() & .off() method

在 JQuery 中添加 event listener 的最 general 的方式是通过 .on() 方法：以上所有的 event methods 仅仅是 .on() 方法的 shorthand。

.on() 方法的强大之处在于：

  • register multiple events and handlers to the JQuery object.
  • bind the same handler function to multiple events.
  • provide data to the event handler.

上述例子使用 .on() 方法可以这样写，一次性为所有 <input> 元素添加两个事件的 event listener。

1
2
3
4
5
6
$('input').on({
    'focus': function() {
        $(this).css('background', '#ff0')}, 
    'blur': function() {
        $(this).css('background', '#aaa')}
})

使用 .off() 移除所有使用 .on() 注册的 event handlers。

1
2
$('input').off('focus');
$('input').off();    // remove all handlers


Getting & Setting Information

Some JQuery methods both retrieve information from, and update the contents of the selected element(s). But they do not always apply to all elements.

一个 JQuery object 可能含有多个元素；当我们调用某些方法时，它的作用范围总是匹配集中的全体元素吗？具体来说，提取信息的方法 (GET method) 与修改信息的方法 (SET method) 通常遵循：

  • GET: If JQuery object holds ore than one elements, some GET methods retrieve information from the first element only.
  • SET: SET methods update all element in the matched set.

有些方法 (例如 .html(), .text(), .val()) 既是 GET method 也是 SET method。它们的作用范围根据其扮演的角色 (GET 还是 SET) 而发生改变。

1
2
var content = $('div').html(); // only return innerHTML of the first div element
$('div').html('Hello World');  // set all div elements'innerHTML to "Hello World"

Chaining

Using chaining, it is possible to call multiple methods on the same JQuery object.

1
$("#message").text("Hello, world").css("color", "blue");

注意，只有 SET methods 才能参与 chaining！纯粹的 GET method s cannot be chained。如果一个 chaining 中的方法不工作，那么其之后的方法将不会被调用。


CSS and DOM manipulation

对 matched set 的 CSS properties 进行更改，或是动态地对 DOM tree 进行修改，这些都是 JavaScript 的强项所在。理所当然的，JQuery 提供了一系列好用的方法来简化 vanilla JavaScript 中的修改过程。

具体的方法介绍可以查阅 course slide 08-jQuery.pdf 的 p.16-20。

这里只讲几个超级好用的。关于 CSS manipulation，一个 .css(property, value) 方法已经足够：它既可以作为 GET method 也可以作为 SET method，并且格式与 CSS 完全一致。

关于 DOM manipulation，常用的 SET methods 有：

  • .append(): Insert content inside the selected element(s) before the closing tag.
  • .prepend(): Insert content inside the selected element(s) after the opening tag.
  • .after(): Insert content after the selected element(s).
  • .before(): Insert content before the selected element(s).


Special Effects

JQuery 使得 animated element 变得异常容易 (本博客的动画效果就采用了 JQuery)，我们只需要选中相应的元素，调用各种各样的 special effect methods 即可。

可供调用的 special effect methods 可分为以下四种：

  • hiding and showing: show(), hide(), toggle().
  • fading in and out: fadeIn(), fadeout(), fadeToggle().
  • sliding: slideUp(), slideDown(), slideToggle().
  • animations: any CSS property that can be represented as number can be animated.

注意这个 toggle() 函数：它表示在两个属性之间切换。以 hiding and showing 为例：原本应用了 hide() 的元素将转而应用 show()，反之亦然。

来看一个小例子，注意我们传入的参数 "slow" 的作用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <p class="odd">First</p>
    <p class="even">Second</p>
    <p class="odd">Third</p>
    <p class="even">Fourth</p>
    <button id="btn1">Hide</button>
    <button id="btn2">Show</button>
    <script>
        $(document).ready(function() {
            $('#btn2').hide();
            $('button').click(function() {
                $('p.even').toggle("slow");
                $('button').toggle();
            })
        })
    </script>
</body>

效果见这里。随着我们按下按钮，偶数行将不断地 hiding/showing；这正是 toggle() 的效果。

除此之外常用的 special effect method 还有 delay() 与 stop()，用来控制连续的 special effects 发生的间隔与停止某个 special effect 的发生。


JQuery AJAX

同样，JQuery 也提供了一系列与 AJAX 相关的方法。其中最 general 的是 $.ajax() 方法；还有几个十分方便的 shorthand methods：$.load(), $.get(), $.getJSON(), $.post().

  • $.ajax(url, method, data....) 只有当其他几个 shorthand methods 不适用时才考虑使用这个方法。它虽然强大，但自定义的程度很高，需要传入许多参数来 specify。
  • $.load(url, data, function(response, status, xhr)) fetch the HTML content from a URL and directly place the returned data into the selected element that invoked this .load() call.
  • $.get(url, data, function(response, status, xhr), datatype) loads data or JSON data from the server using HTTP GET request.
  • $.getJSON(url, data, function(response, status, xhr))
  • $.post(url, data, function(response, status, xhr), datatype) loads data or JSON data from the server using HTTP POST request.

下面再来简单说明一下这些 AJAX methods 中的参数：

  • URL
  • data (optional for GET): an object or string that is sent to the server. (一般是某个 query string)
  • function: a callback to be executed if the request success.
    • response: contains the result data from the request.
    • status: contains the status of the request.
    • xhr: contains the XMLHttpRequest object.
  • datatype: specifies the data type expected of the server response. (可以是 xml, JSON, script, text, html 等，默认为 intelligent guess)

来看一个例子：当用户向 RegForm 中输入数据并点击 submit 后，程序将会用 HTTP POST 方法从 server 取得所有 form data 并显示在 stdTable 中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#RegForm").submit(function() {
    $rfrom = this;
    $.post("view.php", $("#RegForm").serialize(), function(data, status) {
        if (status == "success") {
            let txt = '';
            for (let i in data) {
                txt += "<p>Name   : " + data[i].name  +"<br> ";
                txt +=    "Number : " + data[i].number + "<br> ";
                txt +=    "Age    : " + data[i].age + "<br> ";
                txt +=    "Email  : " + data[i].email + "</p> ";
            }
            $("#stdTable").html(txt);
            $rform.reset();
        }
    });
    return false;    // ...
})

有两个需要注意的点：

  • .serialize() 函数将 form data 转化为 query string 的形式。这里我们将用户输入的数据转化为 query string 并发送给 server。
  • return false; 向 event method 中传入的函数返回值为 false 等价于event.preventDefault();


Reference

  This article is a self-administered course note.

  References in the article are from corresponding course materials if not specified.

Course info: Code, COMP3322. Lecturer, Dr. Tam Anthony Tat Chun.

-----------------------------------そして、次の曲が始まるのです。-----------------------------------