JQUERY
TOPIC
1.jQuery:
2.Adding jQuery to a page,
3.DOM,
4.Page Elements
5. Selectors
6.Filters,
7.Setting and Removing Attributes,
8.Events – Mouse, Document, Form and Keyboard events,
9.jQuery Event concepts,
10.jQuery Effects, Form Validation.
INTRODUCTION TO JQUERY
jQuery is a lightweight JavaScript library that helps “write
less, do more” by simplifying DOM manipulation, events,
AJAX, and effects.
It wraps many common JavaScript tasks into concise
methods, making code shorter and easier to read.
Core idea: select elements using CSS-like selectors and
perform actions with chainable methods, e.g., $("p").hide().
SYNTAX of JQUERY
General pattern: $(selector).action() — select elements, then run a method on them.
Example: Hide all paragraphs — $('p').hide();.
Best practice: run code after DOM is ready using $(document).ready(function(){ ... }); to ensure
elements exist.
Why $ Symbol
$ is an alias (shorthand) for the jQuery function/object; writing $(...) is the same as jQuery(...).
It distinguishes jQuery calls and shortens typing; in code, $===jQuery evaluates to true.
The $ is a valid JavaScript identifier used by many libraries; jQuery can also relinquish $ if there’s
a conflict.
How to Add jQuery via CDN
Use the official jQuery CDN (recommended current 3.7.x).
Minified:
<script src=https://code.jquery.com/jquery-3.7.1.min.js>
JQUERY CDN LINK
JQUERY
<script src="https://code.jquery.com/jquery-3.7.1.min.js">
$(document).ready(function(){
document.write("My First Script!")
});
</script>
ADVANTAGES OF USING CDN
LINK
Decreased Load Time: If we use CDN links to our projects it will decrease the load time of a
particular website this is because it is loaded by the content delivery network, not from your
website.
Global Network: Use the CDN links of Google, Cloudflare, Microsoft, etc., according to the user
of your website and the global network of the companies provided CDN links.
DISADVANTAGES OF CDN
LINK
Availability Dependency: When you are using CDN links it means it will depend on the
availability of that CDN.
Regional Restrictions: If the CDN is blocked in a certain region then the user of that area would
not properly access the website.
Version Control: It is dependent on the version if you have specified the version in your project
then you have to change it over time otherwise you will not be able to benefit from the latest
version changes and bug fixes.
JQUERY SELECTOR
jQuery selectors are functions that allow you to target and select
HTML elements in the DOM based on element names, IDs, classes,
attributes, and more, facilitating manipulation and interaction.
Syntax:
$(" ")
JQuery selector starts with the dollar sign $, and you enclose the
selector inside parentheses ().
SELECTOR USING
PARAGRAPH this.hide
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
SELECTOR USING
BUTTON .click
<script src="https://code.jquery.com/jquery-3.7.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
SELECTOR USING ID
jQuery #id selector allows you to target specific elements by their
unique ID attribute using the # symbol followed by the ID name.
SYNTAX
$(“#id=“name”)
EXAMPLE JQUERY USING ID
<script> <body>
$(document).ready(function () { <h2>Id selector</h2>
$("#colorButton").click(function () { <p id="p1">
$("#p1").css("background-color", "skyblue"); In this peragraph we are changing background. </p>
}); <p id="p2">
$("#hideButton").click(function () { In 2nd peragraph we are going hide this pera.
$("#p2").hide(); </p>
}); <button id="colorButton">
}); Change Background Color
</button>
SELECTOR USING MULTIPLE
ID
$("#colorButton").click(function () {
$("#p1").css("background-color", "skyblue");
});
// When the button with ID "hideButton" is
// clicked, hide the paragraph with ID "para2"
$("#hideButton").click(function () {
$("#p2").hide();
});
});
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:
SYNTAX
$(“.classname”)
<body>
$(document).ready(function(){ <h2 class="test">This is a heading</h2>
$("button").click(function(){
$(".test").hide(); <p class="test">This is a paragraph.</p>
}); <p>This is another paragraph.</p>
});
<button>Click me</button>
THE JQUERY 12 SELECTORS
SYNTAX Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value
equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value
NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements
of type="button"
$("tr:even") Selects all even <tr> elements
SELECT * all ELEMENT
<script>
$(document).ready(function(){
$("button").click(function(){
$("*").hide();
});
});
