8.1 Kết nối jQuery

Cuối cùng, chúng tôi đã đến thư viện jQuery. Vào thời điểm bài báo này được viết, nó đã lỗi thời và hầu như không bao giờ được sử dụng trong các dự án mới . Nhưng đã có lúc nó rất phổ biến, được ghi lại rất rõ ràng và có rất nhiều ví dụ trên Internet về việc sử dụng nó .

Do đó, nếu bạn đang viết một dự án web nhỏ và không muốn dành hàng tháng trời để học các framework hiện đại, tôi khuyên bạn nên sử dụng thư viện jQuery.

Để sử dụng hàng nghìn hàm jQuery, bạn chỉ cần đưa nó vào trang của mình. Bạn có thể làm như thế này:


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

Làm việc với jQuery có thể được chia thành hai loại.

Đầu tiên, bạn có thể lấy một đối tượng thư viện jQuery, là một phần tử HTML thông thường được bọc trong một đối tượng jQuery tùy chỉnh.

Thứ hai, jQuery có một số đối tượng toàn cầu không bị ràng buộc với các phần tử HTML. Chúng cũng cần được sử dụng.

Hãy bắt đầu với cái đầu tiên.

8.2 Làm việc với bộ chọn

jQuery sử dụng bộ chọn để làm việc với các đối tượng (bạn có nhớ CSS và các lớp của nó không?). Vì vậy, trong jQuery, nếu bạn muốn chọn một số đối tượng hoặc nhóm đối tượng, bạn cần đặt bộ chọn của chúng.

Ví dụ:

Mã số Sự miêu tả Ghi chú
1 $("div") Chọn tất cả các đối tượng có thẻ DIV nhiều đối tượng
2 $("img.#image123") Chọn tất cả các đối tượng có thẻ IMG và ID == image123 một đối tượng
3 $("#image123") Chọn tất cả các đối tượng có ID == image123 một đối tượng
4 $("div.article") Chọn tất cả các đối tượng có thẻ DIV có mạo từ lớp nhiều đối tượng

Giả sử chúng ta muốn thêm xử lý sự kiện vào tất cả các liên kết onclick, đây là cách chúng ta có thể thực hiện với jQuery:


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

Ba bước được thực hiện ở đây:

  1. Nhận (các) đối tượng khớp với bộ chọn "a".
  2. Chúng tôi tạo một hàm ẩn danh gọi tệp alert().
  3. Chúng tôi đặt chức năng này làm trình xử lý sự kiện clickcho tất cả các đối tượng từ điểm 1.

Một ưu điểm khác của jQuery là mã của nó rất dễ đọc. Không mất nhiều thời gian để hiểu mọi thứ hoạt động như thế nào. Nếu có mã làm việc, thì thật dễ dàng để hiểu nó làm gì.

8.3 Làm việc với các phần tử tài liệu

Hãy xem xét một vài tình huống để làm việc với tài liệu bằng jQuery.

Lấy giá trị của phần tử (đối với phần tử có giá trị):

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

Đặt giá trị phần tử (đối với phần tử có giá trị):

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

Làm cách nào để thêm HTML bên trong một số phần tử?

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

Và làm cách nào để lấy HTML bên trong phần tử?

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

Nếu tôi muốn nhận/thêm không phải HTML mà là văn bản thuần túy thì sao? Không có gì ngạc nhiên ở đây cả.

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

Nếu tôi muốn lấy/thay đổi màu của một phần tử thì sao?

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

Nếu bạn cần làm việc với các kiểu, thì điều này cũng dễ thực hiện:

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

Làm thế nào để thêm một yếu tố mới?

$ (".container").append($("h3"));
Java webinar