What to learn after jQuery

Chúc mừng bạn đã học jQuery! Bây giờ bạn đã học được thư viện JS phổ biến nhất trên web hiện nay. Bây giờ bạn không chỉ có thể mã hóa trang web của mình bằng jQuery mà còn có thể hiểu mã dễ dàng hơn từ các nhà phát triển web khác và sử dụng bất kỳ thư viện JS mới nào.

Thêm jQuery

Chúng tôi chắc chắn không bao gồm tất cả các jQuery ở đây - có nhiều chức năng hơn và nhiều tùy chọn hơn trong các chức năng mà chúng tôi đã thực hiện. Kiểm tra tài liệu cho mọi chức năng mà bạn sử dụng, để đảm bảo bạn biết tất cả các cách bạn có thể sử dụng.

Bạn cũng có thể xem qua các hướng dẫn bổ sung - nhiều trong số chúng có thể sẽ trùng lặp với những gì bạn đã học ở đây, nhưng đôi khi nó giúp nghe được từ nhiều nơi:

• Trung tâm học tập jQuery
• jQFundencies

Các plugin jQuery

jQuery là một thư viện tuyệt vời làm được rất nhiều, nhưng chắc chắn nó không làm được mọi thứ. Nhiều nhà phát triển web mang đến các thư viện bổ sung cho các tác vụ cụ thể hoặc các widget UI. Rất nhiều thư viện đã được xây dựng riêng cho jQuery và chúng tôi gọi chúng là "các plugin jQuery". Để sử dụng plugin jQuery, trước tiên bạn phải có thẻ script jQuery trên trang HTML của bạn, sau đó là thẻ script chỉ tệp js của plugin. Hãy chắc chắn rằng bạn tải jQuery trước khi plugin. Sau đó, hãy gọi tên hàm của plugin jQuery từ mã của bạn. Bạn có thể xem một ví dụ ở đây .

Để tìm các plugin, bạn có thể tìm kiếm trên internet các "plugin jQuery [chức năng mong muốn]" như "công cụ hẹn hò của plugin jQuery" hoặc tìm kiếm các gói plugin npm jquery . Đôi khi, bạn sẽ tìm thấy nhiều plugin làm những gì bạn muốn - trong trường hợp đó, bạn có thể sử dụng các mẹo này để quyết định sử dụng plugin nào .

Ngoài jQuery

Có rất nhiều thư viện để tìm hiểu sẽ giúp bạn xây dựng các trang web mạnh hơn - như thư viện để trực quan hóa dữ liệu hoặc thư viện để kiến ​​trúc mã của bạn. Đọc qua danh sách các thư viện của chúng tôi và bắt đầu thử thêm một số!

Review: DOM animation in jQuery

E-mail

jQuery cung cấp một số hàm cho hoạt ảnh và hiệu ứng, được liệt kê trong tài liệu của nó .

Thay đổi tầm nhìn

Để thay đổi tầm nhìn đơn giản, bạn có thể sử dụng hide()và show():
$("#pic").hide();
$("#pic").show(); (Xem ví dụ)

Bạn cũng có thể sử dụng toggle(), điều này sẽ quyết định hiển thị hay ẩn dựa trên trạng thái hiện tại: $("#pic").toggle(); (Xem ví dụ)

Bạn có thể chuyển thời lượng vào bất kỳ hàm nào trong số đó và jQuery sẽ tạo hiệu ứng thay đổi mức độ hiển thị: $("#pic").toggle(1000);

Bạn cũng có thể sử dụng slideDown(), slideUp()và slideToggle()cho các hiệu ứng trượt (xem ví dụ) hoặc fadeIn(), fadeOut()và fadeToggle()cho các hiệu ứng mờ dần (xem ví dụ) .

Bạn có thể truyền hàm gọi lại làm tham số thứ hai cho bất kỳ hàm nào trong số đó và jQuery sẽ gọi hàm gọi lại đó khi hoạt ảnh hoàn tất:

$("#pic").toggle(1000, function() {
    $("body").append("It's here!");
});

