第一課.

ajax：$.ajax(url[, settings])

?

練習代碼：

$(document).ready(function() {$("#tour").on("click", "button", function() {$.ajax('/photos.html', {success: function(response) {$('.photos').html(response).fadeIn();}});}); }); <div id="tour" data-location="london"><button>Get Photos</button><ul class="photos"></ul> </div>

ajax 調用簡寫：$.get(url, success)

$(document).ready(function() {$("#tour").on("click", "button", function() {$.get('/photos.html', function(response) {$('.photos').html(response).fadeIn();});}); });

ajax?傳遞參數：直接在 url 中拼接或使用 data 對象傳遞，data: { "confNum": 1234 }

練習代碼：獲取網頁元素中的?data 屬性值作為 ajax 參數值傳遞

$(document).ready(function() {$("#tour").on("click", "button", function() {$.ajax('/photos.html', {success: function(response) {$('.photos').html(response).fadeIn();},data: { "location": $("#tour").data("location")}});}); }); <div id="tour" data-location="london"><button>Get Photos</button><ul class="photos"></ul> </div>

第二課.

ajax?異常處理：error: function(request, errorType, errorMessage) { }

?

ajax?超時設定：timeout: 3000

?

ajax?調用前（beforeSend: function() {}）完成后（complete: function() {}）執行方法：

練習代碼：

