[Powered by Google Translate] [Hội thảo: jQuery] [Vipul Shekhawat, Đại học Harvard] [Đây là CS50.] [CS50.TV] Nếu bạn đang theo cùng ở nhà, bạn thực sự có thể truy cập vào các slide của mình trực tuyến bằng cách vào liên kết này. Đó là TjjRWj, trên bit.ly. Bạn cũng có thể chỉ cần vào địa chỉ URL trực tiếp, đó là cloud.cs50.net / ~ vshekhawat, đó là tên của tôi, và jquery. Tôi rất khuyến khích bạn theo cùng, nếu bạn đang xem ở nhà, và nếu bạn đang ở đây, cũng được, bởi vì đây là một bài thuyết trình khá tương tác. 

Vì vậy, hôm nay tôi sẽ nói về jQuery, và câu hỏi đầu tiên là, jQuery là gì? Năm nay, tôi biết các bạn đã không được JavaScript càng chi tiết như chúng tôi có trong năm qua. JavaScript là, trước hết, chỉ là một ngôn ngữ phía máy khách mà bạn sử dụng để chạy các kịch bản và mã số trên máy tính của người dùng. Vì vậy, bạn có một máy chủ cung cấp các trang web với mọi người, nhưng bạn có thể muốn làm công cụ trên máy tính của họ, yêu cầu máy tính của họ để gửi yêu cầu đến máy chủ của bạn mỗi 30 giây hoặc một cái gì đó như thế. Bạn có thể làm điều đó sử dụng JavaScript. JQuery chỉ cung cấp chức năng hơn trên JavaScript mà không công cụ bổ sung cho bạn. Nếu bạn nhìn vào các nội dung trên, mô tả một số các công cụ mà bạn có thể làm. Vì vậy, tổng thể, nó được tạo ra trong tháng 1 năm 2006. Nó lần đầu tiên được hình thành trong các tháng 8 năm 2005. Nó được khoảng một vài năm, và nó thực sự là một phần của xu hướng Web 2.0 mới đó là làm Internet để sáng bóng. Đó là thư viện JavaScript được sử dụng rộng rãi nhất. Hơn 19,6 triệu trang web đang sử dụng nó, và việc sử dụng vẫn còn tăng theo builtwith.com, trong đó, rõ ràng, trong năm qua, vừa được liên tục tăng khá tuyến tính. Trong số 10 triệu trang web, bạn vẫn có - khoảng 40% trong số họ hiện đang sử dụng nó. Facebook sử dụng nó, rất nhiều các trang web khác hiện đang sử dụng nó. Bạn có thể nhìn vào những thống kê trên của riêng bạn, nếu bạn muốn. Và bạn có thể nói cho nó VN bởi vì nó có một nền tảng và 13 thành viên hội đồng quản trị, cùng với một đội ngũ 20 người làm việc trên nó một cách thường xuyên. Vì vậy, nó được sử dụng rất rộng rãi, nó có một URL org., Đó là ưa thích, nó có spin-off cho các công cụ khác, vì vậy đó là một vấn đề lớn. 

Tại sao bạn nên sử dụng nó? JQuery là rất nhẹ. Có nghĩa là nó không phải là một tập tin rất lớn. Bạn có thể tải về các tập tin minified, đó là không có tất cả các không gian màu trắng và các ý kiến, và nó chỉ có 32 MB. Vì vậy, thật dễ dàng để chỉ quăng lên trang web của bạn và chỉ bắt đầu sử dụng nó. Nó cũng được viết rất hiệu quả, vì vậy nó không mất rất nhiều - nó không làm chậm trang web của bạn nhiều khi bạn sử dụng nó. Nó cho phép bạn thực hiện những điều mà trước đây không khả thi. Có một số khía cạnh của chức năng, như tạo ra hình ảnh động, bình thường có thể rất, rất khó khăn để làm. Nhưng trong jQuery, chúng thật sự rất đơn giản. Và có một số những điều gây phiền nhiễu để làm, có thể trong JavaScript, như gửi một yêu cầu POST, nhưng để gửi yêu cầu đến một máy chủ, bạn phải viết năm hoặc sáu hoặc bảy dòng mã. Bây giờ bạn chỉ có thể làm điều đó trong một dòng mã, trong một cuộc gọi chức năng duy nhất. Điều đó thực sự đơn giản hoá rất nhiều những thứ mà bạn đang làm. Và tất cả các trẻ em mát mẻ đang sử dụng nó. Bằng cách đó, tôi có nghĩa là tôi. Trong dự án cuối cùng của tôi năm ngoái, đó là news.whrb.org, đó là dành cho các đài phát thanh, tôi tạo ra blog này nơi tổ chức tất cả các chương trình mà chúng tôi đã thực hiện và các tập tin MP3 cho họ. Bạn có thể duyệt qua các chương trình trước đây, và nó là tất cả được thực hiện sử dụng jQuery. Bạn có thể nói vì tất cả những hình ảnh động, về cơ bản. Vì vậy, nếu bạn có - nếu bạn đang tạo ra một bài mới, bạn nhìn thấy những slideDowns ít, đó là tất cả được thực hiện sử dụng jQuery. Và fade này - vì vậy mà loại công cụ đều được làm sử dụng jQuery, và bạn không cần phải liên tục tải lại trang web để điều hướng trang web. Một điều thú vị đó là thực hiện sử dụng jQuery là trình bày này. Tôi đang sử dụng điều này mã nguồn mở được gọi là scrolldeck, mà ai đó đã viết trên đầu trang của jQuery. Nếu bạn thực sự nhìn vào mã nguồn, bạn có thể thấy rằng họ đang sử dụng ký hiệu đô la này, dấu hiệu đô la được sử dụng trong jQuery để biểu thị rằng một chức năng là một chức năng jQuery. Vì vậy, họ đang định nghĩa một wrapper trên đầu trang của jQuery cho phép bạn thực hiện một bài thuyết trình như thế này, và bạn có thể thấy rằng ở đây họ bao gồm cả các tập tin jQuery ban đầu, đó là những gì bạn sẽ phải bao gồm nếu muốn sử dụng jQuery trong các trang web của riêng bạn. 

