• 1. (本页无文本内容)
  • 2. What is jQuery?
  • 3. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. It’s Light weight, CSS3 Compliant, Cross-Browser.
  • 4. Versions availablehttps://jquery.com/download/ jQuery 1.x – Supports IE 6,7 & 8. jQuery 2.x - does not support Internet Explorer 6, 7, or 8. Please note : The jQuery 1.x line had major changes as of jQuery 1.9.0. We strongly recommend that you also use the jQuery Migrate plugin if you are upgrading from pre-1.9 versions of jQuery or need to use plugins that haven't yet been updated.
  • 5. Using jQuery with a CDN To use the jQuery CDN, just reference the file directly from http://code.jquery.com in the script tag: Other CDNs The following CDNs also host compressed and uncompressed versions of jQuery releases. Google CDN Microsoft CDN CDNJS CDN jsDelivr CDN
  • 6. Only one function! • Absolutely everything starts with a call to the jQuery() function. jQuery('#nav') jQuery('div#intro h2') jQuery('#nav li.current a') • Since it’s called so often, the $ variable is set up as an alias to jQuery • If you’re also using another library you can revert to the previous $ function with jQuery.noConflict(); var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional. $j(document).ready(function() { $j( "div" ).hide(); });
  • 7. jQuery $(document).ready()The document ready event signals that the DOM of the page is now ready, so you can manipulate it without worrying that parts of the DOM has not yet been created. jQuery Document Ready Example Here is a jQuery document ready listener example: $(document).ready(function() { //DOM manipulation code });
  • 8. CSS 2 and 3 selectors a[rel] a[rel="friend"] a[href^="http://"] ul#nav > li li#current ~ li (li siblings that follow #current) li:first-child, li:last-child, li:nth-child(3)
  • 9. Magic selectors div:first, h3:last :header :hidden, :visible :animated :input, :text, :password, :radio, :submit... div:contains(Hello)
  • 10. jQuery collections $('div.section') returns a jQuery collection You can call methods on it: $('div.section').size() = no. of matched elements $('div.section').each(function(i) { console.log("Item " + i + " is ", this); });
  • 11. JQuery Methods• Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass() •Traversing find(), is(), prevAll(), next(), hasClass() •Events On(), bind(), trigger(), unbind(), live(), click() •Ajax get(), getJSON(), post(), ajax(), load() •Effects show(), fadeOut(), toggle(), animate()
  • 12. HTML futzing $('span#msg').text('The thing was updated!'); $('div#intro').html('Look, HTML'); Attribute futzing $('a.nav').attr('href', 'http://flickr.com/'); $('a.nav').attr({ 'href': 'http://flickr.com/', 'id': 'flickr' }); $('#intro').removeAttr('id');
  • 13. CSS futzing $('#intro').addClass('highlighted'); $('#intro').removeClass('highlighted'); $('#intro').toggleClass('highlighted'); $('p').css({'font-size': '20px', color: 'red'}); Grabbing values Some methods return results from the first matched element var height = $('div#intro').height(); var src = $('img.photo').attr('src'); var lastP = $('p:last').html() var hasFoo = $('p').hasClass('foo'); var email = $('input#email').val();
  • 14. Chaining Most jQuery methods return another jQuery object - usually one representing the same collection. This means you can chain methods together: $('div.section').hide().addClass('gone'); Ajax jQuery has excellent support for Ajax $('div#intro').load('/some/file.html'); More advanced methods include: $.get(url, params, callback) $.post(url, params, callback) $.getJSON(url, params, callback) $.getScript(url, callback)
  • 15. GET vs POST in AJAX callsUnless you are sending sensitive data to the server or calling scripts which are processing data on the server it is more common to use GET for AJAX calls. This is because when using XMLHttpRequest browsers implement POST as a two-step process (sending the headers first and then the data). This means that GET requests are more responsive – something you need in AJAX environments! 
  • 16. Changes to AjaxAjax events should be attached to document As of jQuery 1.9, the global Ajax events (ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, and ajaxSuccess) are only triggered on the document element. Change the program to listen for the Ajax events on the document. For example, if the code currently looks like this: $("#status").ajaxStart(function(){ $(this).text("Ajax started"); }); Change it to this: $(document).ajaxStart(function(){ $("#status").text("Ajax started"); });
  • 17. jQuery is extensible through plugins, which can add new methods to the jQuery object • Form: better form manipulation • UI: drag and drop and widgets • $('img[@src$=.png]').ifixpng() • ... dozens more jQuery.fn.hideLinks = function() { this.find('a[href]').hide(); return this; } $('p').hideLinks();
  • 18. (本页无文本内容)
  • 19. (本页无文本内容)
  • 20. Q&A
  • 21. Thank you All…