Bạn cũng có thể xâu chuỗi nhiều hiệu ứng lại với nhau và gọi delay()nếu bạn muốn độ trễ giữa chúng:

$("#pic").slideUp(300).delay().fadeIn();

Tùy chỉnh hiệu ứng

Nếu bạn muốn làm động các thuộc tính CSS cụ thể, bạn có thể sử dụng animate():

    $("#pic").animate({
       width: "70%",
       opacity: 0.7,
       padding: 20
    }, 1000);

Lưu ý rằng bạn chỉ có thể làm động các thuộc tính CSS lấy các giá trị số - vì vậy bạn không thể sử dụng thuộc tính này để làm động các thuộc tính như 'màu'. (Xem ví dụ)

Bạn cũng có thể đính kèm các chức năng gọi lại khác nhau animate(), nếu bạn muốn tìm hiểu khi hoạt ảnh đã hoàn tất hoặc đã hoàn tất. Kiểm tra tài liệu để biết thêm chi tiết.

Hoạt hình có trách nhiệm

Ảnh động phải luôn cải thiện trải nghiệm người dùng, không làm cho nó tệ hơn. Ảnh động sẽ giúp người dùng hiểu điều gì đó về trạng thái của ứng dụng web của bạn hoặc thêm một chút thú vị - họ không nên làm chậm trải nghiệm không cần thiết và làm người dùng thất vọng. Bạn có thể yêu cầu người dùng phản hồi về việc bạn sử dụng hình ảnh động hoặc làm việc với nhà thiết kế để quyết định cách thức và nơi để tạo hiệu ứng.

Nếu bạn biết người dùng của mình đang ở trên một thiết bị không hoạt động tốt với hình động, bạn có thể đặt $.fx.offthành true.

Review: Processing forms with jQuery

Để xử lý biểu mẫu với jQuery, bạn nên thêm trình lắng nghe sự kiện vào thành phần biểu mẫu cho sự kiện 'gửi':

    $("form").on("submit", function() {
       // process form
    });

Nếu bạn đang xử lý biểu mẫu hoàn toàn trong jQuery, thì bạn nên gọi preventDefault()để ngăn tải lại trang:

    $("form").on("submit", function(event) {
       event.preventDefault();
       // process form
    });

Khi bạn muốn biết những gì người dùng điền vào cho một đầu vào trong một biểu mẫu, bạn thường sử dụng val():

    var answer = $("#answer").val();

Bên trong hàm gọi lại, bạn có thể tham chiếu phần tử biểu mẫu bằng thistừ khóa. Một mẫu phổ biến là gọi find()phần tử biểu mẫu, chỉ tìm các đầu vào bên trong phần tử biểu mẫu:

    $("form").on("submit", function() {
      // store the value of the input with name='age' 
       var age = $(this).find('[name=age]').val();
    });

( Xem ví dụ đầy đủ ở đây )

Review: DOM events in jQuery

E-mail

Thêm người nghe sự kiện

Bạn có thể thêm một trình lắng nghe sự kiện bằng cách sử dụng on():

    $("#save-button").on("click", function() {
       // handle click event
    });

Nếu bạn cần truy cập chi tiết về sự kiện, bạn có thể tìm thấy chúng trong đối tượng sự kiện jQuery được truyền vào hàm gọi lại:

    $("#face-pic").on("click", function(event) {
       var mouseX = event.pageX;
       var mouseY = event.pageY;
    });

Kích hoạt sự kiện

Bạn có thể kích hoạt thủ công một sự kiện trên một đối tượng từ JavaScript của mình bằng trình kích hoạt:
$("#save-button").trigger("click");

Điều đó có thể hữu ích khi kiểm tra chức năng mới hoặc khi bạn muốn một số mã chạy cả khi trang tải và sau một số sự kiện cụ thể.

Kiểm tra sẵn sàng DOM

Nếu bạn muốn chắc chắn rằng trình duyệt không chạy mã JS của bạn cho đến khi DOM được tải đầy đủ và sẵn sàng, thì bạn có thể chuyển mã của mình tới ready():

    $(document).ready(function() {
      $("h1").text("Y'all ready for this?");
    });