Chạm vào đó, làm thế nào để bạn cài đặt nó? Bạn chỉ có thể đi đến jQuery.com và tải về các tập tin, thêm nó vào một thư mục web và bao gồm nó. Vì vậy, chỉ trên đầu trang, trong các thẻ đầu của tập tin HTML của bạn của tập tin HTML chính của bạn, chỉ cần có mà dòng mã với phiên bản chính xác mà phiên bản của jQuery bạn đang sử dụng. Bạn có thể tải nó bằng cách vào jQuery.com, nhấp vào "tải về jQuery," và bạn đã có nó. Đó là nó. Và thực sự, chúng ta có thể có một cái nhìn vào những gì nó như thế nào. Nếu bạn bấm vào tải về tại đây, jQuery là này. Nó chỉ là một tập tin JavaScript lớn mà làm tất cả những thứ ma thuật cho bạn. Đây là phiên bản minified, đó là không thể đọc được ở tất cả. Bạn cũng có thể xem xét các phiên bản phát triển, đó là có thể đọc được nhưng vẫn còn rất, rất dài. Đó là rất nhiều thứ trong đó. Bạn cũng có thể liên kết đến phiên bản lưu trữ của Google của nó. Vì vậy, mà sẽ cho phép bạn chỉ dựa vào Google để cung cấp nó. Họ cung cấp tất cả các phiên bản của nó, có sẵn ở tất cả các lần. Vì vậy, bạn có thể có thể dựa vào Google để lưu trữ nó cho bạn. Hoặc bạn có thể liên kết đến phiên bản mới nhất của jQuery. Họ có một URL đó là luôn luôn cập nhật phiên bản mới nhất. Đó là jQuery mới nhất, và có một vấn đề với điều đó, đó là nếu jQuery cập nhật và một số chức năng trước họ đã trở thành retrograded hoặc phản đối, nó có thể không - nó có thể bắt đầu không được hỗ trợ nữa. Vì vậy, nếu bạn viết một trang web sử dụng phiên bản 1.8.2, bởi các phiên bản thời gian 2,7 đi ra một số chức năng bạn đã viết không làm việc nữa. Vì vậy, nó tốt hơn để chỉ cần tải về các tập tin kB 32, đặt nó trên trang web của bạn, và nó sẽ làm việc mãi mãi. 

Tôi sẽ đi trước và bắt đầu nói về các chức năng thực tế của jQuery. Điều đầu tiên là bộ chọn. Đây là những gì jQuery ban đầu được hình thành để cung cấp. Và bạn có thể bấm vào tài liệu để xem xét các tài liệu hướng dẫn chi tiết cho các bộ chọn tôi sẽ được bao gồm. Ý tưởng đằng sau bộ chọn là bạn có thể chọn các phần tử HTML trên một trang. Các yếu tố trên một trang có ID và các lớp học và các khía cạnh xác định khác cho họ. Ngoài ra còn có - họ trong đơn đặt hàng khác nhau. Một số thời gian họ đang lồng vào bên nhau. JQuery cho phép bạn xây dựng các truy vấn đơn giản mà lấy các yếu tố từ trang. Sau đó, bạn có thể thao tác các yếu tố sử dụng chức năng jQuery, đó là phần thao tác chúng tôi sẽ nhận được để sau này. Bạn có thể thay đổi HTML, thay đổi CSS, bạn cũng có thể sinh động và thêm chức năng kích hoạt các sự kiện nhất định. Vì vậy, ví dụ, nếu một cái gì đó nhấp vào, bạn muốn một cái gì đó xảy ra, bạn có thể làm điều đó bằng cách sử dụng jQuery là tốt. Và có một số lượng lớn các cách để lựa chọn các yếu tố. Hầu hết chúng tôi đã không bao giờ được sử dụng, nhưng có những cái cơ bản, đó là khá quan trọng. Các yếu tố chọn, ví dụ, nếu bạn chỉ cần chọn bất cứ điều gì đó là một div - tôi thực sự có mã mở cho trình bày slide này. Vì vậy, ví dụ, đây là các slide đầu tiên. Ở đây chúng tôi có một div. Nếu chúng ta thực sự chọn tất cả các divs trên trang web, nó sẽ chỉ cho chúng ta một mảng của tất cả các divs tồn tại trong tập tin này. Bộ chọn ID cho phép bạn chọn bất cứ điều gì với một ID nhất định. Vì vậy, nếu điều này, ví dụ, điều này có ID "những gì" và nếu chúng ta đã làm điều này với # những gì thay vì một số ID, nó sẽ chỉ trả lại một mảng có một yếu tố duy nhất và đó là yếu tố của trang. Chúng tôi cũng có thể kết hợp bộ chọn cách này bằng cách chỉ chọn những thứ với ID mà divs. Vì vậy, yeah. Chỉ chọn divs có ID. Cho lớp bạn chỉ cần sử dụng một dấu chấm, đó là điều tương tự như CSS. Con cháu cũng làm việc, vì thế nếu bạn có một số lớp và nó đã lồng vào các yếu tố bên trong nó - như vậy, ví dụ, có một số lớp học và nó có một thẻ neo liên kết đến một trang khác, bạn có thể sử dụng cú pháp này để lấy liên kết. Bạn cũng có thể chọn nhiều thứ cùng một lúc, chỉ cần tách chúng bằng dấu phẩy, sử dụng bất kỳ chọn bạn muốn, và bạn sẽ chọn tất cả chúng cùng một lúc, trong một mảng duy nhất. Và sau đó có cũng là không chọn, vì vậy bạn có thể chọn tất cả các divs mà không có một số lớp học cụ thể. Và đó chỉ là một cách hữu ích để có được giới thiệu cách thức lựa chọn các công trình này. Tôi sẽ chỉ cho một số ví dụ cụ thể trong một giây. 

Bộ chọn cao cấp là - đây chỉ là một vài ví dụ. Có hàng chục trong số này, nhưng nếu bạn muốn chọn tất cả các thẻ hình ảnh trong một số yếu tố, sau đó bạn chỉ cần làm: hình ảnh. Nếu bạn muốn chọn các yếu tố thậm chí, ví dụ, nếu có 20 người trong số họ, bạn muốn chọn 0, 2, 4, 6 và như vậy, bạn làm: thậm chí, hoặc bạn cũng có thể làm: lẻ. Đây là những bộ chọn giả, có nghĩa là họ thực sự tính toán mọi phần tử khác hơn là chỉ cần đi và chọn tất cả trong số họ. Bạn cũng có thể - mỗi phần tử cũng có thể có các thuộc tính cụ thể. Vì vậy, ví dụ, class = trung tâm cũng là một thuộc tính. Đối với thẻ neo này, href, siêu văn bản tham khảo, là một thuộc tính cũng có. Vì vậy, bạn có thể chọn một cái gì đó có liên kết đến một trang cụ thể hoặc chỉ - nó thực sự nói chung. Bạn có thể chọn bất cứ điều gì với bất kỳ thuộc tính mà bạn muốn. Và sau đó, cũng có thể, thuộc tính chứa. Nếu bạn, ví dụ, muốn chọn tất cả các yếu tố đầu vào có chữ "vượt qua" như tên gọi của chúng, nếu một trang có một khối văn bản đầu vào đó được gọi là "mật khẩu", đó sẽ là một cách để bạn có thể chọn đó. Và có nhiều hơn nữa. Bạn có thể đi trước và xem xét các tài liệu và xem các ví dụ cụ thể về cách hoạt động. 

