JQuery là một thư viện chứa rất nhiều phương thức giúp thao tác với các tài liệu HTML, thêm hoạt ảnh, cùng với nhiều thứ khác dễ dàng hơn nhiều. Vì JQuery là một thư viện nên nó có API mà chúng ta có thể sử dụng để truy cập chức năng của nó
API là viết tắt của Giao diện lập trình ứng dụng và về cơ bản, nó nêu rõ các phương thức hoặc chức năng mà chúng ta có thể gọi bên trong mã của mình nếu chúng ta nhập thư viện
Hãy nhấp vào. addClass[] và xem nó làm gì
Giả sử chúng ta có một lớp có tên blue làm cho các phần tử của nó có chữ màu xanh. Chúng ta có thể sử dụng. addClass[] và thêm lớp màu xanh lam vào tất cả các phần tử p với thứ gì đó tương tự như thế này khi chúng ta có $[“p”]. addClass[“màu xanh”]. Điều này có thể gây nhầm lẫn ngay bây giờ, nhưng đừng lo lắng, chúng tôi sẽ tìm ra nó
Để bắt đầu, trước tiên chúng ta cần tạo một chỉ mục. html và một kịch bản. tập tin js. Chúng tôi cũng sẽ đặt kịch bản. js trong một thư mục có tên js và sau đó liên kết tập lệnh của chúng tôi. js trong chỉ mục của chúng tôi. tệp html. Điều này sẽ trông khá quen thuộc vì chúng tôi đã thực hiện nó trong các hướng dẫn khác
Giống như chúng ta đã nhập bootstrap trong hướng dẫn bootstrap, chúng ta cần nhập jQuery trong bài đăng này. Chúng tôi có thể tải xuống từ Internet và liên kết cục bộ hoặc chúng tôi có thể liên kết từ Internet. Chúng tôi sẽ thực hiện bước thứ hai và sau khi tìm kiếm jQuery CDN, chúng tôi sẽ thêm nó vào mã của mình
Đảm bảo thêm nó phía trên tập lệnh của chúng tôi. js vì chúng tôi sẽ cần sử dụng jQuery trong tệp này. Với jQuery của chúng tôi, chúng tôi sẽ thêm một dòng mã HTML, một tiêu đề. Chúng tôi sẽ thêm một số kiểu đặt nó ở giữa trang và tạo cho nó một màu văn bản màu trắng. Chúng tôi cũng có thể cung cấp cho nó id ẩn và tiêu đề sẽ nói “Tôi đã bị ẩn. ”
Bây giờ, khi chúng tôi làm mới trang, chúng tôi sẽ thấy rằng văn bản tiêu đề ở đó, nhưng chúng tôi không thể nhìn thấy nó trừ khi chúng tôi đánh dấu nó
Với jQuery và CSS, chúng tôi có thể làm cho nó khi chúng tôi di chuột qua nó, văn bản của tiêu đề trở thành màu đen. Để làm điều này, chúng tôi sẽ đi vào kịch bản của chúng tôi. js và viết một số mã
Ở đây, chức năng sẵn sàng đảm bảo rằng DOM [hiện tại, các phần tử HTML của chúng tôi] đã được tải. Sau khi chúng được tải, chúng tôi chọn phần tử của mình với id ẩn và gọi hàm di chuột trên đó. Điều này có nghĩa là khi chúng ta di chuột qua phần tử, hàm ở dòng 2–4 sẽ được chạy. Hàm sẽ chọn phần tử “this” [phần tử có id bị ẩn] và trong CSS của phần tử, thuộc tính color sẽ được đặt thành giá trị black. Bạn có thể làm điều này cho bất kỳ phần tử, ID hoặc lớp nào và đặt bất kỳ thuộc tính nào thành bất kỳ giá trị nào. Tiếp theo, chúng ta có chức năng gọi lại ở dòng 5–6 và đây là thứ bạn phải viết ra ngay cả khi bạn không sử dụng nó. Bây giờ chúng ta sẽ để trống và quay lại sau
Bây giờ, khi chúng tôi làm mới trang và di chuột qua tiêu đề, văn bản sẽ chuyển sang màu đen. Tuy nhiên, khi chúng tôi ngừng di chuột qua tiêu đề, văn bản vẫn có màu đen. Điều gì sẽ xảy ra nếu chúng ta muốn “ẩn lại” tin nhắn của mình sau khi di chuột qua nó? . Điều này sẽ được gọi khi chúng tôi "rời khỏi" hoặc ngừng di chuột qua tiêu đề của chúng tôi, phần tử có ID bị ẩn. Hãy thêm một số mã nữa
Ở đây, chúng ta chọn lại phần tử “this”, là phần tử có ID bị ẩn và ẩn nó khỏi trình xem. Chức năng này như với. css,. di chuột và. Hàm sẵn sàng được tích hợp sẵn trong thư viện jQuery nên chúng ta không cần lo lắng về cách chúng được triển khai. Chúng ta chỉ cần biết kết quả cuối cùng. Ở đây, chức năng hide ẩn phần tử “this” trên các trang web. Về cơ bản, điều này chỉ đặt thuộc tính hiển thị của phần tử “này” thành không, nhưng sử dụng. hide[] làm cho mã ngắn gọn hơn một chút. Hãy xem điều gì sẽ xảy ra khi chúng tôi làm mới trang
Chúng tôi di chuột qua tiêu đề và để nó. Sau đó, phần tử tiêu đề đã biến mất — ngay cả khi chúng tôi cố gắng đánh dấu nó, cũng không thể tìm thấy nó. Với chương trình này, chúng tôi ẩn một tin nhắn trong tầm nhìn rõ ràng, hiển thị tin nhắn khi con trỏ chuột vào nó và sau đó làm cho nó biến mất khi con chuột rời khỏi nó
Đối với một ví dụ nhanh khác, chúng tôi sẽ thêm lại một nút trong HTML của mình và làm cho nút đó hiển thị cảnh báo trên trang khi chúng tôi nhấp vào nút
Bây giờ, chúng ta sẽ viết JavaScript bằng thư viện jQuery để tạo nút tương tác
Ở đây, chúng tôi chọn tất cả các nút trên trang và khi một nút được nhấp, chúng tôi sẽ chạy chức năng. Hàm sử dụng phương thức cảnh báo [tích hợp sẵn trong HTML] để cảnh báo người dùng trên màn hình với thông báo “Tôi đang thông báo cho bạn. ”. Quay lại trang web của chúng tôi, sẽ làm mới và xem cảnh báo của chúng tôi trông như thế nào
Và có cảnh báo của chúng tôi. Liệu chúng ta có thể làm điều này với JavaScript đơn giản không? . Tuần tới, chúng ta sẽ nói về góc cạnh. js, là một khung JavaScript cấu trúc giúp bạn xây dựng các ứng dụng web động. Lần đầu tiên trong sê-ri, chúng tôi sẽ không mã hóa nội dung của mình — nhưng chúng tôi sẽ lấy nội dung đó từ một nơi khác. Tôi hy vọng bạn đã học được điều gì đó trong bài viết của tuần này và tôi sẽ gặp bạn lần sau