Full Stack Development

(IT432)

Anju Mishra
Department of Information Technology

1
Module II- Introduction to jQuery

Topic Name- Introduction to jQuery and its implementation

Subtopic Name: Definitions, Value & Scope of DOM Manipulation

Learning Objectives: To understand the concept of DOM Manipulation

Learning Outcomes: Students will be able to recognizer various DOM Manipulation

2
Outline
 jQuery Methods
 DOM Manipulation
 Attribute Selection
 Dimension Manipulation
 Traversing Elements
 CSS Manipulation
Q & A

3
DOM (Document Object Model)
 The DOM defines a standard for accessing documents:

 "The W3C Document Object Model (DOM) is a platform and language-neutral

interface that allows programs and scripts to dynamically access and update the
content, structure, and style of a document."

 The W3C DOM standard is separated into 3 different parts:

 Core DOM - standard model for all document types

 XML DOM - standard model for XML documents
 HTML DOM - standard model for HTML documents

4
HTML DOM (Document Object Model)
 The HTML DOM is a standard object
model and programming interface for
HTML. It defines:

 The HTML elements as objects

 The properties of all HTML elements
 The methods to access all HTML elements
 The events for all HTML elements
 documents

 The HTML DOM is a standard for how

to get, change, add, or delete HTML
elements
5
jQuery Methods
 jQuery provides various methods for different tasks e.g. manipulate DOM, events,
ajax etc. The following table lists different categories of methods.
Category Description Methods
DOM Manipulation These methods manipulate DOM elements in after(), append(), attr(),
some manner e.g. changing attribute, style before(),
attribute, adding and removing elements etc.
Traversing These methods help in navigating from DOM children(), closest(),
element to another element in a parent child each(), first(),
hierarchy e.g. finding ancestors, descendants or next(), filter(), parent(),
sibling element of a specified element. siblings(),
CSS These methods get and set css related properties addClass(), css(),
of elements. hasClass(), removeClass(),
toggleClass()

6
Category Description Imp Methods
Attributes These methods get and set DOM attr(), html(), removeAttr(), prop(),
attributes of elements. val(),

Events These methods are used to handle bind(), blur(), change(), click(), dblclick(),
DOM or JavaScript events. focus(), keyup(), keydown(),

Effects These methods are used to add animate(), fadeIn(), fadeOut(), hide(),
animation to elements. show(),
stop(),
more..

7
Category Description Imp Methods
Forms These methods and event handlers handle forms and their blur(),
various elements. change(),
val(),
submit()

Ajax These methods allow Ajax functionalities with jQuery get(),

e.g. getJson(),
post(),
load()

Core These methods are core methods in jQuery API. jQuery(),

holdReady(),
when()

8
Category Description Imp Methods
Data These methods allow us to associate arbitrary data with data(), removeData(),
specific DOM elements. queue(), dequeue(),
clearQueue(),

Miscellaneous These methods are useful in various tasks e.g. traversing each(), index(),
elements, converting to array etc. get(), toArray(),

Utilities Utility methods are helpful in getting information on various inArray(),

things e.g. browser, function, array, window etc. isArray(),
isFunction(),
isNumeric(),
isWindow(),
isXmlDoc(),

