Thư viện jQuery khai thác sức mạnh của các bộ chọn Cascading Style Sheets (CSS) để cho phép chúng ta truy cập nhanh chóng và dễ dàng các phần tử hoặc nhóm phần tử trong Mô hình đối tượng tài liệu (DOM).
1. Khái quát
Các bộ chọn jQuery được sử dụng để tìm hoặc chọn các phần tử HTML dựa trên tên, id, lớp, loại, thuộc tính, giá trị của các thuộc tính và nhiều hơn nữa. Nó dựa trên các bộ chọn CSS hiện có. Ngoài ra, nó có một số bộ chọn tùy chỉnh riêng.
JQuery Selector là một hàm sử dụng các biểu thức để tìm ra các phần tử phù hợp từ DOM dựa trên các tiêu chí đã cho. Đơn giản là bạn có thể nói, các bộ chọn được sử dụng để chọn một hoặc nhiều phần tử HTML bằng jQuery. Khi một phần tử được chọn thì chúng ta có thể thực hiện các hoạt động khác nhau trên phần tử được chọn đó.
2. Tác dụng
JQuery Selector được phát triển trên nền thư viện JavaScript với mục đích viết ngắn gọn và thực hiện được nhiều hơn. Giúp đơn giản hóa nhiều thứ phức tạp trong JavaScript
Dễ dàng sử dụng JavaScript trên trang web mà bạn đang xây dựng, phát triển.
Có rất nhiều chức năng phổ biến mà đòi hỏi cần nhiều dòng code JavaScript để thực hiện và chúng được gói gọn lại trong một method mà bạn có thể gọi đến chỉ trong một dòng code.
Đơn giản hóa rất nhiều thứ phưc tạp trong JavaScript. Ví dụ như việc gọi và thực hiện Ajax
Thư viện jQuery có các tính năng sau đây:
HTML/DOM manipulation:
DOM (Document Object Model) hay Mô hình đối tượng tài liệu là một chuẩn được định nghĩa bởi Tổ chức Web Toàn Cầu (World Wide Web Consortium – W3C).
Mỗi thẻ HTML sẽ có những thuộc tính và phân cấp cha – con với các thẻ HTML khác. Sự phân cấp này gọi là Selector và DOM sẽ có nhiệm vụ xử lý các vấn đề như: đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ ,..vv..
JavaScript có thể thay đổi tất cả các phần tử HTML trong trang
JavaScript có thể thay đổi tất cả các thuộc tính HTML trong trang
JavaScript có thể thay đổi tất cả các kiểu CSS trong trang
JavaScript có thể xóa các phần tử và thuộc tính HTML hiện có
JavaScript có thể thêm các thành phần và thuộc tính HTML mới
JavaScript có thể phản ứng với tất cả các sự kiện HTML hiện có trong trang
JavaScript có thể tạo các sự kiện HTML mới trong trang
Các loại DOM trong Javascript:
Effects and animations
AJAX:
Ajax (Asynchronous JavaScript and XML) là một khái niệm được Jesse James Garrett giới thiệu và sử dụng đầu tiền vào tháng 2 năm 2005. Khi sử dụng ajax bạn có thể sử dụng code javascript giao tiếp được với server. Ajax sử dụng đối tượng XMLHttpRequest để giao tiếp, trao đổi thông tin giữa server với client. Đến thời điểm hiện tại thì ajax đã hỗ trên tất cả các trình duyệt
var variableName = new XMLHttpRequest();
2. Cú pháp
Tất cả các bộ chọn trong jQuery bắt đầu bằng dấu đô la và dấu ngoặc đơn: $()
$(selector).action()
$ để xác định / truy cập jQuery.
(selector) để tìm kiếm các phần tử HTML.
action() là hành động được thực hiện trên các phần tử đó.
Ví dụ:
$(this).hide() - ẩn phần tử hiện tại $(p).hide() - ẩn tất cả các thẻ p
3. jQuery Selectors
Đây là phần quan trọng nhất trong thư viện jQuery vì nó cho phép bạn chọn và thao tác trên các phần tử HTML.
jQuery selectors được sử dụng để tìm các phần tử HTML dựa trên name, ID, class, types, attributes, values of attributes, . . . Nó dựa trên các CSS selector hiện có và ngoài ra có một số bộ tùy chỉnh riêng.
The element selector
jQuery element selector lựa chọn các yếu tố dựa vào tên của chúng.
Bạn có thể lựa chọn tất cả các thẻ p trong page bằng cách sau.
$('p')Ví dụ:
$(document).ready(function(){ $("p").hide(); }); });Demo
The #id Selector
jQuery id selector sử dụng thuộc tính id của thẻ HTML để tìm thấy những yếu tố cụ thể.
ID nên được gán là duy nhất trong 1 trang web, vì vậy khi sử dụng ID selector nên được sử dụng khi tìm 1 yếu tố cụ thể duy nhất, mang tính độc đáo.
Cú pháp như sau: $('#id')
$(document).ready(function(){ $("#test").hide(); }); });Demo
The class selector
jQuery class selector tìm kiếm các thuộc tính theo một class cụ thể.
Cú pháp sử dụng để tìm kiếm theo class: $('.class')
$(document).ready(function(){ $(".test").hide(); }); });
4. jQuery trong rails
Đầu tiên khi muốn sử dụng jQuery bạn cần thêm gem “jquery-rails” vào Gemfile, thường sẽ được thêm sẵn khi tạo project mới.
Trong rails khác với các framework dùng để xây dựng web khác, khi viết jQuery vào file chúng tôi hay bất kỳ một file js nào tạo mới, bạn không cần dẫn link vào html bằng cách thông thường sau vì rails đã làm sẵn điều đó.
Tuy nhiên, vì rails có tính năng turbolinks giúp việc load trang trông mượt hơn nên jQuery sẽ chỉ được load vào lần đầu tiên. Do đó, các trang tiếp theo khi turbolinks sẽ không thực hiện jQuery như bình thường, để khắc phục việc này chúng ta có cách khắc phục như sau:
Trong rails 4
$(document).on(page:change, my_function)Trong rails 5
document.addEventListener("turbolinks:load", function() { })
5. Lời kết
Continue Reading