Chapter 6

Jquery (Part I)
CS262. Advanced Concepts in Web Development
Lecturer. Seang Lypengleang
Zaman University

DEPARTMENT OF COMPUTER SCIENCE

1
JQuery
WHAT IS JQUERY?
A BASIC JQUERY EXAMPLE
WHY USE JQUERY?
FINDING ELEMENTS
DOING THINGS WITH YOUR SELECTION
A Matched Set/JQuery Selection
JQuery Methods that Get and Set Data
JQuery Objects Store References to Elements
LOOPING
CHAINING
Checking a Page is Ready to Work with
Getting Element Content
Getting at Content
Updating Elements
JQuery
Changing Content
Inserting Elements
Adding New Content
Getting and Setting Attribute Values
Working with Attributes
Getting & Setting CSS Properties
Changing CSS Rules
Working with Each Element in a Selection
Using .each()
Event Methods
Events
The Event Object
Additional Parameters for Event Handlers
Delegating Events
WHAT IS JQUERY?
• jQuery offers a variety of common JavaScript tasks quickly and consistently,
across all browsers and without any fallback code needed.
• JQuery is a JavaScript file you include in your web pages.
SELECT ELEMENTS
• It is simpler to access elements using jQuery's CSS-style selectors than DOM
queries. The selectors are also more powerful and flexible.
PERFORM TASKS
• jQuery's methods let you update the DOM tree, animate elements into and
out of view, and loop through a set of elements, all in one line of code.
HANDLE EVENTS
• Methods jQuery allowing you to attach the event listeners selects elements
without writing any tailback code to support older browsers.
 WHAT IS JQUERY?
1. Find Elements using CSS-style selectors Similarities to DOM
• jQuery function creates object, $() • jQuery selectors have a similar task to
shorthand of jQuery(), to find one or more DOM queries, but syntax is much simple.
elements in the page. • Can store the jQuery object in a variable
• The jQuery() function has one parameter: like DOM nodes.
a CSS-style selector to find all of the <li> • Can use jQuery methods and properties
elements with a class of hot. like DOM to manipulate the DOM nodes.

• class hot, we use .hot

• Id one, we use #one
 WHAT IS JQUERY?
2. Do something with the elements using JQuery Methods
• jQuery object, $() and its element is referred to match set or jQuery selection
• The method of jQuery object can update elements with new value to class attribute.

Key Differences from DOM

• It is cross-browser and there is no need to write fallback code.
• Selecting elements is simpler (CSS-style) and is more accurate.
• Event handling uses only one method for all browsers.
• Methods affect all the selected elements with loop
• Can apply multiple methods when making a selection.
 A BASIC JQUERY EXAMPLE
1. Using jQuery, you need to include the jQuery 2. A second JavaScript
c07/basic-example.html script in your page before the closing </body> tag. file is included that uses jQuery
selectors and methods to update
the content of the HTML page.

From http://jquery. org.

jQuery should be kept in the
file jquery-1.11.0.js
 A BASIC
c07/js/basic-example.js
JQUERY EXAMPLE
2. Select the first three list items and does
two things:
• The elements are hidden (allow the next
step).
• The elements fade into view.
3. Set an event listener on each of
You will learn how to select elements using
<li>elements. When a user clicks on one, it
jQuery selectors, and then how to update those
triggers an anonymous function to remove
elements using the methods and properties of
that element from the page.
the jQuery object.

1. Select all of the <h1> - <h6> headings,

and adds a value of headline to their class
attributes.
WHY USE JQUERY?
• jQuery is just a JavaScript file on the web with coding simpler.
1: SIMPLE SELECTORS
• DOM is not always easy to select the elements:
• Older browsers do not support the latest methods for selecting elements.
• IE does not treat whitespace between elements, while other browsers do.
• jQuery uses a language that is already familiar to front-end web developers:
• Are much faster at selecting elements
• Can be a lot more accurate about which elements to select
• Often require a lot less code than older DOM methods
• Are already used by most front-end developers
• jQuery adds some extra CSS-style selectors offering additional functionality.
• Since jQuery was created, modern browsers have implemented the
querySelector() and querySelectorAll() methods to select elements using CSS
syntax. However, these methods are not supported in older browsers.
WHY USE JQUERY?
2: COMMON TASKS IN LESS CODE
• jQuery has methods offering simpler ways to perform tasks:
• loop through elements
• Add I remove elements from the DOM tree
• Handle events
• Fade elements into I out of view
• Handle Ajax requests
• jQuery offers chaining of methods to apply multiple methods to the
same selection.
3: CROSS-BROWSER COMPATIBILITY
• jQuery automatically handles the inconsistent ways in which browsers
select elements and handle events, so you do not need to write cross-
browser fallback code.
FINDING ELEMENTS
FINDING ELEMENTS
FINDING ELEMENTS
FINDING ELEMENTS
FINDING ELEMENTS
DOING THINGS WITH YOUR SELECTION
DOING THINGS WITH YOUR SELECTION
A Matched Set/JQuery Selection
JQuery Methods That Get and Set Data
JQuery Objects Store References to Elements
 JQuery Objects Store References to Elements
