Hướng Dẫn Học JQuery

Hướng dẫn học jQuery

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học jQuery

Học jQuery

jQuery là một thư viện Javascript, với cấu trúc có sẵn, giúp cho chúng ta có thể viết những dòng script đơn giản tiện lợi hơn so với viết trực tiếp bằng Javascript.

jQuery có rất nhiều bộ chọn (selector) và hàm (function) có sẵn, trong phạm vi bài học này Học Web Chuẩn sẽ giới thiệu các bạn một số selector và function thường dùng, đơn giản, mục đích giúp các bạn làm quen với jQuery, nếu cần biết nhiều hơn, các bạn có thể xem tại phần tham khảo jQuery.

Nội dung cần học

Bắt đầu

• Cài đặt & sử dụng.

Bộ chọn (selector)

• $('.class') Chọn thành phần theo class cụ thể.
• $('#id') Chọn thành phần theo id cụ thể.
• $('selector1, selector2, selectorN') Chọn nhiều thành phần cùng lúc.
• $('tag:eq(n)') Chọn thành phần thứ n.
• $('tag:gt(n)') chọn các thành phần với chỉ số lớn hơn n.
• $('tag:lt(n)') Chọn các thành phần với chỉ số nhỏ hơn n.
• $('tag:even') Chọn các thành phần ở vị trí lẻ.
• $('tag:odd') Chọn các thành phần ở vị trí chẵn.
• $('tag:first-child') Chọn các thành phần con ở vị trí đầu tiên.
• $('tag:last-child') Chọn các thành phần con ở vị trí cuối cùng.
• $('tag:nth-child(n)') Chọn thành phần thứ n trong thành phần cha.
• $('tag[attribute="value"]') Chọn thành phần có thuộc tính với giá trị xác định.

Xử lý HTML

• .add() thêm thành phần.
• .remove() Loại bỏ thành phần được xác định.
• .addClass() thêm class cho thành phần.
• .removeClass() xóa class của thành thành phần.
• .after() Chèn nội dung vào ngay sau mỗi thành phần đã có.
• .before() Chèn nội dung vào ngay trước mỗi thành phần đã có.
• .insertAfter() Chèn hoặc di chuyển một thành phần vào ngay sau mục tiêu được chọn.
• .insertBefore() Chèn hoặc di chuyển một thành phần vào ngay trước mục tiêu được chọn.
• .append() Chèn nội dung vào trong thành phần đã có, sắp xếp ở vị trí đầu.
• .appendTo() Chèn nội dung vào trong thành phần đã có, sắp xếp ở vị trí sau cùng.
• .prepend() Chèn nội dung vào trong thành phần ở vị trí đầu tiên.
• .prependTo() Chèn nội dung vào thành phần đã có, sắp xếp ở vị trí đầu tiên.
• .attr() Xác định thuộc tính của thành phần.
• .html() Lấy hoặc gán nội dung HTML cho thành phần.
• .text() Lấy nội dung text của thành phần, hoặc thay đổi nội dung text cho thành phần.
• .val() Lấy giá trị của thành phần, hoặc thay đổi giá trị cho thành phần.
• .change() xác định một thành phần đã được thay đổi.
• .clone() Tạo một bản sao (copy) cho thành phần.
• .height() Xác định hoặc gán giá trị chiều cao cho thành phần.
• .width() Xác định hoặc gán giá trị chiều rộng cho thành phần.

Hiệu ứng (effects)

• .fadeIn() Hiển thị các thành phần phù hợp với hiệu ứng rõ dần (fade in).
• .fadeOut() Ẩn các thành phần phù hợp với hiệu ứng mờ dần (fade).
• .fadeToggle() Luân phiên hiển thị hoặc biến mất thành phần.
• .slideDown() Hiển thị các thành phần phù hợp với hiệu ứng chuyển động trượt (slide).
• .slideUp() Ẩn thị các thành phần phù hợp với hiệu ứng chuyển động trượt (slide).
• .slideToggle() Hiển thị và ẩn các thành phần phù hợp với hiệu ứng chuyển động trượt (slide).
• .hide() Ẩn thành phần.
• .show() Hiện thành phần.
• .animate() Thực hiện một chuyển động.
• .setTimeout() xác định thời gian sau bao lâu thì thực hiện hành độ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.

Sự kiện (events)

• .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.
• .hover() Kích hoạt sự kiện hover trên thành phần hoặc ràng buộc xử lý một sự kiện tới sự kiện hover trong javascript.
• .bind() Được sử dụng để đính kèm xử lý một sự kiện cho thành phần.
• .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.

Tương tác các thành phần

• .css() Thêm style cho thành phần, hoặc lấy giá trị style của thành phần.
• .each() Thực hiện một hành động cho mỗi phần tử.
• .find() Tìm thành phần trong thành phần cha.
• .length Xác định số lượng thành phần trong jQuery Object.

Bài tập jQuery

Bài tập jQuery được thiết kế từ cơ bản đến nâng cao, giúp các bạn làm quen với nội dung bài học jQuery, đồng thời giúp các bạn biết cách hoạt động của một số plugin JS phổ biến hiện nay.

• So sánh 2 số
• Nhập và so sánh
• Function so sánh
• Click đổi text
• Click đổi html
• Click thêm item
• Click xóa item
• Thêm và xóa item
• Click thêm cấu trúc đã có
• Thêm và xóa cấu trúc đã có
• Click di chuyển tag
• Tự động di chuyển tag
• Click ẩn hiện
• Accordion
• Button checkbox
• Button radio
• Fix height
• Fix height ver02

Học web chuẩn

HƯỚNG DẪN HỌC

Bắt đầu

• Cài đặt & sử dụng

Bộ chọn (selector)

• $('.class')
• $('#id')
• $('selector1, selector2, selectorN')
• $('tag:eq(n)')
• $('tag:gt(n)')
• $('tag:lt(n)')
• $('tag:even')
• $('tag:odd')
• $('tag:first-child')
• $('tag:last-child')
• $('tag:nth-child(n)')
• $('tag[attribute="value"]')

Xử lý HTML

• .add()
• .remove()
• .addClass()
• .removeClass()
• .after()
• .before()
• .insertAfter()
• .insertBefore()
• .append()
• .appendTo()
• .prepend()
• .prependTo()
• .attr()
• .html()
• .text()
• .val()
• .change()
• .clone()
• .height()
• .width()

Hiệu ứng (effects)

• .fadeIn()
• .fadeOut()
• .fadeToggle()
• .slideDown()
• .slideUp()
• .slideToggle()
• .toggle()
• .toggleClass()
• .hide()
• .show()
• .animate()
• .setTimeout()
• .setInterval()

Sự kiện (events)

• .click()
• .hover()
• .bind()
• .resize()

Hàm khác

• .css()
• .each()
• .find()
• .first()
• .last()
• .length

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

• Tham khảo
• Tham khảo HTML4/XHTML
• Tham khảo HTML5
• Tham khảo CSS
• Tham khảo CSS3
• Tham khảo jQuery

CHUYÊN ĐỀ

• Chuyên đề
• Chuyên đề HTML/CSS
• Chuyên đề HTML5/CSS3
• Chuyên đề jQuery/JS
• jQuery/JS plugin

GÓP Ý - LIÊN HỆ

• CÔNG CỤ TẠO CSS3CSS3 GENERATOR
• BỘ CÔNG CỤGENERATOR TOOLS
• CÔNG CỤ HỖ TRỢWEB TOOLS
• CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
• CÔNG CỤ KIỂM TRA RESPONSIVE TEST
• CHIA SẺ HAYWEB & TOOLS

• 
• 
•