JQuery Lecture-1

Introduction :: Introduction
to jQuery
Introduction to jQuery
- jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto
− Write less, do more.
- jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for
rapid web development.
- jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code.

jQuery core features

- Cross Browser Support
- Latest Technology
- Animations 
- DOM manipulation Handle Events Helps in
Select
- Event handling in a same way Supported by applying styles
Elements by
across the Animation to multiple
- AJAX Support tag, class, id
browser elements
- Lightweight 
- Easy to use
There are two ways to use jQuery Introduction :: How to use
Through MAX CDN Server
jQuery?
You can include jQuery library into your HTML code directly from Content Delivery Network (CDN). Just simply copy and paste the
server link into HTML file.
Step1: Go to jQuery Official page ( http://jquery.com/ )
Step2: Click Download and go to “Other CDNs” Section and simply click on Google CDN
Step3: Now Go to Libraries Section & simply copy the whole script tag or you can copy the link from here.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Through Local Installation

You can simply download the latest version of jQuery and stores the jQuery file in any folder you want. Then Just include it into HTML
file.
There are Two version of file you see in the download section such as:
- Compressed & Minified Version (Production jQuery)
- Uncompressed Version (Development jQuery)
You can use & download any of them. Although minified version is more light weight than uncompressed version but the functionality
is similar.

You can use any of these two ways but MAX CDN Server is more Faster than Local Server.
 Introduction :: Basic
Syntax

Basic Syntax Select the

HTML Perform different
$().(); .js
$(document).ready(function(){ Elements Action based on selected
(tags, id, class) elements
$("h1").click(function(){
alert("Yes, its ok.");
});
}); $ Sign jQuery
indicates
jQuery
$(selector).event(effect); Syntax
Separtor
We can use
jQuery
Built in events

Example: .html <h1>Welcome to Jquery</h1>

 Introduction ::
document.ready Function using ID & Class document.ready Function
Example(1):
.html
<button type="button" id="btn">Open</button>
<button type="button" class="btn">Hide</button>

.js
$(document).ready(function(){
$("#btn").click(function(){
alert("Yes, its open the window");
});

$(".btn").click(function(){
$(".btn").hide("5000");
});
});
 Selectors :: Introduction
to jQuery Selectors

jQuery Selectors
jQuery Selectors allows you to select HTML elements. Through

selectors you can put style on webpages, create animations,

create popup windows etc.

Types of selectors:

(1) ID Selector (#)

(2) Class Selector (.)

(3) Elements Selector or Tag name (h1,h2,p,a etc..)

ID Selectors Selectors :: jQuery ID, Class &
.js Element Selectors
$(document).ready(function(){
$("#btn").click(function(){
.css
$("#btn").fadeOut(3000); .html #btn{
}); background: maroon;
<button type="button" id="btn" color: oldlace;
}); class="btn btn-danger">ID</button padding: 10px;
}
Class Selectors
.js
$(document).ready(function(){
.css
$(".cls").fadeTo(3000,0.3, function(){ .cls{
.html
alert("Got it!"); width:150px;
<button type="button" class="btn btn- height: 100px;
});
background: orangered;
default cls">Class</button>
}); }

Element Selectors
.js
$(document).ready(function(){
$("h2").click(function(){
.html
$("p").fadeToggle(1000); <h2>Element Selector</h2>

}); <p>This is it</p>

$("p").hide();
 Selectors :: jQuery Even | Odd | First
| Last & Nth Element Selectors

.css
Even | Odd | First | Last & Nth Element Selectors .odd{
background: orange;
padding: 10px;
.html }
.js <ul class="list-unstyled"> .even{
background: skyblue;
$(document).ready(function(){ <li>Home</li> padding: 10px;
<li>About</li> }
$("li:odd").addClass("odd");
<li>Photo Gallery</li> .first{
$("li:even").addClass("even"); <li>Project</li> background: #b2dba1;
padding: 10px;
<li>Webmail</li> }
$("li:first").addClass("first");
<li>Company Profile</li> .last{
$("li:last").addClass("last"); background: #f2dede;
<li>Contact Us</li> padding: 10px;
}
$("li:eq(3)").addClass("nth"); // Index equal to n </ul>
.nth{
background: maroon;
});
color: oldlace;
padding: 10px;
}
 Selectors :: jQuery This |
.html
This Selectors Header | Not Selectors
.js <p>This is Dolon</p>

$(document).click(function(){ <p>This is Rahat</p>

$("p").click(function(){ <p>This is Ridoy</p>

$(this).hide("fast"); <p>This is Momo</p>

}); <p>This is Eva</p>

});; .html
<h1>This is Dolon</h1>
<h2>This is Rahat</h2>
Header Selectors
<h3>This is Ridoy</h3>
.js
<h4>This is Momo</h4>
$(document).ready(function(){
<h5>This is Eva</h5>
$(":header").fadeOut(3000);
<h6>This is You</h6>
});
.html
<h1>This is Dolon</h1>
Not Selectors <h1>This is Rahat</h1>
.js <h1>This is Eva</h1>
$(document).ready(function(){ <h1>This is Ridoy</h1>
$("h1:not(h1:eq(5))").fadeOut(3000); <h1>This is Momo</h1>
}); <h1>This is You</h1>
Contains Selectors Selectors :: jQuery Contains |
.js Attribute| Form field Selectors
$(document).ready(function(){
$("h3").hide();
.html
$("#show").click(function(){
<button type="button" id="show" class="btn btn-danger">Show Student
$("h3:contains('Dolon')").fadeIn(2000);
Performance</button>
});
<h3>07 Dolon Willes</h3>
});
<h3>05 Rahat Willes</h3>
Attribute Selectors <h3>100 Dolon Final Math</h3>
.js <h3>100 Rahat Final Math</h3>
$(document).ready(function(){
.html
<a href="#" title="GIS" class="well well-sm">Grameen IT
$("a[title='TW']").fadeOut(3000);
Solution</a>
});
<a href="#" title="FB" class="well well-sm">Facebook</a>
<a href="#" title="TW" class="well well-sm">Twitter</a>
Form Field Selectors .html
.css
.js <form > .fn{
$(document).ready(function(){ First Name : <input type="text" name="firstname" > 2px solid red;
border:
}
$(":input:password").addClass("fn"); Password : <input type="password" name="password">
}); </form>