JQuery find() Phương thức này nghe có vẻ quen thuộc, nhưng đừng nhầm lẫn với phương thức JavaScript find()! Cả hai đều "tìm thấy" mọi thứ, nhưng những gì họ trả lại có thể hoàn toàn khác nhau. Trong JavaScript, find() phương thức chỉ có thể được gọi trên một mảng.
Nó nhận một hàm gọi lại, là một hàm được truyền cho một phương thức làm đối số, sẽ được gọi sau này. Nó tìm và trả về phần tử đầu tiên thỏa mãn các yêu cầu được nêu trong hàm gọi lại.
JQuery find() phương pháp khá khác nhau. Giống như tất cả các phương thức jQuery, nó được gọi trên một bộ chọn. Nó tìm kiếm bên trong bộ chọn đó và chỉ thao tác các phần tử con của bộ chọn đó. Mức độ thao tác cao này rất hữu ích nếu bạn muốn thay đổi một số phần tử chứ không phải những phần tử khác có trong cùng một phần tử mẹ.
Sử dụng jQuery find ()
Bây giờ chúng ta biết jQuery find() được sử dụng để chọn tất cả các phần tử con của một bộ chọn nhất định. Hãy xem một số mã ví dụ để biết cách sử dụng jQuery find() .
Hãy bắt đầu đơn giản và thêm một số phức tạp trong các phần tiếp theo. Chúng tôi có thể thao tác một phần tử sau khi tải trang để minh họa cách find() làm. Làm thế nào về việc chúng tôi thay đổi màu sắc của một số từ trong ngữ cảnh của một đoạn văn sau khi tải trang? Chúng ta sẽ bắt đầu ở đây:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="main"> <h2> jQuery find() method example </h2> <p> This is an example paragraph. </p> <p>We are going to change the color <span>blue</span> to the color blue.</p> <div class="green">We are going to change the word <span>green</span> to the color green.</div> <p> Every other will word will stay the same. </p> </div>
Nhìn vào đoạn mã này và bạn sẽ nhận thấy bên trong phần tử
là một vài phần tử . Một trong các phần tử là phần tử con của phần tử
. còn lại là con của
HTML của chúng tôi đang hiển thị. Bây giờ chúng ta sẽ thay đổi màu sắc của văn bản để minh họa cho
làm bộ chọn của chúng tôi tới
Trong lần sử dụng đầu tiên của
. Chúng tôi sử dụng
. Trong ví dụ này, nó chỉ có từ màu xanh lam. Sau đó, chúng tôi sử dụng
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Về cách sử dụng thứ hai của
Một lần nữa, đây chỉ là từ màu xanh lá cây. Giống như dòng đầu tiên, chúng tôi đang sử dụng
Hãy chạy nó và xem điều gì sẽ xảy ra!
Lưu ý rằng cả hai từ blue và green đều được bao bọc trong một phần tử span không được gán lớp hoặc id. Chúng tôi vẫn có thể tách những từ đó và thay đổi màu của chúng. Như bạn có thể đoán, đó là do các phần tử mẹ của khác nhau.
là cha của của từ blue.
Điều này xảy ra vì
Trong ví dụ này, chúng ta có một danh sách việc cần làm. Hôm nay chúng ta có nhiều việc phải làm, nhưng chúng ta cũng phải mua đồ ở cửa hàng để làm. Sau khi mua những mặt hàng này, chúng ta có thể đánh dấu chúng khỏi danh sách và tiếp tục ngày của mình! Đây là danh sách của chúng tôi:
Ở đây chúng tôi có danh sách của chúng tôi. Chúng tôi có các phần tử
Bây giờ chúng tôi có thể đánh dấu các mặt hàng này khỏi danh sách sau khi chúng tôi mua chúng:
Chúng tôi chỉ có thể gạch bỏ những mục đó trong danh sách của mình bằng cách chọn
JQuery
Việc có thể phân biệt những phần tử con nào để chọn cho phép chúng tôi tổng quát và thay đổi toàn bộ các phần của trang hoặc cụ thể và chỉ thay đổi một số phần tử nhất định của trang. Chính trong sự linh hoạt này mà
Tìm hiểu thêm về cách học jQuery tại đây. 
find() trong hành động. Đây là một bước tuyệt vời cho người mới bắt đầu vì chúng tôi chỉ cần thay đổi một thuộc tính CSS để đạt được điều này. Trong khi chuyển phần tử find() , chúng ta có thể sử dụng css() của jQuery phương pháp hiển thị các thay đổi màu sắc:<script>
$(document).ready(() => {
$('p').find('span').css('color', 'blue');
$('div.green').find('span').css('color', 'green');
})
</script> find() , chúng tôi đang chọn tất cả các phần tử find() để định vị bất kỳ phần tử nào là con của css() phương pháp chuyển màu sang xanh lam.
find() . Lần này, chúng tôi chọn find() trên đó. Phương thức đang định vị một phần tử khác là phần tử con của
css() phương pháp thay đổi màu sắc thành màu xanh lá cây.
find() xác định vị trí con của các phần tử được sử dụng làm bộ chọn. Hãy thêm một số phức tạp và xem xét một ví dụ về danh sách việc cần làm. jQuery find () trong một danh sách
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
To Do list example
</h2>
<ul>
<li class="store">Go to the store
<ul>
<li>Trash bags</li>
<li>Dish Soap</li>
</ul>
</li>
<li>Take out the trash</li>
<Li>Wash the dishes</Li>
</ul>
</div> , là phần tử con của
<script>
$(document).ready(() => {
$('li.store').find('li').css('text-decoration', 'line-through')
})
</script> find() để xác định vị trí các phần tử css() phương pháp áp dụng giá trị “line-through” cho thuộc tính “text-decoration”. Làm như vậy sẽ hiển thị các mục đã chọn với một dòng thông qua chúng:
Kết luận
find() phương thức định vị tất cả các phần tử con của bộ chọn mà nó được truyền vào. find() phương thức sẽ chỉ thao tác các phần tử con này chứ không phải chính nó.
find() làm cho bản thân nó trở nên hữu ích nhất.