jQuery 庫

開放

8.1 連接 jQuery

最後,我們來到了 jQuery 庫。到寫這篇文章的時候,它已經過時了,幾乎從未在新項目中使用過但是有一段時間它非常流行,文檔非常豐富,並且在 Internet 上有很多使用它的示例

因此,如果您正在編寫一個小型 Web 項目並且不想花數月時間學習現代框架,我建議您使用 jQuery 庫。

為了使用數以千計的 jQuery 函數,您只需要將它包含在您的頁面中。你可以這樣做:

<head>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

使用 jQuery 可以分為兩種類型。

首先,您可以獲得一個 jQuery 庫對象,它是包裝在自定義 jQuery 對像中的常規 HTML 元素。

其次,jQuery 有幾個不綁定到 HTML 元素的全局對象。它們也需要被使用。

讓我們從第一個開始。

8.2 使用選擇器

jQuery 使用選擇器來處理對象(還記得 CSS 及其類嗎?)。所以,在 jQuery 中,如果你想選擇某個對像或一組對象,你需要設置它們的選擇器。

例子:

代碼 描述 筆記
1個 $("股利") 選擇所有帶有 DIV 標籤的對象 許多對象
2個 $("img.#image123") 選擇所有帶有 IMG 標籤和 ID == image123 的對象 一個對象
3個 $("#image123") 選擇 ID == image123 的所有對象 一個對象
4個 $("div.文章") 選擇所有帶有 DIV 標記且具有類文章的對象 許多對象

假設我們想為所有鏈接添加事件處理onclick,下面是我們如何使用 jQuery 來實現:

$("a").click(function() {
  alert("Click");
});

這裡採取三個步驟:

  1. 獲取與選擇器匹配的對象"a"
  2. 我們創建一個調用alert().
  3. click我們將此函數設置為第 1 點中所有對象的事件處理程序。

jQuery 的另一個優點是它的代碼易於閱讀。弄清楚一切是如何工作的並不需要太多。如果有工作代碼,那麼很容易理解它的作用。

8.3 使用文檔元素

讓我們看一下使用 jQuery 處理文檔的幾個場景。

獲取元素的值(對於具有值的元素):

var result = $ ("selector").value();

設置元素值(對於有值的元素):

$ ("selector").value(newValue);

如何在某些元素中添加 HTML?

$ ("selector").html(newHTML);

以及如何獲取元素內部的 HTML?

var html = $ ("selector").html();

如果我想獲取/添加的不是 HTML,而是純文本怎麼辦?這裡也沒有驚喜。

var html = $ ("selector").text();

如果我想獲取/更改元素的顏色怎麼辦?

$ ("selector").color("red");

如果您需要使用樣式,那麼這也很容易做到:

$ ("selector").css("color", "red");

如何添加新元素?

$ (".container").append($("h3"));
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言