Introduction to jQuery

INTRODUCTION TO
F O R Z O MB I E S … … b y Z E E S H A N K H A N

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/nondevelopers 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 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

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
change
click
dblclick
error

focus
keydown
keypress
keyup
load

mousedown
mousemove
mouseout
mouseover
mouseup

resize
scroll
select
submit
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",

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

Introduction to jQuery

More Related Content

What's hot

Viewers also liked

Similar to Introduction to jQuery

Recently uploaded

Introduction to jQuery