1. Hàm .length
Xác định số lượng thành phần trong jQuery Object.
Cấu trúc:
Xác định số lượng thành phần trong jQuery Object.
Cấu trúc:
$('li').lengthVí dụ:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="http://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> <li>Thành phần thứ 4</li> <li>Thành phần thứ 5</li> </ul> <p>Có tổng cộng <span></span> thành phần trong danh sách.</p> </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 thứ 4
- Thành phần thứ 5
Có tổng cộng 5 thành phần trong danh sách.
2. Hàm .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.
Cấu trúc:
4. Hàm .empty()
Loại bỏ tất cả các thành phần bên trong kể cả text của thành phần chọn.
Cấu trúc:
5. Hàm .error()
Khi có lỗi xảy ra do một thành phần gặp lỗi có thể là do thành phần được tải không chính xác, khi đó .error() sẽ kích hoạt sự kiện lỗi hoặc thực hiện một function.
Cấu trúc:
9. Hàm .remove()
Khi hiển thị ra trình duyệt thì dòng Lê Tuấn Anh sẽ bị biến mất.
10. Hàm .clone()
Tạo một bản sao (copy) cho thành phần.
Cấu trúc:
Tuấn Anh
Tuấn Anh
2. Hàm .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.
Cấu trúc:
Thêm một style cho thành phần
.css('thuộc tính','giá trị');
Lấy một giá trị style của thành phần
.css('thuộc tính');
Ví dụ:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('p.test').css('color','red'); }); </script> </head> <body> <p class="test">Tuấn Anh</p> <p>Tuan Anh</p> </body> </html>
Hiển thị trình duyệt:
Tuấn Anh
Tuan Anh
3. Hàm .click()
Làm thay đổi hiệu ứng của một dòng hay đoạn văn bản khi ta click vào Hàm đã được cài đặt trước đó.
Ví dụ:
Khi tác động lên thành phần p một sự kiện click thì ngay lập tức trình duyệt sẽ xử lý nội dung của function là đổi màu của span.<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('p').click(function(){ $('span').css('color','blue'); }); }); </script> </head> <body> <p>Click</p> <span>Tuấn Anh</span> </div> </body> </html>
4. Hàm .empty()
Loại bỏ tất cả các thành phần bên trong kể cả text của thành phần chọn.
Cấu trúc:
$('p').empty();Ví dụ:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('.emp').empty(); }); </script> </head> <body> <p class="emp">Tuan Anh</p> <p>Tuấn Anh</p> </body>
</html>
Khi hiển thị ra trình duyệt thì thành phần p có class .emp sẽ không hiển thị gì cả, Trình duyệt chỉ hiện dòng Tuấn Anh.5. Hàm .error()
Khi có lỗi xảy ra do một thành phần gặp lỗi có thể là do thành phần được tải không chính xác, khi đó .error() sẽ kích hoạt sự kiện lỗi hoặc thực hiện một function.
Cấu trúc:
$('img').error();
$('img').error(function() { $('img').replaceWith('<p>Error loading image!</p>');Ví dụ:Khi hiển thị ra trình duyệt, khi chúng ta nhấn vào button Click thì trình duyệt sẽ thông báo Error loading image!<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('img').error(function(){ $('img').replaceWith('<p>Error loading image!</p>'); }); $('button').click(function(){ $('img').error(); }); }); </script> </head> <body> <img src="../images/logo.gif" /><br /> <button>Click</button> </body> </html>
6. Hàm .first()
Xác định thành phần đầu tiên trong các thành phần phù hợp.
Cấu trúc:
$('li').first();Ví dụ:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="http://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> </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
7. Hàm .last()
Xác định thành phần cuối cùng trong các thành phần phù hợp.
Cấu trúc:
$('li').last();Ví dụ:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="http://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 phần thứ 4</li> <li>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 thứ 4
- Thành phần thứ 5
Không chọn thành phần nào có sử dụng .not().
Cấu trúc:
$('p').not(":even");
$('p').not(function(index){....});
$('p').not($("#selected") [0]);Ví dụ:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('li').not('.notSelected').css('color','red'); }); </script> </head> <body> <ul> <li>Thành phần li</li> <li>Thành phần li</li> <li class="notSelected">Thành phần li</li> <li>Thành phần li</li> </ul> </body>
</html>
Hiển thị trình duyệt:
- Thành phần li
- Thành phần li
- Thành phần li
- Thành phần li
Loại bỏ các thành phần được xác định.Cấu trúc:
$('.class').remove();Ví dụ:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('.test').remove(); }); </script> </head> <body> <div class="test">Lê Tuấn Anh</div> <div>Tuấn Anh</div> </body> </html>
Khi hiển thị ra trình duyệt thì dòng Lê Tuấn Anh sẽ bị biến mất.
10. Hàm .clone()
Tạo một bản sao (copy) cho thành phần.
Cấu trúc:
$('p').clone();Ví dụ:
Hiển thị trình duyệt:<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('p').clone().appendTo('body'); }); </script> </head> <body> <p>Tuấn Anh</p> </body> </html>
Tuấn Anh
Tuấn Anh
