introduction to jquery
DESCRIPTION
It provides a gentle introduction to jQuery, explaining the DOM structure, event handling in jQuery, selectors, utilities, ajax and lots more...TRANSCRIPT
INTRODUCTION TO FOR ZOMBIES…… by ZEESHAN KHAN
OUTLINE
• Philosophy of jQuery
• Understanding the DOM
• The world of JavaScript events
• Bare-bones JavaScript vs. jQuery
• jQuery selectors, traversing and attributes
• jQuery manipulations, events and effects
• jQuery ajax
What is jQuery?
An open-source library of JavaScript functions
Features
• Select and manipulate HTML
• Manipulate CSS
• JavaScript Effects and animations
• HTML DOM traversal and modification
• AJAX
• Utilities
Why jQuery?
• Lightweight
• Cross-browser support
• CSS-like syntax – easy for developers/non-
developers to understand
• Active developer community
• Extensible – plugins
• And most importantly ‘Googlable’…
How does it work?
jQuery() function
• Everything starts with a call to jQuery()
• Since it’s called so often, the $ variable is set up as an alias to jQuery()
Basic structure:
FindSomething.DoSomething
$(SomethingToFind).DoSomething();
Document Object Model
• The Document Object Model (DOM) is a cross-
platform and language-independent convention for
representing and interacting with objects in HTML,
XHTML and XML documents.
• Represents the hierarchical structure of a web page
• You can add and subtract DOM elements on the fly
• You can change the properties and contents of DOM
elements on the fly
Document Object Model
Document Object Model
<html>
<head>
<title>Sample Document</title>
</head>
<body>
<h1>An HTML Document</h2>
<p>This is a <i>simple</i> document
</body>
</html>
Traversing the DOM
• The <div> element is the parent of <ul>, and an ancestor of everything inside of it
• The <ul> element is the parent of both <li> elements, and a child of <div>
• The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>
• The <span> element is a child of the left <li> and a descendant of <ul> and <div>
• The two <li> elements are siblings (they share the same parent)
• The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>
• The <b> element is a child of the right <li> and a descendant of <ul> and <div>
JavaScript Events
• Browsers are preprogrammed to recognize certain
actions such as clicking, page loading, mouse
movements etc.
• You write programs to respond to these events
• Two Step process
• Identify the element that you want to respond
to the event
• Assign an event and create a function to run
when event occurs
JavaScript Events
• Mouse Events
Click, dblclick, mousedown, mouseup, mouseover,
mouseout, mousemove
• Document/Window Events
Load, resize
• Form Events
Submit, reset, change, focus, blur
• Keyboard Events
Keypress, keydown
Bare-Bones JavaScript vs jQuery
• Example 1 -Hide an element with id "textbox“
//JavaScript
document.getElementById('textbox').style.display = "none";
//jQuery
$('#textbox').hide();
• Example 2 -Create a <h1> tag with "my text“
//JavaScript
var h1 = document.CreateElement("h1");
h1.innerHTML = "my text";
document.getElementsByTagName('body')[0].appendChild(h1);
//jQuery
$('body').append( $("<h1/>").html("my text") ) ;
Bare-Bones JavaScript vs jQuery
• Example 3 -Add “myClass” class to <div> child of <a>
//JavaScript
var links = document.getElementsByTagName(‘a’), link;
for(i=0;i<links.length;i++) {
link = links[i];
for(j=0;j<link.children.length;j++) {
if(link.children[j].tagName === “DIV”) {
var currentClass = link.children[j].className;
var newClass;
newClass = currentClass === “” ? “newClass” : currentClass + “myClass”
link.children[j].className = newClass;
}
}
}
//jQuery
$(‘a > div’).addClass(“myClass”);
The jQuery function
• jQuery() = $()
• $(function) The “Ready” handler
• $(‘selector’) Element selector expression
• $(element)Specify element(s) directly
• $(‘HTML’) HTML creation
• $.function() Execute a jQuery function
• $.fn.myfunc(){} Create jQuery function
The Ready function
• Equivalent to window.onLoad function
• The codes written inside it are executed only after the DOM is “ready”
• 5 ways to specify the ready function
• jquery(document).ready(function(){…};);
• jquery().ready(function(){…};)
• jquery(function(){…};)
• jquery(dofunc);
• $(dofunc);
Selectors
To find something, we can use common CSS syntax:
• $(css selector)
• This is known as a “selector”
• Returns a jQuery object containing an array of elements that match the selector
• The returned jQuery object is known as a “collection”, “wrapper” or “wrapped set”
The returned object contains a number of predefined methods that can act on the group of elements returned by selector.
Selectors
$(‘img’)
Selects all images
$(‘p a’)
Selects all links nested under a paragraph
$(‘div.myClass’)
Selects all divs with a class of “myClass”
$(‘#myElement’)
Selects element with an id of “myElement”
$(‘#nav li.current a’)
Selects all links under any list item with class=“current” that
exist under the “nav” element
Custom Selectors
:checkbox
Selects checkboxes
:checked
Selects checkboxes or radio buttons that are checked
:contains(foo)
Selects elements containing the text “foo”
:disabled
Selects disabled form elements
:input
Selects form elements (input, select, textarea, button)
:selected
Selects option elements that are selected
Custom Selectors
:checkbox:checked:enabled
Selects checkboxes that are enabled and checked
input:not(:checkbox)
Selects non-checkbox <input> elements
div p:not(:hidden)
Selects all visible <p> elements nested under a div
Position-based Selectors
:first :only-child :even and :odd
:last :nth-child(n) :eq(n)
:first-child :nth-child(even|odd) :gt(n)
:last-child :nth-child(Xn+Y) :lt(n)
• p:odd
Returns every odd paragraph element
• li:last
Returns last list item
• li:last-child
Returns last item of each list (last child of parent element)
• td:eq(2)
Returns third table cell
**Selectors start counting from 0 (except :nth-child, which starts from 1 for
CSS compatibility)
Position-based Selectors
$(‘tr:nth-child(1)’)
Selects the first row of each table
$(‘tr:nth-child(even)')
Selects even numbered table rows
$(‘body > div:has(a)’)
Selects direct <div> children of <body> containing links
$(‘a[href*=jquery.com]’)
Matches all <a> elements that reference the jQuery site
$(‘a[href$=pdf]’)
Selects links to PDF files
$(‘a[href^=https://]’)
Selects all links starting with “https://”
Traversing
• Gets the first list item on the page
var listItem = $( 'li' ).first(); // similar .last()
• Gets the siblings of the list item
var siblings = listItem.siblings();
• Gets the next sibling of the list item
var nextSibling = listItem.next(); // similar .prev()
• Gets the list item's parent
var list = listItem.parent();
Traversing
• Gets the list items that are immediate children of the list
var listItems = list.children();
• Finds all ancestors of the list item that have a class of
"module"
var modules = listItem.parents( '.module' );
• Finds the closest ancestor of the list item that has a class
of "module"
var module = listItem.closest( '.module' );
• Gets ALL list items in the list, including nested ones
var allListItems = list.find( 'li' );
The find method
Searches through a collection, returns a new set that
contains all elements that match a passed selector
expression
Powerful when combined with chaining:
$(‘p’).find(‘span’).fadeIn();
Starts with all paragraphs and searches for descendant
<span> elements
Same as $(‘p span’)
Internally the above selector calls the ‘find’ method so
performance-wise it would be preferable to use the ‘find’
method itself.
The filter method
• Filters out elements from the collection
• Can accept a selector or a function as a parameter.
• Selector as parameter:
$(‘img’).addClass(‘test’)
.filter(‘[title*=dog]’)
.addClass(‘dogTest’)
Reduces set to images with a title attribute containing
‘dog’
filter() vs find()
• filter() selects a subset of the already selected elements:
$('td').filter(expr)
Removes any <td> elements that don't match the
filter criteria
• find() selects a set of elements that are descendants of
the already selected elements
$('td').find('span')
Will find <span> elements inside <td> elements
Functionally similar to $('td span');
Manipulating the DOM
$(‘#target’).before(‘<p>Inserted before #target</p>’);
$(‘#target’).after(‘<p>This is added after #target</p>’);
$(‘#target’).append(‘<p>Goes inside #target, at end</p>’);
$("span").appendTo("#target");
$(‘#target’).prepend(‘<p> #target goes inside it</p>’);
$("span").prependTo("#target");
$(‘#target’).wrap(‘<div></div>’);
Chaining
• One of the most powerful features of jQuery is chaining
• jQuery commands (when finished with their action) return
the same group of elements, ready for another action
$(‘div.hideMe’).hide().addClass(‘removed’);
After the divs are hidden, we give them all a class
“removed”
• DOM operations can be expensive. No need to loop over
elements- All done behind the scenes
• Chains can continue indefinitely
Attributes
• Get value (for first matching element):
var href = $(‘a.nav’).attr(‘href’);
• Set value:
$(‘a.nav’).attr(‘href’,’http://www.msn.com’);
• Remove attribute:
$(‘#intro’).removeAttr(‘id’);
CSS
$(‘#intro’).addClass(‘highlighted’);
$(‘#intro’).removeClass(‘highlighted’);
$(‘#intro’).toggleClass(‘highlighted’);
$(‘div’).hasClass(‘highlighted’);
$(‘p’).css(‘font-size’, ‘20px’);
$(‘p’).css({‘font-size’:’20px’,
‘color’:’red’});
Events
The DOM Event Model
• Multiple event handlers, or listeners, can be established on an element
• These handlers cannot be relied upon to run an any particular order
• When triggered, the event propagates from the top down (capture phase) or bottom up (bubble phase)
• IE doesn’t support the “capture phase”
Basic syntax of Event binding
$(‘img’).bind(‘click’,function(event){
alert(‘Will this session ever end?? Arghh!!’);
});
$(‘img’).bind(‘click’,imgclick(event));
• Allows unbinding the function
$(‘img’).unbind(‘click’,imgclick());
$(‘img’).unbind(‘click’);
$(‘img’).one(‘click’,imgclick(event)); //only works once
$(‘img’).click(imgclick);
$(‘img’).toggle(click1, click2);
$(‘img’).hover(mouseover, mouseout);
Event properties
event.target ref to element triggering event
event.target.id id of element triggering event
event.type type of event triggered
event.data second parm in the bind() func
Event methods
• Cancel a default action and prevent it from bubbling:
$(‘form’).bind(‘submit’, function() {
return false;
})
• Cancel only the default action:
$(‘form’).bind(‘submit’, function(event){
event.preventDefault();
});
• Stop only an event from bubbling:
$(‘form’).bind(‘submit’, function(event){
event.stopPropagation();
});
Specific Event Binding
blur focus mousedown resize
change keydown mousemove scroll
click keypress mouseout select
dblclick keyup mouseover submit
error load mouseup unload
$(‘img’).keyup(function(event) {
alert(‘zzzzzzzzz’);
});
.trigger(eventType)
does not actually trigger the event, but calls the appropriate function
specified as the one tied to the eventType.
.click(), blur(), focus(), select(), submit()
With no parameter, invokes the event handlers, like trigger does, for all
the elements in the wrapped set
Effects
Function Description
$(selector).hide() Hide selected elements
$(selector).show() Show selected elements
$(selector).toggle()Toggle (between hide and show)
selected elements
$(selector).slideDown() Slide-down (show) selected elements
$(selector).slideUp() Slide-up (hide) selected elements
$(selector).slideToggle()Toggle slide-up and slide-down of
selected elements
$(selector).fadeIn() Fade in selected elements
$(selector).fadeOut() Fade out selected elements
$(selector).fadeTo()Fade out selected elements to a given
opacity
$(selector).fadeToggle() Toggle between fade in and fade out
Ajax
$.ajax({
url: ‘/getResults.json',
type: 'GET',
data: ‘id=abc',
success: function(data) {
//called when successful
$('#ajaxphp-results').html(data);
},
error: function(e) {
//called when there is an error
//console.log(e.message);
}
});
Ajax
$.ajax({
url: ‘/getResults.json',
type: 'GET',
data: ‘id=abc',
})
.done (: function(data) {
//called when successful
$('#ajax-results').html(data);
})
.fail (: function(data) {
//called when there is an error
$('#ajax-results').html(data);
});
Ajax
$.get(“url", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
$.post(“url", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
Ajax
$('#show').click(function(){
var prodId = $('#id').val();
$.post(
“/showResults.json",
{id:prodId},
function(result) {
$('#detail').html(result);
}
);
});
When the button is clicked
Get the text box value
Ajax POST
URL
The key/value to be passed
Update the "detail" div with
the result
Questions?