Tìm kiếm
Tìm kiếm
0

Chưa có sản phẩm trong giỏ hàng.

Breadcrumb

.find()

.find()

Định nghĩa và sử dụng .find() giúp tìm thành phần trong thành phần cha. .find(bộ chọn) Cấu trúc $(‘li’).find(‘.test’); Html viết: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>Tiêu đề</title> <script src=”https://code.jquery.com/jquery-latest.js”></script> <script> $(function(){ $(‘li’).find(‘.test’).css(‘background-color’,’blue’); }); </script> </head> <body> <ul> <li class=”first”>Thành phần thứ 1</li> <li class=”second”>Thành phần thứ 2</li> <li class=”third”> <p>Thành phần thứ 3</p> […]

find

Định nghĩa và sử dụng

  • .find() giúp tìm thành phần trong thành phần cha.

.find(bộ chọn)

Cấu trúc

$('li').find('.test');

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
  $('li').find('.test').css('background-color','blue');
});
</script>
</head>

<body>
  <ul>
    <li class="first">Thành phần thứ 1</li>
    <li class="second">Thành phần thứ 2</li>
    <li class="third">
      <p>Thành phần thứ 3</p>
      <ul>
        <li>Thành phần con thứ 1</li>
        <li class="test">Thành phần con thứ 2</li>
        <li>Thành phần con thứ 3</li>
      </ul>
    </li>
    <li class="fourth">Thành phần thứ 4</li>
    <li class="fifth">Thành phần thứ 5</li>
  </ul>
</body>
</html>

Hiển thị trình duyệt:

  • Thành phần thứ 1
  • Thành phần thứ 2
  • Thành phần thứ 3
    • Thành phần con thứ 1
    • Thành phần con thứ 2
    • Thành phần con thứ 3
  • Thành phần thứ 4
  • Thành phần thứ 5

.find('.test') đã giúp tìm được thành phần li có class="test".

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery
<ul>
<li class=”first”>Thành phần thứ 1</li>
<li class=”second”>Thành phần thứ 2</li>
<li class=”third”>
<p>Thành phần thứ 3</p>
<ul>
<li>Thành phần con thứ 1</li>
<li class=”test”>Thành phần con thứ 2</li>
<li>Thành phần con thứ 3</li>
</ul>
</li>
<li class=”fourth”>Thành phần thứ 4</li>
<li class=”fifth”>Thành phần thứ 5</li>
</ul>		 <ul>
<li class=”first”>Thành phần thứ 1</li>
<li class=”second”>Thành phần thứ 2</li>
<li class=”third”>
<p>Thành phần thứ 3</p>
<ul>
<li>Thành phần con thứ 1</li>
<li class=”test” style=”background-color: blue;”>Thành phần con thứ 2</li>
<li>Thành phần con thứ 3</li>
</ul>
</li>
<li class=”fourth”>Thành phần thứ 4</li>
<li class=”fifth”>Thành phần thứ 5</li>
</ul>

.find(jquery object)

Cấu trúc

$('li').find($('div.test'));

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
  $('li').find($('p.test')).css('background-color','blue');
});
</script>
</head>

<body>
  <ul>
    <li class="first">Thành phần thứ 1</li>
    <li class="second">Thành phần thứ 2</li>
    <li class="third">
      <p>Thành phần thứ 3</p>
      <ul>
        <li>Thành phần con thứ 1</li>
        <li class="test">Thành phần con thứ 2</li>
        <li>Thành phần con thứ 3</li>
      </ul>
      <p class="test">Thành phần p</p>
    </li>
    <li class="fourth">Thành phần thứ 4</li>
    <li class="fifth">Thành phần thứ 5</li>
  </ul>
</body>
</html>

Hiển thị trình duyệt:

  • Thành phần thứ 1
  • Thành phần thứ 2
  • Thành phần thứ 3
    • Thành phần con thứ 1
    • Thành phần con thứ 2
    • Thành phần con thứ 3

    Thành phần p

  • Thành phần thứ 4
  • Thành phần thứ 5

Với cách sử dụng như trên chỉ có thành phần p có class test là được tìm thấy.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery
<ul>
<li class=”first”>Thành phần thứ 1</li>
<li class=”second”>Thành phần thứ 2</li>
<li class=”third”>
<p>Thành phần thứ 3</p>
<ul>
<li>Thành phần con thứ 1</li>
<li class=”test”>Thành phần con thứ 2</li>
<li>Thành phần con thứ 3</li>
</ul>
<p class=”test”>Thành phần p</p>
</li>
<li class=”fourth”>Thành phần thứ 4</li>
<li class=”fifth”>Thành phần thứ 5</li>
</ul>		 <ul>
<li class=”first”>Thành phần thứ 1</li>
<li class=”second”>Thành phần thứ 2</li>
<li class=”third”>
<p>Thành phần thứ 3</p>
<ul>
<li>Thành phần con thứ 1</li>
<li class=”test”>Thành phần con thứ 2</li>
<li>Thành phần con thứ 3</li>
</ul>
<p class=”test” style=”background-color: blue;”>Thành phần p</p>
</li>
<li class=”fourth”>Thành phần thứ 4</li>
<li class=”fifth”>Thành phần thứ 5</li>
</ul>