Điều tiếp theo là thao tác DOM. Sau khi chúng tôi lựa chọn các yếu tố, chúng tôi sẽ muốn thực sự làm mọi thứ với họ. Vì vậy, đến nay chúng tôi đã không nhìn thấy gì cả, nhưng nếu bạn nhìn vào các tài liệu, có thực sự rất nhiều mà chúng ta có thể làm. Tại thời điểm này, chúng ta sẽ chọn các yếu tố về trình bày này và vận dụng chúng sử dụng jQuery. Bởi vì điều này được thực hiện bằng cách sử dụng jQuery, chúng ta có thể truy cập vào thư viện jQuery, và chúng ta có thể sử dụng các chức năng trong mã này. Một điều hữu ích mà bạn có thể không biết về là giao diện điều khiển. Và Google Chrome là những gì tôi đang sử dụng. Bạn có thể bấm alt lệnh J hoặc alt kiểm soát J để mở giao diện điều khiển. Trong Firefox tôi nghĩ rằng đó là lệnh thay đổi K hoặc kiểm soát sự thay đổi K. Trong Safari, bạn phải đi thay đổi một số cài đặt. Có một liên kết nếu bạn muốn làm điều đó, nhưng tôi khuyên bạn nên nhận Chrome hoặc Firefox. Vì vậy, chúng ta hãy mở giao diện điều khiển, nó xuống đây. Nó cho phép bạn về cơ bản chỉ cần làm bất cứ điều gì bạn muốn. Vì vậy, bạn có thể chỉ cần gõ vào tạo ra một biến gọi là x, x = 5, chúng ta hãy xem x + 2 là những gì. Bạn thậm chí có thể làm một cái gì đó như CS + chúng ta hãy xem, x + 45, sẽ được CS50. Bạn chỉ có thể làm một số công cụ JavaScript điển hình. Nhưng bạn cũng có thể làm jQuery trong đây. 

Vì vậy, chúng ta hãy nhìn vào khía cạnh đầu tiên ở đây. Chúng ta sẽ tạo ra một biến gọi là HTML, mà là một chuỗi. Nó có một thẻ đoạn trong nó, đó được gọi là một số văn bản mới. Vì vậy, chúng ta có HTML này, đó là một số văn bản mới, trong khoản thẻ. Bây giờ chúng ta thực sự muốn thêm nó vào trang. Tôi đặt nó lên để HTML cho đoạn này, danh hiệu này đây, là nối thêm ID. Nếu chúng ta chọn nối thêm ID và sau đó gắn thêm vào nó biến HTML tôi chỉ cần tạo ra, nó sẽ thêm HTML là lúc kết thúc, ngay sau khi thẻ đoạn này. Vì vậy, nếu chúng ta làm điều đó - chúng tôi đã chọn đoạn này, và chúng tôi đã được gọi là chức năng phụ thêm với biến HTML Tôi chỉ cần thêm, nó sẽ thêm rằng văn bản mới phải có trên trang. Chúng tôi cũng có thể thêm vào trước, có nghĩa là nó sẽ đi trước, vào lúc bắt đầu của phần tử đó. Vì vậy, có một số văn bản mới vào đầu và sau đó. Tôi có thể đi trước và làm mới để thoát khỏi công cụ này tôi đã chỉ cần thực hiện. Nhưng đó là một ví dụ về cách bạn có thể sử dụng các Thêm tiền tố và nối thêm các phương pháp để thao tác các công cụ trên trang, thêm một số HTML. 

Bạn cũng có thể thay đổi các lớp học. Trở lại trong tập tin phong cách này, tôi đã tạo ra cho lớp chiến thắng có văn bản màu đỏ, một số màu nền, và một cái bóng văn bản. Có vẻ ghê gớm, nhưng tôi có thể thực sự - đoạn này tương ứng với đẳng cấp ID. Vì vậy, tôi có thể thêm các lớp học để giành chiến thắng. Tôi có thể thực hiện điều này trong giao diện điều khiển, và điều đó sẽ thêm lớp đó, và bây giờ nó trông ghê tởm, như mong đợi. CSS sẽ tự động được áp dụng cho các lớp học mà bạn - nếu có CSS ​​cho một lớp học, nó sẽ tự động được áp dụng nếu bạn thay đổi các lớp của một phần tử. Sau đó chúng tôi chỉ có thể loại bỏ nó bằng cách sử lớp loại bỏ. Vì vậy, nếu bạn có một số lớp học được xác định trước như màu đỏ hoặc nhấn mạnh, và sau đó bạn muốn áp dụng những yếu tố, bạn không cần phải làm tất cả những CSS phong cách mỗi lần. Bạn chỉ có thể thêm các lớp học để một phần tử, và sau đó nó sẽ tự động trở thành - nó sẽ tự động tìm thích hợp cho lớp đó. Chúng tôi cũng có thể loại bỏ những thứ, vì thế tôi sẽ chọn tất cả các divs trên trang web và loại bỏ chúng. Những gì đang có sẽ trông như thế nào? Nó sẽ trông giống như không có gì, vì vậy có thực sự là không có gì trái. Trình bày của tôi đã biến mất. Tôi có thể làm mới và mang nó trở lại, may mắn thay, vì nó chỉ chạy một lần, nhưng đó là một ví dụ về loại bỏ, nếu bạn muốn phá hủy hoàn toàn một yếu tố ra ngoài trang. 

Bạn cũng có thể ghi đè lên, và tôi sẽ chọn tất cả các khoản thẻ trên trang và đi vào bên trong chúng và thay thế văn bản bất cứ điều gì họ có trong chúng chỉ với từ "thử nghiệm". Nếu bạn làm điều này, bạn sẽ thay thế tất cả các đoạn văn trên trang với thử nghiệm này. Vâng. Tất cả chúng được thay thế bằng thử nghiệm. Vì vậy, đó là một ví dụ của việc truy cập các văn bản và ghi đè lên nó. Bạn cũng có thể lấy thông tin, và điều này là thực sự mát mẻ cho các hộp đầu vào. Nếu bạn có một hộp đầu vào mà mọi người đang gõ nội dung vào, mọi người đang gõ nội dung vào nó, ở đây chúng tôi chọn đầu vào, bất kỳ thẻ đầu vào với một loại văn bản. Trong trường hợp này, chỉ có một hộp đầu vào trong toàn bộ trình bày, vì vậy chúng ta chỉ cần chọn đầu tiên, và sau đó chúng ta gọi hàm val trên nó. Trả về giá trị, và cho một hộp đầu vào, giá trị chỉ là bất cứ điều gì xảy ra bên trong nó. Vì vậy, nếu chúng ta làm điều này, nó chỉ trả về các công cụ chuỗi. Và nếu chúng ta gọi nó một lần nữa sau khi viết các công cụ hơn, nó biến thành công cụ hơn. Đó là một cách tuyệt vời để truy cập vào các yếu tố của một hộp đầu vào, và sau đó kiểm tra, đây là một địa chỉ email hợp lệ, đây là một ngày hợp lệ, ví dụ. Bạn chỉ có thể lấy thứ ngay lập tức như mọi người đang gõ nó, và sau đó kiểm tra xem đó là hợp lệ, gửi lại cho máy chủ, làm bất cứ điều gì bạn muốn với nó. Và đó là cách bạn truy cập những gì bên trong những hộp. 

