Giới thiệu về jQuery selector

1. Khái quát

• jQuery đượ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.

• Mục đích của jQuery là việc bạn có thể dễ dàng sử dụng JavaScript trên trang web mà bạn đang xây dựng, phát triển.

• jQuery 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 1 method mà bạn có thể gọi đến chỉ trong 1 dòng code.

• jQuery cũng đơ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.
  • CSS manipulation.
  • HTML event methods.
  • Effects and animations.
  • AJAX.
  • Utilities.

2. Cú pháp

Cú pháp của jQuery rất thích hợp cho việc lựa chon các thành phần trong HTML và thực hiện một số hành động trên chúng.

Cú pháp cơ bản là: $$selector).action()

• Ký tự $$để 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(){
    $("button").click(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')

Ví dụ : khi user click vào button thì các đối tượng với id = "test" sẽ bị ẩn đi như trong ví dụ sau.

$(document).ready(function(){
    $("button").click(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')

Ví dụ: khi user click vào button thì các thuộc tính với class = "test" sẽ bị ẩn đi.

$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});

Demo

Ngoài ra còn khá nhiều ví dụ về jQuery selector bạn có thể xem thêm ở đây

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 application.js 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 đó rồi ^^.

<script src="my_jquery_functions.js"></script>

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() {
  // ...
})

Trên đây là bài viết giới thiệu về jQuery selector. Do kinh nghiệm chưa có, nên bài viết còn nhiều thiếu sót mong mọi người góp ý bổ sung để bài viết có ích hơn.

Xin cảm ơn mọi người.