03/08/2018, 10:10

jQuery Selectors - Based On jQuery

Bản chất mọi truy vấn selector của jQuery thường dựa vào attributes của các thẻ HTML, bởi vì các gí trị ID hay CLASS cũng chính là các thuộc tính ...

Bản chất mọi truy vấn selector của jQuery thường dựa vào attributes của các thẻ HTML, bởi vì các gí trị ID hay CLASS cũng chính là các thuộc tính nhưng nó có tính chắc đặc biệt hơn đó là trong một trang tài liệu HTML thì ID là duy nhất còn CLASS thì có thể có nhiều. Và trong bài này chúng ta sẽ tìm hiểu một số cách truy vấn selector thông dụng nhất khi sử dụng jQuery dựa vào ID và CLASS.

1. Danh sách các Selector thông dụng

Dưới đây là danh sách những selector thông dụng được sử dụng rất nhiều trong các ứng dụng viết bằng jQuery. Vì tính thông dụng của nó nên tôi sẽ tổng hợp nó trong một bài duy nhất này nhằm giúp các bạn dễ tìm kiếm tài liệu hơn.

STT Cú pháp Ý nghĩa
1 $('*') Chọn tất cả các thẻ HTML
2 $('.class-name') Chọn thẻ HTML có class class-name
3 $('element') Chọn tất cả thẻ có tên là element, ví dụ $('a') tức là chọn tất cả thẻ a
4 $('#id-name') Chọn thẻ có id là id-name
5 $('#id-name, .class-name') Chọn thẻ có id là id-name hoặc có class là class-name. Đây là truy vấn dựa vào nhiều dâu hiệu cách nhau bởi dấu phẩy

2. Các ví dụ về cách sử dụng

Sau đây là một số ví dụ cách sử dụng các Selector thông dụng trong jQuery mà bạn nên biết.

All Selector (“*”)

Thêm class selected cho tất cả thẻ HTML.

Demo RUN
$('*').addClass('selected');

Class Selector (“.class”)

Thêm class selected vào tất cả thẻ HTML có class là freetuts.

Demo RUN
$('.freetuts').addClass('selected');

Element Selector (“element”)

Thêm class selected vào tất cả thẻ a.

Demo RUN
$('a').addClass('selected');

ID Selector (“#id”)

Thêm class selected vào thẻ có id là freetuts.

Demo RUN
$('#freetuts').addClass('selected');

Multiple Selector (“selector1, selector2, selectorN”)

Thêm class selected vào thẻ có id là freetuts hoặc có class là freetuts.

Demo RUN
$('#freetuts, .freetuts').addClass('selected');

3. Tổng kết

Trên là 5 loại selector thường được sử dụng trong jQuery mà bạn nên biết. Trong 5 loại đó thì Selector theo ID hoặc Class là thường được lựa chọn bởi vì cấu trúc HTML trong thực tế đa số người ta sử dụng ID và Class.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Đăng ký tham gia hội thảo "Practical implementation of recommendation based on machine learning"

Hệ thống giới thiệu/đề xuất (recommendation system) là 1 trong những ứng dụng công nghệ Machine Learning thành công và phổ biến trong kinh doanh, đã và đang được ứng dụng trong thương mại điện tử (Amazon) , video theo yêu cầu trên Youtube đến các bộ phim phù hợp với người xem trên Netflix . ...

Hoàng Hải Đăng viết 1 ngày trước

How to find the right Growth Hacking channel for your business based on Data

Những cái tên như Pinterest, Facebook, Canva, Dropbox,… đã giải quyết rất tốt vấn đề và đạt được số lượng người dùng sản phẩm từ con số 0 lên đến hàng triệu (và đôi khi là hàng trăm triệu) chỉ với lời giải duy nhất, đó là ứng dụng kỹ thuật “ GROWTH HACKING ”. Là một Marketer ...

Trần Trung Dũng viết 08:44 ngày 07/09/2018

Draw inverted circle and calculate zoom level based on radius in Google Maps

Trong bài viết này, chúng ta sẽ tìm hiểu về cách dùng các class có sẵn trong Google Maps SDK để làm những thứ không có sẵn. Cụ thể: Vẽ một hình tròn với bán kính cho trước có phần bên trong tranperancy và phần map bên ngoài hình tròn được fill bởi màu khác. Tính zoom level phù hợp dựa trên bán ...

Tạ Quốc Bảo viết 15:26 ngày 12/08/2018

Semantic Search Based on Domain Ontology Using Apache Spark

The word semantic is a Linguistic term. It means something related to meaning in a language or logic. In a natural language, semantic analysis is relating the structures and occurrences of the words, phrases, clauses, paragraphs etc and understanding the idea of what’s written in ...

Trịnh Tiến Mạnh viết 15:24 ngày 12/08/2018

[Xamarin Android] Implement your own binding engine (based on XML attributes)

Đầu tiên, chúng ta cần hiểu về MVVM design pattern. Đối với Xamarin Form, việc data binding đã được implemented sẵn vì UI chúng ta được dựng lên từ file xaml. Với Xamarin android, việc binding trực tiếp trên file UI axml là bất khả thi nếu không apply các framework đã có binding engine được tạo ...

Tạ Quốc Bảo viết 14:35 ngày 12/08/2018
0