Scribd
Upload
7 views

UNIT-3

jQuery is a lightweight JavaScript library designed to simplify HTML document manipulation, event handling, and AJAX interactions. It allows developers to perform complex tasks with minimal code, making it a popular choice among major companies. The document outlines how to implement jQuery, its selectors, events, effects, and DOM manipulation methods.

Uploaded by

espinozaden45
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

UNIT-3

jQuery is a lightweight JavaScript library designed to simplify HTML document manipulation, event handling, and AJAX interactions. It allows developers to perform complex tasks with minimal code, making it a popular choice among major companies. The document outlines how to implement jQuery, its selectors, events, effects, and DOM manipulation methods.

Uploaded by

espinozaden45
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 64

UNIT :- 3

INTRODUCTION TO
JQUERY
WHAT IS JQUERY?
• jQuery is a lightweight, "write less, do more", JavaScript library.
• The purpose of jQuery is to make it much easier to use JavaScript on your website.
• jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them
into methods that you can call with a single line of code.
• jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
• The jQuery library contains the following features:
• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
Why jQuery?
• There are lots of other JavaScript libraries out there, but jQuery is probably the most popular,
and also the most extendable.
• Many of the biggest companies on the Web use jQuery, such as:
• Google
• Microsoft
• IBM
• Netflix
ADDING JQUERY TO YOUR WEB PAGES

• There are 3 steps to implenet jquery in HTML.


Step 1 : Download the jQuery library from jQuery.com
Step 2 : Include jQuery.js file in HTML file
Step 3 : Do jquery code in <script> tag
BENEFITS OF JQUERY
• Browser Independent
• Increase Coding Speed
Prior knowledge before Learning jquery :-
HTML
CSS
Basic JavaScript
SYNTAX
• $(document).ready(function(){
Further jQuery Code
});
• $(function(){

// jQuery methods go here...

});
EXAMPLE OF JQUERY
<head>

<script src=“jquery.js”></script>

</head>

<body>

<script>

$(document).ready(function(){

alert(1);

});

</script>

</body>
JQUERY SELECTORS
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on
their name, id, classes, types, attributes, values of attributes and much more.
It's based on the existing CSS Selectors, and in addition, it has some own
custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
Type of Selector :-

1. The element Selector


2. The #id Selector
3. The .class Selector
4. The * Selector

Short Selectors Example :-

Document.getElementByClassName(“classname”)
$(“.classname”)

Document.getElementByTagName(“tagname”)
$(“tagname”)

Document.getElementById(“idname”)
$(“#idname”)
THE ELEMENT SELECTOR
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this: $("p")
Example :- When a user clicks on a button, all <p> elements will be hidden:
$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});
THE #ID SELECTOR
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a
single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML element:
$("#test")
Example :- When a user clicks on a button, the element with id="test" will be hidden:
Example
<script>

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

</script>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
THE .CLASS SELECTOR

The jQuery .class selector finds elements with a specific class.


To find elements with a specific class, write a period character, followed by the name of the class: $(".test")
Example : -When a user clicks on a button, the elements with class="test" will be hidden:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
THE * SELECTOR

The jQuery * selector Selects all elements with a specific page.


To find elements with a specific page, $(“*")
Example : -When a user clicks on a button, the all elements with page will be hidden:
$(document).ready(function(){
$("button").click(function(){
$("*").hide();
});
});
<p This is a paragraph.</p>
<p>This is another paragraph.</p>
JQUERY EVENTS

What are Events?


All the different visitors' actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
Examples:
moving a mouse over an element
selecting a radio button
clicking on an element
The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key".
JQUERY EVENTS CON…

Here are some common DOM events:

Mouse Events Keyboard Events Form Events Document/Window


Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
JQUERY EVENTS CON…

Mouse Events :
1 ) Click()
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.
The following example says: When a click event fires on a <p> element; hide the current <p> element:
Example
$("p").click(function(){
$(this).hide();
});
JQUERY EVENTS CON…

Mouse Events :
2 ) dblclick()
The dblclick() method attaches an event handler function to an HTML element.
The function is executed when the user double-clicks on the HTML element:
Example
$("p").dblclick(function(){
$(this).hide();
});
JQUERY EVENTS CON…

Mouse Events :
3 ) mouseenter()
The mouseenter() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer enters the HTML element:
Example
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
JQUERY EVENTS CON…

