Scribd
Upload
12 views

Jquery Note

Same as I included before

Uploaded by

Rinju Stha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Jquery Note

Same as I included before

Uploaded by

Rinju Stha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

jQuery:

● jQuery is a "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.

● Syntax: $(selector).action()

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 custom

selectors.

● All selectors in jQuery start with the dollar sign and parentheses: $().

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

jQuery 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.
jQuery Event Methods:

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.

Example:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>

<p>Click here</p>
<p>Click here too!</p>

</body>
</html>
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:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dbclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>

<p>Click here</p>
<p>Click here too!</p>

</body>
</html>

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:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("Your mouse p1 id paragraph");
});
});
</script>
</head>
<body>

<p id="p1">Mouse on this paragraph.</p>

</body>
</html>

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:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Your mouse p1 id paragraph");
});
});
</script>
</head>
<body>

<p id="p1">Mouse leaving this paragraph.</p>

</body>
</html>

5. mousedown():

The mousedown() method attaches an event handler function to an HTML element. The
function is executed when the left, middle or right mouse button is pressed down, while
the mouse is over the HTML element.
Example:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>

<p id="p1">This is a paragraph.</p>

</body>
</html>

6. hover():

The hover() method takes two functions and is a combination of the mouseenter() and
mouseleave() methods. The first function is executed when the mouse enters the HTML
element, and the second function is executed when the mouse leaves the HTML
element.

Example:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>

<p id="p1">This is a paragraph.</p>

</body>
</html>

jQuery Effects:

1. hide() and show() effect:


With jQuery, you can hide and show HTML elements with the hide() and show()
methods.

Example:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>

<p>Click on"Hide" and "Show" button.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

2. Fading effect:
With jQuery you can fade an element in and out of visibility. jQuery has the following
fade methods.

● fadeIn()
● fadeOut()
● fadeToggle()
● fadeTo()

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>

<button>Click here for fading effect</button><br><br>

<div id="div1"
style="width:100px;height:100px;display:none;background-color:red;"></div><br>
<div id="div2"
style="width:100px;height:100px;display:none;background-color:green;"></div><br>
<div id="div3"
style="width:100px;height:100px;display:none;background-color:blue;"></div>

</body>
</html>
3. Sliding effect:
With jQuery you can create a sliding effect on elements. jQuery has the following slide
methods:

Example:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ele").click(function(){
$("#attri").slideDown("slow");
});
});
</script>
<style>
#ele, #attri {
padding: 5px;
text-align: center;
background-color: gray;
border: solid 1px;
}

#attri {
padding: 50px;
display: none;
}
</style>
</head>
<body>

<div id="ele">Click here slide down</div>


<div id="attri">Hello world!</div>

</body>
</html>
4. Animation effect:

The jQuery animate() method is used to create custom animations. 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.

Example:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '100%'});
});
});
</script>
</head>
<body>

<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

5. Stop effect:
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.

Example:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(6000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
}

#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>

<button id="stop">Stop sliding</button>

<div id="flip">Click here slide</div>


<div id="panel">Hello</div>

</body>
</html>
6. Callback effect:
A callback function is executed after the current effect is finished. 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.

Example:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<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>

</body>
</html>

7. Chaining effect:

Chaining allows us to run multiple jQuery methods (on the same element) within a
single statement. To chain an action, you simply append the action to the previous
action.

Example:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "green").slideUp(900).slideDown(900);
});
});
</script>
</head>
<body>

<h3 id="p1">Chaining effect!!</h3>


<button>Click me</button>

</body>
</html>

You might also like