Tutorial: jQuery Basics
By:
Jaan
1 month ago
:
Comments (0)
In Programming
Today I'm going to some jQuery. How to work with it and what you can do with it.
1. Introducion
jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Providing this option, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. This contributes to the creation of powerful and dynamic web pages. [by Wikipedia]
To download jQuery click here.
2. Syntax
jQuery's syntax is very very simple it just goes like this:
$(selector).action();
For example:
$("#myDiv").fadeIn().show();
This fades in a HTML element which id is "myDiv".
3. Fade in, out and to
First we have to write our basic HTML code:
<html>
<head>
<title>jQuery</title>
<style type="text/css">
div {
background-color: #BF0005;
color: #FFFFFF;
width: 450px;
height: 250px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="process.js"></script>
</head>
<body>
<div id="myDiv">Here's my div</div> <input type="button" id="myButton" value="Click" />
</body>
</html>
<head>
<title>jQuery</title>
<style type="text/css">
div {
background-color: #BF0005;
color: #FFFFFF;
width: 450px;
height: 250px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="process.js"></script>
</head>
<body>
<div id="myDiv">Here's my div</div> <input type="button" id="myButton" value="Click" />
</body>
</html>
As you can see I have included jquery file and my script file where I will write my jQuery and I have written some CSS but it's just for you to see everything better. Now let's write some code. Make sure you put it between <head> and </head> tags.
$(function(){
$("#myButton").click(function(){
$("#myDiv").fadeOut().hide();
});
});
$("#myButton").click(function(){
$("#myDiv").fadeOut().hide();
});
});
And now little explanation:
$(function(){ - This will tell our browser that we are using jQuery
$("#myButton").click(function(){ - If our button has been clicked ...
$("#myDiv").fadeOut().hide(); - ... let's fade out our div
}); - Closes "click" action
}); - Closes jQuery script
Now if we want to fadeIn our div we have to set our div's display to none. Just like this:
<div id="myDiv" style="display: none;">Here's my div</div>
And let's write some script to fade our div in:
$(function(){
$("#myButton").click(function(){
$("#myDiv").fadeIn().show();
});
});
$("#myButton").click(function(){
$("#myDiv").fadeIn().show();
});
});
Everything works like in first example but now we are using fadeIn() and show().
To change our div's opacity for like 10% we can use this code:
$(function(){
$("#myButton").click(function(){
$("#myDiv").fadeTo("slow", "0.10");
});
});
$("#myButton").click(function(){
$("#myDiv").fadeTo("slow", "0.10");
});
});
There as you can see I have this line:
$("#myDiv").fadeTo("slow", "0.10");
This means that we are fading slowly to 10%
4. Toggle
To toggle our divs let's use this script:
$(function(){
$("#myButton").click(function(){
$("#myDiv").toggle();
});
});
$("#myButton").click(function(){
$("#myDiv").toggle();
});
});
In this code as you can see we only use toggle() action. In this example it doesn't matter if our div is visible or not. It just works like it must work.
5. Slide up and down
Sliding our divs up and down have never been easier. To slide our div up let's use this code:
$(function(){
$("#myButton").click(function(){
$("#myDiv").slideUp();
});
});
$("#myButton").click(function(){
$("#myDiv").slideUp();
});
});
As you can see we have only changed our action to slideUp(). To slide down our div let's use this code:
$(function(){
$("#myButton").click(function(){
$("#myDiv").slideDown();
});
});
$("#myButton").click(function(){
$("#myDiv").slideDown();
});
});
But if we want to slide our div down we must change divs visibility to none again, like this:
<div id="myDiv" style="display: none;">Here's my div</div>
Also we can toggle our slides. For this we must use this code:
$(function(){
$("#myButton").click(function(){
$("#myDiv").slideToggle();
});
});
$("#myButton").click(function(){
$("#myDiv").slideToggle();
});
});
This works like toggle() but it just slides our div up and down.
6. HTML Manipulation
With jQuery you can manipulate HTML without any problems. To add something to your div just add this code:
This will be our div with our button:
<div id="myDiv"></div> <input type="button" id="myButton" value="Click" />
and this will be our code:
$(function(){
$("#myButton").click(function(){
$("#myDiv").append("I like QuestionBin!");
});
});
$("#myButton").click(function(){
$("#myDiv").append("I like QuestionBin!");
});
});
So.. this script works like this. If you click on your button then it will add this text "I like QuestionBin" inside your div. Like this:
If you already have content in your div then append() adds text after your text and prepend() will add text before your text like this:
HTML:
<div id="myDiv">My text</div> <input type="button" id="myButton" value="Click" />
jQuery:
$(function(){
$("#myButton").click(function(){
$("#myDiv").prepend("I like QuestionBin!");
});
});
$("#myButton").click(function(){
$("#myDiv").prepend("I like QuestionBin!");
});
});
Which works like this:
There are also after() and before() which add like their name is text before and after your element in which case we have div.
7. CSS Manipulation
If we can manipulate with HTML then we have to have a way to manipulate CSS also. It's very very simple.
If we want to change our div's background to lime green let's write this script:
$(function(){
$("#myButton").click(function(){
$("#myDiv").css("background-color", "#99CC00");
});
});
$("#myButton").click(function(){
$("#myDiv").css("background-color", "#99CC00");
});
});
There you can see we are using the same CSS elements that we use in our CSS files and in our HTML documents. So if we click on our button it works like this:
It's that simple!
If you want to get the property of a certain CSS element just do like this:
$(function(){
$("#myButton").click(function(){
var color = $("#myDiv").css("background-color");
alert("Div's background color is: " + color);
});
});
$("#myButton").click(function(){
var color = $("#myDiv").css("background-color");
alert("Div's background color is: " + color);
});
});
For those who don't know JavaScript then it works like this
First we get our background-color's property and put it into "color" variable. Then we are alerting user like this:
And in computer language "rgb(191, 0, 5)" means this dark-red.
8. Final Words
And that's it. Now you know basics of jQuery. I hope you like it and if you have questions feel free to ask from me.
Regards,
Jaan
TrillDesigns.com
Rate Now:
Average Rating:
0.00 / 0
ratings
No comments posted