Quà tặng WordPress trị giá $1600

Kể từ 2020, AZDIGI chính thức áp dụng tặng kèm bản quyền theme và plugin WordPress, dành riêng cho khách hàng như WP Rocket, Rank Math Pro, WP Astra Lifetime,…với tổng trị giá quà tặng lên đến $1600 và luôn được cập nhật mỗi năm.

Chi tiết
Image

Bắt đầu thương hiệu với tên miền riêng của bạn

Tên miền quốc tế .COM chỉ từ 275k/năm, tên miền .VN chỉ từ 360.000/năm.
Đăng ký dễ dàng, thao tác đăng ký hoàn toàn trực tuyến, thủ tục nhanh gọn, và kích hoạt tự động ngay trong 15 phút kể từ khi AZDIGI nhận được thanh toán.

Chi tiết
Image

Viết bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bài viết liên quan

:visible

:visible

Định nghĩa và sử dụng Bộ chọn :visible: giúp chọn được thành phần đang nhìn thấy (visible), click vào các thành phần để hiểu rõ hơn. Cấu trúc Đã được thêm vào từ phiên bản 1.0 $(‘:visible’) $(‘input:visible’) Ví dụ Html viết: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>Tiêu đề</title> <script src=”https://code.jquery.com/jquery-latest.js”></script> <script> $(function(){ $(‘div:visible’).click(function […]

Chi tiết
Chi tiết
:text

:text

Định nghĩa và sử dụng Bộ chọn :text: giúp chọn được thành phần input có thuộc tính type với giá trị text. Cấu trúc Đã được thêm vào từ phiên bản 1.0 $(‘:text’) $(‘input:text’) Ví dụ Html viết: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>Tiêu đề</title> <script src=”https://code.jquery.com/jquery-latest.js”></script> <script> $(function(){ $(‘input:text’).css(‘background-color’,’blue’); }); </script> </head> <body> […]

Chi tiết
Chi tiết
.hover()

.hover()

Định nghĩa và sử dụng .hover() kết hợp xử lý cả 2 sự kiện di chuyển con trỏ chuột vào thành phần (mouseenter) và di chuyển con trỏ chuột ra khỏi thành phần (mouseleave). .hover() được sử dụng trong việc thực hiện một việc gì đó khi hover chuột. .hover(xử lý mouse enter,xử lý mouse […]

Chi tiết
Chi tiết
.removeclass()

.removeclass()

Định nghĩa và sử dụng  removeClass()  : Loại bỏ thuộc tính (attr) class có bên trong thành phần .removeClass() Cấu trúc Loại bỏ tất cả tên class có trong thành phần. $(‘div’).removeClass(); Html viết:   <!DOCTYPE HTML&gt <html> <head> <meta charset=”utf-8″> <title>Tiêu đề</title> <script src=”https://code.jquery.com/jquery-latest.js”></script> <script> $(function(){   $(‘div’).removeClass(); }); </script> </head> <body>   <div […]

Chi tiết
Chi tiết
:focus

:focus

Định nghĩa và sử dụng Bộ chọn :focus: giúp chọn được thành phần khi được focus. Cấu trúc Đã được thêm vào từ phiên bản 1.6 $(‘:focus’) $(‘input:focus’) Ví dụ Html viết: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>Tiêu đề</title> <script src=”https://code.jquery.com/jquery-latest.js”></script> <style> .bgFocus { background: blue; } </style> <script> $(function(){ $(“body”).delegate(“*”,”focus blur”, function(event) { […]

Chi tiết
Chi tiết
.class

.class

Định nghĩa và sử dụng Bộ chọn .class: chọn thành phần theo từng class cụ thể. Cấu trúc Đã được thêm vào từ phiên bản 1.0 $(‘.tênclass’) $(‘tag.tênclass’) Ví dụ Html viết: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>Tiêu đề</title> <script src=”https://code.jquery.com/jquery-latest.js”></script> <script> $(function(){ $(‘.test’).css(‘border’,’1px solid blue’); }); </script> </head> <body> <div class=”test”>div</div> <p>p</p> <div> […]

Chi tiết
Chi tiết
Xóa sản phẩm thành công. Thêm vào giỏ hàng thành công.