Mouse Events :
4) mouseleave()
The mouseleave() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer leaves the HTML element:
Example
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
JQUERY EVENTS CON…

Form Events :
1) focus()
The focus() method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus:
Example
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
JQUERY EVENTS CON…

Form Events :
2) blur()
The blur() method attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus:
Example
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
JQUERY EVENTS CON…

Form Events :
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
$("input").blur(function(){
$(this).css("background-color", "green");
});
});
JQUERY EVENTS CON…

key Events :
keydown - The key is on its way down
keypress - The key is pressed down
keyup - The key is released
The keypress() method triggers the keypress event, or attaches a function to run when a keypress event
occurs.
The keypress event is similar to the keydown event. The event occurs when a button is pressed down.
However, the keypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC). Use the keydown() method
to also check these keys.
JQUERY EVENTS CON…
$("span").text(i += 1);
<!DOCTYPE html>
});
<html>
});
<head>
</script>
<script
src="https://ajax.googleapis.com/ajax/l </head>
ibs/jquery/3.5.1/jquery.min.js"></script <body>
>
Enter your name: <input type="text">
<script>
<p>Keypresses: <span>0</span></p>
i = 0;
</body>
$(document).ready(function(){
</html>
$("input").keyup(function(){
JQUERY EVENTS CON…

Document/Windows Events :
Resize() - An event handler function is attached to an window element by the resize() method and that
function is executed whenever the size of browser window changes.
Scroll() - The scroll event of jQuery occurs when the user scrolls in the specified element and then the
scroll() method triggers the scroll event, or attaches a function to run.
JQUERY EVENTS CON…
<!DOCTYPE html>
<html> });

<head> });
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/j </head>
query/3.2.1/jquery.min.js"></script>
<body>
<script> <h2>Heading 1</h2>
x = 0; <p>This is the first paragraph.<span>0</span> times.</p>
$(document).ready(function(){ <p>Window resized <span>0</span> times.</p>
$(window).resize(function(){ <p>Try resizing your browser window.</p>
$("span").text(x += 1); </body>
</html>
JQUERY EFFECTS

Effects :-
1. Hide
2. Show
3. Fade
4. Slide
5. Animation
6. Stop
7. Callback and function
8. Chaining
JQUERY EFFECTS CON…

Hide () Show ()
With jQuery, you can hide HTML elements
With jQuery, you can show HTML elements
with the hide() and show() methods:
with the show() methods:

$("#hide").click(function(){
$("p").hide(); $("#show").click(function(){
}); $("p").show();
});
JQUERY EFFECTS CON…

Name Description Example

Fadein() $(selector).fadeIn(speed,callback); $("button").click(function(){


The optional speed parameter specifies the $("#div1").fadeIn();
duration of the effect. It can take the following $("#div2").fadeIn("slow");
values: "slow", "fast", or milliseconds. $("#div3").fadeIn(3000);
The optional callback parameter is a function to });
be executed after the fading completes.
Fadeout() $(selector).fadeOut(speed,callback); $("button").click(function(){
The optional speed parameter specifies the $("#div1").fadeOut();
duration of the effect. It can take the following $("#div2").fadeOut("slow");
values: "slow", "fast", or milliseconds. $("#div3").fadeOut(3000);
The optional callback parameter is a function to });
be executed after the fading completes.
JQUERY EFFECTS CON…
Name Description Example

Fadetoggel() $(selector).fadeToggle(speed,callback); $("button").click(function(){


The jQuery fadeToggle() method toggles between $("#div1").fadeToggle();
the fadeIn() and fadeOut() methods. $("#div2").fadeToggle("slow");
If the elements are faded out, fadeToggle() will fade them in. $("#div3").fadeToggle(3000);
If the elements are faded in, fadeToggle() will fade them out. });
Fadeto() $(selector).fadeTo(speed,opacity,callback); $("button").click(function(){
The required speed parameter specifies the duration of the effect. It $("#div1").fadeTo("slow", 0.15);
can take the following values: "slow", "fast", or milliseconds. $("#div2").fadeTo("slow", 0.4);
The required opacity parameter in the fadeTo() method specifies $("#div3").fadeTo("slow", 0.7);
fading to a given opacity (value between 0 and 1). });
The optional callback parameter is a function to be executed after the
function completes.
JQUERY EFFECTS CON…

Slid () :- jQuery has the following slide methods: 1) slideDown() 2) slideUp() 3) slideToggle()
1) slideeDown :- The jQuery slideDown() method is used to slide down an element.
Syntax:
$(selector).slideDown(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or
milliseconds.
The optional callback parameter is a function to be executed after the sliding completes.
The following example demonstrates the slideDown() method:
Example
$("#flip").click(function(){
$("#panel").slideDown();
});
JQUERY EFFECTS CON…

2) slideeUp :- The jQuery slideUp() method is used to slide up an element.


