Khái quát về jQuery? jQuery Selector là gì? - Stolennguyen Website

jQuery Selector là gì?

jquery là gì? jquery selector

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).

DOM cung cấp cách thức để truy cập và thay đổi nội dung của các tài liệu HTML. Phần lớn các trình duyệt web hiện này đều triển khai DOM dưới nhiều hình thức và mức độ khác nhau. Cũng như rất nhiều chuẩn khác, đặc biệt các chuẩn liên quan đến lập trình web, DOM được phát triển và cải tiến qua nhiều năm. Hiện có ba đặc tả DOM, được gọi là các cấp độ của DOM, đặc tả thứ tư hiện đang được phát triển.

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..

Khi một trang web được tải, trình duyệt tạo ra một Document Object Model trang. Dưới đây là mô hình cây DOM

Mô hình cây DOM

DOM có thể làm gì:

  • 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:

  • DOM document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài liệu của website
  • DOM element: có nhiệm vụ truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML
  • DOM HTML: có nhiệm vụ thay đổi giá trị nội dung và giá trị thuộc tính của các thẻ HTML
  • DOM CSS: có nhiệm vụ thay đổi các định dạng CSS của thẻ HTML
  • DOM Event: có nhiệm vụ gán các sự kiện như onclick()onload() vào các thẻ HTML
  • DOM Listener: có nhiệm vụ lắng nghe các sự kiện tác động lên thẻ HTML đó
  • DOM Navigation dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha – con của các thẻ HTML
  • DOM Node, Nodelist: có nhiệm vụ thao tác với HTML thông qua đối tượng (Object)

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

Để sử dụng được ajax trong javascript thì các bạn phải sử dụng đối tượng XMLHttpRequest. Và để khởi tạo đối tượng này thì chúng ta sử dụng cú pháp.

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(){
    $("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();
    });
});

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 đó.

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

5. Lời kết

Như vậy phần này mình đã giới thiệu khái quát đến mọi người về jQuery Selector rồi. Hy vọng bài viết sẽ các bạn tìm được thêm những thông tin bổ ích

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *