Định nghĩa và sử dụng .after() Chèn nội dung hoặc di chuyển thành phần vào ngay sau thành phần đã có. Thường được dùng trong slide, chuyển động lặp lại của hình. .after(nội dung) Cấu trúc $(‘div’).after(‘<p>nội dung thêm vào</p>’); $(‘div’).after($(‘h3’)); 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’).after(‘<p>nội […]

Đị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 […]

Định nghĩa và sử dụng .addClass() thêm class cho thành phần. .addClass(tênclass) Cấu trúc $(‘div’).addClass(‘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> <style> .test { background-color: yellow; } </style> <script> $(function(){ $(‘div’).addClass(‘test’); }); </script> </head> <body> <div>Thành phần div</div> </body> </html> Hiển thị trình duyệt: Thành phần div Thành phần div đã […]

Định nghĩa và sử dụng .remove() Loại bỏ các thành phần được xác định. Thường được dùng khi bạn muốn xóa bỏ một thành phần nào đó, chú ý là xóa bỏ, chứ không phải ẩn. .remove() Cấu trúc Loại bỏ các thành phần được xác định. $(‘.test’).remove(); Html viết: <!DOCTYPE HTML> <html> <head> <meta […]

Định nghĩa và sử dụng .add() Thêm thành phần vào thành phần đã có để cùng thực hiện một hành động. .add() Xây dựng một đối tượng jQuery mới (đối tượng này là sự kết hợp của thành phần ban đầu và các thành phần được thêm vào), cùng nhau thực hiện hành động cụ thể nào […]

Định nghĩa và sử dụng Bộ chọn :contains(text): giúp chọn được thành phần có chứa text được chỉ định. Cấu trúc Đã được thêm vào từ phiên bản 1.1.4 $(‘:contains(text)’) $(‘tag:contains(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(){ $(‘p:contains(html)’).css(“border”, “1px solid blue”); }); </script> </head> <body> […]

Định nghĩa và sử dụng Bộ chọn (“:not(selector)”): không chọn bộ chọn này. selector: bộ chọn Cấu trúc Đã được thêm vào từ phiên bản 1.0 $(‘(“:not(selector)”)’) $(‘(“tag:not(selector)”)’) 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(){ $(‘:not(p)’).css(“border”, “1px solid blue”); }); </script> </head> <body> <p>Thành phần p</div> […]

Định nghĩa và sử dụng Bộ chọn (“prev ~ siblings“): giúp chọn tất cả các thành phần kế tiếp ngay sau thành phần trước. prev: thành phần trước siblings: thành phần cùng cấp. Cấu trúc Đã được thêm vào từ phiên bản 1.0 $(‘(“prev ~ siblings”)’) Ví dụ Html viết: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> […]

Định nghĩa và sử dụng Bộ chọn (“prev + next“): giúp chọn được thành phần kế tiếp ngay sau thành phần trước. prev: thành phần trước next: thành phần kế Cấu trúc Đã được thêm vào từ phiên bản 1.0 $(‘(“prev + next”)’) 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> […]

Định nghĩa và sử dụng Bộ chọn :header: giúp chọn được thành phần headline. Cấu trúc Đã được thêm vào từ phiên bản 1.2 $(‘:header’) $(‘tag:header’) 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(){ $(‘:header’).css(“background”, “blue”); }); </script> </head> <body> <h1>Thành phần h1</h1> <div> <h2>Thành phần h2 […]

Định nghĩa và sử dụng Bộ chọn :has(selector): giúp chọn được thành phần có chứa ít nhất một phần tử phù hợp với quy định chọn. Cấu trúc Đã được thêm vào từ phiên bản 1.1.4 $(‘:has(selector)’) $(‘tag:has(selector)’) 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:has(p)’).css(“border”, […]

Định nghĩa và sử dụng Bộ chọn :root: giúp chọn được thành phần gốc của văn bản, thành phần gốc chính là tag html. Cấu trúc Đã được thêm vào từ phiên bản 1.9 $(‘:root’) 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(){ $(‘:root’).css(“border”, “1px solid blue”); […]