Selector trong jQuery để giúp chúng ta truy cập nhanh và dễ dàng hơn

Một jQuery Selector là một hàm mà sử dụng các Expression để tìm ra sự so khớp của các phần tử từ một DOM trên cơ sở tiêu chuẩn đã cho. Theo cách đơn giản, bạn có thể nói rằng, Selector được sử dụng để chọn một hoặc nhiều phần tử HTML bởi sử dụng jQuery. Khi một phần tử được chọn, thì chúng ta có thể thực hiện các hoạt động đa dạng trên phần tử đã chọn đó.

Hàm cơ sở $() trong jQuery

Factory Function có thể dịch là hàm cơ sở bởi vì đối với tôi, nó là nơi mọi thứ được tạo ra. jQuery Selector bắt đầu với ký hiệu đô la và cặp dấu ngoặc đơn $(). Hàm cơ sở $() sử dụng ba khối trong khi chọn các phần tử trong một tài liệu đã cho.

Tất cả các mục trên có thể được sử dụng hoặc trên chính nó hoặc trong sự kết hợp với Selector khác. Tất cả jQuery Selector xây dựng trên cùng qui tắc ngoại trừ một số "mẹo" (Tweaking).

Ghi chú − Hàm cơ sở $() là đồng nghĩa với một hàm jQuery(). Vì thế trong trường hợp bạn đang sử dụng bất kỳ thư viện JavaScirpt nào khác thì có thể xuất hiện xung đột ở đây, khi đó bạn có thể đổi ký hiệu $ thành jQuery và bạn có thể sử dụng hàm jQuery() thay cho hàm $().

Ví dụ:

Sau đây là ví dụ đơn giản sử dụng Tag Selecor. Nó sẽ chọn tất cả phần tử vởi tên thẻ p và sẽ thiết lập màu nền thành "yellow".

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
    
   <body>
      <div>
         <p class="myclass">This is a paragraph.</p>
         <p id="myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
    
</html>

Nó sẽ cho kết quả sau:

This is a paragraph.
This is second paragraph.
This is third paragraph.

Cách sử dụng các Selector trong jQuery?

Selector là rất hữu ích và sẽ cần yêu cầu ở mọi bước trong khi sử dụng jQuery. Chúng nhận phần tử chính xác khi bạn muốn từ tài liệu HTML của bạn.

Bảng sau liệt kê các Selector cơ bản và giải thích về chúng bởi các ví dụ khi bạn click và link tương ứng:

Ví dụ về Selector trong jQuery:

Tương tự với các cú pháp và ví dụ trên, các ví dụ sau sẽ giúp bạn hiểu thêm về các loại khác nhau của các Selector hữu ích khác.

Bạn có thể sử dụng tất cả các Selector trên với bất kỳ phần tử HTML/XML nào theo cách chung. Ví dụ, nếu Selector $("li:first") làm việc cho phần tử <li> thì khi đó, $("p:first") sẽ cũng làm việc cho phần tử <p>.

Pages

ICT Blog's

Selector trong jQuery để giúp chúng ta truy cập nhanh và dễ dàng hơn

ICT Blog's say...

Không có nhận xét nào:

Đăng nhận xét