Scribd
Upload
21 views13 pages

Lecture 3

This document contains notes from a computer science class on jQuery selectors and events. The notes cover: 1. Using jQuery selectors like id, class and this() to hide/show HTML elements. 2. Common jQuery events like click, dblclick, hover, mouseleave, focus and blur and how to attach functions to them. 3. Examples of using various jQuery events to perform actions like displaying alerts and changing styles when elements are clicked, hovered over or focused on.

Uploaded by

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

Lecture 3

This document contains notes from a computer science class on jQuery selectors and events. The notes cover: 1. Using jQuery selectors like id, class and this() to hide/show HTML elements. 2. Common jQuery events like click, dblclick, hover, mouseleave, focus and blur and how to attach functions to them. 3. Examples of using various jQuery events to perform actions like displaying alerts and changing styles when elements are clicked, hovered over or focused on.

Uploaded by

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

Computer Science

5th Web Design


1st Semester
2023 - 2024

jQuery
jQuery Selectors and
Events

Mr. Omeed M Mohammed


jQuery Selectors

03/09/2024 2
jQuery Selectors – hide & show
<html>
<head>
<script src="jquery3.1.1.js"></script>
<script>
$(document).ready(function(){
$("#b1").click(function(){
$("p").hide();
});
$("#b2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>This is our paragraph</p>
<button id="b1">Hide paragraphs</button>
<br><br>
<button id="b2">Show paragraphs</button>
</body>
03/09/2024 3
</html>
jQuery Selectors – using this()
<html>
<head>
<script src="jquery3.1.1.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>
03/09/2024 4
</html>
jQuery Selectors – using class
<html>
<head>
<script src="jquery3.1.1.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>


<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
03/09/2024 5
</html>
jQuery Events

03/09/2024 6
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

03/09/2024 7
jQuery Events - click
<!DOCTYPE html>
<html>
click()
<head>
<script src="jquery3.1.1.js"></script>
<script>
 The click() method attaches an event handler function to an $(document).ready(function(){
HTML element. $("button").click(function(){
alert("The button has been clicked");
});
});
</script>
</head>
 The function is executed when the user clicks on the HTML <body>
element.
<button>Click Me</button>

</body>
</html>

03/09/2024 8
jQuery Events - dblclick
<!DOCTYPE html>
<html>
dblclick() <head>
<script src="jquery3.1.1.js"></script>
<script>
$(document).ready(function(){
 The dblclick() method attaches an event handler function $("p").dblclick(function(){
to an HTML element. $(this).hide();
});
});
</script>
 The function is executed when the user double-clicks on </head>
<body>
the HTML element
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>
03/09/2024 9
jQuery Events - hover
<!DOCTYPE html>
<html>
hover() <head>
<script src="jquery3.1.1.js"></script>
 The hover() method takes two functions and is a <script>
combination of the mouseenter() and mouseleave() $(document).ready(function(){
methods. $("#p1").hoverr(function(){
alert("You entered paragraph.!");
});
});
</script>
 The first function is executed when the mouse enters the </head>
HTML element, and the second function is executed when <body>
the mouse leaves the HTML element
<p id="p1">Enter this paragraph.</p>

</body>
</html>

03/09/2024 10
jQuery Events - mouseleave
<!DOCTYPE html>
mouseleave() <html>
<head>
<script src="jquery3.1.1.js"></script>
 The mouseleave() method attaches an event handler <script>
function to an HTML element. $(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
 The function is executed when the mouse pointer leaves
</head>
the HTML element <body>

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


</body>
</html>

03/09/2024 11
jQuery Events – focus & blur
<html>
focus() <head>
<script src="jquery3.1.1.js"></script>
<script>
 The focus() method attaches an event handler function to $(document).ready(function(){
an HTML form field. $("input").focus(function(){
$(this).css("background-color", "yellow");
 The function is executed when the form field gets focus });
$("input").blur(function(){
$(this).css("background-color", "green");
});
});
blur() </script>
</head>
 The blur() method attaches an event handler function to <body>
Name: <input type="text" name="fullname">
an HTML form field.
<br>
Email: <input type="text" name="email">
 The function is executed when the form field loses focus </body>
</html>
03/09/2024 12
03/09/2024 13

You might also like