SlideShare uma empresa Scribd logo
1 de 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.
$("span").text(i += 1);
});
});
</script>
</head>
<body>
Enter your name: <input type="text">
<p>Keypresses: <span>0</span></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/l
ibs/jquery/3.5.1/jquery.min.js"></script
>
<script>
i = 0;
$(document).ready(function(){
$("input").keyup(function(){
JQUERY EVENTS CON…
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.
});
});
</script>
</head>
<body>
<h2>Heading 1</h2>
<p>This is the first paragraph.<span>0</span> times.</p>
<p>Window resized <span>0</span> times.</p>
<p>Try resizing your browser window.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/lib
s/jquery/3.2.1/jquery.min.js"></script>
<script>
x = 0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x += 1);
JQUERY EVENTS CON…
JQUERY EFFECTS
Effects :-
1. Hide
2. Show
3. Fade
4. Slide
5. Animation
6. Stop
7. Callback and function
8. Chaining
Show ()
With jQuery, you can show HTML elements
with the show() methods:
$("#show").click(function(){
$("p").show();
});
Hide ()
With jQuery, you can hide HTML elements
with the hide() and show() methods:
$("#hide").click(function(){
$("p").hide();
});
JQUERY EFFECTS CON…
JQUERY EFFECTS CON…
Name Description Example
Fadein() $(selector).fadeIn(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 fading completes.
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Fadeout() $(selector).fadeOut(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 fading completes.
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
JQUERY EFFECTS CON…
Name Description Example
Fadetoggel() $(selector).fadeToggle(speed,callback);
The jQuery fadeToggle() method toggles between
the fadeIn() and fadeOut() methods.
If the elements are faded out, fadeToggle() will fade them in.
If the elements are faded in, fadeToggle() will fade them out.
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow"
);
$("#div3").fadeToggle(3000);
});
Fadeto() $(selector).fadeTo(speed,opacity,callback);
The required speed parameter specifies the duration of the
effect. It can take the following values: "slow", "fast", or
milliseconds.
The required opacity parameter in the fadeTo() method specifies
fading to a given opacity (value between 0 and 1).
The optional callback parameter is a function to be executed
after the function completes.
$("button").click(function(){
$("#div1").fadeTo("slow", 0.1
5);
$("#div2").fadeTo("slow", 0.4
);
$("#div3").fadeTo("slow", 0.7
);
});
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();
});
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
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:
Example
$("button").click(function(){
$("div").animate({left: '250px'});
});
JQUERY EFFECTS CON…
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();
});
Example without Callback
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
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
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
JQUERY EFFECTS CON…
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.
Example :
2) Html :
$(document).ready(function()
{
$("#html").click(function()
{
var a=$("#box").html();
alert(a);
});
});
Example :
1) Text :
$(document).ready(function()
{
$("#text").click(function(){
var a=$("#box").text();
alert(a);
});
});
JQUERY HTML
Example :
4) Attr :
$(document).ready(function()
{
$(“#attr").click(function(){
alert($("#w3s").attr("href"));
});
});
Example :
3) val : $(document).ready(function()
{
$("#val").click(function(){
var name=$("#nm").val();
var clas=$("#cls").val();
document.write("Name is :- "-name-
"<br>"+"Class Name is :- "+clas);
});
});
JQUERY HTML
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:
Example :
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
JQUERY HTML
<body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3"
value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</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
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
The jQuery append() method inserts content AT
THE END of the selected HTML elements
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
JQUERY HTML
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
jQuery prepend() Method
The jQuery prepend() method inserts content AT THE BEGINNING of
the selected HTML elements.
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>Prepended text</b>. ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>Prepended item</li>");
});
});
</script>
JQUERY HTML
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
<body>
<img src="/images/w3jquery.gif" alt="jQuery"
width="100" height="140"><br><br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
jQuery after() and before() Methods
The jQuery after() method inserts content AFTER the selected
HTML elements.
The jQuery before() method inserts content BEFORE the selected
HTML elements.
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
JQUERY HTML
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>
<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>Empty the div element</button>
</body>
jQuery empty() Method
The jQuery empty() method removes
the child elements of the selected
element(s).
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
JQUERY HTML
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:
Example
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style>
.important { font-weight: bold; font-size: xx-large;}
.blue {color: blue;}
</style><body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some important text!</div><br>
<button>Add classes to elements</button> </body>
JQUERY MANIPULATING CSS
jQuery removeClass() Method
The following example shows how to remove a specific class attribute from different elements:
Example
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
});
</script>
<style>
.blue { color: blue; }
</style>
<body>
<h1 class="blue">Heading 1</h1>
<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>
</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:
Example
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").toggleClass("blue"); });});
</script>
<style>
.blue { color: blue; }
</style>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<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").css("background-color", "yellow");
});
});
</script>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a
paragraph.</p>
<p style="background-color:#0000ff">This is a
paragraph.</p>
<p>This is a paragraph.</p>
<button>Set background-color of p</button>
</body>
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()

