Định nghĩa và sử dụng .length() xác định số lượng phần tử trong thành phần. .length Cấu trúc $(‘li’).length; 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(){ var n = $(‘li’).length; $(‘span’).text(n); }); </script> </head> <body> <ul> <li>Thành phần thứ 1</li> <li>Thành phần thứ 2</li> <li>Thành phần thứ 3</li> […]

Định nghĩa và sử dụng .last() xác định thành phần cuối cùng trong các thành phần được chọn. .last() Cấu trúc $(‘li’).last(); 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’).last().css(‘color’,’red’); }); </script> </head> <body> <ul> <li>Thành phần thứ 1</li> <li>Thành phần thứ 2</li> <li>Thành phần thứ 3</li> <li>Thành […]

Định nghĩa và sử dụng .first() xác định thành phần đầu tiên trong các thành phần được chọn. .first() Cấu trúc $(‘li’).first(); 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’).first().css(‘color’,’red’); }); </script> </head> <body> <ul> <li>Thành phần thứ 1</li> <li>Thành phần thứ 2</li> <li>Thành phần thứ 3</li> <li>Thành […]

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

Định nghĩa và sử dụng .each() thực hiện một hành động cho mỗi phần tử, để làm được điều này ta cần sử dụng phương thức $(this). .each(function(){}) Cấu trúc $(‘li’).each(function(index){ $(this).click(function(){ $(this).addClass(“test”+index); }); }); 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> .list0 { color: red; } .list1 { color: […]

Định nghĩa và sử dụng .css() được dùng để thêm một hoặc nhiều style cho thành phần. Ngoài ra còn có thể sử dụng .css() để lấy giá trị style của thành phần. .css(‘thuộc tính’,’giá trị’) Cấu trúc $(‘p’).css(‘color’,’red’); 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.test’).css(‘color’,’red’); }); </script> </head> <body> <p class=”test”>Thành […]

Định nghĩa và sử dụng .resize() ràng buộc một xử lý sự kiện “resize” hoặc kích hoạt sự kiện trên thành phần. .resize(function(){}) Cấu trúc $(‘.test’).resize(function(){}); 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(){ $(window).resize(function() { $(“p”).html($(window).width()); }); }); </script> </head> <body> <p>Thay đổi kích thước để thấy được […]

Định nghĩa và sử dụng .bind() được sử dụng để đính kèm xử lý thêm sự kiện cho thành phần. Thường dùng nhất là sử dụng kết hợp giữa 2 sự kiện load và resize, như khi load window hay resize window thì nội dung sẽ được xử lý. .bind(Sự kiện,function(){}) Cấu trúc $(‘div.test’).bind(‘click’,function(){ $(‘span’).text(‘Đã […]

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

Định nghĩa và sử dụng .click() kích hoạt sự kiện click trên thành phần hoặc ràng buộc xử lý một sự kiện tới sự kiện click trong javascript. .click() được sử dụng trong việc thực hiện một việc gì đó khi click chuột, ví dụ như click mở một popup. .click() Cấu trúc $(‘p’).click(); Html viết: <!DOCTYPE HTML> <html> […]

Định nghĩa và sử dụng .setinterval()xác định thời gian sau bao lâu thì thực hiện hành động, và hành động này được thực hiện liên tục. .setInterval() được sử dụng rất nhiều trong thiết kế hiệu ứng, ví dụ: tự động chuyển hình ảnh trong slider. .setinterval(function(){}, time) Cấu trúc setInterval(function(){ alert(“Hello!”); }, time); Html viết: […]

Định nghĩa và sử dụng .setTimeout() xác định thời gian sau bao lâu thì thực hiện hành động. .setTimeout() được sử dụng rất nhiều trong thiết kế hiệu ứng, ví dụ: box quảng cáo xuất hiện sau 10 giây thì tự động đóng lại. .setTimeout(function(){}, time) Cấu trúc setTimeout(function(){ alert(“Hello!”); }, time); Html viết: <!DOCTYPE […]