Một phiên bản ngắn hơn đó là chuyển mã của bạn đến hàm jQuery:

    $(function() {
      $("h1").text("Y'all ready for this?");
    });

Tuy nhiên, mã đó không thể đọc được như phiên bản dài hơn, vì vậy chúng tôi khuyên bạn nên sử dụng ready()chức năng này.

Lưu ý rằng nếu bạn bao gồm JS của bạn trong một <script>thẻ ở cuối trang, thì DOM của bạn sẽ hoàn toàn sẵn sàng vào thời điểm trình duyệt chạy JS của bạn. Tuy nhiên, nếu bạn muốn chắc chắn gấp đôi, thì bạn có thể chọn luôn kiểm tra mức độ sẵn sàng của DOM.

Thêm kỹ thuật sự kiện

Để có bản tóm tắt dài hơn và đi sâu hơn vào các sự kiện jQuery, hãy đọc Khái niệm cơ bản về sự kiện jQuery trong tài liệu của họ.

What DOM events and properties are there?

Trình duyệt kích hoạt nhiều sự kiện. Bạn có thể sử dụng jQuery để thêm trình lắng nghe sự kiện cho bất kỳ sự kiện nào.

Danh sách đầy đủ các sự kiện trình duyệt có trên MDN , nhưng đây là một số loại và tên sự kiện phổ biến nhất, cùng với các ví dụ về việc sử dụng chúng:

• các sự kiện chuột : 'click' ( ví dụ ), 'mousedown' / 'mouseup' ( ví dụ ), 'mousemove' ( ví dụ ), 'mouseenter' / 'mouseleave' ( ví dụ )
• sự kiện bàn phím : 'keydown', 'keypress', 'keyup' ( ví dụ )
• các sự kiện chạm : 'touchdown', 'touchup', 'touchstart', 'touchcelon' ( ví dụ )
• kéo các sự kiện : 'dragstart', 'dragend' (Nhiều nhà phát triển sử dụng jQueryUI cho chức năng kéo, vì có thể khó sử dụng trực tiếp các sự kiện kéo. Dưới đây là các ví dụ về các phần tử có thể kéo và vùng thả .)
• hình thức sự kiện : 'gửi' ( ví dụ ), 'thay đổi' ( ví dụ ), 'tập trung' / 'mờ' ( ví dụ ).
• sự kiện cửa sổ : 'cuộn' ( ví dụ ), 'tải lại', 'hashchange'

Khi bạn thêm một trình lắng nghe sự kiện và sự kiện xảy ra, jQuery sẽ gọi lại mã của bạn bằng một đối tượng sự kiện jQuery có các thuộc tính có liên quan trên nó. Đọc tài liệu để tìm hiểu thêm về những tính chất có sẵn.

Behind the scenes: Browse the jQuery source code

Bạn có thể nghĩ rằng jQuery khá kỳ diệu vào thời điểm này, với mọi thứ nó có thể làm. Nhưng đó không phải là phép thuật, nó chỉ là toàn bộ JavaScript - và vì nó là nguồn mở, bất kỳ ai cũng có thể duyệt mã của jQuery và tự mình xem phép thuật.

Bạn có thể xem nguồn trên Github hoặc sử dụng hai trang web này để duyệt qua dễ dàng hơn: Trình xem nguồn jQuery và jQuery được giải mã .

Ví dụ, hãy xem mã cho html()phương thức . Nó thực hiện rất nhiều kiểm tra cho các điều kiện lỗi khác nhau và các trường hợp cạnh và cuối cùng, nó chạy dòng mã thực sự báo cho trình duyệt đặt nội dung HTML bên trong:

elem.innerHTML = value;

Có thể đáng sợ khi xem mã cho jQuery, vì nó liên quan đến cả cú pháp JavaScript nâng cao và toàn bộ kiến ​​thức chuyên môn về cách trình duyệt hoạt động - nhưng cũng thật tuyệt khi thấy tất cả các mã tạo ra một mã mạnh mẽ thư viện hoạt động trên rất nhiều trình duyệt.