jQuery
Basic
jQuery
is a JavaScript Library.
*
It is a lightweight.
*
jQuery also simplified the complicated things from the JavaScript.
jQuery
Library contains below features.
-
HTML / DOM manipulation
-
CSS manipulation
-
HTML event methods
-
Effects and animations
-
Ajax
The
jQuery library is a single JavaScript file, and you reference it with
the HTML <script> tag
<head>
<script
src="jquery-1.10.2.min.js"></script>
</head>
The
jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).
Basic
syntax is: $(selector).action()
$
: sign to define/access jQuery
(selector)
: to "query (or find)" HTML elements
action()
: to be performed on the element(s)
Examples:
-
$(this).hide()
- hides the current element.
$("p").hide()
- hides all <p> elements.
$(".errorfont").hide()
- hides all elements with class="errorfont".
$("#mainDiv").hide()
- hides the element with id="mainDiv".
The
Document Ready Event
$(document).ready(function(){
//
jQuery methods go here...
});
This
ready() is used to prevent by executing any jQuery code until
completing the document loading.
It
is good practice to wait for the document to be fully loaded and the
do the execution on that.
Shorter
method of ready() -
$(function(){
//
jQuery methods go here...
});
jQuery
Selectors -
The
jQuery selector allow to select and manipulate HTML elements(s).
jQuery
selectors are used to "find" (or select) HTML elements
based on their id, classes, types, attributes, values of attributes.
All
selectors in jQuery start with the dollar sign and parentheses: $().
Element
Selector – select elements based on the elements name.
$("p")
- select all <p> elements on a page
#id
Selector – select id attribute on HTML tag find the specific
elements.
$("#divID")
- select id = “divID” element on a page
.class
Selector – find the element with the specific class.
$(".redfont")
– find the class = “redfont” on a page
Example
-
jQuerySelectors01.html
<!DOCTYPE
html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<style
type="text/css">@IMPORT
url("css/jQuerySelectors01.css");</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="JQueryJS/jQuerySelectors01.js"></script>
</head>
<body>
<h2>jQuery
is a JavaScript Library.</h2>
<p>*
It is a lightweight.</p>
<p>*
jQuery also simplified the complicated things from the
JavaScript.</p>
<br>
<div
id="features">
<div
class="bluefont">jQuery
Library contains below features.</div>
<ul>
<li>------------------------------------</li>
<li> HTML
/ DOM manipulation</li>
<li> CSS
manipulation</li>
<li> HTML
event methods</li>
<li> Effects
and animations</li>
<li> Ajax</li>
<li>------------------------------------</li>
</ul>
</div>
<br>
<p
class="h1Gray">Note
- Try this your own</p>
<br>
<button>Click
to Hide</button>
<button
id="show">Click
to Show</button>
<button
id="highlight">Highlight</button>
</body>
</html>
jQuerySelectors01.css
@CHARSET
"UTF-8";
body{
font-size:
12px;
font-family:
sans-serif;
}
.redfont{
font-size:
12px;
color:
red;
}
.bluefont{
font-size:
14px;
color:
blue;
font-weight:
bold;
}
.h1Gray{
font-size:
14px;
color:
gray;
}
jQuerySelectors01.js
$(function(){
$("button").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("#highlight").click(function(){
$("p").show();
$("ul").addClass("redfont");
$(".h1Gray").hide();
$("ul
li:first").hide();
$("ul
li:last").hide();
});
});
Out put -