Bạn cũng có thể chỉnh sửa CSS trực tiếp, vì vậy thay vì thêm một lớp học mà có một số đặc tính được xác định trước, bạn chỉ có thể thêm bất cứ điều gì CSS bạn muốn bất cứ điều gì. Vì vậy, hãy chọn cơ thể, đó là toàn bộ trình bày, và màu sắc là tài sản xác định những gì màu sắc của văn bản. Nếu chúng ta thay đổi nó thành màu đỏ, tất cả các văn bản trong trang web sẽ chuyển sang màu đỏ. Chúng ta có thể làm điều gì đó như nền màu xanh, có chúng tôi đi, nó đẹp. Bạn có thể làm bất cứ điều gì bạn muốn với điều này. Sử dụng thuộc tính CSS, bạn thực sự có thể thay đổi bất cứ điều gì như thế nào nhìn vào bất kỳ lúc nào. Điều tiếp theo là hiệu ứng. Hiệu ứng về cơ bản những điều tương tự như thay đổi CSS, nhưng họ thực sự cung cấp một số hình ảnh thêm cho nó. Vì vậy, thay vì chỉ hiển thị hoặc ẩn một cái gì đó hoặc thay đổi màu sắc, bạn thực sự có thể làm cho nó hoạt hình. Đây là tài liệu hướng dẫn, nếu bạn muốn có một cái nhìn tại tài liệu phong phú cho nó. Nhưng tôi sẽ bao gồm những cái chính. Có chương trình và tài sản ẩn. Hiện / ẩn ID thực sự tương ứng với toàn bộ hộp này, vì vậy nếu tôi giấu nó, nó sẽ biến mất. Và tôi có thể thấy nó một lần nữa nếu tôi muốn làm cho nó trở lại. Và nó trở lại. Nó đã không thực sự biến mất, Tôi không thực sự loại bỏ nó khỏi trang, tôi chỉ thiết lập thuộc tính của tầm nhìn CSS để ẩn vì vậy bạn không thể nhìn thấy nó nữa. Ngoài ra còn có trượt lên trượt xuống, cho phép bạn có hiệu ứng này. Nó trượt lên để biến mất, và sau khi nó biến mất bạn có thể trượt nó xuống để làm cho nó trở lại. Và bây giờ nó trở lại. Ngoài ra còn có hiệu ứng mờ dần này, - ID mờ dần tương ứng với ô này. Nếu tôi phai nó ra, sau đó nó từ từ sẽ biến mất. Tôi cũng có thể dần giảm âm trong, và nó sẽ trở lại. Bạn cũng có thể làm mờ dần đến, đó là cụ thể cho các chức năng mờ dần. Bạn có thể có nó phai cho bất kỳ độ mờ đục cụ thể mà bạn muốn. Vì vậy, nếu bạn phai nó từ từ để, 5, nó sẽ trở thành một nửa có thể nhìn thấy. Tôi có thể làm cho nó đi đến 0,1, và trở về 1 để làm cho nó hoàn toàn có thể nhìn thấy một lần nữa. Đó chỉ là một hình ảnh động mà bạn có thể làm. 

Ngoài ra còn có tác dụng chuyển đổi. Vì vậy, tôi sẽ chọn ID chuyển đổi, tương ứng với ô này, và trên div mà bạn có thể gọi chuyển đổi, nếu nó có thể nhìn thấy nó sẽ trở thành vô hình, nếu nó không nhìn thấy nó sẽ trở thành có thể nhìn thấy một lần nữa. Vì vậy, tôi chỉ gọi là chức năng chuyển đổi này hai lần, một trong những đầu tiên là cùng một điều như ẩn, cuộc gọi thứ hai là điều tương tự như một chương trình. Và bạn cũng có thể làm điều này với một chuyển đổi phai, mà làm điều tương tự, ngoại trừ nó thực sự mất dần. Và điều tương tự với các slide chuyển đổi. Có những tác động xích là tốt, có nghĩa là nếu bạn chọn một phần tử và chỉ cần gọi một loạt các phương pháp hình ảnh động trên nó, nếu bạn muốn nó mờ dần, sau đó trượt xuống, và sau đó ẩn và sau đó mờ dần trong, nó sẽ làm cho họ liên tiếp. Vì vậy, biến mất, trở lại - đối với một số lý do, ẩn đã không xảy ra. Hãy thử nó ra. Vâng, vì vậy nó dần dần biến mất và sau đó nó giảm đi. Và có rất nhiều hơn. Bạn có thể sử dụng chức năng animate để tạo ra hình ảnh của riêng bạn, mà là khá phức tạp, nhưng nó cung cấp cho bạn khả năng mở rộng vô hạn. Bạn có thể thực hiện bất kỳ loại hoạt hình mà bạn muốn. Bạn cũng có thể sử dụng hàng đợi xếp hàng nhiều hình ảnh động tại một thời điểm. Vì vậy, nếu bạn muốn một cái gì đó bay qua trang web, trượt từ phía trên bên phải bên trái phía dưới, bạn có thể làm điều đó, và chỉ có một loạt các hành động đi một sau khi khác. 

Điều tiếp theo chúng ta sẽ nói đến là các sự kiện. Sự kiện cho phép bạn - cho đến nay, chúng tôi đã chỉ được đánh vật vào giao diện điều khiển và đó là một cách để làm cho điều này xảy ra, nhưng trên một trang thực tế, bạn sẽ không thể làm cho các loại người sử dụng điều đó vào giao diện điều khiển. Bạn muốn những điều xảy ra tự động. Do đó, bạn cần phải sử dụng các sự kiện kích hoạt trên một số xảy ra sự kiện nào đó. Bạn có thể kiểm tra tài liệu cho đầy đủ các chi tiết. Vì vậy, chúng ta hãy xem. Chúng tôi muốn ẩn hoặc hiển thị các hộp, nhưng ngay bây giờ nút này không làm bất cứ điều gì bởi vì tôi đã không thực hiện nó được nêu ra. Tôi sẽ đi đến trang HTML thực tế. Dưới đây là các slide. Có một div cho slide. Nó có các lớp học của slide. Có văn bản. Bây giờ, có hộp này và nút hộp. Làm thế nào chúng ta sẽ thực sự làm cho biến mất? Trước hết, chúng ta hãy viết một chức năng mà làm cho các ID hộp biến mất. Đây là cú pháp cho Chức năng, chúng ta hãy gọi nó là hideTheBox. Nó không có bất kỳ đối số, bởi vì không có đối số được thực hiện. Chúng ta có thể chọn ID hộp. Vì vậy, bằng cách sử dụng jQuery chọn, chúng ta có thể chọn hộp ID, và sau đó chỉ cần làm cho nó biến mất. Chúng ta hãy làm cho nó phai ra. Nếu chúng tôi chạy chức năng này trong giao diện điều khiển thực tế, chúng ta có thể xác định chức năng này, chúng ta có thể gọi hideTheBox, và nó hoạt động. Nhưng chúng tôi muốn nó xảy ra khi nút được nhấn thực sự. Để làm điều đó, chúng ta phải sử dụng một sự kiện. Để ràng buộc một sự kiện với một số nút cụ thể hoặc một số hành động xảy ra, chúng ta phải chọn phần tử rằng sự kiện này sẽ kích hoạt - hoặc sẽ kích hoạt sự kiện này, xin lỗi. 