• The jQuery object is an
array-like object that stores
a list of the elements in the
same order appearing in
the HTML document.
• A jQuery object is created
and stored in the <li> in the
DOM tree and then
assigned to variable
($listItems).
$listItems=$(‘li’);
 LOOPING
• With jQuery, the multiple elements can be updated using the one
method without using a loop.
• The first selector adds a calendar icon to the left of it.
• The second selector applies to three elements and adds a heart icon
on the right-hand side.
• When you want to get information from a series of elements, you can
use .each() method rather than writing a loop.

c07/js/looping.js
CHAINING
Most methods used to update
• The jQuery selection can be chained. However the methods that
retrieve information from the DOM (or about the browser) cannot be
chained.

c07/js/chaining.js
Checking a Page is Ready to Work with
Checking a Page is Ready to Work with
 Getting Element Content
• The •html() and •text() methods retrieve and update the content of elements.
• .html() retrieves only the HTML inside the first element in the matched set,
along with any of its descendants.
• For example, $ ('ul')•html(); will return this:
<li id="one"><em>fresh</em> figs</li>
<li id="two">pine nuts</li>
<li id="three">honey</li>
<li id="four">balsamic vinegar</li>
• Whereas $('li').html(); will return this:
<em>fresh</em> figs
• This returns only the content of the first <li> element.
• If wanting to retrieve the value of every element, use the .each() method.
 Getting Element Content
• .text() returns the content from every element in the jQuery selection,
along with the text from any descendants.
• For example, $('ul').text(); will return this:
fresh figs
pine nuts
honey
Balsamic vinegar
• Whereas $('li').text(); will return this:
fresh figspine nutshoneybalsamic vinegar
• This returns the text content of all <li> elements (spaces between words),
but there are no spaces between the individual list items.
• To get the content from <input> or <textarea> elements, use .val() method
 Getting at Content
The .Append() method lets you add content to the page.

c07/js/get-html-fragment.js
• The selector returns the <ul> element.
• The •html() method gets all the HTML
inside it (the four <li> elements).
• This is then appended to the end of
the selection, in this case after the
existing <li>elements.
 Getting at Content

c07/js/get-text-fragment.js
• The selector returns the <ul> element.
• The .text() method gets the text from
all of the <ul>element's children.
• This is then appended to the end of
the selection, in this case after the
existing <ul>element.
 Getting at Content

c07/js/get-html-node.js

• The selector returns the four <li>

elements, but the •html() method
returns only the contents of the first one.
• This is then appended to the end of the
selection, in this case after each existing
<li> element.
 Getting at Content

c07/js/get-text-node.js

• The selector returns the four <li> elements.

• The .text() method gets the text from these.
• This is then appended to each of the <li>
elements in the selection.
 Updating Elements
• There are four methods that update the content of all elements in
a jQuery selection.
• When the •html() and •text() methods are used to update
content, they will replace the content of each element in the
matched set (content and child elements).
• The •replaceWith () and •remove () methods replace and remove
the elements they match (content and any child elements).
• The •html(),•text(), and •replaceWith() methods can take a
string as a parameter.
• Be stored in a variable
• Contain markup
• Both •html() and •replaceWith() methods carry the security risks
as using DOM's innerHTML.
 Updating Elements
Using a Function to Update Content
• Methods can take a function as a parameter to create new
content. The text from each element is placed inside <em> tags:
 Changing Content
• Updating the content of an element can be used a string, a variable, or a function.
• If you append a new element that has ·attributes, use single quotes to surround
the content. Then use double quotes for the attribute values themselves.
c07/js/changing-content.js
 Inserting Elements
