Như chúng ta đã đề cập, jQuery có thể được coi là một thư viện “chọn và làm”. Chúng ta đã nói về việc lựa chọn khá nhiều, vì vậy bây giờ hãy nói về một số cách làm. Hãy nhớ rằng mô hình về cơ bản trông như thế này:
// Select something! $(".something") // Do something! .hide();Thay vì làm việc với nhiều ví dụ lý thuyết hơn, chúng tôi chuyển ngay sang một thứ gì đó trong thế giới thực-y. Chúng tôi đã tìm thấy Cây bút này của Drew Barontini và đã tách nó ra.
Xem Biểu mẫu thẻ tín dụng Pen của Chris Coyier (@chriscoyier) trên CodePen
Trong ví dụ của chúng tôi, chúng tôi đã ẩn biểu mẫu thẻ tín dụng theo mặc định. Sau đó, chúng tôi tạo một liên kết mà bạn có thể nhấp để trượt lên và trượt xuống biểu mẫu thẻ tín dụng. Chúng tôi chọn liên kết, sau đó thực hiện một slideToggle trên biểu mẫu. Chọn và làm!
Chúng ta vẫn chưa nói nhiều về các sự kiện, nhưng đó là một phần rất lớn của jQuery. Sự kiện là một cái gì đó giống như nhấp chuột, nhấn phím, cuộn, v.v. Phần “làm” của “chọn và làm” thường xảy ra sau một sự kiện. Đừng lo lắng, chúng ta sẽ nói nhiều về các sự kiện trước khi loạt bài này kết thúc. Hiện tại, chỉ cần biết rằng on () là cách tốt nhất / tiêu chuẩn để liên kết các sự kiện trong jQuery. Ràng buộc, nghĩa là “theo dõi sự kiện này trên phần tử này hoặc tập hợp các phần tử”.
Kế hoạch cơ bản:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Trong ví dụ của chúng tôi, liên kết theo nghĩa đen là một liên kết.
chuyển đổi
Cách mà các liên kết băm hoạt động theo mặc định trong bất kỳ trình duyệt nào là cửa sổ sẽ cuộn xuống phần tử có ID khớp với liên kết băm đó. Đôi khi điều đó tốt. Tôi thích cách nó tạo ra một kết nối ngữ nghĩa giữa liên kết đó và yếu tố đó. Vì vậy, không có bất kỳ JavaScript nào, liên kết về cơ bản vẫn có ý nghĩa (đặc biệt nếu bạn đặt tiêu đề cho nó là một cái gì đó thông minh).
Nhưng đôi khi, hành vi nhảy liên kết băm đó là một lỗi lầm. Chúng tôi có thể ngăn chặn nó trong JavaScript bằng cách sử dụng PreventDefault. Như thế này:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Chúng ta sẽ nói thêm về điều đó sắp tới.
Tất nhiên, tài liệu riêng của jQuery là một tài nguyên tuyệt vời cho tất cả các khía cạnh “do” của jQuery (các phương thức).
Tôi nghĩ rằng sự hiểu biết rất cơ bản về “chọn và làm” này và các sự kiện thực sự mở ra một thế giới hiểu biết về JavaScript. Tôi biết nó đã làm cho tôi. Ở phần cuối của screencast này, chúng ta sẽ xem xét thiết kế hiện tại của CSS-Tricks và xem JavaScript được sử dụng ở đâu rõ ràng để phản ứng với một số sự kiện nhấp chuột và thay đổi giao diện người dùng. Những thứ rất giống với những gì chúng tôi đã làm trong bản demo trước. Ví dụ: thiết lập một lớp đang hoạt động trên những thứ bạn nhấp vào, như thế này:
Xem Pen d6f7161a5931397b4f24195a315d52f3 của Chris Coyier (@chriscoyier) trên CodePen