Tìm phần tử html trong jquery

Sự miêu tả

Phương thức find( selector ) tìm kiếm các phần tử hậu duệ khớp với selector đã chỉ định

Nội dung chính Show

Sự miêu tả
Thông số
Vui lòng Đăng nhập để nhận xét.
Làm cách nào để nhắm mục tiêu phần tử HTML trong jQuery?
Cách lấy giá trị từ HTML trong jQuery?
Cách tìm thẻ bằng jQuery?
Làm cách nào để tìm phần tử lớp trong jQuery?

cú pháp

Đây là cú pháp đơn giản để sử dụng phương thức này -

selector.find( selector )

Thông số

Dưới đây là mô tả về tất cả các tham số được sử dụng bởi phương pháp này -

bộ chọn - Bộ chọn có thể được viết bằng cú pháp bộ chọn CSS 1-3

Ví dụ

Sau đây là một ví dụ đơn giản cho thấy việc sử dụng phương pháp này đơn giản

The jQuery Example

Hello, how are you?

Me? I'm good.

Điều này sẽ tạo ra kết quả sau -

Ví dụ

Sau đây là một ví dụ đơn giản cho thấy việc sử dụng phương pháp này đơn giản

The jQuery Example

Hello, how are you?

Me? I'm good.

Điều này sẽ tạo ra kết quả sau -

Nếu bạn thấy thông báo này, điều đó có nghĩa là chúng tôi đang gặp sự cố khi tải các tài nguyên bên ngoài trên trang web của mình

Nếu bạn đang sử dụng bộ lọc web, vui lòng đảm bảo rằng các miền *. kastatic. tổ chức và *. kasandbox. org được bỏ chặn

Phương thức find() trong jQuery tìm các phần tử con của bộ chọn đã cho. Hậu duệ có thể là con, cháu, v.v. Nó là một phương thức sẵn có trong jQuery. Để tìm kiếm hậu duệ, phương thức find() đi xuống từ phần tử được chọn trong cây DOM

Chúng ta có thể sử dụng bộ chọn "*" để trả về tất cả các phần tử con cháu. Để trả về tất cả các phần tử con của bộ chọn đã cho, chúng ta phải viết nó như sau

Phương thức children() này hoạt động tương tự như phương thức find(). Không giống như phương thức find(), phương thức children() duyệt một cấp xuống cây DOM, i. e. , nó trả về con trực tiếp

Cú pháp sử dụng phương thức find() như sau

cú pháp

Phương pháp này yêu cầu một giá trị tham số duy nhất là bộ lọc. Giá trị này có thể là biểu thức bộ chọn, phần tử hoặc đối tượng jQuery. Nó lọc tìm kiếm con cháu

Hãy cùng tìm hiểu phương thức find() bằng một số hình ảnh minh họa

Ví dụ 1

Trong ví dụ này, có hai phần tử div cùng với hai phần tử ul, một tiêu đề h2 và một phần tử đoạn văn

Ở đây, chúng tôi đang tìm kiếm hậu duệ ul của phần tử div với id = "div1". Phương thức find() sẽ trả về các phần tử ul là hậu duệ của phần tử div tương ứng. Nó sẽ tiếp tục tìm kiếm cho đến khi tìm thấy phần tử được chỉ định

Chúng ta phải nhấp vào nút đã cho để lấy phần tử ul của phần tử div

Nếu chúng ta sử dụng phương thức children(), nó sẽ trả về các phần tử con trực tiếp của bộ chọn đã chỉ định

Kiểm tra nó ngay bây giờ

đầu ra

Sau khi thực thi đoạn mã trên, đầu ra sẽ là -

Sau khi nhấp vào nút đã cho, đầu ra sẽ là -

Ví dụ2

Trong ví dụ này, chúng tôi đang trả về nhiều hậu duệ của bộ chọn đã cho. Ở đây, chúng tôi đang tách từng biểu thức bằng dấu phẩy để trả về nhiều hậu duệ

Kiểm tra nó ngay bây giờ

đầu ra

Sau khi thực thi đoạn mã trên, đầu ra sẽ là -

Sau khi nhấp vào nút đã cho, đầu ra sẽ là -

Ví dụ3

Trong ví dụ này, chúng tôi đang tìm tất cả hậu duệ của phần tử div với id = "div1". Ở đây, chúng tôi đang sử dụng bộ chọn "*" để trả về tất cả các phần tử con cháu

jQuery. find() với các ví dụ

Cải thiện bài viết

Lưu bài viết

Thích bài viết

Cập nhật lần cuối. 03 tháng 8 năm 2021

Đọc

Bàn luận

khóa học

Luyện tập

Băng hình

Cải thiện bài viết

Lưu bài viết

Find() là một phương thức có sẵn trong jQuery được sử dụng để tìm tất cả các phần tử con của phần tử được chọn. Nó sẽ đi xuống đến lá cuối cùng của phần tử được chọn trong cây DOM.
Cú pháp.

$(selector).find()