9
Example
<script type="">
$(document).ready(function () {

$('p').wrap('<div class="myCls">’); @* wrap all p with div *@

$('#myDiv').hide(); @* hides div whose id is myDiv *@
$('span').attr( @*sets style and width attribute on all span *@
{
'style': 'border:solid',
'width': '100%'
});
$('p').append('This is p.’); @* append text to <p> *@

$('span').before('<p>This is another p</p>’); @* insert <p> before span *@

});
</script>

10
DOM Manipulation Methods in jQuery
• jQuery provides various methods to add, edit or delete DOM element(s) in the HTML page

Method Description
append() Inserts content to the end of element(s) which is specified by a selector.
before() Inserts content (new or existing DOM elements) before an element(s) which is specified
by a selector.
after() Inserts content (new or existing DOM elements) after an element(s) which is specified by
a selector.
prepend() Insert content at the beginning of an element(s) specified by a selector.

11
DOM Manipulation Methods in jQuery

12
DOM Methods
 jQuery after()
$('selector expression').after('content');
• The jQuery after() method inserts content
(new or existing DOM elements) after
target element(s) which is specified by a
selector:
$('selector expression’).before('content');
 jQuery before() Method
• The jQuery before() method inserts
content (new or existing DOM
elements) before target element(s)
which is specified by a selector $('selector expression’).append('content');
 jQuery append() Method
• The jQuery append() method inserts
content to the end of target element(s)
which is specified by a selector 13
DOM Methods
 jQuery prepend()
$('selector
• The jQuery prepend() method inserts
content at the beginning of an element(s) expression’).prepend('content');
specified by a selector:
 jQuery before() Method $('selector expression').remove();
• The jQuery remove() method removes
element(s) as specified by a selector.
$('content string').replaceAll('selector
 jQuery replaceAll() Method
expression');
• The jQuery replaceAll() method replaces
all target elements with specified
element(s) $('selector expression').wrap('content
 jQuery wrap() Method string');
• Specify a selector to get target elements
and then call wrap method and pass
content string to wrap the target element(s) 14
Manipulation HTML Attributes
• The following table lists jQuery methods to get or set value of attribute, property,
text or html.

attr() Get or set the value of specified attribute of the target $('selector
element(s). expression').attr('name','value');
prop() Get or set the value of specified property of the target $('selector
element(s). expression').prop('name','value');
html() Get or set html content to the specified target $('selector
element(s). expression').html('content');
text() Get or set text for the specified target element(s). $('selector
expression').text('content');
val() Get or set value property of the specified target $('selector expression').val('value');
element.

15
Manipulation Attributes

16
Manipulate DOM Element's Dimensions using jQuery
• The jQuery library includes various methods to manipulate DOM element's dimensions like height,
width, offset, position etc.
• The following table lists all the jQuery methods to get or set DOM element's dimensions

height() Get or set height of the specified element(s). $('selector

expression').height(value);
offset() Get or set left and top coordinates of the specified element(s). $('selector
expression').offset(options);
position() Get the current coordinates of the specified element(s).
width() Get or set the width of the specified element(s). $('selector
expression').width(value);
innerWidth() Get or set the inner width (padding + element's width) of the
specified element(s).
outerWidth() Get or set outer width (border + padding + element's width) of
the specified element(s). 17
Manipulation Domentions

18
Manipulate Traversing Elements
• The jQuery library includes various methods to traverse DOM elements in a DOM hierarchy.
• The following table lists all the jQuery methods to get or set DOM element's dimensions

children() Get all the child elements of the specified element(s) $('selector expression').children();
each() Iterate over specified elements and execute specified call back $('selector
function for each element. expression').each(callback function);
find() Get all the specified child elements of each specified element(s). $('selector
expression').find('selector
expression to find child elements');
first() Get the first occurrence of the specified element.
next() Get the immediately following sibling of the specified element. $('selector expression').next();
parent() Get the parent of the specified element(s). $('selector expression').parent();
prev() Get the immediately preceding sibling of the specified element.
siblings() Get the siblings of each specified element(s) $('selector expression').siblings();
19
Manipulate Traversing Elements

20
CSS Manipulation using jQuery
• The jQuery library includes various methods to manipulate style properties and CSS class of DOM element(s).
• The following table lists jQuery methods for styling and css manipulation

css() Get or set style properties to the specified element(s). $('selector expression').css('style
property name','value');
addClass() Add one or more class to the specified element(s). $('selector
expression').addClass('css class
name');
hasClass() Determine whether any of the specified elements are assigned
the given CSS class.
removeClass() Remove a single class, multiple classes, or all classes from the
specified element(s).
toggleClass() Toggles between adding/removing classes to the specified $('selector
elements expression').toggleClass('css class
name');
21
CSS Manipulation using jQuery

22
Difference between position() and offset() in jQuery

• Both the jQueryUI method the returns the object which contains integer co-ordinate
properties of the top and left positions.

• The positions of top and left coordinates are returned in pixels.

• Both functions are applied only on visible elements, not on hidden elements.

23
Difference between position() and offset() in jQuery

offset() Method position() Method

The offset() method in jQuery returns the first found position The position() method in jQuery returns the current position
of HTML element with respect to the document. of HTML element with respect to its offset parent.

The jQuery UI offset() is relative to the document. The jQuery UI position() is relative to the parent element.

When you want to position a new element on top of another When you want to position a new element near another
one which is already existing, its better to use the jQuery DOM element within the same container, its better to use
offset() method. jQuery position() method.

The offset() method is mostly used in drag-and-drop The position() method is used to position an element relative
functions. to document, window or other elements like mouse or
cursor.

24
Difference between position() and offset() in jQuery

25
Q&A
• Define HTML DOM?

• Explain methods used for DOM Manipulation?

• How to manipulate CSS?

• Explain the use of attr() method?

• Differentiate between offset() and position() method?

26
Learning Outcome
 At the end of this session, you will be able to
 Understand the basics of jQuery DOM Techniques
 Understand different manipulation methods.

27