Jquery

  • 1,308 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,308
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
30
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. The jQuery JavaScript Library Hamid Zarrabi-Zadeh Web Programming – Fall 2013
  • 2. 2 Outline • Introduction • Using jQuery • DOM Manipulation • jQuery Effects • DOM Tree Traversal • jQuery Utilities
  • 3. 3 What is jQuery? • A light-weight JavaScript library designed to simplify writing JavaScript code • The most popular library in use today, used by over 65% of the 10,000 most visited websites • Major alternative libraries include  Prototype  MooTools  YUI  Ext JS
  • 4. 4 jQuery Features • jQuery Main Functionalities  DOM Manipulation  Event Handling  Effects  AJAX  Utilities  Lots of plug-ins
  • 5. 5 jQuery Pros and Cons • jQuery Pros  write less, do more  multi-browser support  light-weight  fast and optimized • jQuery Cons  load overhead
  • 6. Using jQuery
  • 7. 7 Including jQuery • To include jQuery, just load it into your page <script src="jquery.js"></script> • For a faster load, use minified and gzipped version, from a content delivery network <script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.10.2/jquery.min.js"></script>
  • 8. 8 Usage Style • With jQuery, we typically find (query) elements and manipulate them • Main usage style:  $(selector).action(); • Examples $('p').hide(); $(document).ready(function() { // main code })
  • 9. 9 Chaining • The output of $() function is a jQuery object • jQuery actions are chainable, as they usually return a jQuery object $('img').addClass('test').hide();
  • 10. 10 Selectors • jQuery uses CSS-like selectors • We can select elements by tag name, id, class, attributes, etc. $('p') $('#id') $('.class') $('parent > child') $('[attr="value"]') $('p:first') $('tr:odd') $(':button') $(document.body)
  • 11. 11 Events • With jQuery, we can easily attach handlers to events $('p').click(function() { $(this).hide(); }); $('p').on('click', function() { ... });
  • 12. DOM Manipulation
  • 13. 13 Get/Set Content • jQuery methods for DOM manipulation include  text()  html()  val() alert($('p').text()); $('p').html('Hello!');
  • 14. 14 Attributes • You can get/set element attributes by attr() method alert($('p').attr('title')); $('p').attr('title', 'Test'); $('a').attr({ title: 'Test', href: 'http://example.com' })
  • 15. 15 Styles • jQuery methods for CSS manipulation include  addClass()  removeClass()  toggleClass()  css() $('p').addClass('active').css('color', 'blue'); $('p').css('color'); // returns blue
  • 16. 16 Dimensions • jQuery has the following dimension methods  width()  height()  innerWidth()  innerHeight()  outerWidth()  outerHeight()
  • 17. jQuery Effects
  • 18. 18 jQuery Effects • jQuery provides methods for basic effects, including  hide and show  fade  slide  animate!
  • 19. 19 Hide/Show • We can hide/show elements by hide(), show() and toggle() methods $('p').click(function() { $(this).hide(); }); • The methods accept optional speed and callback parameters $('p').hide(1000, function() { $(this).show(); });
  • 20. 20 Fading • jQuery has the following fading methods  fadeIn()  fadeOut()  fadeToggle()  fadeTo() • All with optional speed and callback parameters $('p').fadeOut(); $('p').fadeOut(1000); $('p').fadeOut('slow'); $('p').fadeTo(1000, .3);
  • 21. 21 Sliding • The following sliding methods are available  slideDown()  slideUp()  slideToggle() • With optional speed and callback parameters $('p').slideUp(); $('p').slideDown(1000);
  • 22. 22 Animation • Custom animations can be created with animate() function $('p').click(function(){ $(this).animate({height: '200px'}, 'slow'); }) • You can change several styles at once • animations are queued
  • 23. DOM Tree Traversal
  • 24. 24 Parents • We can access parents of an element using:  parent()  parents()  parentsUntil()  closest() $('p').parents(); $('p').parentsUntil('div');
  • 25. 25 Children • We can access children of an element using:  children()  find() $('p').children(); $('p').find('span');
  • 26. 26 Siblings • We can access siblings of an element using:  siblings()  next()  nextAll()  nextUntil()  prev()  prevAll()  prevUntil()
  • 27. 27 Filtering • Filtering methods  first()  last()  eq()  filter()  not() $('p').first() $('p').eq(2) // the 3rd <p> element $('p').filter('.highlight') $('p').not(':selected')
  • 28. jQuery Utilities
  • 29. 29 Each • The each() method iterates over a jQuery object and executes a function for each element $('li').each(function(index) { $(this).attr('title', 'Item '+ index); }); • You can use $.each() to iterate over arrays and collections $.each([2, 4, 16], function(index, value) { alert(index + ': ' + value); });
  • 30. 30 Extend • The $.extend() method is used to merge the contents of two or more objects  $.extend(target [, object1 ] [, objectN ]) var object = $.extend({}, object1, object2); function test(params) { var defaults = { ... }; $.extend(defaults, params); ... }
  • 31. 31 References • jQuery API Documentation  http://api.jquery.com • W3Schools  http://www.w3schools.com/jquery