Vì vậy, trước hết, chúng ta hãy chọn nút hộp ID bởi vì đó là nút, và bây giờ, cho nút đó, chúng tôi muốn tạo ra một hình ảnh động khi được nhấp vào. Do đó, có chức năng nhấp chuột này. Nó cho phép bạn liên kết một chức năng cho nó. Chức năng này có một chức năng như một tham số chúng ta có thể vượt qua trong các chức năng hideTheBox, và bất cứ khi nào nút này được nhấn, chức năng này sẽ tự động thực hiện. Vì vậy, điều này sẽ làm việc nếu chúng ta tiết kiệm này, tôi sẽ làm mới, và - thứ hai, tôi xin lỗi. Hãy để tôi sửa lỗi này thực sự nhanh chóng. Được rồi. Có chúng tôi đi. Vì vậy, bây giờ hộp là biến mất khi chúng ta nhấn nút. Chúng tôi cũng có thể thay đổi điều này để chỉ fadeToggle, thay đổi nó chỉ để ẩn hoặc hiển thị hộp, và điều này cũng sẽ làm việc quá, nếu chúng ta làm mới. Chúng ta có thể giấu nó, chúng ta cũng có thể thấy nó, và điều đó sẽ tiếp tục làm việc. Một điều chúng ta có thể làm là, chúng tôi không thực sự có để xác định chức năng hideTheBox này trước khi chúng ta gọi hàm nhấp chuột. Vì vậy, thay vì xác định chức năng và gọi hideTheBox, chúng tôi sẽ chỉ gọi nó là nếu điều này được nhấp. Vì vậy, chúng ta có thể định nghĩa nó nặc danh trong đây, đó là một tính năng JavaScript có. Bạn có thể xác định một chức năng, thông thường, chúng ta có thể nói chức năng hideTheBox với lập luận, nhưng thay vào đó, chúng tôi chỉ có thể nói hoạt động không có đối số, bắt đầu ngoặc móc để xác định chức năng, đóng mà xoăn cú đúp, và sau đó chỉ cần xác định các chức năng trong đây, trong ngoặc đơn đầu tiên và dấu ngoặc đơn cuối cùng tương ứng với các đối số của chức năng nhấp chuột. Vì vậy, chúng tôi đang đi qua trong chức năng này, chúng ta có thể sao chép dòng mã này ngay tại đây, và điều đó sẽ làm một điều chính xác. Và bây giờ chúng tôi không có chức năng này fadeTheBox ngẫu nhiên đó là ngồi xung quanh không có lý do rõ ràng. Chức năng được ẩn danh được định nghĩa, nó không có một cái tên. Nó sẽ chỉ thực hiện khi chúng ta nhấn vào nút hộp. Vì vậy, làm mới một lần nữa, một lần nữa, và bạn có thể thấy rằng nó vẫn hoạt động. Và đó là cách bạn tạo ra các sự kiện. 

Có rất nhiều các sự kiện khác nhau mà chúng ta có thể sử dụng. Tôi sẽ quay lại dùng giao diện điều khiển để chỉ cho bạn cách làm việc. Các ID cho mỗi tương ứng với mỗi hộp. Vì vậy, hộp này là nhấp chuột ID, đây là ID chính, và điều này là ID chuột. Một điều nữa là có chức năng hành động này, thay vì gõ nó ra mọi thời gian, Tôi thực sự đã đi trước và chức năng xác định hành động này ở đây. Nó làm điều tương tự như chức năng hideTheBox. Nó được hộp này và hoặc mất dần ra hoặc mất dần nó vào Và đó là lý do tại sao chúng tôi có thể sử dụng nó ở đây. Vì vậy, nếu chúng ta click vào nhấp chuột ID này, chúng tôi muốn làm cho hộp biến mất hoặc xuất hiện trở lại. Đó là điều tương tự như nút mà chúng ta có trong slide cuối cùng. Bây giờ sau khi chúng tôi gọi đó, chúng ta có thể bấm vào đây và hộp sẽ biến mất, sau đó nhấn vào nó một lần nữa và hộp sẽ xuất hiện trở lại. Đó là khá đơn giản. Nhấp đúp chuột vào làm điều tương tự, ngoại trừ nó đòi hỏi một nhấp đúp chuột. Vì vậy, nếu bạn click vào nó một lần và nhấp chuột vào nó một lần nữa không có gì sẽ xảy ra, nhưng nếu bạn kích đúp vào một cách nhanh chóng, nó sẽ biến mất. Nếu bạn nhấp đúp chuột lần nữa, nó sẽ trở lại. Vì vậy, đó là khá đơn giản. Đầu vào bàn phím là loại kỳ lạ, tôi không nghĩ rằng nó thực sự hoạt động trong ví dụ này bởi vì chìa khóa xuống, phím lên và nhấn phím và hành động quan trọng khác kích hoạt không có vấn đề gì bạn yếu tố ràng buộc nó vào. Ví dụ, ngay cả khi tôi bị ràng buộc phím xuống để cơ thể hoặc một cái gì đó khác hoàn toàn, sau đó nó vẫn sẽ kích hoạt không có vấn đề - đó là không cụ thể. Tôi không có được cách nhấp vào đây và nhấn một phím để làm bất cứ điều gì biến mất. Nó sẽ được kích hoạt bất kể những gì yếu tố tôi đang nhập Vì vậy, những điều này không thực sự làm việc trong ví dụ này bởi vì nó không nhận ra tôi như vào đầu vào bàn phím div đầu vào. 

