Ví dụ cho querySelector () trong các Thuộc tính khác nhau – công cụ truy vấn tài liệu theo tên

Hướng dẫn về jQuery querySelector. Ở đây chúng ta thảo luận về jQuery querySelector là gì, giới thiệu về, cú pháp với ví dụ về Jquery bằng cách sử dụng kiểu và cách sử dụng.

Bạn đang xem : công cụ truy vấn tài liệu theo tên

jQuery querySelector là gì?

jQuery querySelector được sử dụng để chọn phần tử mô hình đối tượng tài liệu (DOM) cụ thể từ tài liệu HTML, sử dụng các phần tử HTML như tên, id, thuộc tính, loại, giá trị thuộc tính, lớp, v.v. Hoạt động lựa chọn này được thực hiện với trợ giúp của phương thức truy vấn querySelector (), được sử dụng để tìm nạp giá trị trả về làm giá trị đầu tiên được xác định trong tài liệu bộ chọn CSS. Chức năng này dùng để thực hiện nhiều thao tác và được các lập trình viên biết đến vì nó có thời gian xử lý nhanh hơn, nhỏ hơn & amp; mã javascript đơn giản và cũng dễ viết mã hơn.

Giới thiệu về querySelector

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Phương thức querySelector () chỉ trả về phần tử đầu tiên khớp với (các) bộ chọn CSS được chỉ định trong tài liệu. Nếu một ID trong tài liệu được sử dụng nhiều lần thì ID đó sẽ trả về phần tử phù hợp đầu tiên.

Cú pháp của querySelector

Dưới đây là cú pháp của querySelector:

  • querySelector (bộ chọn CSS)
  • Nó trả về phần tử đầu tiên phù hợp với các bộ chọn được chỉ định.
  • Để trả về tất cả các phần tử phù hợp, chúng tôi sử dụng phương thức querySelectorAll ().
  • Các bộ chọn CSS mà chúng tôi chuyển qua phải thuộc loại chuỗi.
  • Bắt buộc phải vượt qua các bộ chọn CSS.
  • Chuỗi mà chúng tôi đang chuyển phải là một bộ chọn CSS hợp lệ.
  • Nếu chuỗi được truyền vào không hợp lệ thì SYNTAX_ERRexception sẽ được ném ra.
  • Nếu không tìm thấy kết quả phù hợp nào, nó sẽ trả về giá trị rỗng.
  • Việc đối sánh phần tử đầu tiên được thực hiện bằng cách sử dụng trình tự duyệt theo thứ tự trước theo chiều sâu của tài liệu.
  • Chỉ định một hoặc nhiều bộ chọn CSS để khớp với phần tử.
  • Đối với nhiều bộ chọn, hãy phân tách bằng dấu phẩy.
  • Các ký tự không thuộc cú pháp CSS chuẩn phải được thoát ra bằng ký tự gạch chéo ngược.

Ví dụ cho phương thức querySelector ()

Dưới đây là các ví dụ cho các phương thức querySelector ():

Trong jQuery, bạn có thể chọn các phần tử trong một trang bằng cách sử dụng nhiều thuộc tính khác nhau của phần tử đó là Kiểu, Lớp, ID, Sở hữu thuộc tính, Giá trị thuộc tính, v.v. Dưới đây là ví dụ về Jquery bằng cách sử dụng kiểu.

Xem Thêm  Làm cách nào để thay đổi màu viền trong HTML? Ví dụ về C # - thay đổi màu đường viền html

Ví dụ # 1 – Chọn theo loại

1. Bộ chọn truy vấn sau chứa hai & lt; a & gt;

Giải thích về đoạn mã trên: Trong ví dụ này, chúng ta có thể thấy rằng chúng ta đã sử dụng hai thẻ liên kết và bên trong thẻ liên kết, chúng tôi đã chuyển siêu liên kết của hai hình ảnh. Bằng cách sử dụng querySelector (“a”). Style.backgroundColor = “red”; chúng tôi đã chuyển thẻ liên kết (“a”) cho querySelector. Trong phương thức querySelector () nếu chúng ta chuyển nhiều bộ chọn, nó sẽ trả về phần tử đầu tiên phù hợp với các bộ chọn được chỉ định. Mặc dù nó chứa hai thẻ liên kết, thẻ liên kết đầu tiên được tìm thấy, đã áp dụng style.backgroundColor = “red”; chỉ dành cho thẻ liên kết đầu tiên.

