Scribd
Upload
2 views8 pages

Jquery Notes

jQuery is a lightweight JavaScript library that simplifies HTML/DOM manipulation, CSS manipulation, event handling, effects, animations, and AJAX. It allows developers to write less code to achieve complex tasks and supports features like method chaining and callback functions. The document also covers basic syntax, the importance of the DOM, and examples of jQuery effects and animations.

Uploaded by

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

Jquery Notes

jQuery is a lightweight JavaScript library that simplifies HTML/DOM manipulation, CSS manipulation, event handling, effects, animations, and AJAX. It allows developers to write less code to achieve complex tasks and supports features like method chaining and callback functions. The document also covers basic syntax, the importance of the DOM, and examples of jQuery effects and animations.

Uploaded by

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

jQuery

●​ jQuery is a lightweight, "write less, do more", JavaScript library. (The phrase


"write less, do more" means that jQuery allows developers to achieve complex
tasks with much less code compared to plain JavaScript.)
●​ With fewer lines of code, you can achieve more functionality.

The jQuery library contains the following features:

●​ HTML/DOM manipulation
●​ CSS manipulation
●​ HTML event methods
●​ Effects and animations
●​ AJAX
●​ Utilities

The jQuery library provides several powerful features for web development. It
allows HTML/DOM manipulation, enabling developers to easily change, add, or
remove elements dynamically. With CSS manipulation, jQuery can modify styles
like colors, fonts, and visibility. HTML event methods help in handling user
interactions such as clicks, keypresses, and mouse movements. The effects and
animations feature includes built-in methods for showing, hiding, fading, and
sliding elements. AJAX support allows fetching or sending data to servers
asynchronously without reloading the page. Additionally, utility functions like
$.each() for iteration and $.trim() for trimming whitespace simplify coding
tasks.

Basic syntax is: $(selector).action()

●​ A $ sign to define/access jQuery


●​ A (selector) to "query (or find)" HTML elements
●​ A jQuery action() to be performed on the element(s)

$(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".


$(document).ready(function(){})

Before we execute any jQuery statement, we would like to wait for the
document to be fully loaded. This is because jQuery works on DOM and if
complete DOM is not available before executing jQuery statements, then we will
not get desired result.

DOM (Document Object Model) - It represents the structure of an HTML or XML


document as a tree of objects, where each object corresponds to a part of the
document.

Document Representation:
The DOM represents the document as a tree structure, with each element (like
<div>, <p>, <button>, etc.) being a node in the tree. For example:

The <html> element is the root node.


Inside <html>, there might be child nodes like <head> and <body>.
Inside <body>, you can have more nodes like <div>, <p>, etc.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.7.1.js"></script>
</head>
<script>
$(document).ready(function(){
alert("welcome")
});
</script>
<body>
</body>
</html>

Jquery effects - Hide/Show


<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>

Example without 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.

The example below has no callback parameter, and the alert box will be
displayed before the hide effect is completed:

<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
});
</script>
</head>
<body>

<button>Hide</button>

<p>This is a paragraph with little content.</p>

</body>
jQuery Callback Functions

A callback function is a function that is executed after another function


completes its execution. In jQuery, many methods like hide(), fadeOut(), and
slideUp() support callback functions, which execute once the animation or effect
is finished.

A callback function is executed after the current effect is finished.

<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>

<button>Hide</button>

<p>This is a paragraph with little content.</p>

jQuery - Chaining
With jQuery, you can chain together actions/methods.
jQuery Method Chaining
However, there is a technique called chaining, that allows us to run multiple
jQuery commands, one after the other, on the same element(s).

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:

Tip: This way, browsers do not have to find the same element(s) more than
once.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>

<p id="p1">jQuery learning!!</p>

<button>Click me</button>

Jquery noConflict()

jQuery uses the $ sign as a shortcut for jQuery.


There are many other popular JavaScript frameworks like: Angular, Backbone,
Ember, Knockout, and more.
What if other JavaScript frameworks also use the $ sign as a shortcut?
If two different frameworks are using the same shortcut, one of them might
stop working.

The noConflict() method releases the hold on the $ shortcut identifier, so that
other scripts can use it.

<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
});
});
</script>

<body>
<p>This is a paragraph.</p>
<button>Test jQuery</button>
</body>

If you have a block of jQuery code which uses the $ shortcut and you do not
want to change it all, you can pass the $ sign in as a parameter to the ready
method.

<script>
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
</script>

Animation

jQuery Animations - The animate() Method


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

it moves a <div> element to the right, until it has reached a left


property of 250px:

Index1.html

$("button").click(function(){ ... }) – This binds a click event to all <button>


elements. When any button is clicked, the function inside will execute.
$("div").animate({left: '250px'}); – This selects all <div> elements and applies
an animation to move them 250 pixels to the right by changing their left CSS
property.
By default, the animate() method applies a smooth transition effect, making the
<div> gradually shift from its current position to 250 pixels to the right. If no
speed is specified, it runs at the default speed.

jQuery animate() - Manipulate Multiple Properties


Index2.html
that multiple properties can be animated at the same time: i.e. opacity, height,
width
jQuery animate() - Using Relative Values
It is also possible to define relative values (the value is then relative to the
element's current value). This is done by putting += or -= in front of the value:

Index3.html

height: '+=150px' – Increases the height of the <div> by 150 pixels from its
current height.

width: '+=150px' – Increases the width of the <div> by 150 pixels from its
current width.

Since all these properties are inside the same animate() function, they occur
simultaneously, creating a smooth transformation where the <div> moves right
while expanding in size.

Font Animation
The example below first moves the <div> element to the right, and then
increases the font size of the text:

Index4.html

The given jQuery code adds an animation effect to a <div> element when a
<button> is clicked. Here’s how it works:

$("button").click(function(){ ... }) – This binds a click event to all <button>


elements on the page. When any button is clicked, the function inside will
execute.
var div = $("div"); – This selects all <div> elements and stores the reference in
the variable div.
div.animate({left: '100px'}, "slow"); – This animates the left property of the
<div>, moving it 100 pixels to the right at a slow speed.
div.animate({fontSize: '3em'}, "slow"); – After the first animation completes,
this enlarges the text inside the <div> to a font size of 3em at a slow speed.
Each animate() function runs sequentially, meaning the font size animation
starts only after the left movement is completed.
Traversing
With jQuery you can traverse up the DOM tree to find ancestors (parent,
grandparent, great-grandparent), descendant (child, grandchild,
great-grandchild), siblings of an element.

Other Examples - Jquery1, 2, 3, 4, 5.html

You might also like