Nhưng nếu bạn nhìn vào các hành động chuột, người đầu tiên được di chuột, và nó có thể làm một số này sử dụng CSS. Nếu bạn sử dụng CSS, bạn có thể tạo ra nó để nếu bạn di chuột qua một cái gì đó, sau đó thay đổi phong cách của mình. Nhưng sử dụng jQuery bạn có thể thay đổi phong cách của những thứ khác. Vì vậy, ví dụ, chúng ta sẽ gọi hành động nếu chúng ta di chuột qua div này. Điều đó có nghĩa nếu chúng ta di chuột qua nó, sau đó hộp sẽ biến mất. Nếu chúng ta di chuyển ra khỏi nó, hộp sẽ xuất hiện trở lại. Nếu chúng ta gọi này và di chuột qua nó, hộp không biến mất, và ngay khi chúng tôi di chuyển đi, nó trở lại. Nếu chúng ta gọi là chức năng di chuột này trên ID chuột, tương ứng với ô này, sau đó nếu chúng ta di chuột qua các hộp, sau đó hộp thực sự sẽ biến mất - nó là sôi nổi ngay bây giờ, nhưng - nếu chúng ta di chuyển ra khỏi nó, nó sẽ xuất hiện trở lại. Ngay bây giờ nó trở về trước đối với một số lý do. Chuột nhập và chức năng di chuyển chuột là hơi tương tự, nhưng hơi khác nhau. Chuột vào chỉ kích hoạt khi con chuột vào hộp, như mong đợi. Vì vậy, nếu bạn di chuyển vào đó, nó sẽ biến mất. Nhưng nó sẽ không xuất hiện trở lại khi bạn di chuyển đi, bạn sẽ phải di chuyển trở lại vào nó để nó quay trở lại. Ngoài ra còn có chức năng di chuyển chuột, mà sẽ kích hoạt bất cứ khi nào con chuột thậm chí còn hiện diện trong hộp. Vì vậy, nó sẽ chỉ tiếp tục đi, mờ dần trong và ngoài. Và nó thực sự đăng nhập - nó có vẻ như nó chỉ mờ dần trong và ngoài, nhưng nó thực sự đăng nhập hành động nhiều hơn này, vì vậy khi bạn di chuyển ra nó sẽ chỉ tiếp tục đi bởi vì nó đăng nhập như một ngàn người trong số họ. Có lẽ không phải là một ngàn. Có lẽ năm. Nó ghi nhiều hơn thế. Vấn đề là, tất cả các hành động chuột, có rất nhiều người trong số họ. Bạn có thể đọc lên trên những người khác, nhưng họ là tất cả hơi khác nhau, và bạn có thể chọn bất cứ một bạn cần cho bất cứ mục đích cụ thể bạn đang cố gắng để làm. 

Điều tiếp theo tôi sẽ nói về là AJAX. AJAX, tôi biết chúng tôi đã không bao gồm JavaScript trong như chiều sâu nhiều năm nay, vì vậy tôi chỉ sẽ nói về AJAX nói chung trong một phút. AJAX là viết tắt của Asynchronous JavaScript và XML. Đó là cơ bản, ví dụ, khi bạn đang ở trên Facebook và nó đẩy bạn một thông báo, đó là bởi vì AJAX đang chạy trên trình duyệt web của bạn. Mỗi vài giây trình duyệt web của bạn thực sự đi đến các máy chủ của Facebook, yêu cầu họ, làm bạn có bất cứ điều gì mới cho tôi, và sau đó nói lại cho bạn. Điều này cho phép bạn gửi yêu cầu tới một máy chủ mà không cần phải tải trang. Vì vậy, thông thường, nếu bạn chỉ sử dụng PHP và cơ sở dữ liệu, bạn phải làm mới trang trước khi bạn có thể nhận được thông tin mới từ máy chủ. Nhưng sử dụng AJAX, bạn có thể kéo cho rằng thông tin mới liên tục, hoặc kéo cho nó khi bạn bấm vào một nút hoặc bất cứ điều gì như thế. Vì vậy, điều này cho phép chúng tôi để gửi yêu cầu mà không cần tải lại trang, và chúng ta có thể sử dụng GET hoặc POST yêu cầu. 

GET yêu cầu, ví dụ, nếu bạn để Google.com và làm q = thử nghiệm. Đó là đem lại cho họ một thử nghiệm truy vấn. Và đó là một yêu cầu GET vì nó đi qua trong những tham số vào URL của chính nó. Một yêu cầu POST là, nếu như bạn gửi cho họ qua đường bưu điện. Nó giống như bạn đặt nó trong một bức thư và gửi nó đi với họ, nhưng họ không thực sự xem nội dung. Họ không thể nhìn thấy trong các URL. Bạn có thể không trực tiếp gõ vào, bạn phải gửi nó gần như bí mật. Đó là trong một bài. Nhưng sử dụng jQuery, bạn có thể làm GET và POST yêu cầu nhiều hơn nữa dễ dàng hơn bạn bình thường có thể sử dụng chỉ đơn giản JavaScript. Bạn có thể truy vấn API sử dụng GET yêu cầu, và bạn cũng có thể kiểm tra thông tin đăng nhập. Trên trang tiếp theo, tôi tạo ra này, mà hỏi: "Có gì cho bữa trưa?" bằng cách sử dụng thực phẩm API Harvard, vì vậy hãy kéo mà lên. Đây chỉ là một ví dụ về cách bạn có thể sử dụng jQuery để làm một yêu cầu GET đến một API và nhận được thông tin trở lại từ nó. Vì vậy, chúng tôi muốn xem thực đơn cho ngày hôm nay, và chúng tôi muốn xem những gì cho bữa ăn trưa. Đây là URL để tạo ra một yêu cầu GET trong jQuery. bạn sử dụng $. có chức năng. Đối số đầu tiên là URL, vì vậy chính xác những gì bạn đang truy vấn. Sau đó, các số tiếp theo là một chức năng thực thi khi yêu cầu GET hoàn tất. Vì vậy, bạn gửi ra một số yêu cầu đến máy chủ, chờ cho nó quay trở lại. Khi nó trở lại, bạn sẽ có một số hành động với các dữ liệu đó từ máy chủ. Chúng ta hãy đi trước và mã này là tốt. Tôi không mã này, hoặc, trên mục đích. Đây là TODO. Trước hết, chúng ta hãy sử dụng các ràng buộc sự kiện để khi nút này được nhấn, chúng ta gửi đi một yêu cầu GET. Và khi đó yêu cầu GET trở lại với một số dữ liệu, chúng ta sẽ viết nó vào bữa ăn này thông tin ID div. Trước hết, chúng ta hãy chọn nút ID thực phẩm. Khi nhấp vào, chúng tôi muốn nó làm điều gì đó. Chúng ta hãy làm cho nó một fuction vô danh, như trước đây. Có thể bọc những dấu ngoặc nhọn, và khi nút này được nhấn, chúng tôi muốn gửi một yêu cầu GET để kiểm tra những gì cho bữa ăn trưa. Để làm điều đó, chúng ta có thể chỉ cần gõ vào $. Nhận được. Đây là một chức năng jQuery, bằng cách sử dụng ký hiệu đô la. Phải mất một vài đối số. Người đầu tiên là địa chỉ URL, điều thứ hai là chức năng gọi lại, chức năng đó được gọi là khi yêu cầu thực sự trả về. Chúng ta hãy xây dựng URL đầu tiên. Chúng ta có thể lấy nó từ API mà David đã viết lên. Đi ở đây, chúng ta có thể thấy rằng nó food.cs50.net/api/1.3/menus, và sau đó bạn chỉ cần vượt qua trong tên của các thông số mà bạn muốn. Vì vậy, tham số 1 là giá trị 1. Có vẻ như ngày thường, ngày bắt đầu, mặc định là hôm nay nếu bạn không nhập bất cứ điều gì, và ngày kết thúc cũng mặc định đến ngày hôm nay nếu bạn không nhập bất cứ điều gì. Đó là những gì chúng ta muốn. Chúng tôi muốn chỉ nhận được các thông tin cho ngày hôm nay. 