Mais conteúdo relacionado

Semelhante a Unit3.pptx

Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
baygross
 

Semelhante a Unit3.pptx (20)

jQuery
jQueryjQuery
jQuery
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Jquery- One slide completing all JQuery
Jquery- One slide completing all JQueryJquery- One slide completing all JQuery
Jquery- One slide completing all JQuery
 
jQuery besic
jQuery besicjQuery besic
jQuery besic
 
jQuery
jQueryjQuery
jQuery
 
Introduzione JQuery
Introduzione JQueryIntroduzione JQuery
Introduzione JQuery
 
Jquery Basics
Jquery BasicsJquery Basics
Jquery Basics
 
Jquery library
Jquery libraryJquery library
Jquery library
 
Lec 5
Lec 5Lec 5
Lec 5
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
 
Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
 
A Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NETA Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NET
 
How to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQueryHow to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQuery
 
Introduction to JQuery
Introduction to JQueryIntroduction to JQuery
Introduction to JQuery
 
JQuery
JQueryJQuery
JQuery
 
JQuery
JQueryJQuery
JQuery
 
jQuery for web development
jQuery for web developmentjQuery for web development
jQuery for web development
 
JQuery
JQueryJQuery
JQuery
 
Client Web
Client WebClient Web
Client Web
 

Unit3.pptx

  • 2. 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
  • 3. 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
  • 4. 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
  • 5. BENEFITS OF JQUERY • Browser Independent • Increase Coding Speed Prior knowledge before Learning jquery :- HTML CSS Basic JavaScript
  • 6. SYNTAX • $(document).ready(function(){ Further jQuery Code }); • $(function(){ // jQuery methods go here... });
  • 7. EXAMPLE OF JQUERY <head> <script src=“jquery.js”></script> </head> <body> <script> $(document).ready(function(){ alert(1); }); </script> </body>
  • 8. 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: $().
  • 9. 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”)
  • 10. 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(); }); });
  • 11. 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:
  • 13. 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>
  • 14. 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>
  • 15. 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".
  • 16. 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
  • 17. 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(); });
  • 18. 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(); });
  • 19. 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!"); });
  • 20. 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!"); });
  • 21. 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"); });
  • 22. 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"); });
  • 23. JQUERY EVENTS CON… Form Events : $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color", "yellow"); }); $("input").blur(function(){ $(this).css("background-color", "green"); }); });
  • 24. 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.
  • 25. $("span").text(i += 1); }); }); </script> </head> <body> Enter your name: <input type="text"> <p>Keypresses: <span>0</span></p> </body> </html> <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/l ibs/jquery/3.5.1/jquery.min.js"></script > <script> i = 0; $(document).ready(function(){ $("input").keyup(function(){ JQUERY EVENTS CON…
  • 26. 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.
  • 27. }); }); </script> </head> <body> <h2>Heading 1</h2> <p>This is the first paragraph.<span>0</span> times.</p> <p>Window resized <span>0</span> times.</p> <p>Try resizing your browser window.</p> </body> </html> <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/lib s/jquery/3.2.1/jquery.min.js"></script> <script> x = 0; $(document).ready(function(){ $(window).resize(function(){ $("span").text(x += 1); JQUERY EVENTS CON…
  • 28. JQUERY EFFECTS Effects :- 1. Hide 2. Show 3. Fade 4. Slide 5. Animation 6. Stop 7. Callback and function 8. Chaining
  • 29. Show () With jQuery, you can show HTML elements with the show() methods: $("#show").click(function(){ $("p").show(); }); Hide () With jQuery, you can hide HTML elements with the hide() and show() methods: $("#hide").click(function(){ $("p").hide(); }); JQUERY EFFECTS CON…
  • 30. JQUERY EFFECTS CON… Name Description Example Fadein() $(selector).fadeIn(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 fading completes. $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); Fadeout() $(selector).fadeOut(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 fading completes. $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });
  • 31. JQUERY EFFECTS CON… Name Description Example Fadetoggel() $(selector).fadeToggle(speed,callback); The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the elements are faded out, fadeToggle() will fade them in. If the elements are faded in, fadeToggle() will fade them out. $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow" ); $("#div3").fadeToggle(3000); }); Fadeto() $(selector).fadeTo(speed,opacity,callback); The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1). The optional callback parameter is a function to be executed after the function completes. $("button").click(function(){ $("#div1").fadeTo("slow", 0.1 5); $("#div2").fadeTo("slow", 0.4 ); $("#div3").fadeTo("slow", 0.7 ); });
  • 32. 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(); });
  • 33. 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(); });
  • 34. $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); }); 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: Example $("button").click(function(){ $("div").animate({left: '250px'}); }); JQUERY EFFECTS CON…
  • 35. 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(); });
  • 36. Example without Callback $("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); }); 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 $("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); }); }); JQUERY EFFECTS CON…
  • 37. 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); }); });
  • 38. 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
  • 39. 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.
  • 40. Example : 2) Html : $(document).ready(function() { $("#html").click(function() { var a=$("#box").html(); alert(a); }); }); Example : 1) Text : $(document).ready(function() { $("#text").click(function(){ var a=$("#box").text(); alert(a); }); }); JQUERY HTML
  • 41. Example : 4) Attr : $(document).ready(function() { $(“#attr").click(function(){ alert($("#w3s").attr("href")); }); }); Example : 3) val : $(document).ready(function() { $("#val").click(function(){ var name=$("#nm").val(); var clas=$("#cls").val(); document.write("Name is :- "-name- "<br>"+"Class Name is :- "+clas); }); }); JQUERY HTML
  • 42. 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:
  • 43. Example : <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); }); </script> JQUERY HTML <body> <p id="test1">This is a paragraph.</p> <p id="test2">This is another paragraph.</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> <button id="btn1">Set Text</button> <button id="btn2">Set HTML</button> <button id="btn3">Set Value</button> </body>
  • 44. 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/"); });
  • 45. 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
  • 46. <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">Append text</button> <button id="btn2">Append list items</button> </body> The jQuery append() method inserts content AT THE END of the selected HTML elements <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); }); $("#btn2").click(function(){ $("ol").append("<li>Appended item</li>"); }); }); </script> JQUERY HTML
  • 47. <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">Prepend text</button> <button id="btn2">Prepend list item</button> </body> jQuery prepend() Method The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements. <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").prepend("<b>Prepended text</b>. "); }); $("#btn2").click(function(){ $("ol").prepend("<li>Prepended item</li>"); }); }); </script> JQUERY HTML
  • 48. $("#btn2").click(function(){ $("img").after("<i>After</i>"); }); }); </script> <body> <img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140"><br><br> <button id="btn1">Insert before</button> <button id="btn2">Insert after</button> jQuery after() and before() Methods The jQuery after() method inserts content AFTER the selected HTML elements. The jQuery before() method inserts content BEFORE the selected HTML elements. <script> $(document).ready(function(){ $("#btn1").click(function(){ $("img").before("<b>Before</b>"); }); JQUERY HTML
  • 49. 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>
  • 50. 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>
  • 51. <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>Empty the div element</button> </body> jQuery empty() Method The jQuery empty() method removes the child elements of the selected element(s). <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").empty(); }); }); </script> JQUERY HTML
  • 52. 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
  • 53. 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: Example <script> $(document).ready(function(){ $("button").click(function(){ $("h1, h2, p").addClass("blue"); $("div").addClass("important"); }); }); </script> <style> .important { font-weight: bold; font-size: xx-large;} .blue {color: blue;} </style><body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <div>This is some important text!</div><br> <button>Add classes to elements</button> </body>
  • 54. JQUERY MANIPULATING CSS jQuery removeClass() Method The following example shows how to remove a specific class attribute from different elements: Example <script> $(document).ready(function(){ $("button").click(function(){ $("h1, h2, p").removeClass("blue"); }); }); </script> <style> .blue { color: blue; } </style> <body> <h1 class="blue">Heading 1</h1> <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> </body>
  • 55. 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: Example <script> $(document).ready(function(){ $("button").click(function(){ $("h1, h2, p").toggleClass("blue"); });}); </script> <style> .blue { color: blue; } </style> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Toggle class</button> </body>
  • 56. 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:
  • 57. JQUERY MANIPULATING CSS <script> $(document).ready(function(){ $("button").click(function(){ $("p").css("background-color", "yellow"); }); }); </script> <body> <h2>This is a heading</h2> <p style="background-color:#ff0000">This is a paragraph.</p> <p style="background-color:#00ff00">This is a paragraph.</p> <p style="background-color:#0000ff">This is a paragraph.</p> <p>This is a paragraph.</p> <button>Set background-color of p</button> </body>
  • 58. 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()
  • 59. 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); });
  • 60. 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); });
  • 61. 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); });
  • 62. 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); });
  • 63. 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); });
  • 64. 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()