Khái niệm về jQuery:
- jQuery là một thư viện Javascript.
- jQuery đơn giản hóa code cho lập trình Javascript.
$(document).ready()
Các bạn có thể thấy mọi code jQuery đều nằm trong này? Tại sao lại như vậy?
-
Thông thường code jQuery của ta sẽ bắt đầu thực thi nếu file js được tải xong, nhưng nếu nó đã được tải xong mà các DOM chưa tải xong thì nó không thể chạy.
-
Do vậy khi code jQuery của bạn nằm ở trong hàm này, nó ngăn chặn code được thực thi trước khi các DOM chưa được load xong.
Sử dụng:
$(document).ready(function(){ // code jQuery ở đây }); // hoặc $(function(){ // code jQuery ở đây }); |
Selector
-
Selector trong jQuery tương tự như trong CSS :
|
Ngoài ra có rất nhiều Selector các bạn có thể tham khảo tại : https://www.w3schools.com/jquery/jquery_selectors.asp
Event
-
Vậy khi ta muốn bắt sự kiện thì làm thế nào?
-
Có rất nhiều sự kiện trong jQuery được định nghĩa, Hybrid Technologies liệt kê những cái hay sử dụng nhất:
.click(), dblclick()
|
.mouseenter(), mouseleave(), mousedown(), mouseup()
|
Ngoài ra còn rất nhiều về các hàm mouse như : .mouseout() , .mouseover(), .mouseup()
-
Các bạn có thể xem thêm tại : https://api.jquery.com/category/events/
.trigger(), .toggle()
-
2 event tiếp theo hay được sử dụng :
-
trigger()
|
-
toggle()
|
Effect
- .hide(), show(), remove(), slideDown(), slideUp(), slideToggle()
|
-
fadeIn(), fadeOut(), fadeToggle(), fadeTo(): Các hàm này tương tự cách sử dụng của các hàm trên, mà hiệu ứng của nó thì dùng để ẩn/hiện theo cách mờ ảo
Tương tác với DOM
-
text() -> Set hoặc return về chuỗi của element
-
html() – Set hoặc return về chuỗi của element (bao hồm cả HTML tag)
-
val() – Set hoặc return value của các thẻ trong form
|
-
append() – Chèn thêm văn bản (có thể có HTML tag) vào trong cuối của element được chọn
-
prepend() – Chèn thêm văn bản (có thể có HTML tag) vào trong đầu của element được chọn
-
after() – Chèn thêm văn bản (có thể có HTML tag) vào sau element được chọn
-
before() – Chèn thêm văn bản (có thể có HTML tag) vào trước element được chọn
|
-
remove(), empty()
|
-
addClass() – Thêm class vào element
-
removeClass() – Xóa class khỏi element
-
css() – Set hoặc trả về style của element đó
|
-
index(), clone()
|
Còn rất nhiều những hàm khác của jQuery, nếu bạn quan tâm, đừng ngần ngại đóng góp ý kiến bằng cách comment bên dưới bài viết nhé. Hy vọng bài viết này sẽ có ích với bạn!
Nguồn: Sưu Tầm.