• Inserting new elements involves two steps:
• 1: Create the new elements in a jQuery object
• 2: Use a method to insert the content into the page
• When adding content to the DOM, make sure you have escaped all
untrusted content properly on the server.
1: CREATING NEW ELEMENTS IN A JQUERY OBJECT
• A variable, $newFragment, stores an empty jQuery object in it.
<li>element:var $newFragment = $('<li>‘);
• A variable, $newIterm, stores a jQuery object in it containing <li> element
with a class attribute and some text:
var $newltem = $('<li class="new">item</li>');
 Inserting Elements
2: ADDING THE NEW ELEMENTS TO THE PAGE
• If a variable holding the new content, let add the content to DOM tree:
 Adding New Content
• The first adds a new notice before the list, the second adds a + symbol
before the hot items, and the third adds a new element to the end of list.
c07/ js/ adding-new-content.js
 Getting and Setting Attribute Values
• You can create attributes, or access and update their contents.

• The value of class attribute

can hold more than one class
name (separated by a space).
• .addClass() or .removeClass()
let you add or remove an
individual class name within
the value without affecting
class names.
 Working with Attributes c07/js/attributes.js

• Changing the events with the new CSS rules is popular for web page interactive.
1. The first finds the third list item (id attribute with a value of three)
and removes hot from the class attribute on that element.
2. The second selects all <li> elements whose class attribute has a value of hot. It
adds a new class name called favorite.
3. The third selects the <ul> element and adds an id attribute, giving it a value of
group (trigger a CSS rule that will add a margin and border to the <ul> element).
 Getting & Setting CSS Properties
• The .css() method lets you retrieve and set the values of CSS properties.
• To get the value of a CSS property, you indicate which property you
want to retrieve in parentheses.
• To set the values of a CSS property, you specify the property name as
the first argument in the parentheses, then a comma, followed by its
value as the second argument.
HOW TO GET A CSS PROPERTY
var backgroundColor = $( 'li' ).css( 'background-color' );
• It stores the background color of the first list item in a variable called
backgroundColor as RGB value.
 Getting & Setting CSS Properties
HOW TO SET A CSS PROPERTY
$('li').css( 'background-color', ‘#272727' );
• It sets the background color of all list items. The CSS property and its
value are separated using a comma.
$('li').css( 'padding-left', '+=20');
• With dimensions in pixels, you can increase and decrease the values
using the+= and-= operators.
SETTING MULTIPLE PROPERTIES
• You can set multiple properties using object literal notation:
• Properties and values are placed in curly braces
• A colon is used to separate property names from their values
• A comma separates each pair (not one after the last pair)
$('li').css({ 'background-color' : '#272727', 'font-family' : 'Courier'});
 Changing CSS Rules
• Check what the background color of the first list item is when the page
loads and then writes it after the list.
• Next, it updates several CSS properties in all list items using the same
.css() method with object literal notation. c07/js/css.js
 Working with Each Element in a Selection
• jQuery allows you to recreate the functionality of a loop on a selection of
elements, using the •each() method. The parameter of the •each ()
method is a function, anonymous function or a named function.
 Working with Each Element in a Selection

• Since this refers to the current node. That element's id or class

attributes, it is better to use plain JavaScript to access those
attributes: ids= this.id;
• It is more efficient than writing ids= $(this).attr('id');
 Using .each()
• The .each() method is then used to loop to takes the value from the id
attribute on the <li>element and adds it to the text in the list item.

c07/js/each.js
 Event Methods
• The •on() method is used to handle all events whereas jQuery handles
all of the cross-browser issues.
• Use a selector to create a jQuery selection.
• Use .on() to indicate which event to respond to in the selection.
• jQuery used separate methods for each event such as .click() and
.focus() but now should only use the .on() method in v 1.7 or obove.
1. The jQuery selection contains all of the <li>elements.
2. The .on() method is used to handle events with two parameters.
3. The first parameter is the event to respond to (the click event).
4. The second parameter runs when that event occurs on any element
in the matched set. This could be a named or an anonymous function.
 Event Methods
JQUERY EVENTS
• Some of the most popular events that •on() deals with are listed:
• jQuery added ready to fire when the page is ready to be worked with *
Events c07/js/events.js
Events
 The Event Object
• Every event handling function receives an event object as the letter e.
• The event object (e) is named in the parentheses when the event occurs.
• It has methods and properties like the JavaScript.
1. Give event object a parameter name.
2. Use that name in the function to
reference the event object.
3. Access the properties and methods of
the object using dot notation (member
operator).
The Event Object
 The Event Object
c07/js/event-object.js

• timestamp property does not display in Firefox.

 Additional Parameters for Event Handlers
• The •on() method has two optional properties:
• Filter the initial jQuery selection to respond to a subset of the elements;
• Pass extra information into the event handler using object literal notation.
• When square brackets are used inside a method, parameter is optional.

1. The event(s) you want to respond to. 'focus click' will work on both focus and
click if using a space separated list of event names.
2. The event happening on a subset of the elements in the initial jQuery selection.
3. Extra information to function when the event is triggered with event object (e).
4. Function runs when the specified events occur
5. The function is automatically passed the event object as a parameter.
• Older jQuery scripts may use the .delegate() method. jQuery 1.7 •on() is the
preferred approach to delegation.
Delegating Events c07/js/event-delegation.js

4. The event handler uses the event

object to display the content of the
element the user interacts with.
55