jQuery Tutorial 02-17-2013, 11:50 PM
#1
Hey guys,
Lately I've been applying myself more and more on aspects of web design, and spending lesser time programming, in doing so, i have become more confident in using server side programming languages e.g. Javascript, and today's subject, jQuery.
Firstly, lets talk about exactly WHAT jQuery is.
jQuery, to put it simply, is an "addition" to javascript, so to speak; These "additions" are known as libraries. You use jQuery in HTML as you would Javascript; in saying what it is, you may be thinking "Well what's the point of using jQuery when i can just use Javascript". jQuery was designed to simplify the manipulation of elements on a page, meaning, what would have taken 25 lines of Javascript, can be simplified to 5 lines of jQuery.
Now we have a basic concept of what jQuery is, perhaps we can start to get to grips with it.
In order to be able to use jQuery, you must download the source file from the jQuery site. http://code.jquery.com/jquery-1.9.1.min.js
You then need to include it in the documents that you wish to use it in, you can do this by using the following html string in your html file
Now, down to the actual coding
jQuery operates similarly to CSS, meaning that jQuery uses the same concept to identify elements, e.g. a bold tag with an id of "bold", would be selected using the following css string.
Whereas in jQuery, you would select it using
where event is the action that you wish to affect the element with, e.g. slide.
Using the slide event, it is possible to make 'hidden' elements, slide vertically from a specified place in your html document.
here is an example of this event
This piece of code tells the html form to slide any elements called "div" in the form.
But, lets move on to more pressing matters with jQuery, i am going to show you a very basic slide down login form, which you can then open on your computer, and tweak and edit as much as you wish.
HTML
This creates a webpage which displays a login form.
CSS
This CSS styles the login form, giving it a background color of "ightslategray", which is a nice light gray color, it also gives to div an inner padding of 20px, therefore forcing the form to have 20px of whitespace between the edges, the color of the text is also changed to white, and the whole div is floated to the right of the page.
jQuery
This script tells the webpage to automatically hide the login form when the page is ready to be viewed, then when the user clicks on the text which says "Log In", the login form slides down, and you are then alllowed to login; the second half of the jQuery script, tells the document, that when the "Log In" text is double clicked, to hide the form. The first click used to open the form, is counted as half of the double click, therefore, each click toggles a boolean like state of the login form, either visible, or not.
If used in the corect way, jQuery can be used to simply create masterpieces, including sliding picture albums which react to used input, scroll down login forms, and many other amazing web design features.
jQuery has opened up many possibilities that i could never have achieved without it, so i seriously recommend going to www.codecademy.com, and learning as much as you can about this amazing, and beautiful addition to javascript.
I hope you enjoyed.
-TheBeanhacker.
Lately I've been applying myself more and more on aspects of web design, and spending lesser time programming, in doing so, i have become more confident in using server side programming languages e.g. Javascript, and today's subject, jQuery.
Firstly, lets talk about exactly WHAT jQuery is.
jQuery, to put it simply, is an "addition" to javascript, so to speak; These "additions" are known as libraries. You use jQuery in HTML as you would Javascript; in saying what it is, you may be thinking "Well what's the point of using jQuery when i can just use Javascript". jQuery was designed to simplify the manipulation of elements on a page, meaning, what would have taken 25 lines of Javascript, can be simplified to 5 lines of jQuery.
Now we have a basic concept of what jQuery is, perhaps we can start to get to grips with it.
In order to be able to use jQuery, you must download the source file from the jQuery site. http://code.jquery.com/jquery-1.9.1.min.js
You then need to include it in the documents that you wish to use it in, you can do this by using the following html string in your html file
Code:
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>.Now, down to the actual coding
jQuery operates similarly to CSS, meaning that jQuery uses the same concept to identify elements, e.g. a bold tag with an id of "bold", would be selected using the following css string.
Code:
#bold
{
arguements
}Whereas in jQuery, you would select it using
Code:
$("#bold").event()where event is the action that you wish to affect the element with, e.g. slide.
Using the slide event, it is possible to make 'hidden' elements, slide vertically from a specified place in your html document.
here is an example of this event
Code:
$(document).ready(function() {
$("div").slide();
});This piece of code tells the html form to slide any elements called "div" in the form.
But, lets move on to more pressing matters with jQuery, i am going to show you a very basic slide down login form, which you can then open on your computer, and tweak and edit as much as you wish.
HTML
Code:
<html>
<head>
<title>Log In scroll down Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<h1 id="loginText">Log In</h1>
<div id="loginForm">
<form action="auth.php" method="post">
<li>Username:</li>
<li><input type="text" name="username" /></li>
<li>Password:</li>
<li><input type="password" name="password" /></li>
<li><input type="submit" value="Log In"></li>
</form>
</div>
</body>
</html>This creates a webpage which displays a login form.
CSS
Code:
body
{
background-color:;
}
#loginForm
{
color:#FFFFFF;
background-color:lightslategray;
margin:20px;
float:right;
}This CSS styles the login form, giving it a background color of "ightslategray", which is a nice light gray color, it also gives to div an inner padding of 20px, therefore forcing the form to have 20px of whitespace between the edges, the color of the text is also changed to white, and the whole div is floated to the right of the page.
jQuery
Code:
$(document).ready(function() {
$("loginForm").hide();
$("#loginText").click(function() {
$("#loginForm").slideToggle('slow');
});
$("#loginText").dblclick(function() {
$("#loginForm").slideToggle('slow');
});
});This script tells the webpage to automatically hide the login form when the page is ready to be viewed, then when the user clicks on the text which says "Log In", the login form slides down, and you are then alllowed to login; the second half of the jQuery script, tells the document, that when the "Log In" text is double clicked, to hide the form. The first click used to open the form, is counted as half of the double click, therefore, each click toggles a boolean like state of the login form, either visible, or not.
If used in the corect way, jQuery can be used to simply create masterpieces, including sliding picture albums which react to used input, scroll down login forms, and many other amazing web design features.
jQuery has opened up many possibilities that i could never have achieved without it, so i seriously recommend going to www.codecademy.com, and learning as much as you can about this amazing, and beautiful addition to javascript
.I hope you enjoyed.
-TheBeanhacker.
![[+]](https://sinister.ly/images/modern/collapse_collapsed.png)
![[Image: Wfxdx.png]](http://i.imgur.com/Wfxdx.png)
