Đối với việc áp dụng các style cho các phần tử của trang, các nhà phát triển web đã trở nên quen thuộc với việc sử dụng các vùng chon làm việc trên tất cả các trình duyệt. Có thể chọn bằng ID của một nguyên tố, bởi tên lớp CSS, và tên thẻ. Một trường hợp đặc biệt lựa chọn các yếu tố theo tên tag là chọn Universal, cho phép bạn chọn tất cả các phần tử trang trong DOM. Các biểu thức lựa chọn cho phép bạn thực hiện tìm kiếm cơ bản trong DOM, và chúng tôi sẽ cung cấp cho các chi tiết trong các phần sau. Khi kết hợp, các bộ chọn cho phép bạn để đạt được selectors hơi phức tạp hơn.
| Ví dụ | Ý nghĩa | |
|---|---|---|
| * | Chọn tất cả các phần tử trang | |
| #ID-Name | Chọn phần tử có ID là ID-Name | |
| .Class-Name | Chọn tất cả các phần tử có Class là Class-Name | |
| a | Chọn tất cả các phần tử a(link) trong trang | |
| a.Class-Name | Chọn tất cả các phần tử a có class là Class-Name |
Trong JavaScript , bạn có một tập hàm , chẳng hạn như getElementById () và getElementsByClass ( ) , được thiết kế để làm việc với một loại hình cụ thể của bộ chọn để lấy phần tử DOM hành động theo. Thật không may , bạn có thể có vài vấn đề sử dụng thậm chí chức năng đơn giản như vậy. Ví dụ , getElementsByClass () là không hỗ trợ trong các phiên bản bé hơn 9của Internet Explorer. Nếu bạn muốn sử dụng chỉ có nguồn gốc phương thức, bạn nên chú ý đến Tương thích trình duyệt chéo .
jQuery là giải pháp! Nếu trình duyệt hỗ trợ bộ chọn hoặc các chức năng nguyên bản, jQuery sẽ dựa vào đó để có hiệu quả hơn ; nếu không nó sẽ sử dụng phương pháp của nó để trả lại kết quả mong đợi . Các tin tốt là bạn không cần phải lo lắng về sự khác biệt này . jQuery sẽ làm công việc của mình cho bạn sau khi tải xong nội dung trang web , vì vậy bạn có thể tập trung vào các khía cạnh khác của code.
Các thư viện jQuery là hoàn toàn tương đồng CSS3 , vì vậy việc lựa chọn các thành phần sẽ trình bày không có bất ngờ ; các yếu tố tương tự mà có thể được lựa chọn trong một phong cách của một trình duyệt tiêu chuẩn phù hợp sẽ được lựa chọn bởi cơ selector của jQuery . Thư viện không phụ thuộc vào việc thực hiện CSS của trình duyệt nó đang chạy bên trong. Thậm chí sử dụng các bộ chọn Jquery sẽ quen thuộc và đơn giản nếu trình duyệt không thực hiện một bộ chọn CSS tiêu chuẩn một cách chính xác , jQuery sẽ lựa chọn một cách chính xác các yếu tố theo quy định của tiêu chuẩn World Wide Web Consortium ( W3C ) .
SELECTOR ALL
Ex : $("*);
Bộ chọn đầu tiên có sẵn là Selector All (hoặc Universal) , được biểu diễn bằng một dấu sao ( * ) . Như tên cho thấy , nó cho phép bạn lấy tất cả các yếu tố DOM của một trang web , ngay cả các yếu tố đầu và con của nó. Để củng cố khái niệm này, chúng ta hãy nói rằng bạn có các trang HTML sau :
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <title>Jquery</title> </head> <body> <p>I'm a paragraph</p> </body> </html> |
Để chọn tất cả các yếu tố của trang web mà bạn cần phải sử dụng bộ chọn Universal và chúng ta sẽ sử dụng hàm jQuery ( ) ( hoặc viết tắt là $ ()) trong một ví dụ như sau :
var allElements = $('*');
ID SELECTOR
Bộ chọn ID là một trong những bộ chọn sử dụng nhiều nhất , không chỉ trong jQuery mà còn ở JavaScript. Trong JavaScript, để chọn một phần tử bằng ID của nó , bạn sử dụng hàm document.getElementById ( ) . Nếu bạn có một chút kiến thức về CSS , bạn sẽ nhớ lại rằng bộ chọn ID được đặc trưng bởi một dấu thăng ( #) thêm vào phía trước ID của phần tử. Nếu bạn có đoạn này trong trang của bạn :
<p id="description">jQuery in Action is a book about jQuery</p>
Bạn có thể lấy nó bằng cách sử dụng bộ chọn ID và cách viết của Jquery như sau:
$('#description');
KHi bạn sử dụng bộ chọn ID ,thì bạn chỉ có thể có 1 ID là duy nhất.Trong trường hợp bạn có nhiều hơn một phần tử trên một trang với cùng một ID , thư viện chỉ lấy yếu tố đầu tiên gặp phải. Mặc dù bạn có thể có nhiều hơn một phần tử với cùng một ID , đó là không hợp lệ và bạn không nên làm điều đó.
LƯU Ý : Các thông số kỹ thuật của W3C HTML5 , giá trị của một ID "không được chứa bất kỳ ký tự khoảng trắng.; Đặc biệt, ID có thể bao gồm các chỉ số, bắt đầu bằng một chữ số, bắt đầu bằng một gạch dưới, bao gồm các chỉ dấu chấm câu,.. "Để có thể sử dụng ký tự như dấu chấm (.) có một ý nghĩa đặc biệt trong CSS và jQuery ( vì nó theo các công ước CSS). Bởi vì điều này, họ phải thêm vào trước hai gạch chéo ngược các ký tự đặc biệt. Vì vậy, nếu bạn muốn chọn một phần tử với ID là vi.du, bạn phải viết $ ('#vi\\. du').
Không phải ngẫu nhiên mà chúng ta so sánh như thế nào để lựa chọn các yếu tố bằng ID của họ trong jQuery và Javascript ở đầu phần này, bằng cách sử dụng hàm getElementById (). Bộ chọn ID của Jquery là tối ưu hơn, không phụ thuộc vào trình duyệt được sử dụng, ...
Ở bài tiếp theo chúng ta sẽ tìm hiểu tiếp về các bộ chọn của Jquery...
1 comments :
Las Vegas casino gets $50M loan for two years
LAS VEGAS 대전광역 출장안마 (KLAS) — 경주 출장안마 Wynn Resorts 목포 출장마사지 (Nasdaq: WYNN) and Caesars Entertainment Inc. will have a casino, 양산 출장샵 hotel, spa, and fitness center 보령 출장마사지
Post a Comment