Đầu ra 1: Trước khi nhấp vào nút (“Nhấp vào tôi”).

Kết quả 2: Sau khi nhấp vào nút (“Nhấp vào tôi”), màu nền của hoa chuyển thành “đỏ”.

Kết quả 3: Khi nhấp vào siêu liên kết, các hình ảnh tương ứng sẽ được mở.

2. Truy vấn này cũng chứa hai & lt; a & gt; Nhưng trong ví dụ dưới đây, tôi đã thay đổi trình tự của bức tranh. Tôi đã giữ siêu liên kết sa mạc trước rồi đến siêu liên kết hoa thứ hai.

Giải thích về đoạn mã trên: Trong ví dụ này, chúng ta cũng có thể thấy rằng chúng ta đã sử dụng hai thẻ liên kết và bên trong thẻ liên kết, chúng tôi đã chuyển siêu liên kết của hai hình ảnh. Bằng cách sử dụng querySelector (“a”). Style.backgroundColor = “red”; chúng tôi đã chuyển thẻ liên kết (“a”) vào bộ chọn truy vấn. Lần này trong querySelector (), nó sẽ tìm ra siêu liên kết “Sa mạc” trước khi chúng ta thay đổi trình tự. Mặc dù nó chứa hai thẻ liên kết, thẻ liên kết đầu tiên được tìm thấy, đã áp dụng style.backgroundColor = “red”; chỉ dành cho thẻ liên kết đầu tiên.

Đầu ra 1: Trong đầu ra, chúng ta có thể thấy rằng hình ảnh đầu tiên là Sa mạc. Vì vậy, do phương thức querySelector (), màu nền của sa mạc đã thay đổi thành màu đỏ.

Đầu ra 2: Khi nhấp vào siêu liên kết, hình ảnh sa mạc sẽ được mở ra.

Đầu ra 3: Khi nhấp vào siêu liên kết của bông hoa, hình ảnh bông hoa sẽ được mở ra.

Xem Thêm  Cách kết nối CSS với tệp HTML - cách kết nối tệp css với html

Ví dụ # 2 – Chọn theo lớp

Trong ví dụ dưới đây, chúng tôi đang chọn bằng cách sử dụng tên lớp.

Giải thích đoạn mã trên: Trong ví dụ trên, chúng tôi đang sử dụng tên lớp và ở đây tên lớp là Bộ chọn. Tên lớp giống nhau được chuyển cho cả h2 (thẻ tiêu đề) và thẻ đoạn văn. Đối với phương thức querySelector (), chúng ta đang chuyển tên lớp, nó sẽ kiểm tra tên lớp cụ thể trong chương trình. Bây giờ nó đã tìm thấy những thẻ có cùng tên lớp như đã đề cập. Bằng cách sử dụng trình duyệt theo thứ tự trước theo chiều sâu của tài liệu, việc đối sánh phần tử đầu tiên được thực hiện. Phần tử đầu tiên trong ví dụ có chứa tên lớp làm Bộ chọn là h2 (thẻ tiêu đề). Phương thức querySelector () tìm nạp thẻ h2 và theo style.backgroundColor, nó áp dụng màu nền cụ thể cho thẻ h2.

Đầu ra 1: Trước khi nhấp vào nút (“nhấp vào tôi”), nội dung thẻ h2 không thay đổi màu nền thành xanh lam.

Đầu ra 2: Sau khi nhấp vào nút (“nhấp vào tôi”), nội dung thẻ h2 thay đổi màu nền của nó thành màu xanh lam.

Ví dụ # 3 – Chọn theo ID

Trong ví dụ dưới đây, chúng tôi đang chọn bằng cách sử dụng id.

