An introduction to jQuery

WHAT IS IT?

•AJavaScript library with the philosophy "Writing JavaScript
code should be fun"

WHAT IS IT?

•A JavaScript library with the philosophy "Writing JavaScript
code should be fun"
• Simpliﬁes stuff & adds common functionality

WHAT IS IT?

code should be fun"
• Removessome cross-browser headaches (events/AJAX/
window.onload)

WHAT IS IT?

code should be fun"
• Removessome cross-browser headaches (events/
window.onload)
• Pretty small at 19KB miniﬁed & gzipped

HOW DO YOU USE IT?

• "Find stuff & do stuff to it"

HOW DO YOU USE IT?

• Finding stuff is based around CSS(1-3) selectors & XPath

HOW DO YOU USE IT?

• Threemain 'doing' categories based around: manipulation,
returning a value & modifying

HOW DO YOU USE IT?

• Threemain 'doing' categories based around: manipulation,
returning a value & modifying
• Chaining methods together - makes it look weird

SELECTING
jQuery('div.panel')
All divs with class=“panel”
$('p#intro')
The paragraph with id=“intro”
$('div#content a:visible')
All visible links inside the div with id=“content”
$('input[name=email]')
All input ﬁelds with name=“email”
$('table.orders tr:odd')
“odd” numbered rows in a table with class “orders”

MANIPULATION
$('div#primary').width(300);
Set the width of div id=“primary” to 300 px.
$('p').css('line‐height', '1.8em');
Apply a line-height of 1.8em to all paragraphs.
$('li:odd').css({color: 'white', backgroundColor: 'black'});
Apply two CSS rules to every other list item; note that the css() function can take an object
instead of two strings.
var div = $('<div>Some text</div>').addClass('inserted').attr('id', 'foo');
div.appendTo(document.body);
Create a snippet of HTML, add some attributes then add it to the document.

RESULT SET MANIPULATION
$('div').not('[id]')
Returns divs that do not have an id attribute.
$('h2').parent()
Returns all elements that are direct parents of an h2.
$('blockquote').children()
Returns all elements that are children of a blockquote.
$('p').eq(4).next()
Find the fifth paragraph on the page, then find the next element (its direct sibling to the right).
$('input:text:first').parents('form')
Find the form parent of the first input type=“text” field on the page. The optional argument to parents()
is another selector.

EVENTS
$('p').click(function() {
    $(this).css('background‐color', 'red');
});
Set up paragraphs so that when you click them they turn red.
$('a').hover(function() {
    $(this).css('background‐color', 'orange');
}, function() {
    $(this).css('background‐color', 'white');
});
hover() is a shortcut for setting up two functions that run onmouseover and
onmouseout.

AJAX
$.ajax({
  type: "POST",
  data: “name=Dave&location=Brighton”
  url: "/getusers",
  success: function(data){
     console.log(‘data from server: ’, data);
  }
});

ANIMATION
    $("p").click(function () {
      $(this).fadeOut("slow");
    });
    $("div#clickme").click(function () {
      $(this).animate({ 
        width: "70%",
        opacity: 0.4,
        marginLeft: "20px",
        fontSize: "3em", 
        borderWidth: "10px"
      }, 1500 );
    });

LINKY LINKS

• http://jquery.com & http://docs.jquery.com
• http://docs.jquery.com/discussion

• http://api.jquery.com - Interactive API browser & AIR
download
• jQuery for JavaScript developers - http://tinyurl.com/
jq4jsdevs

An introduction to jQuery

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to An introduction to jQuery (20)

Recently uploaded (20)

An introduction to jQuery

Editor's Notes