$(document).ready(function() {var el = $("#tour");el.on("click", "button", function() {$.ajax('/photos.html', {data: {location: el.data('location')},success: function(response) {$('.photos').html(response).fadeIn();},error: function(request, errorType, errorMessage) {//var errmsg = $("<li>Error: " + errorType + " with message: " + errorMessage + "</li>");//$('.photos').append(errmsg);//alert('Error: ' + errorType + ' with message: ' + errorMessage);$('.photos').html('<li>There was a problem fetching the latest photos. Please try again.</li>');},timeout: 3000,beforeSend: function() {$("#tour").addClass("is-fetching")},complete: function() {$("#tour").removeClass("is-fetching")}});}); }); <div id="tour" data-location="london"><button>Get Photos</button><ul class="photos"></ul> </div>

ajax 事件處理：處理 ajax 完成新增的標簽元素的事件

?

練習代碼：

$(document).ready(function() {function showPhotos() {$(this).find('span').slideToggle();}$('.photos').on('mouseenter', 'li', showPhotos).on('mouseleave', 'li', showPhotos);var el = $("#tour");el.on("click", "button", function() {$.ajax('/photos.html', {data: {location: el.data('location')},success: function(response) {$('.photos').html(response).fadeIn();},error: function() {$('.photos').html('<li>There was a problem fetching the latest photos. Please try again.</li>');},timeout: 3000,beforeSend: function() {$('#tour').addClass('is-fetching');},complete: function() {$('#tour').removeClass('is-fetching');}});}); });

HTML、AJAX Result

<div id="tour" data-location="london"><button>Get Photos</button><ul class="photos"></ul> </div> <li><img src="/assets/photos/paris1.jpg"><span style="display: none;">Arc de Triomphe</span> </li> <li><img src="/assets/photos/paris2.jpg"><span style="display: none;">The Eiffel Tower</span> </li> <li><img src="/assets/photos/london.jpg"><span style="display: none;">London</span> </li>

第三課.?

JavaScript Objects：

練習代碼：

重構前：

$(document).ready(function() {$("#tour").on("click", "button", function() {$.ajax('/photos.html', {data: {location: $("#tour").data('location')},success: function(response) {$('.photos').html(response).fadeIn();},error: function() {$('.photos').html('<li>There was a problem fetching the latest photos. Please try again.</li>');},timeout: 3000,beforeSend: function() {$('#tour').addClass('is-fetching');},complete: function() {$('#tour').removeClass('is-fetching');}});}); });

重構為 JavaScript 對象 tour 后：

var tour = {init: function() {$("#tour").on("click", "button", this.fetchPhotos);},fetchPhotos: function() {$.ajax('/photos.html', {data: {location: $("#tour").data('location')},success: function(response) {$('.photos').html(response).fadeIn();},error: function() {$('.photos').html('<li>There was a problem fetching the latest photos. Please try again.</li>');},timeout: 3000,beforeSend: function() {$('#tour').addClass('is-fetching');},complete: function() {$('#tour').removeClass('is-fetching');}})} } $(document).ready(function() { tour.init(); });

第四課.

JavaScript Functions：重點理解 this 變量的作用域

ajax 回調函數中應用調用函數變量?this 時， 需要首先在 ajax 的 context 參數中傳入調用函數的 this 變量：

練習代碼：

function Tour(el) {var tour = this;this.el = el;this.photos = this.el.find('.photos');this.fetchPhotos = function() { $.ajax('/photos.html', {data: {location: tour.el.data('location')},context: tour,success: function(response) {this.photos.html(response).fadeIn();},error: function() {this.photos.html('<li>There was a problem fetching the latest photos. Please try again.</li>');},timeout: 3000,beforeSend: function() {this.el.addClass('is-fetching');},complete: function() {this.el.removeClass('is-fetching');}});}this.el.on('click', 'button', this.fetchPhotos); }$(document).ready(function() { var paris = new Tour($('#paris'));var london = new Tour($('#london')); }); <div id="paris" data-location="paris"><button>Get Paris Photos</button><ul class="photos"></ul> </div><div id="london" data-location="london"><button>Get London Photos</button><ul class="photos"></ul> </div>

第五課.

Ajax Forms

$('form').on('submit', function(event) {}); ?//表單提交事件

event.preventDefault(); //阻止瀏覽器的默認表單提交行為

type: 'POST' // POST 方式提交

data:{ "destination": $('#destination').val(),?"quantity": $('#quantity').val() } //獲取表單中的元素值提交數據

data: $('form').serialize() //通過表單序列化，提交整張表單中的數據

練習代碼：

$(document).ready(function() {$('form').on('submit', function(event) {event.preventDefault();$.ajax('/book', {type: 'POST',data: $('form').serialize(),success: function(response){$('.tour').html(response);}});}); }); <div class="tour" data-daily-price="357"><h2>Paris, France Tour</h2><p>$<span id="total">2,499</span> for <span id="nights-count">7</span> Nights</p><form action="/book" method="POST"><p><label for="nights">Number of Nights</label></p><p><input type="number" name="nights" id="nights" value="7"></p><input type="submit" value="book"></form> </div>

第六課.

Ajax with JSON

dataType: 'json' // 通知服務器提交的數據類型為 json

contentType: 'application/json' //要求服務器返回的數據類型為 json

attr(<attribute>) //獲取 html 對象的屬性

attr(<attribute>, <value>) //給 html 對象的屬性賦值

?

?

練習代碼：

$(document).ready(function() {$('form').on('submit', function(event) {event.preventDefault();$.ajax($('form').attr('action'), {type: $('form').attr('method'),data: $('form').serialize(),dataType: 'json',success: function(response) {$('.tour').html('<p></p>').find('p').append('Trip to ' + response.description).append(' at $' + response.price).append(' for ' + response.nights + ' nights').append('. Confirmation: ' + response.confirmation);}});}); }); <div class="tour" data-daily-price="357"><h2>Paris, France Tour</h2><p>$<span id="total">2,499</span> for <span id="nights-count">7</span> Nights</p><form action="/book" method="POST"><p><label for="nights">Number of Nights</label></p><p><input type="number" name="nights" id="nights" value="7"></p><input type="submit" value="book"></form> </div>

第七課.

Utility Methods

$.each(collection, function(<index>, <object>) {}) //iterate through the array

練習代碼：

$('button').on('click', function() {$.ajax('/cities/deals', {contentType: 'application/json',dataType: 'json',success: function(result) {$.each(result, function(index, dealItem) {var dealElement = $('.deal-' + index);dealElement.find('.name').html(dealItem.name);dealElement.find('.price').html(dealItem.price);});}}); });

$.getJSON(url, success); //result will be an array of?avaScript Objects

練習代碼：

$('button').on('click', function() {$.getJSON('/cities/deals', function(result) {$.each(result, function(index, dealItem) {var dealElement = $('.deal-' + index);dealElement.find('.name').html(dealItem.name);dealElement.find('.price').html(dealItem.price);});}); });

$.map(collection, function(<item>, <index>){});

練習代碼：

$('.update-available-flights').on('click', function() {$.getJSON('/flights/late', function(result) {var flightElements = $.map(result, function(flightItem, index){var liItem = $('<li></li>');liItem.append('<p>'+flightItem.flightNumber+'</p>');liItem.append('<p>'+flightItem.time+'</p>');return liItem;});$('.flight-times').html(flightElements);}); });

$.each vs $.map

?

.detach() //.detach() removes an element from the DOM, preserving all data and events.?

detach() 方法移除被選元素，包括所有文本和子節點。

這個方法會保留 jQuery 對象中的匹配的元素，因而可以在將來再使用這些匹配的元素。

detach() 會保留所有綁定的事件、附加的數據，這一點與 remove() 不同。

練習代碼：

$('.update-available-flights').on('click', function() {$.getJSON('/flights/late', function(result) {var flightElements = $.map(result, function(flightItem, index){var flightEl = $('<li>'+flightItem.flightNumber+'-'+flightItem.time+'</li>');return flightEl;});$('.flight-times').detach().html(flightElements).appendTo('.flights');}); });

第八課.

Managing Events：同一個元素同一個事件掛接多個事件處理程序，按順序執行

off(<event name>)?//停止事件的監聽，同時停止當前元素上指定事件的所有監聽，如：$('button').off('click');

Namespacing Events：給事件監聽程序命名，用于同一個元素，相同事件多個監聽程序時的區分和禁用、還原等操作

trigger(<event name>)：觸發被選元素的指定事件類型

?

create a custom event：創建自定義事件后，可以通過代碼觸發的方式同時觸發多種頁面元素的監聽的相同的自定義事件。

$(<dom element>).on("<event>.<namespace>", <method>)

?

轉載于:https://www.cnblogs.com/cnshen/p/3944434.html

總結

以上是生活随笔為你收集整理的jQuery 学习笔记(jQuery: The Return Flight)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。