Syntax:
&(selector).slideUp(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow",
"fast", or milliseconds.
The optional callback parameter is a function to be executed after the sliding completes.
The following example demonstrates the slideUp() method:
Example
$("#flip").click(function(){
$("#panel").slideUp();
});
JQUERY EFFECTS CON…

Animation :- The jQuery animate() method is used to create custom animations.


Syntax:- $(selector).animate({params},speed,callback);
The required params parameter defines the CSS properties to be animated.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or
milliseconds.
The optional callback parameter is a function to be executed after the animation completes.
The following example demonstrates a simple use of the animate() method; it moves a <div> element to the right, until it
has reached a left property of 250px: $("button").click(function(){
$("div").animate({
Example
left: '250px',
$("button").click(function(){ opacity: '0.5',
$("div").animate({left: '250px'}); height: '150px',
width: '150px'
}); });
});
JQUERY EFFECTS CON…

Stop () :- The jQuery stop() method is used to stop an animation or effect before it is finished.
The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.
Syntax:
$(selector).stop(stopAll,goToEnd);
The optional stopAll parameter specifies whether also the animation queue should be cleared or not. Default is false, which means that
only the active animation will be stopped, allowing any queued animations to be performed afterwards.
The optional goToEnd parameter specifies whether or not to complete the current animation immediately. Default is false.
So, by default, the stop() method kills the current animation being performed on the selected element.
The following example demonstrates the stop() method, with no parameters:
Example
$("#stop").click(function(){
$("#panel").stop();
});
JQUERY EFFECTS CON…

Callback :-JavaScript statements are executed line by line. However, with effects, the next line of code can be run
even though the effect is not finished. This can create errors.
To prevent this, you can create a callback function.
A callback function is executed after the current effect is finished.
Typical syntax: $(selector).hide(speed,callback);
Examples
The example below has a callback parameter that is a function that will be executed after the hide effect is completed:
Example with Callback Example without Callback
$("button").click(function(){ $("button").click(function(){
$("p").hide("slow", function(){ $("p").hide(1000);
alert("The paragraph is now hidden");
alert("The paragraph is now hidden");
});
});
});
JQUERY EFFECTS CON…

Chaining:- Until now we have been writing jQuery statements one at a time (one after the other).
However, there is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same
element(s).
Tip: This way, browsers do not have to find the same element(s) more than once.
To chain an action, you simply append the action to the previous action.
The following example chains together the css(), slideUp(), and slideDown() methods. The "p1" element first changes to red, then it
slides up, and then it slides down:
Example
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
});
});
JQUERY HTML

jQuery contains powerful methods for changing and manipulating HTML elements and attributes.

jQuery DOM Manipulation


One very important part of jQuery is the possibility to manipulate the DOM.jQuery comes with a bunch of DOM related
methods that make it easy to access and manipulate elements and attributes.

Types Of Jquery HTML :-

1. Jquery Get

2. Jquery Set

3. Jquery Add

4. Jquery Remove
JQUERY HTML

Jquery Get :-
1. Text()
2. Html()
3. Attr()
4. Val()

text() - Sets or returns the text content of selected elements

html() - Sets or returns the content of selected elements (including HTML markup)

val() - Sets or returns the value of form fields

Attr() - The jQuery attr() method is used to get attribute values.


JQUERY HTML
Example :
Example :
2) Html :
1) Text :
$(document).ready(function()
$(document).ready(function()
{
{
$("#html").click(function()
$("#text").click(function(){ {
var a=$("#box").text(); var a=$("#box").html();
alert(a); alert(a);
}); });
}); });
JQUERY HTML

Example :
Example :
3) val : $(document).ready(function()

{
4) Attr :

$("#val").click(function(){ $(document).ready(function()
var name=$("#nm").val(); {
var clas=$("#cls").val(); $(“#attr").click(function(){
document.write("Name is :- "-name- alert($("#w3s").attr("href"));
"<br>"+"Class Name is :- "+clas); });

}); });
});
JQUERY HTML

