jQuery có thể chọn bất kỳ thứ gì mà CSS3 có thể chọn. Nhưng nó không dừng lại ở đó! Có một số công cụ chọn bổ sung mà jQuery cung cấp (thông qua công cụ chọn Sizzle) đôi khi khá hữu ích. Ví dụ: CSS có các bộ chọn thuộc tính cho phép bạn chọn một phần tử dựa trên bất kỳ thuộc tính tùy ý nào mà phần tử có thể có. Ví dụ:
Có một bộ chọn CSS mà chúng ta có thể sử dụng trong jQuery để chọn:
$("(data-whatever='elephant-eyeballs')");Có các biến thể trên bộ chọn thuộc tính, chẳng hạn như thay vì =bạn có thể làm ^=để cho biết "bắt đầu bằng giá trị này". Nhưng vì lý do nào đó, CSS không có! = Hoặc “không bằng giá trị này”. jQuery không! Đó là một ví dụ về tiện ích mở rộng bộ chọn jQuery.
Có rất nhiều tiện ích mở rộng bộ chọn này. Một vài điều chúng tôi đặc biệt nói đến trong video màn hình này:
- : eq () - phiên bản được lập chỉ mục 0 của: nth-child ()
- : Even - phím tắt cho: nth-child (thậm chí)
- : gt (n) - chọn các phần tử có chỉ số lớn hơn n. Cũng là một phím tắt cho một forumla phức tạp hơn: nth-child ().
Có thể phần mở rộng bộ chọn hữu ích nhất là: has () - giới hạn lựa chọn đối với các phần tử chứa những gì bạn chuyển qua bộ chọn giả này (hoặc nó là bộ chọn giả giả :) Có khả năng một ngày nào đó trong tương lai CSS sẽ có một cái gì đó giống như điều này đối với chúng tôi (tôi nghĩ nó sẽ như thế này pre ! code) nhưng đó là một chặng đường dài. Rất tiếc, tôi không đưa ra lập luận thuyết phục nào cho nó trong video màn hình này, nhưng bạn sẽ biết khi nào mình cần! Ví dụ: “Chọn tất cả .module có chứa thanh h3.sports” - đại loại như vậy.
Bạn cũng có thể tạo tiện ích mở rộng lựa chọn của riêng mình nếu muốn. Đây là một bài báo về điều đó. Ví dụ là thực hiện :inviewchọn một phần tử chỉ khi nó hiển thị trên trang ở vị trí cuộn hiện tại. Nó sẽ như thế này:
jQuery.extend(jQuery.expr(':'), ( inview: function (el) ( var $e = $(el), $w = $(window), top = $e.offset().top, height = $e.outerHeight(true), windowTop = $w.scrollTop(), windowScroll = windowTop - height, windowHeight = windowTop + height + $w.height(); return (top > windowScroll && top < windowHeight); ) ));