Your SlideShare is downloading. ×
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Jquery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Jquery

1,445

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,445
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
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

×