Jquery Set :-

We will use the same three methods from the previous page to set content:

1. text() - Sets or returns the text content of selected elements


2. html() - Sets or returns the content of selected elements (including HTML markup)
3. val() - Sets or returns the value of form fields

The following example demonstrates how to set content with the jQuery text(), html(), and val()
methods:
JQUERY HTML
Example :
<body>
<script>
$(document).ready(function(){
<p id="test1">This is a paragraph.</p>
$("#btn1").click(function(){
<p id="test2">This is another paragraph.</p>
$("#test1").text("Hello world!");
});
<p>Input field: <input type="text" id="test3"
$("#btn2").click(function(){
value="Mickey Mouse"></p>
$("#test2").html("<b>Hello world!</b>");
});
<button id="btn1">Set Text</button>
$("#btn3").click(function(){
<button id="btn2">Set HTML</button>
$("#test3").val("Dolly Duck");
<button id="btn3">Set Value</button>
});
});
</script> </body>
JQUERY HTML
Jquery Set :-

Set Attributes - attr()


The jQuery attr() method is also used to set/change attribute values.

The following example demonstrates how to change (set) the value of the href attribute in a link:

Example
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
JQUERY HTML
Jquery Add :-

We will look at four jQuery methods that are used to add new content:

append() - Inserts content at the end of the selected elements


prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements
JQUERY HTML
The jQuery append() method inserts content AT
THE END of the selected HTML elements
<script> <body>

$(document).ready(function(){ <p>This is a paragraph.</p>


<p>This is another paragraph.</p>
$("#btn1").click(function(){
<ol>
$("p").append(" <b>Appended text</b>.");
<li>List item 1</li>
});
<li>List item 2</li>
$("#btn2").click(function(){
<li>List item 3</li>
$("ol").append("<li>Appended item</li>");
</ol>
});
<button id="btn1">Append text</button>
}); <button id="btn2">Append list items</button>
</script> </body>
JQUERY HTML
jQuery prepend() Method <body>
The jQuery prepend() method inserts content AT THE BEGINNING
<p>This is a paragraph.</p>
of the selected HTML elements.

<script> <p>This is another paragraph.</p>

$(document).ready(function(){ <ol>
$("#btn1").click(function(){ <li>List item 1</li>
$("p").prepend("<b>Prepended text</b>. "); <li>List item 2</li>
}); <li>List item 3</li>
$("#btn2").click(function(){
</ol>
$("ol").prepend("<li>Prepended item</li>");
<button id="btn1">Prepend text</button>
});
<button id="btn2">Prepend list item</button>
});
</body>
</script>
JQUERY HTML

jQuery after() and before() Methods $("#btn2").click(function(){


The jQuery after() method inserts content AFTER the selected
$("img").after("<i>After</i>");
HTML elements.
});
The jQuery before() method inserts content BEFORE the selected
HTML elements. });
<script> </script>
$(document).ready(function(){ <body>
$("#btn1").click(function(){ <img src="/images/w3jquery.gif" alt="jQuery"
$("img").before("<b>Before</b>"); width="100" height="140"><br><br>
}); <button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
JQUERY HTML
Jquery Remove :-
To remove elements and content, there are mainly two jQuery methods:
remove() - Removes the selected element (and its child elements)
empty() - Removes the child elements from the selected element
jQuery remove() Method
The jQuery remove() method removes the selected element(s) and its child elements.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
}); }); </script>
JQUERY HTML
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
</body>
JQUERY HTML
jQuery empty() Method <body>

The jQuery empty() method removes the <div id="div1" style="height:100px;width:300px;border:1px


child elements of the selected element(s). solid black;background-color:yellow;">

<script> This is some text in the div.


$(document).ready(function(){ <p>This is a paragraph in the div.</p>
$("button").click(function(){ <p>This is another paragraph in the div.</p>
$("#div1").empty(); </div>
}); <br>
}); <button>Empty the div element</button>
</script> </body>
Jquery Manipulating CSS
jQuery has several methods for CSS manipulation. We will look at the following methods:

addClass() - Adds one or more classes to the selected elements


removeClass() - Removes one or more classes from the selected elements
toggleClass() - Toggles between adding/removing classes from the selected elements
css() - Sets or returns the style attribute
JQUERY MANIPULATING CSS
jQuery addClass() Method
The following example shows how to add class attributes to different elements. Of course you can select multiple
elements, when adding classes: <style>

