2. 03/16/2025
Contents
• JavaScript: Introduction to Scripting languages, Introduction
to JavaScript (JS), JS Variables and Constants, JS Variable
Scopes, JS Data Types, JS Functions, JS Array, JS Object, JS
Events.
• Advanced JavaScript: JSON - JSON Create, Key-Value Pair,
JSON Access, JSON Array, JS Arrow Functions, JS Callback
Functions, JS Promises, JS Async-Await Functions, JS Error
Handling.
• AJAX: Why AJAX, Call HTTP Methods Using AJAX, Data
Sending, Data Receiving, AJAX Error Handling.
• JQUERY :Why JQuery, How to Use, DOM Manipulation
with JQuery, Dynamic Content Change with JQuery, UI
Design Using JQuery.
3. 03/16/2025
JQuery
• jQuery is a JavaScript Library.
• jQuery is easy to learn.
• The purpose of jQuery is to make it much easier to use
JavaScript on your website.
• jQuery is a lightweight, "write less, do more", JavaScript
library.
• jQuery is a fast, and
• feature-rich JavaScript library designed to simplify tasks like
DOM manipulation, event handling, animations, and
AJAX requests.
• It helps developers write less code while achieving more
functionality, making JavaScript development easier and more
efficient.
4. 03/16/2025
Advantages of JQuery
• Works on all platform
• Has large & advanced set of functionality
• Lightweight
• Supports AJAX technology
• Offers event handling
• Built in “animation effects”.
• Supports DOM manipulations
5. 03/16/2025
Disadvantages of JQuery
• Without the use of jquery-3.7.1.min.js (locally or from
internet) cannot use library functions of Jquery.
• Coding must be done in support of Javascript,AJAX,ASP,PHP
to get Jquery library functionality.
6. 03/16/2025
Adding jQuery to Your Web Pages
• There are several ways to start using jQuery on your web site.
• Download the jQuery library from jQuery.com
• Include jQuery from a CDN(Content Delivery Network), like
Google
• To use jQuery from Google or Microsoft, use one of the
following:
7. 03/16/2025
Adding jQuery to Your Web Pages
• Google CDN:
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.
min.js"></script>
</head>
• Microsoft CDN:
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.3.1.min.js"></script>
</head>
8. 03/16/2025
Basic Syntax
• With jQuery you select (query) HTML elements and perform
"actions" on them.
• A $ sign to define/access jQuery .
• A (selector) to "query (or find)" HTML elements .
• A jQuery action() to be performed on the element(s).
$(selector).action()
9. 03/16/2025
Basic Syntax
• Document query event :
– All jQuery methods are inside a document ready
event:
– to wait for the document to be fully loaded and
ready before working with it.
$(document).ready(function(){
// jQuery methods go here...
});
10. 03/16/2025
Basic Syntax
eg
• <!DOCTYPE html>
<html>
<head>
<title>First jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/
ajax/libs/jquery/2.1.3/jquery.min.
js">
</script>
<script type="text/javascript"
language="javascript">
$(document).ready(function() {
$("p").css("background-color",
"pink");
});
</script> </head>
<body>
<p>This is first
paragraph.</p>
<p>This is second
paragraph.</p>
<p>This is third
paragraph.</p>
</body>
</html>
11. 03/16/2025
Basic Syntax
eg
• Examples:
• $(this).hide() - hides the current element.
• $("p").hide() - hides all <p> elements.
• $(".test").hide() - hides all elements with class="test".
• $("#test").hide() - hides the element with id="test".
• Program
12. 03/16/2025
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: $
().
15. 03/16/2025
The #id Selector
eg
• 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
• Use the #id selector to find a single, unique element.
• Syntax : $("#test")
• program
16. 03/16/2025
The .class Selector
eg
• 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
• Syntax : $(“.test")
• program
17. 03/16/2025
The href Selector
eg
• Used with anchor tag in order to introduce hyperlink in the
web document.
• Syntax : $(“a")
• program
18. 03/16/2025
jQuery [attribute$=value] Selector
eg
• Example
• Select all <a> elements with a href attribute that ends with
".org":
• <body>
• <a
href="https://www.w3schools.com">w3schools.com</a><br>
• <a href="http://www.google.com">Google.com</a><br>
• <a href="http://www.wikipedia.org">wikipedia.org</a>
• </body>
• </html>
20. 03/16/2025
jQuery $("[attribute^='value']")Selector
• Example
• Select all <input> elements with a name attribute that starts
with “city":
• <!DOCTYPE html>
• <html>
• <head>
• <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.
min.js"></script>
• <script>
• </script>
• </head>
22. 03/16/2025
The li Selector
eg
• Selects the first <li> element of the first <ul>
• Syntax : $(“ul li:first”)
• Program
• $("ul li:first-child")
• Selects the first <li> element of every <ul>
• Eg
• program
23. 03/16/2025
jQuery Selectors
eg
Syntax Description
$("*") Selects all elements
$("a[target='_blank']")
Selects all <a> elements with a
target attribute value equal to
"_blank"
$(":button")
Selects all <button> elements and
<input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements
24. 03/16/2025
jQuery_show()
eg
• <!DOCTYPE html>
• <html>
• <head>
• <script
src="https://ajax.googleapis.com/
ajax/libs/jquery/1.11.2/jquery.mi
n.js"></script>
• <script>
• $(document).ready(function(){
• $("#hide").click(function(){
• $("p").hide();
• });
• $("#show").click(function(){
• $("p").show();
• }); }); </script> </head>
<body>
• <p>
• <b>This is a little poem:
</b><br/>
• Twinkle, twinkle, little star<br/>
• How I wonder what you are<br/>
• Up above the world so high<br/>
• Like a diamond in the sky<br/>
• Twinkle, twinkle little star<br/>
• How I wonder what you are
• </p>
• <button
id="hide">Hide</button>
• <button
27. 03/16/2025
Add elements methods
• 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
![03/16/2025
jQuery [attribute$=value] Selector
eg
• Example
• Select all <a> elements with a href attribute that ends with
".org":
• <body>
• <a
href="https://www.w3schools.com">w3schools.com</a><br>
• <a href="http://www.google.com">Google.com</a><br>
• <a href="http://www.wikipedia.org">wikipedia.org</a>
• </body>
• </html>](https://image.slidesharecdn.com/unit-2-jquery-250316191902-4efd11c6/85/J111111111111111111111111111111111111111query-pptx-18-320.jpg)
![03/16/2025
jQuery [attribute$=value] Selector
eg
• <!DOCTYPE html>
• <html>
• <head>
• <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.
min.js"></script>
• <script>
• </script>
• </head>](https://image.slidesharecdn.com/unit-2-jquery-250316191902-4efd11c6/85/J111111111111111111111111111111111111111query-pptx-19-320.jpg)
![03/16/2025
jQuery $("[attribute^='value']")Selector
• Example
• Select all <input> elements with a name attribute that starts
with “city":
• <!DOCTYPE html>
• <html>
• <head>
• <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.
min.js"></script>
• <script>
• </script>
• </head>](https://image.slidesharecdn.com/unit-2-jquery-250316191902-4efd11c6/85/J111111111111111111111111111111111111111query-pptx-20-320.jpg)
![03/16/2025
jQuery Selectors
eg
Syntax Description
$("*") Selects all elements
$("a[target='_blank']")
Selects all <a> elements with a
target attribute value equal to
"_blank"
$(":button")
Selects all <button> elements and
<input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements](https://image.slidesharecdn.com/unit-2-jquery-250316191902-4efd11c6/85/J111111111111111111111111111111111111111query-pptx-23-320.jpg)