Chúng tôi muốn định dạng được trong JSON. Đó chỉ là tùy ý, bạn có thể sử dụng bất kỳ hình thức mà bạn muốn. Bạn có thể sử dụng CSV, nhưng JSON là JavaScript Object Notation. Nó rất dễ dàng cho JavaScript để hiểu những gì nó có nghĩa là, và chúng ta có thể in ra một cách dễ dàng như vậy. Vì vậy, hãy yêu cầu nó trong JSON, và yêu cầu chúng ta hãy ăn trưa. Vì vậy, bữa ăn = ăn trưa. Chỉ để viết lên URL đó, chúng tôi quay trở lại đây. Có menu. Tham số đầu tiên là đầu ra = JSON bởi vì đó là những gì chúng ta muốn, và bạn tách các thông số với một "và". Tham số thứ hai là - tôi không nhớ. Bữa ăn. Và chúng tôi muốn bữa ăn = ăn trưa. Bạn có thể kiểm tra URL này bằng cách gõ vào trình duyệt của bạn và đi đến đó. Nó sẽ cung cấp cho bạn một số đầu ra. Nó chỉ là một loạt các công cụ đó để ăn trưa. Nó ở định dạng xấu xí này. Chúng tôi muốn in nó vào trang của chúng tôi trong một định dạng tốt hơn. Vì vậy, các URL là chính xác, chúng ta chỉ cần viết một hàm gọi lại khi yêu cầu thành công. Chức năng này sẽ thực sự có một cuộc tranh cãi. Nó sẽ được dữ liệu. Dữ liệu là những gì trở lại từ yêu cầu GET sau khi yêu cầu GET được thực hiện. Chúng ta có thể làm các dấu ngoặc nhọn, ở đây chúng tôi viết các chức năng ẩn danh , được thực hiện bằng cách sử dụng dữ liệu khi chúng tôi nhận được thông tin trở lại. Vì vậy, dữ liệu, khi chúng tôi gõ vào URL này, đây là những gì các dữ liệu sẽ như thế nào. Nó sẽ là chuỗi này rất lớn. Nhưng điều tốt là, JavaScript có thể phân tích nó bằng cách sử dụng chức năng JSON.parse. Vì vậy, hãy tạo ra một biến mới gọi là dữ liệu phân tích cú pháp. Và dữ liệu phân tích cú pháp là một mảng của các đối tượng. Mỗi đối tượng có chứa các thông tin như - tốt, chúng ta hãy có một cái nhìn. Nó có một ngày, một bữa ăn, loại, công thức, tất cả những thứ khác này. Vì vậy, chúng ta hãy chỉ in ra tên cho mỗi một. Hãy lặp qua mảng toàn bộ công cụ mà chúng tôi nhận lại từ nó, và chỉ in ra mỗi người - in ra tên của mỗi người. Đây là một vòng lặp. 

JavaScript có cú pháp hữu ích này, nơi bạn có thể tạo ra một biến và vòng lặp trên một mảng, và var i chỉ là lặp, vì vậy thay vì phải làm var i = 0, tôi đã được nhỏ hơn độ dài, i + +, bạn chỉ có thể làm var i trong dữ liệu phân tích cú pháp. Trong ví dụ này, dữ liệu phân tích cú pháp (i) sẽ tương ứng với các yếu tố hiện của mảng, đối tượng thực tế. Và chúng tôi muốn có được tên ra khỏi nó. Vì vậy, chúng ta hãy chỉ làm tên. Và điều cuối cùng là, chúng ta sẽ có một số jQuery một lần nữa. Thực sự thêm nó vào div, bữa ăn này thông tin div đó là có hàng. Vì vậy, hãy chọn đó. Chúng tôi sẽ sử dụng jQuery và chọn bữa ăn thông tin ID div, hoặc thông tin ID bữa ăn, xin lỗi. Chúng tôi muốn nối thêm vào này. Nếu chúng tôi đã làm thử nghiệm, ví dụ, nó sẽ chỉ ghi đè lên nó mỗi lần duy nhất. Vì vậy, chúng tôi chỉ có thể nối thêm này. Phần tử hiện hành trong mảng, chúng ta sẽ có được tên ra khỏi nó, và chúng tôi sẽ thêm nó vào cuối bữa ăn thông tin ID div. Và sau đó chỉ để làm cho nó trông sạch hơn, chúng tôi cũng sẽ nối thêm một ngắt dòng vì vậy nó không phải tất cả trên cùng một dòng. Vì vậy, nếu mọi việc suôn sẻ, mà sẽ được tốt để - đầu tiên của tất cả, bất cứ khi nào nút này được nhấn, nó sẽ gửi đi một yêu cầu GET URL này. Khi dữ liệu trở lại từ nó, nó sẽ phân tích nó, biến nó thành JSON, vòng lặp trên toàn bộ mảng đại diện cho dữ liệu, và sau đó thêm tên và ngắt dòng để tất cả các dòng trong bữa ăn này thông tin ID mà trước đây có sản phẩm nào. Quay trở lại với trang này, chúng tôi sẽ làm mới, nhấp chuột, tìm ra - nó không hoạt động. Đó là không may. Và đây là nơi gỡ lỗi có in Index.html, dòng 1. Cái đó thật hấp dân. Được rồi, tốt, chứ không phải dành nhiều thời gian làm điều này, tôi chỉ cần đi để kéo lên tập tin thực hiện mà tôi có, đó là phiên bản hoàn thành. Tôi không chắc chắn những gì là sự khác biệt, nhưng chúng tôi chỉ có thể mở này lên thay thế. Và chúng tôi đi đến AJAX, và điều này sẽ làm việc một cách chính xác. Đó là những gì đã được cho ăn trưa ngày hôm nay, không theo thứ tự đặc biệt, với dấu ngoặc kép xung quanh nó, vì vậy nó không phải là đẹp nhất. Nhưng, rõ ràng, nếu bạn đã làm điều này cho một dự án cuối cùng, bạn sẽ làm cho nó trông tốt hơn. Nhưng đó chỉ là một ví dụ đơn giản về cách bạn làm theo yêu cầu GET. Và nếu chúng ta nhìn vào các mã thực tế, tôi đoán, tôi khá chắc chắn nó vẫn còn khá nhiều như nhau. Ồ, tôi quên để chuyển đổi nó thành một chuỗi, đó là nó. Không, nó vẫn không làm việc. Không phân biệt, đây là đoạn code hoàn thành thực tế cho điều này nên như thế nào, và nó làm điều tương tự như những gì tôi vừa thực hiện. Khi bạn nhấn chuột vào nút, nó sử dụng GET JSON để tự động phân tích dữ liệu. Phải mất dữ liệu trở lại từ nó và vòng qua toàn bộ mảng và in ra - bất cứ điều gì cho bữa ăn trưa ngày hôm nay, tên của nó, và gắn thêm một ngắt dòng sau mỗi dòng. Đó là cách bạn sử dụng chức năng GET. 

