jQuery Tutorial for Beginners
Every web developer should be known the jQuery, because this programming technique used in many website, even the biggest website like facebook, google, yahoo, and etc has used this jQuery or javascript library where it popular with the animation effect. Because with a little touch, then the cool animation effect will be easily to added.
Accourding to the function, then the jQuery has a motto "Write Less, do More" because with the little jQuery code, then the interactive effect can be added to the web. jQuery and ajax are closely related to, what is AJAX? Ajax is a programming technique where it can change the website to be more responsive like desktop application. Ajax is one of the sign from the begining of the modern web programming generation or better known as web 2.0. jQuery also provides services and support to build a plug-ins at javascript language, then allowing the web developers to make website to be more interactive with animation, effect, themes, and widget.
What Advantages and Feature of jQuery?
Here are some of the feature available in jQuery :
- In the application, jQuery uses DOM element selection, then can be more dynamic and interctive website.
- Jquery can manipulate the class in css and support css3
- Event
- AJAX
- Effects and animations.
- Extensions and plug-ins
- Compability with all modern web browser.
- Other purpose such as : user agent, feature detection, and etc.
How to Use?
Oke, here are the usage of jQuery, step by step :
A. Download jQuery :
jQuery file is a javascript code with the .js extension.
- Download jQuery library in their official website, www.jQuery.com
Picture 1. jQuery download
- Select the jQuery version, there are two option, namely production version and developer version, choose the production version because the other one is only intented for their who are already expert programmer or their jQuery developer.
Picture 2. choose jQuery version
- Click download, then the browser will be direct to jQuery url code, click CTRL + S to save.
Picture 2. jQuery code
B. Usage
- jQuery is a javascript file, so to include the jQuery, it should be link using the javascript including method :
<script type="text/javascript" src="jQuery.js"></script>
- The most popular and basic way to introduce a jQuery function is to use the .ready() function.
$(document).ready(function() {// script goes here});
- Or the shortcut
$(function() {
// script goes here
});Example :
For example, I create a control hide and show a picture :
Here is the code :
- First, call or load jQuery library, (red background color).
- Add jQuery script, placed in the head of your document (blue background color).
- Create an object and the element (id and class) in the body of your document.
| <html>
<head>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".sembunyi").click(function() {
$("#foto").hide("slow");
});
$(".tampil").click(function() {
$("#foto").show("normal");
});
});
</script>
</head>
<body>
<button class="sembunyi">Show</button>
<button class="tampil">Hide</button>
<p><img id="foto" name="foto" src="http://batamniaga.com/images/banners/logos.png"/></p>
</body>
</html>
|
Result : jQuery Tutorial for Beginners
Tags: jQuery
