The jQuery
JavaScript Library
Hamid Zarrabi-Zadeh
Web Programming – Fall 2013
2

Outline
• Introduction
• Using jQuery
• DOM Manipulation

• jQuery Effects
• DOM Tree Traversal
• jQuery Utilities
3

What is jQuery?
• A light-weight JavaScript library designed to
simplify writing JavaScript code
• The most popular lib...
4

jQuery Features
• jQuery Main Functionalities
 DOM Manipulation
 Event Handling
 Effects
 AJAX
 Utilities
 Lots o...
5

jQuery Pros and Cons
• jQuery Pros
 write less, do more
 multi-browser support
 light-weight
 fast and optimized

•...
Using jQuery
7

Including jQuery
• To include jQuery, just load it into your page
<script src="jquery.js"></script>

• For a faster loa...
8

Usage Style
• With jQuery, we typically find (query) elements
and manipulate them
• Main usage style:
 $(selector).act...
9

Chaining
• The output of $() function is a jQuery object
• jQuery actions are chainable, as they usually
return a jQuer...
10

Selectors
• jQuery uses CSS-like selectors
• We can select elements by tag name, id, class,
attributes, etc.
$('p')
$(...
11

Events
• With jQuery, we can easily attach handlers to
events
$('p').click(function() {
$(this).hide();
});

$('p').on...
DOM Manipulation
13

Get/Set Content
• jQuery methods for DOM manipulation include
 text()
 html()
 val()
alert($('p').text());
$('p').h...
14

Attributes
• You can get/set element attributes by attr()
method
alert($('p').attr('title'));
$('p').attr('title', 'Te...
15

Styles
• jQuery methods for CSS manipulation include
 addClass()
 removeClass()
 toggleClass()
 css()
$('p').addCl...
16

Dimensions
• jQuery has the following dimension methods
 width()
 height()
 innerWidth()
 innerHeight()
 outerWid...
jQuery Effects
18

jQuery Effects
• jQuery provides methods for basic effects,
including
 hide and show
 fade
 slide
 animate!
19

Hide/Show
• We can hide/show elements by hide(), show()
and toggle() methods
$('p').click(function() {
$(this).hide();...
20

Fading
• jQuery has the following fading methods
 fadeIn()
 fadeOut()
 fadeToggle()
 fadeTo()

• All with optional...
21

Sliding
• The following sliding methods are available
 slideDown()
 slideUp()
 slideToggle()

• With optional speed...
22

Animation
• Custom animations can be created with
animate() function
$('p').click(function(){
$(this).animate({height:...
DOM Tree Traversal
24

Parents
• We can access parents of an element using:
 parent()
 parents()
 parentsUntil()
 closest()
$('p').parent...
25

Children
• We can access children of an element using:
 children()
 find()
$('p').children();
$('p').find('span');
26

Siblings
• We can access siblings of an element using:
 siblings()
 next()
 nextAll()
 nextUntil()
 prev()
 prev...
27

Filtering
• Filtering methods
 first()
 last()
 eq()
 filter()
 not()
$('p').first()
$('p').eq(2)

// the 3rd <p>...
jQuery Utilities
29

Each
• The each() method iterates over a jQuery object
and executes a function for each element
$('li').each(function(...
30

Extend
• The $.extend() method is used to merge the
contents of two or more objects
 $.extend(target [, object1 ] [, ...
31

References
• jQuery API Documentation
 http://api.jquery.com

• W3Schools
 http://www.w3schools.com/jquery
Upcoming SlideShare
Loading in...5
×

Jquery

1,474

Published on

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

No Downloads
Views
Total Views
1,474
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Jquery

  1. 1. The jQuery JavaScript Library Hamid Zarrabi-Zadeh Web Programming – Fall 2013
  2. 2. 2 Outline • Introduction • Using jQuery • DOM Manipulation • jQuery Effects • DOM Tree Traversal • jQuery Utilities
  3. 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. 4 jQuery Features • jQuery Main Functionalities  DOM Manipulation  Event Handling  Effects  AJAX  Utilities  Lots of plug-ins
  5. 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. 6. Using jQuery
  7. 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. 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. 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. 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. 11 Events • With jQuery, we can easily attach handlers to events $('p').click(function() { $(this).hide(); }); $('p').on('click', function() { ... });
  12. 12. DOM Manipulation
  13. 13. 13 Get/Set Content • jQuery methods for DOM manipulation include  text()  html()  val() alert($('p').text()); $('p').html('Hello!');
  14. 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. 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. 16 Dimensions • jQuery has the following dimension methods  width()  height()  innerWidth()  innerHeight()  outerWidth()  outerHeight()
  17. 17. jQuery Effects
  18. 18. 18 jQuery Effects • jQuery provides methods for basic effects, including  hide and show  fade  slide  animate!
  19. 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. 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. 21 Sliding • The following sliding methods are available  slideDown()  slideUp()  slideToggle() • With optional speed and callback parameters $('p').slideUp(); $('p').slideDown(1000);
  22. 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. 23. DOM Tree Traversal
  24. 24. 24 Parents • We can access parents of an element using:  parent()  parents()  parentsUntil()  closest() $('p').parents(); $('p').parentsUntil('div');
  25. 25. 25 Children • We can access children of an element using:  children()  find() $('p').children(); $('p').find('span');
  26. 26. 26 Siblings • We can access siblings of an element using:  siblings()  next()  nextAll()  nextUntil()  prev()  prevAll()  prevUntil()
  27. 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. 28. jQuery Utilities
  29. 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. 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. 31 References • jQuery API Documentation  http://api.jquery.com • W3Schools  http://www.w3schools.com/jquery
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×