.important { font-weight: bold; font-size: xx-large;}


Example
.blue {color: blue;}
<script>
</style><body>
$(document).ready(function(){
<h1>Heading 1</h1>
$("button").click(function(){ <h2>Heading 2</h2>

$("h1, h2, p").addClass("blue"); <p>This is a paragraph.</p>

<p>This is another paragraph.</p>


$("div").addClass("important");
<div>This is some important text!</div><br>
});
<button>Add classes to elements</button> </body>
});
</script>
JQUERY MANIPULATING CSS
jQuery removeClass() Method
The following example shows how to remove a specific class attribute from different elements:
<style>
Example
.blue { color: blue; }
<script>
</style>
$(document).ready(function(){ <body>

$("button").click(function(){ <h1 class="blue">Heading 1</h1>

$("h1, h2, p").removeClass("blue"); <h2 class="blue">Heading 2</h2>

<p class="blue">This is a paragraph.</p>


});
<p>This is another paragraph.</p>
});
<button>Remove class from elements</button>
</script> </body>
JQUERY MANIPULATING CSS
jQuery toggleClass() Method
The following example will show how to use the jQuery toggleClass() method. This method toggles between
adding/removing classes from the selected elements:
<style>
Example
.blue { color: blue; }
<script>
</style>
$(document).ready(function(){
<body>
$("button").click(function(){ <h1>Heading 1</h1>

$("h1, h2, p").toggleClass("blue"); });}); <h2>Heading 2</h2>

<p>This is a paragraph.</p>
</script>
<p>This is another paragraph.</p>

<button>Toggle class</button> </body>


JQUERY MANIPULATING CSS
jQuery css() Method
The css() method sets or returns one or more style properties for the selected elements.

Return a CSS Property


To return the value of a specified CSS property, use the following syntax:

css("propertyname");
The following example will return the background-color value of the FIRST matched element:
JQUERY MANIPULATING CSS
<script>
$(document).ready(function(){
$("button").click(function(){
<p style="background-color:#00ff00">This is a
$("p").css("background-color", "yellow");
paragraph.</p>
});
<p style="background-color:#0000ff">This is a
}); paragraph.</p>
</script> <p>This is a paragraph.</p>
<body> <button>Set background-color of p</button>
<h2>This is a heading</h2> </body>
<p style="background-color:#ff0000">This is a paragraph.</p>
JQUERY MANIPULATING CSS
Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color": "yellow", "font-size": "200%"});

jQuery - Dimensions
jQuery Dimension Methods
jQuery has several important methods for working with dimensions:
1) width() 2) height()
3) innerWidth() 4) innerHeight()
5) outerWidth() 6) outerHeight()
JQUERY MANIPULATING CSS
jQuery width() and height() Methods
The width() method sets or returns the width of an element (excludes padding, border and margin).
The height() method sets or returns the height of an element (excludes padding, border and margin).
The following example returns the width and height of a specified <div> element:
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
JQUERY MANIPULATING CSS
jQuery innerWidth() and innerHeight() Methods
The innerWidth() method returns the width of an element (includes padding).
The innerHeight() method returns the height of an element (includes padding).
The following example returns the inner-width/height of a specified <div> element:
Example
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt); });
JQUERY MANIPULATING CSS
jQuery innerWidth() and innerHeight() Methods
The innerWidth() method returns the width of an element (includes padding).
The innerHeight() method returns the height of an element (includes padding).
The following example returns the inner-width/height of a specified <div> element:
Example
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt); });
JQUERY MANIPULATING CSS
jQuery outerWidth() and outerHeight() Methods
The outerWidth() method returns the width of an element (includes padding and border).
The outerHeight() method returns the height of an element (includes padding and border).
The following example returns the outer-width/height of a specified <div> element:
Example
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt); });
JQUERY MANIPULATING CSS
The outerWidth(true) method returns the width of an element (includes padding, border, and margin).
The outerHeight(true) method returns the height of an element (includes padding, border, and margin).
Example
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
JQUERY TRAVERSING
jQuery Traversing - Ancestors
With jQuery you can traverse up the DOM tree to find ancestors of an element.
An ancestor is a parent, grandparent, great-grandparent, and so on.
Traversing Up the DOM Tree
Three useful jQuery methods for traversing up the DOM tree are:
parent()
parents()
parentsUntil()

You might also like