logo

jQuery Basic Tutorial

Add comment

User named Enrho requested a tutorial that will explain some basics in jQuery. This will be a very simple tutorial that will give your some overview of what jQuery is capable of :) .

What Is jQuery And How To Use ItTop

First thing that you need to know about jQuery is that it’s a framework. That means it’s a collection of tools that will make your life a lot easier. jQuery is a wraper for javascript and that means it just wraps existing javascript functions in new one and makes it easier and cross browser compatible. We’ll go into examples a little later, now it’s just intro. jQuery is free and you can download it from jquery.com. That site is also your first site that you’ll look for some help for jQuery. If you can’t find it there, then use google. Also there is a lot of other tutorials for jQuery and I’ll point you to some at the end of this article. So now that you know what jQuery is and where to download it. To use jQuery you need to load it into your HTML document using script tag like this.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

Now, when I write this article, current stable release is 1.3.2. To start your jQuer you'll have to do this (if you want to ensure you do not have any problems).

$(document).ready(function ()
{
    //jQuery code here
});

jQuery Or $Top

You can call jQuery on two ways. First is using jQuery and second using $. First way is used when you combine multiple frameworks and second when using jQuery or you know that other scripts do not use $. $ is just a function that replaces jQuery function and makes writing faster ($("#id") is faster then jQuery("#id)). If you'll ever write a plugin for wordpress you'll not be able to use $ so you'll have to use jQuery instead. But when you write plugin for jQuery you can use it because it's name spaced to jQuery so compiler knows it should use $ as jQuery function. Everything you want to do you'll have to start with $ or jQuery it object that you want to is not jQuery object jet.

Selectors And What Are TheyTop

As their name says they are used to select things. And they are very very powerful thing in jQuery. There are many of them and I'll show you just few of them that are mostly used.

  • #idName - will select any DOM element that has as id idName
  • .className - will select any DOM element that has as class className
  • element - will select any DOM element that has tag element
  • * - will select any DOM element

So this how you use them.

$("#idName").someFunction(); //will select element with id idName
$(".className").someFunction(); //will select element(s) with class className
$("element").someFunction(); //will select element(s) with name element
$("*").someFunction(); //will select all elements

You can use nested selectors as well like this.

$("#idName *").someFunction(); //will select all child elements of element with id idName
$("#idName .className").someFunction(); // will select all child elements of element with id idName that have class className
$("element.className otherElement").someFunction(); //will select all elements that are childs of element with name element that has as class clasName that has as name otherElement

As you can see, selectors are like in css so you know css you'll know how to use selectors in jQuery to.

Make Existing Object jQuery ObjectTop

Javascript objects can be transfered to jQuery just by passing them to jQuery or $ functions. If you've noticed we did that wen initializing jQuery. We passed document object to jQuery and used method ready. Ready method does not exist in Javascript but exists in jQuery and by making document jQuery objects it now has rady method. One note. This transfer does not make any changes to original document object, it's just passed as an argument.

Now I've Selected Elements And What NowTop

Now you can do anything with them. You can animate them, you can move them, change them, hide them, change classes and so on. Let's say you want to hide you elements that have as class hideMe, you can do it like this.

$(".hideMe").hide();

And that's all you have to do to hide them. You can chain your methods. Let's say you want to change class of your element with class red to green and add text Hi jQuery. to it. You can do it like this.

$(".red").removeClass().addClass('green').text('Hy jQuery.');

So what do we do here? First we select all elements with class red. Then we remove it's class and assing class green to it. At the end we just insert text.

Anonymous Functions Top

jQuery uses anonymous functions a lot. Those functions don't have a name and are assigned to something. It can be used saved to a variable or passed as an argument to a function (that's what we are interested in). Saving function to a variable is useful when writing a plugin for a jQuery.

If you take a look at some functions documents you'll see you can pass as an argument fn. That's that function. If you have noticed, when first calling jQuery we used function ready and as argument we passed and anonymous function. That function contains all your jQuery code and by doing that you ensure that all HTML is loaded before your script is executed.

Anonymous function are made by doing this.

function (arg1, arg2, ...)
{
    //Function body
}

You can see it does not have any name assigned to it. Let's say you want to do something when someone clicks on a link. Let's say we want to display an alert. We can do it like this.

$("a").click(function ()
{
    alert("You've clicked on a link");
});

ResourcesTop

There is plenty of resources and tutorials on net that you can take  a look at. I'll point you to some of them.

  • jquery.com - As I said on beginning, this is first place to look for solution of your problem and to learn some new stuff
  • noupe.com - Cool article that gives you 51+ links to good jQuery tutorials
  • speckyboy.com - An other cool article that gives you 25 jQuery tutorials
  • php4every1.com - My site where I publish tutorials
  • colorcharge.com - jQuery cheat sheets that are extremely useful

ConclusionTop

This is basicly it. I don't know what to say and that's not explained very good already. Remember that you should use jQuery home page as your primary place to look for some solutions. Next tutorial will be on how to build fancy search box using jQuery. Thank you for reading.

enrho


logo

2 comments to “jQuery Basic Tutorial”

  1. From tutorials I’ve posted you could check

    As of other resources (not those in Learning resources post) you could check these two posts that I have in my bookmarks.

    Hope that helps you with your learning :) .

  2. Techie Talks says:

    Thank you for this post. I keep on looking on a PHP jQuery tutorial. How to implement it and also json php tutorial. I hope you can help me out on this. Thanks once again.

Leave a Reply


 *


 *


logo
logo
Powered by Wordpress | Designed by Elegant Themes | CopyRight ©2014 php4every1.com