-------
Phần 32. Kiểm tra kiến thức về jQuery
Làm việc với jQuery là làm việc với các đối tượng jQuery, mảng đối tượng jQuery, các hàm hay phương thức có sẵn của jQuery, sử dụng các plugins của jQuery.
Quay trở lại trang codecademy.com để hoàn thành phần kiểm tra kiến thức về jQuery trong khóa học về JavaScript. Rèn luyện khả năng đọc hiểu tài liệu tiếng Anh chuyên ngành.
Phần kiểm tra kiến thức về jQuery là phần cuối trong khóa học JavaScript. Vì vậy vào lại khóa học về JavaScript và làm tiếp.
Sau đây là ghi lại một số thông tin đáng quan tâm.
Khi khai báo biến chứa đối tượng jQuery, nên thêm dấu $ ở phía trước để dễ nhận diện. Ví dụ, var $skillSet = $(selector).
Để kiểm tra xem trang web đã nhúng được jQuery hay chưa, chỉ cần mở thử mã nguồn của jQuery bằng trình duyệt. Ví dụ, đây là đoạn mã nhúng jQuery trong trang HTML: <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>. Vậy sẽ mở https://code.jquery.com/jquery-3.1.0.min.js bằng trình duyệt xem có thấy được mã nguồn của nó hay không, nếu có thấy là đã nhúng được.
Đọc thêm về hàm callback. Hiểu nôm na, hàm callback là hàm được định nghĩa sẵn, sau đó được hàm khác gọi và thực thi.
Bản chất hàm hide() của jQuery là thêm thuộc tính display: none vào phần tử HTML.
Để thay đổi qua lại giữa hai trạng thái: ẩn – hiện, có – không, sử dụng phương thức toggle().
Để thay đổi qua lại giữa hai trạng thái “có – không” của một class CSS, sử dụng phương thức toggleClass().
Phương thức next(), để tham chiếu tới phần tử HTML kế tiếp trong cây DOM.
Phương thức slideToggle(), để hiển thị và ẩn nội dung theo kiểu trượt ra.
Kiên trì đọc và làm theo cho đến khi hoàn thành.
Mục tiêu của phần này là bước đầu tập đọc hiểu tài liệu tiếng Anh chuyên ngành, chứ về phần nội dung thì khá đơn giản.
Để tăng thêm khả năng đọc hiểu tiếng Anh và kiến thức về jQuery, sẽ hoàn thành tiếp một khóa học về jQuery trên codecademy.com.
[10/7/2017 khóa học jQuery đã bị đóng, không còn trên trang codecademy.com]
Vào trang web codecademy.com, vào mục Catalog, chọn khóa học jQuery.
Cùng đọc và làm theo.
Sau đây là ghi lại một số lưu ý.
DOM chính là tài liệu HTML được tổ chức theo cấu trúc cây, do vậy, mỗi phần tử của HTML sẽ có thể có cha (parent), có con (children), và có phần tử đồng cấp (sibling) - cũng có thể gọi là phần tử anh em.
Trong lệnh $(document), $() là một hàm, hàm này chuyển đối tượng DOM có tên là document thành một đối tượng jQuery.
Phương thức prepend(), và append(): để gắn thêm nội dung vào bên trong một phần tử, hay nói cách khác là gắn thêm phần tử con.
Phương thức before(), và after(): để gắn thêm phần tử vào trước hoặc sau một phần tử khác, hay nói cách khác là gắn thêm anh em (sibling).
Để di chuyển một phần tử trong DOM sử dụng after() và before().
Phương thức empty(): xóa các nội dung bên trong của một phần tử.
Phương thức remove(): xóa các nội dung bên trong của một phần tử và chính phần tử đó.
Để thêm và xóa class của một phần tử, sử dụng hai phương thức addClass() và removeClass() tương ứng.
Để thay đổi kích thước của một phần tử, sử dụng hai phương thức width(), và height().
Để xử lý các phần tử xuất hiện sau sự kiện document.ready(), sử dụng phương thức $(document).on(‘event’, ‘selector’, function() {});
Đoạn mã sau sẽ tô đậm phần text, khi rê chuột vào một mục của menu:
$('div').hover(
function(){
$(this).toggleClass('active');
},
function(){
$(this).toggleClass('active');
}
);
Đoạn mã sau sẽ thay đổi định dạng cho một ô nhập dữ liệu, khi nó được focus:
$('input').focus(function() {
$(this).css('outline-color','#FF0000');
});
Đoạn mã sau sẽ thực hiện di chuyển một đối tượng, khi nhấn phím bất kỳ:
$(document).keydown(function() {
$('div').animate({left:'+=10'},500);
});
$(document): là phần tử đại diện cho phần cửa sổ nội dung của trình duyệt.
Đoạn mã sau sẽ di chuyển đối tượng quanh màn hình khi bấm các phím mũi tên:
$(document).ready(function() {
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
// Left arrow key pressed
case 37:
$('img').animate({left: "-=10px"}, 'fast');
break;
// Up Arrow Pressed
case 38:
$('img').animate({top:"-=10px"}, 'fast');
break;
// Right Arrow Pressed
case 39:
$('img').animate({left:"+=10px"}, 'fast');
break;
// Down Arrow Pressed
case 40:
$('img').animate({top:"+=10px"}, 'fast');
break;
}
});
});
Tới phần jQuery UI sẽ dừng lại, chuyển qua học jQuery UI bằng tiếng Việt trước (Phần 33. jQuery UI) cho dễ hiểu, rồi sẽ quay lại hoàn thành bài học.
-----------
Cập nhật [7/10/2017][7/10/2016]
-----------