jquery memo 6

http://blog.ericsk.org/archives/838
http://blog.ericsk.org/archives/839

append html
$('dictionary').load('a.html')


retrieving a javascript object
global jquery function

//empty each entry['term']  $('#dictionary').append($(html));
$.getJSON('b.json', function(data) {
 $('#dictionary').empty();

 $.each(data, function(entryIndex, entry) {
    var html = '<div class="entry">';
    html += '<h3 class="term">' + entry['term'] + '</h3>';
    html += '<div class="part">' + entry['part'] + '</div>';
    html += '<div class="definition">';
    html += entry['definition'];

    if (entry['quote']) {
       html += '<div class="quote">';

      $.each(entry['quote'], function(lineIndex, line) {
          html += '<div class="quote-line">' + line + '</div>';
      });

    if (entry['author']) {
        html += '<div class="quote-author">' + entry['author'] +'</div>';
    }

    html += '</div>';
   }
   html += '</div>';
   html += '</div>';

   $('#dictionary').append($(html));
});
});

executing a script
$.getScript('c.js')

Loading an XML Document

//find $entry.attr('term') length
$.get('d.xml', function(data) {
 $('#dictionary').empty();

 $(data).find('entry').each(function() {
    var $entry = $(this);
    var html = '<div class="entry">';
    html += '<h3 class="term">' + $entry.attr('term') + '</h3>';
    html += '<div class="part">' + $entry.attr('part') + '</div>';
    html += '<div class="definition">'
    html += $entry.find('definition').text();

    var $quote = $entry.find('quote');

    if ($quote.length) {
       html += '<div class="quote">';
       $quote.find('line').each(function() {
       html += '<div class="quote-line">' + $(this).text() +'</ div>';
   });

   if ($quote.attr('author')) {
       html += '<div class="quote-author">' + $quote.attr('author') + '</div>';
   }

   html += '</div>';
   }

   html += '</div>';
   html += '</div>';

   $('#dictionary').append($(html));
});
});

也支援XPath
$(data).find('entry[quote[@author]]').each(function() {


Performing a GET Request
$.get('e.php', {'term': $(this).text()}, function(data) {
   $('#dictionary').html(data);
});
return false;

Performing a POST Request
$.post('e.php', {'term': $(this).text()}, function(data) {
   $('#dictionary').html(data);
});

和下面一樣
$('#dictionary').load('e.php', {'term': $(this).text()});
return false;
return false;

Serializing a Form
$('#dictionary').load('f.php', {'term': $('input[@name="term"]').val()});
return false

和下面一樣
//serialize
$.get('f.php', $(this).find('input').serialize(), function(data)
{
  $('#dictionary').html(data);
});
return false;

Keeping an Eye on the Request
ajaxStart ajaxStop

$(document).ready(function() {
   $('#loading').ajaxStart(function() {
       $(this).show();
   }).ajaxStop(function() {
       $(this).hide();
   });
});

//利用callback function
$('#dictionary').hide().load('a.html', function() {
  $(this).fadeIn();
});

Ajax and Events
下面這個會有event bubbling的問題

$(document).ready(function() {
   var bindBehaviors = function() {
       $('h3').click(function() {
           $(this).toggleClass('highlighted');
       });
   };

   bindBehaviors();
   $('#letter-a .button').click(function() {
       $('#dictionary').hide().load('a.html', function() {
           bindBehaviors();
           $(this).fadeIn();
       });
   });
});

利用scope bind住第一次呼叫的scope 這邊是document

//scope this
$(document).ready(function() {
   var bindBehaviors = function(scope) {
       $('h3', scope).click(function() {
           $(this).toggleClass('highlighted');
       });
   };

   bindBehaviors(this);

   $('#letter-a .button').click(function() {
       $('#dictionary').hide().load('a.html', function() {
           bindBehaviors(this);
           $(this).fadeIn();
       });
   });
});

直接把event bind在 body上來解決這個問題
$('body').click(function(event) {
  if ($(event.target).is('h3')) {
     $(event.target).toggleClass('highlighted');
  }
});