Giải thích về đoạn mã trên: Trong ví dụ, chúng tôi đang chọn bằng cách sử dụng id, id ở đây là Bộ chọn. Đối với phương thức querySelector (), chúng ta đang chuyển id nó sẽ kiểm tra tên id cụ thể trong chương trình. Bây giờ nó đã tìm thấy thẻ có cùng tên id như đã đề cập. Bằng cách sử dụng trình duyệt theo thứ tự trước theo chiều sâu của tài liệu, việc đối sánh phần tử đầu tiên được thực hiện. Phần tử trong ví dụ có chứa tên id là Bộ chọn là thẻ đoạn. Phương thức querySelector () tìm nạp thẻ đoạn văn và áp dụng các thay đổi cụ thể cho nội dung theo mã được đề cập.

Đầu ra 1: Trước khi nhấp vào nút “nhấp vào tôi”, nội dung thẻ đoạn văn sẽ là “Đây là phần tử p với id =” selector ”.

Đầu ra 2: Sau khi nhấp vào nút “nhấp vào tôi”, nội dung thẻ đoạn văn sẽ được thay đổi thành “Thay đổi trong văn bản”.

Sử dụng jQuery querySelector

Dưới đây là hai điểm giải thích việc sử dụng querySelector:

  • Các mã của jQuery chính xác hơn, ngắn hơn và đơn giản hơn các mã JavaScript chuẩn. Nó có thể thực hiện nhiều chức năng khác nhau.
  • Lệnh gọi tới querySelector () trả về phần tử đầu tiên khi nó đang chọn một phần tử, vì vậy nó sẽ nhanh hơn và cũng ngắn hơn khi viết.
Xem Thêm  Giải thích SQL INNER JOIN với các ví dụ đơn giản - ví dụ về tham gia bên trong trong sql

Các bài báo được đề xuất

Đây là hướng dẫn về jQuery querySelector. Ở đây chúng ta thảo luận về jQuery querySelector, giới thiệu về querySelector, cú pháp và ví dụ về Jquery bằng cách sử dụng kiểu. Bạn cũng có thể xem qua các bài viết liên quan khác của chúng tôi để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề công cụ truy vấn tài liệu theo tên

Câu lệnh Select truy vấn dữ liệu trên 1 table Bài 5 P1

  • Tác giả: Nam Nguyen
  • Ngày đăng: 2020-04-01
  • Đánh giá: 4 ⭐ ( 3479 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Câu lệnh Select truy vấn dữ liệu trên 1 table
    Truy vấn có điều kiện
    data
    https://drive.google.com/file/d/1soygRAOqc4hXXQOQSWVBC3cMVG36GuZ6/view?usp=sharing

Tạo các truy vấn query trong MS Access

  • Tác giả: vietlike.vn
  • Đánh giá: 3 ⭐ ( 5889 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đang đọc: Tạo các truy vấn query trong MS Access

Bài 3: Câu lệnh truy vấn dữ liệu trong SQL

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 7502 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng thành thạo câu lệnh SQL để truy vấn cơ sở dữ liệu Sinh viên như dạng tổng quát câu lệnh Select, where, order by, group by, having, as, distinct, truy vấn con

Bài 3: Truy vấn – Query

  • Tác giả: timtailieu.vn
  • Đánh giá: 3 ⭐ ( 2779 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài 3: Truy vấn – Query – Vai trò của CSDL là tổ chức lưu trữ và cung cấp công cụ hỗ trợ quản lý và thao tác dữ liệu (những thao tá…

[ĐÚNG] Đối tượng nào dùng để truy vấn dữ liệu

  • Tác giả: toptailieu.com
  • Đánh giá: 4 ⭐ ( 8375 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đáp án ĐÚNG nhất cho câu hỏi trắc nghiệm: “Đối tượng nào dùng để truy vấn dữ liệu” cùng kiến thức tham khảo cực hay.

Tải phần mềm truy vấn cơ sở dữ liệu, Huong Dan truy van co so du lieu Full

  • Tác giả: taimienphi.vn
  • Đánh giá: 4 ⭐ ( 8633 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tải Top phần mềm “truy vấn cơ sở dữ liệu”, hướng dẫn dùng phần mềm có chức năng “truy van co so du lieu” Tải về miễn phí- Taimienphi.vn

Công cụ truy vấn dữ liệu – Là gì Wiki

  • Tác giả: wiki.edu.vn
  • Đánh giá: 4 ⭐ ( 7949 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình