1
JQUERY
Adapted from w3schools
Prepared by: Mohammed Jabari
2
What it is?
• A JavaScript library
• Greatly simplifies writing JavaScript programs
3
How to use JQuery
here are several ways to start using jQuery on your web
site. You can:
1. Download the jQuery library from jQuery.com
2. Include jQuery from a CDN, like Google
• Which way is better?
• What is a CDN?
4
How to use JQuery
1. The jQuery library is a single JavaScript file, and you
reference it with the HTML <script> tag (notice that the
<script> tag should be inside the <head> section):
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
5
How to use JQuery
2. If you don't want to download and host jQuery yourself,
you can include it from a CDN (Content Delivery Network).
To use jQuery from Google or Microsoft, use one of the
following:
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.
11.3/jquery.min.js"></script>
</head>
6
jQuery Syntax
The jQuery syntax is tailor made
for selecting HTML elements and performing
some action on the element(s).
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)
7
jQuery Syntax
• 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".
8
The Document Ready Event
$(document).ready(function(){
// jQuery methods go here...
});
• This is to prevent any jQuery code from running before
the document is finished loading (is ready).
9
jQuery Selectors
• The element Selector:
The jQuery element selector selects elements based on the
element name.
Example:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
10
jQuery Selectors
• The #id Selector:
The jQuery #id selector uses the id attribute of an HTML
tag to find the specific element.
Example: When a user clicks on a button, the element with
id="test" will be hidden:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
11
jQuery Selectors
• The .class Selector:
The jQuery class selector finds elements with a specific
class.
Example: When a user clicks on a button, the elements
with class="test" will be hidden:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
12
jQuery Event Methods
• An event represents the precise moment when something
happens.
Examples:
• moving a mouse over an element
• selecting a radio button
• clicking on an element
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
13
jQuery Event Methods
• Example: To assign a click event to all paragraphs on a
page, you can do this:
$("p").click(function(){
// action goes here!!
});
14
jQuery Event Methods
• Example: dblclick()
$("p").dblclick(function(){
$(this).hide();
});
15
jQuery Event Methods
• Example: mouseenter()
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
16
jQuery Event Methods
• Example: mouseleave()
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
17
jQuery Event Methods
• Example: mousedown()
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
18
jQuery Event Methods
• Example: hover()
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:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
19
jQuery Effects
• jQuery hide() and show()
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
20
jQuery Effects
• Hide and show with parameters
$("button").click(function(){
$("p").hide(1000);
});
21
jQuery Effects
• jQuery toggle()
With jQuery, you can toggle between the hide() and show()
methods with the toggle() method.
$("button").click(function(){
$("p").toggle();
});
22
jQuery and CSS
To change single CSS property value:
css("propertyname","value");
Example:
$(”#button1").click(function(){
$(“h1”).css("background-color", ”#ccc");
});
23
jQuery and CSS
• To change group of CSS values:
css({"propertyname":"value","propertyname":"value",...});
Example:
$("p").css({"background-color": "yellow", "font-size": "200%"});
24
• For more information refer to:
• www.w3schools.com
