Cách dùng :target Selector trong jQuery

Target Selector sẽ lựa chọn phần tử được chỉ ra bởi fragment trong URI của tài liệu.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Nếu URI có bao gồm một fragment hoặc một hash, thì :target sẽ tìm kiếm phần tử dựa vào id được cung cấp bởi fragment hoặc hash đó. Ví dụ nếu URI có dạng https://freetuts.net#target thì :target selector sẽ tìm kiếm phần tử có id="target".

Cú pháp

jQuery( ":target" )

Ví dụ

Tìm kiếm các phần tử có id="targer" và đổi màu cho chúng. Các bạn copy đoạn code dưới đây vào file test.html sau đó mở file đó lên bằng trình duyệt và thêm #target vào cuối đường dẫn để chạy thử:

Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Học lập trình miễn phí tại freetuts.net</title>
        <script src="https://freetuts.net/cnd/js/jquery/jquery-3.2.1.min.js"></script>
        <style type="text/css">
            td{
                background: black;
                width: 50px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.net</h1>
        <table border="1">
          <tr>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td id="target"></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>
        <hr>
        <button onclick="myFunction()">Click vào đây để xem kết quả</button>
        <script>
            function myFunction(){
                $( ":target" ).html( "đây là mục tiêu" ).css("background", "red"); 
            }
        </script>
    </body>
</html>

Kết quả:

Bài viết này được đăng tại [free tuts .net]

Tham khảo: jquery.com

Cùng chuyên mục:

Cách dùng .bind() trong JQuery

Cách dùng .delegate() trong JQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về Selector trong jQuery, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Cách dùng :target Selector trong jQuery

Cú pháp

Ví dụ