Bạn cũng có thể sử dụng POST, mà tôi không có thời gian để viết lên một ví dụ cho nó, nhưng chúng ta có thể xem xét các tài liệu hướng dẫn. Nếu bạn nhìn vào jquery.post, bạn có thể thấy nó gần như giống nhau. Bạn có một URL, nhưng thay vì đi qua các thông số sử dụng - chỉ cần đặt chúng trong chuỗi là URL chính nó, bạn phải vượt qua trong biến dữ liệu này mà về cơ bản là một mảng, một từ điển mà các bản đồ các thông số giá trị. Bạn vượt qua rằng trong, và gửi chúng trong việc sử dụng một POST. Và một khi bạn đã có, sau đó bạn có thể có một chức năng thành công để thực thi khi các dữ liệu trở lại. Nếu không, nó chính xác như nhau. Vì vậy, sử dụng POST, bạn có thể muốn sử dụng POST, ví dụ, nếu bạn có một hình thức đầu vào bạn cho mọi người mật khẩu nhập vào nó, và gửi những mật khẩu ra kịch bản back-end của bạn, kiểm tra trong cơ sở dữ liệu cho dù đó là người sử dụng là hợp lệ hay không. Bạn có thể làm điều đó tất cả sử dụng jQuery thay vì phải làm mới trang ở tất cả. Đó là cách tôi thực hiện trong các blog mà tôi đã được nói đến. Nếu chúng ta đi đến cổng cuối và đăng xuất, đăng xuất, Đăng xuất không hoạt động. Vâng, hãy để tôi chỉ cần mở nó lên trong một cửa sổ mới. Ở đây có một mật khẩu, và tôi sẽ gõ vào một cái gì đó ngẫu nhiên. Nó không hoạt động, nhưng bạn có thể thấy rằng chúng tôi đã không thực sự phải làm mới trang ở tất cả. Mã, nếu bạn muốn nhìn vào nó, là tất cả đều có trong đây. Vì vậy, các mã tôi đã viết năm ngoái đôi khi. Như bạn có thể thấy ở đây, chúng tôi đang gửi một yêu cầu POST. Tôi có một tập tin gọi là login.php trong kết thúc trở lại, trong đó kiểm tra nếu mật khẩu là hợp lệ. Các thông số trong chúng tôi vượt qua được mật khẩu, ánh xạ tới đầu vào đó là trong hộp đầu vào hiện nay. Và khi các dữ liệu trở lại, chúng tôi kiểm tra. Nếu dữ liệu là sai, thì chúng ta nói mật khẩu không chính xác, trượt xuống, và chỉ cần làm cho nó biến mất sau đó. Nếu không, chúng ta nạp các trang quản trị. Và điều này đã được tất cả thực hiện sử dụng JSON. Trong này nhiều dòng mã, bạn chỉ có thể truyền dữ liệu để kết thúc trở lại, kiểm tra xem nó chính xác, kiểm tra xem bạn đăng nhập một cách chính xác, và thực sự đáp ứng với nó, chuyển hướng người đến đúng trang hoặc không cho phép họ đăng nhập vào và nói với họ rằng họ đã có một mật khẩu không chính xác. Vì vậy, đó là một ví dụ về cách bạn có thể sử dụng jQuery POST để gửi một yêu cầu POST để kết thúc trở lại của bạn, kiểm tra xem một người nào đó đã đăng nhập một cách chính xác. 

Được rồi, vì vậy đó là tất cả các ví dụ tôi đã có, và tất cả những thứ tôi muốn để trang trải. Đó là những điều quan trọng mà jQuery cho phép bạn làm như sau: chọn các yếu tố, sửa đổi chúng bằng thao tác DOM, bạn có thể thêm hiệu ứng, kích hoạt những thứ trên các sự kiện, và cũng có thể làm các yêu cầu AJAX rất liền mạch và dễ dàng. Vì vậy, cảm ơn các bạn đã đến hoặc xem, và nếu bạn có bất kỳ câu hỏi, chỉ cho tôi biết. Yeah? [Sinh viên] Trở lại khi bạn thấy, bạn có JSON sau khi yêu cầu POST trong dấu ngoặc kép, và tôi đã chỉ tự hỏi những gì mà đã làm. >> Vâng, tôi nhìn thấy. Câu hỏi đặt ra là, trong ví dụ này tôi chỉ cho thấy, có JSON từ trong dấu ngoặc kép quanh - Tôi sẽ chỉ cần kéo nó lên một lần nữa - xung quanh các chức năng POST. Tôi chỉ cần kéo nó lên để hiển thị. Vì vậy, đây là yêu cầu POST này, và có JSON này trong dấu ngoặc kép. Mà chỉ xác định những gì chúng ta đang mong đợi đầu ra được. Vì vậy, nếu chúng tôi vượt qua trong JSON như kiểu dữ liệu dự kiến, nó không phải là một yêu cầu, nhưng nếu chúng ta vượt qua nó trong, sau đó dữ liệu sẽ tự động được phân tích như là JSON. Vì vậy, chúng tôi không cần phải gọi hàm phân tích cú pháp JSON trên nó, nó sẽ chỉ xảy ra tự động. Và nếu bạn có một cái nhìn tại các tài liệu hướng dẫn cho POST, có dữ liệu này kiểu biến, kiểu dữ liệu sẽ từ máy chủ. Nó mặc định là một đoán thông minh có thể là sai, do đó, bạn có thể để trống, nhưng nó chỉ là loại dữ liệu trong mã hóa mà bạn đang sử dụng, cho dù đó là JSON hay XML hay cái gì khác. 

Bất kỳ câu hỏi khác? Được rồi. Nếu bạn có bất kỳ câu hỏi khác, cảm thấy tự do để gửi email cho tôi tại vshekhawat@college.harvard.edu, và các slide và mã nên có sẵn trực tuyến khá sớm. Chúc may mắn với các dự án cuối cùng của bạn, hy vọng bạn sử dụng jQuery. [CS50.TV]