Ở đây bộ chọn là các phần tử được chọn trong đó tất cả các phần tử con sẽ được tìm thấy.
Thông số. Nó không chấp nhận bất kỳ tham số nào.

Giá trị trả về. Nó trả về tất cả các phần tử hậu duệ của phần tử được chọn

mã jQuery để hiển thị hoạt động của chức năng này.
Mã số 1.
Trong đoạn mã dưới đây, tất cả phần tử “span” được kết nối với phần tử “div” được đánh dấu bằng màu xanh lục.

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

_______55____60____57

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

_______45____550

$(selector1).children("selector2")

5____552

_______45____554

_______43____556

$(selector1).children("selector2")

$(selector1).children("selector2")

58____41

$(selector1).children("selector2")

$(selector1).children("selector2")

2____55____563

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

_______43____574

________ 45 ________ 576

$(selector1).children("selector2")

$(selector1).children("selector2")

_______577____580

$(selector1).children("selector2")

5____582

_______43____582

$(selector1).children("selector2")

2____558____563

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

1____601

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

3____55____570

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

5____574

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

_______43____558____570____57

$(selector1).children("selector2")

3____55____570

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

5____574

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

_______43____558____570____57

$(selector1).children("selector2")

2____558____559

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

đầu ra

Tất cả phần tử con của phần tử cụ thể cũng có thể được tìm thấy với sự trợ giúp của hàm find() với một số tham số.
Cú pháp.

$(selector1).children("selector2")

Ở đây selector1 là phần tử được chọn có tất cả phần tử con sẽ được tìm thấy

Thông số. Nó chấp nhận một tham số được chỉ định bên dưới-

bộ chọn2. Đây chỉ là dấu “*” trả về tất cả phần tử con của phần tử được chọn

Trả về giá trị. Nó trả về tất cả phần tử con của phần tử được chọn.
Mã số 2.
Trong đoạn mã dưới đây, tất cả các phần tử “span” của phần tử “p” được chọn và đánh dấu bằng màu xanh lục.

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

_______55____60____57

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

_______45____434

_______45____436

$(selector1).children("selector2")

5____552

_______45____554

_______43____556

$(selector1).children("selector2")

$(selector1).children("selector2")

58____41

$(selector1).children("selector2")

$(selector1).children("selector2")

2____55____563

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

_______43____574

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

_______577____580

$(selector1).children("selector2")

5____582

_______43____582

$(selector1).children("selector2")

2____558____563

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

1____601

$(selector1).children("selector2")

$(selector1).children("selector2")

_______43____55____570____497

$(selector1).children("selector2")

5____55____574

$(selector1).children("selector2")

501

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

5____574

$(selector1).children("selector2")

507

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

5____574

$(selector1).children("selector2")

513

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

5____55____574

$(selector1).children("selector2")

519

$(selector1).children("selector2")

$(selector1).children("selector2")

_______43____558____570____57

$(selector1).children("selector2")

2____558____559

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

$(selector1).children("selector2")

đầu ra

jQuery là một thư viện JavaScript mã nguồn mở giúp đơn giản hóa các tương tác giữa một tài liệu HTML/CSS, nó nổi tiếng rộng rãi với triết lý “Viết ít hơn, làm nhiều hơn”.
Bạn có thể tìm hiểu jQuery từ đầu bằng cách làm theo Hướng dẫn jQuery và Ví dụ về jQuery này.

Ghi chú cá nhân của tôi arrow_drop_up

Tiết kiệm

Vui lòng Đăng nhập để nhận xét.

Làm cách nào để nhắm mục tiêu phần tử HTML trong jQuery?

Bộ chọn jQuery #id sử dụng thuộc tính id của thẻ HTML để tìm phần tử cụ thể . Một id phải là duy nhất trong một trang, vì vậy bạn nên sử dụng bộ chọn #id khi bạn muốn tìm một phần tử duy nhất, duy nhất.

Cách lấy giá trị từ HTML trong jQuery?

Lấy nội dung - văn bản(), html() và val() . text() - Đặt hoặc trả về nội dung văn bản của các thành phần được chọn. html() - Đặt hoặc trả về nội dung của các thành phần được chọn (bao gồm đánh dấu HTML) val() - Đặt hoặc trả về giá trị của các trường biểu mẫu .

Cách tìm thẻ bằng jQuery?

Phương thức find() của jQuery . Hậu duệ là con, cháu, chắt, v.v. cây DOM. Phương thức này đi xuống dọc theo phần tử con của các phần tử DOM, cho đến phần tử con cuối cùng. The find() method returns descendant elements of the selected element. A descendant is a child, grandchild, great-grandchild, and so on. The DOM tree: This method traverse downwards along descendants of DOM elements, all the way down to the last descendant.

Làm cách nào để tìm phần tử lớp trong jQuery?

Để tìm lớp của phần tử được nhấp, chúng tôi sử dụng điều này. thuộc tính className . Thuộc tính className được sử dụng để đặt hoặc trả về giá trị thuộc tính lớp của phần tử. Sử dụng thuộc tính này, người dùng có thể thay đổi lớp của một phần tử thành lớp mong muốn.