This document provides an introduction to jQuery, including:
- What jQuery is and its main features like DOM manipulation, CSS manipulation, events, effects, animations, and AJAX.
- The benefits of jQuery like being browser independent and increasing coding speed.
- How to add jQuery to web pages by downloading the jQuery library, including the jQuery file, and writing jQuery code within script tags.
- jQuery selectors that allow selecting elements based on name, id, classes, attributes, and more. Common selectors include element, id, class, and universal selectors.
- jQuery events like click, change, submit, and how to attach event handler functions using methods like click(), change
Mobile applications Development - Lecture 12
Javascript
jQuery (Zepto)
useful microframeworks
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
This document provides an overview of jQuery, including:
- What jQuery is and its main features like DOM manipulation, CSS manipulation, events, effects, animations, and AJAX.
- How to include jQuery via downloading or using a CDN.
- The basic jQuery syntax of $(selector).action() to select elements and perform actions.
- Common selectors like id, class, and element selectors.
- Methods for hiding, showing, fading, sliding, adding/removing content and classes.
- How events and chaining allow combining multiple actions.
It covers:
- What is jQuery?
- Why jQuery?
- How include jQuery in your web page
- Creating and manipulating elements
- Events
- Animations and effects
- Talking to the server
- jQuery UI
- Writing plugins
- Breaking news around new releases
- Using the CDN
This document provides an introduction and overview of jQuery. It discusses how jQuery simplifies DOM navigation and manipulation, handles browser differences, and makes JavaScript coding easier. The document covers basic jQuery concepts like selectors, the jQuery function, attributes, and events. It also provides examples of common jQuery code.
jQuery is a JavaScript library that simplifies HTML document manipulation and event handling. It allows developers to select elements, hide/show them, modify styles, and handle events with simple one-line statements. jQuery also simplifies AJAX calls and DOM manipulation. Common jQuery features include HTML/DOM manipulation, CSS manipulation, event handling, effects/animations, and AJAX. jQuery code uses CSS-like selectors and methods to target elements and perform actions on them.
This document provides an overview of jQuery, including:
- What jQuery is and how it simplifies client-side scripting
- How to download and include the jQuery library
- Common jQuery syntax using selectors to find elements and perform actions
- How jQuery interacts with elements using the DOM and handles events
- How jQuery enables AJAX interactions to request and load data asynchronously
This document provides a summary of jQuery, including:
- What jQuery is and why it is popular
- How to install and include the jQuery library
- Common jQuery syntax using selectors to select and manipulate HTML elements
- Examples of jQuery events, DOM traversal methods, and AJAX functionality
- Contact information is provided at the end for the training organization behind the document.
This document summarizes a lecture on web technologies including DOM, jQuery, and form validation. It introduces DOM as a representation of the web page as a tree structure, and describes how jQuery makes it easier to navigate and manipulate the DOM using CSS selectors and event handling. Examples are given of how jQuery can be used to select and modify page elements, handle events, and validate form data on submit and as the user enters information. Readings and an assignment are suggested for further practice.
This document provides a summary of jQuery fundamentals, including:
- jQuery simplifies client-side scripting of HTML and selecting DOM elements
- Popular uses include navigation, animation, event handling, and AJAX
- jQuery is easy to learn and use, supports method chaining, and has a large developer community
- Key concepts include selecting elements, DOM manipulation, events, AJAX requests, and using jQuery UI widgets
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
Introduction to jQuery Mobile (jQM) - cont'd
Getting started with jQM
-Downloading the Most Recent Version of jQuery Mobile
-Proper Markup for Loading Framework JavaScript and CSS
jQuery Mobile Page Structure
-Page Anatomy: Header, Footer and Content Sections
-Header and Footer Toolbars
-Bundling Pages into a Single Document
-Navigating Between Pages
Applying Different Theme Swatches
Page Initialization Events
jQuery Mobile Page Components
Basic Content Formatting
List Views
-Ordered and Unordered Lists
-Inset Lists
-Lists with Links
-Nested Lists
-Lists with Icons or Thumbnail Images
-Split Button Lists
-List Dividers
-Search Filters
Form Controls - check boxes, slider, etc.
Dialogs
Buttons and Toolbars
-Ways to Make a Button
-Placing Icons on Your Buttons
-Inline Buttons
-Button Groupings
-Navigation Toolbars
Collapsible Content
Event Handling
-Responding to various events
-Page related events
Ajax & Interaction with server (REST & SOAP)
Deployment using Phonegap (e.g. Android)
Overview of Android Devt Environment
Best Practices in jQM
Hands-on exercises
This document provides an introduction to jQuery, including what jQuery is, why it's useful, how to include it, and some common jQuery syntax and methods. Key points:
- jQuery is a JavaScript framework that makes interacting with HTML, CSS, and browser functionality simpler. It provides methods for DOM manipulation, AJAX requests, and event handling.
- jQuery uses CSS selector syntax to select elements and chainable methods to manipulate them. Common methods include show(), hide(), addClass(), removeClass(), and more.
- Events like click and change can have callback functions attached via jQuery. AJAX requests allow asynchronous data retrieval without page reloads.
- jQuery handles cross-browser compatibility and provides a consistent
A Rich Web Experience with jQuery, Ajax and .NETJames Johnson
The document is a presentation about providing a rich web experience using jQuery, Ajax, and .NET. It discusses JavaScript and jQuery, including jQuery syntax, selectors, chaining, traversing, manipulation, events, effects, and Ajax functionality. It also covers jQuery UI widgets and themes. The last section discusses user experience considerations like validating user input with Ajax calls.
How to increase Performance of Web Application using JQuerykolkatageeks
Pallab Dutta presented a wonderful session on how to increase productivity of web application using JQuery. He showed us demos regarding basic syntax of JQuery.
Follow us
www.kolkatageeks.com
to get more.
jQuery is a JavaScript library that makes it easier to write JavaScript code that runs on different browsers. It allows selecting DOM elements, traversing through them and manipulating them. jQuery simplifies tasks like handling events, animating elements, and making AJAX calls. Some key features include selecting elements by tag name, ID, or CSS class; traversing DOM elements; binding event handlers; animating elements with effects like show, hide, fade; and making asynchronous HTTP requests via AJAX.
This document discusses jQuery, a JavaScript library that simplifies HTML document manipulation and user interaction. It allows selecting elements, modifying content and styling, handling events, and using AJAX. Some key benefits are cross-browser support, CSS-like syntax, and an active developer community. Examples provided demonstrate using jQuery for forms, chatboxes, menus, animations and more. Selectors allow finding elements by ID, class, type and other attributes. Events like click can have functions attached. jQuery is used by many large companies and helps abstract away browser differences.
This document discusses jQuery, a JavaScript library that simplifies HTML document manipulation and user interaction. It allows selecting elements, modifying content and styling, handling events, and using AJAX. Some key benefits are cross-browser compatibility and a CSS-like syntax. Examples provided include forms, chat boxes, menus, and animations. Selectors allow finding elements by ID, class, type and other attributes. Events like click can have functions attached. jQuery is used by many large companies and helps build interactive web pages.
This document provides an overview of jQuery, including:
- What jQuery is and its main advantages like simplifying JavaScript programming
- How to enable jQuery and the basic jQuery syntax
- The differences between JavaScript and jQuery
- Common jQuery selectors, events, and effects like show(), hide(), fadeIn(), etc.
It covers the main concepts in jQuery like selecting elements, events, and animations at a high level in order to introduce the reader to what jQuery is and its basic functionality.
jQuery is a JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions. It allows developers to select elements, handle events, and perform animations with less code. jQuery supports DOM manipulation, event handling, AJAX, animations, and is lightweight, cross-browser compatible, and supports the latest technologies. Selectors in jQuery allow developers to easily select elements in HTML documents. jQuery also provides methods for traversing, filtering, and manipulating selected elements. AJAX functionality in jQuery allows loading data asynchronously without page refreshes. jQuery includes methods for various stages of the AJAX lifecycle. jQuery provides simple interfaces for common effects like fading, sliding, and custom animations with minimal configuration
The document provides an overview of core web technologies including HTTP, HTML, CSS, JavaScript and how they work together. It explains how HTTP is used to transfer data between client and server, how HTML structures content, CSS styles content, and JavaScript controls behavior. It also discusses how these technologies have evolved over time and how jQuery simplifies working with them through its selector and method chains that abstract browser differences.
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
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");
});
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.
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:
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
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:
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()