What is jQeury?
According to W3School “jQuery
is a lightweight, "write less, do more", JavaScript library”
What is the purpose of jQuery?
Jquery is used to make it much easy to use JavaScripts, in
website. Normaly it is very hard to use JavaScript, and jQuery make it easy for
us.
What you should Already know?
Before you start studying jQuery, you should
have a basic knowledge of:
- HTML
- CSS
- JavaScript
jQuery Features:
We can use jQeury with following
- HTML/DOM
manipulation
- CSS
manipulation
- HTML
event methods
- Effects
and animations
- AJAX
- Utilities
How to use jQuery?
You can download Jquery and add it to your
website.
<head>
<script src="jquery-1.12.4.min.js"></script>
</head>
Download jQuery http://jquery.com/
You can use jQeury CDN
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
</head>
Note: We
can find the about code by using the following link
jQury
link:
Code to
add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
jQuery UI
link:
Code to
add
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
jQuery
Mobile link
Code to
add
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
jQuery Syntax
According to w3School “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)
The Document Ready Event
$(document).ready(function(){
// jQuery methods go here...
});
jQuery Selectors
jQuery selectors allow you
to select and manipulate HTML element(s).
$("*")
|
Selects all elements
|
$(this)
|
Selects the current HTML
element
|
|
$("p.classname or
#id")
|
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
|
|
$("tr:odd")
|
Selects all odd
<tr> elements
|
|
|
|
|
|
What are Events?
All the different visitor's 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
jQuery Syntax For Event Methods
Mouse Events
|
Keyboard Events
|
Form Events
|
Document/Window Events
|
click
|
keypress
|
submit
|
load
|
dblclick
|
keydown
|
change
|
resize
|
mouseenter
|
keyup
|
focus
|
scroll
|
mouseleave
|
|
blur
|
Unload
|
Exapmple 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<p id="line1">Hello everyboday from line one!</p>
<p id="line2">Hello everyboday from line two!</p>
<p id="line3">Hello everyboday from line three!</p>
<p id="line4" class="line-class4">Hello everyboday from line four!</p>
<ul>
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
<li>list item four</li>
</ul>
<a href="www.google.com" target="_blank">Google</a><br /><br />
<a href="www.yahoo.com">Yahoo</a><br /><br />
<table border="2" width="500">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<br /><br />
<button type="button">Click</button>
<script>
$(document). ready(function(){
$("button "). click(function(){
$(“*”).hide();
});
});
</script>
</body>
</html>
Result: If you click on the button everything will be hide
Example 2:
Keep all the code as the same and change the
<script></script>
<script>
$(document). ready(function(){
$("button "). click(function(){
$(this).hide();
});
});
</script>
Result: The butto disaper
Example 3:
Selecing Class or ID
<script>
$(document). ready(function(){
$("button"). click(function(){
$("p#line1").hide();
});
});
</script>
<script>
$(document). ready(function(){
$("button"). click(function(){
$("p.line-class4").hide();
});
});
</script>
Example 4:
<script>
$(document). ready(function(){
$("button"). click(function(){
$("p:last").hide();
});
});
</script>
Or
<script>
$(document). ready(function(){
$("button"). click(function(){
$("p:last").hide();
});
});
</script>
The first /second pharagraph will be hide
Example 5:
<script>
$(document). ready(function(){
$("button"). click(function(){
$("ul li:first").hide();
});
});
</script>
Or
<script>
$(document). ready(function(){
$("button"). click(function(){
$("ul li:first-child").hide();
});
});
</script>
Note – by this way we can select the ul – li elements
Example 6:
<script>
$(document). ready(function(){
$("button"). click(function(){
$("[href]").hide("color:red");
});
});
</script>
This will target the all href elements.
Or
<script>
$(document). ready(function(){
$("button"). click(function(){
$("a[target='_blank']").hide("color:red");
});
});
</script>
Target particular element i.e. _blank and you can also
target in reverse form i.e.
<script>
$(document). ready(function(){
$("button"). click(function(){
$("a[target!='_blank']").hide("color:red");
});
});
</script>
Example 7:
<script>
$(document). ready(function(){
$("button"). click(function(){
$(":button").hide("color:red");
});
});
</script>
Selecting button and button input elements
Example 8:
<script>
$(document).ready(function(){
$("tr:even").css("background-color", "#ff6600");
});
$(document).ready(function(){
$("tr:odd").css("background-color", "#dddddd");
});
$(document). ready(function(){
$("button"). click(function(){
$("tr:even").hide("color:red");
});
});
</script>
Other Example for Events:
<script>
$(document).ready(function(){
$("tr:even").css("background-color", "#ff6600");
});
$(document).ready(function(){
$("tr:odd").css("background-color", "#dddddd");
});
$(document). ready(function(){
$("button"). dblclick(function(){
$("tr:even").hide("color:red");
});
});
</script>
Or
<script>
$(document).ready(function(){
$("tr:even").css("background-color", "#ff6600");
});
$(document).ready(function(){
$("tr:odd").css("background-color", "#dddddd");
});
$(document). ready(function(){
$("button"). mouseenter(function(){
$("tr:even").hide("color:red");
});
});
</script>
Or
<script>
$(document).ready(function(){
$("tr:even").css("background-color", "#ff6600");
});
$(document).ready(function(){
$("tr:odd").css("background-color", "#dddddd");
});
$(document). ready(function(){
$("button"). mouseleave(function(){
$("tr:even").hide("color:red");
});
});
</script>
