This document provides an introduction and overview of jQuery, including:
- What jQuery is and its main features for selecting, manipulating, and traversing HTML elements, handling events, animating content, and making AJAX requests.
- How jQuery works by using the jQuery() function and alias $.
- How jQuery simplifies common JavaScript tasks like selecting elements and handling events using CSS-like selectors and methods.
- Key concepts of the DOM and how jQuery interacts with and modifies the DOM.
2. 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
3. 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
4. Why jQuery?
• Lightweight
• Cross-browser support
• CSS-like syntax – easy for developers/nondevelopers to understand
• Active developer community
• Extensible – plugins
• And most importantly ‘Googlable’…
5. 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();
6. Document Object Model
• The Document Object Model (DOM) is a crossplatform 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
9. 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>
10. 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
12. 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") ) ;
13. 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”);
14. 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
15. 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);
16. 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.
17. 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
18. 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
20. 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)
21. 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://”
22. 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();
23. 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' );
24. 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.
25. 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’
26. 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');
27. 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>’);
28. 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
29. 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’);
31. 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”
32. 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);
33. 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
34. 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();
});
36. 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
37. 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);
}
});
38. 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);
});
40. Ajax
$('#show').click(function(){
var prodId = $('#id').val();
$.post(
“/showResults.json",
When the button is clicked
Get the text box value
Ajax POST
URL
{id:prodId},
function(result) {
$('#detail').html(result);
}
);
});
The key/value to be passed
Update the "detail" div with
the result