Jquery : First steps for beginners

Some basic steps to start developing web apps using jquery.

1. JQuery : Import the library in our web page.
2. JQuery : Structure of the syntaxis.
3. JQuery : Start coding : $(function(){});
4. JQuery : Select an element
5. JQuery : Do something!!!!

Import the JQuery library

You just neet to write this line inside your script tags

<script src="where_your_library_is" type="text/javascript"> </script>

Well, so where is your library ? You could donwload it from jquery.com and place it inside your website or use from google servers, using the code before it would be : Inside your website

<script src="path/to/jquery/jquery.js" type="text/javascript"></script>

With google server

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>

For more information or libraries : http://code.google.com/intl/es-ES/apis/libraries/devguide.html

JQuery : Struture of the syntaxis

The jquery syntaxis it's simple but for the begginers could be some messy. The most of all it's acostume to syntaxis like this :

function my_function()
{
 print 'i am supossed to do something'
}
mybutton.pressed(my_function());

In jquery it could be replace by this :

mybutton.pressed (function(){
 print 'i am supossed to do something'
});

And the greatest of this, it's that you can continue attaching more events to your button in the same line, like this.

mybutton.pressed(function(){
 print 'i am supossed to do something'
}).blur(function(){
mybutton.disabled
});

JQuery : Start coding : $(function(){});

Ok, now you have jquery, what's next ??? Tell jquery what to do, as a good practice you should place your javascript actions at the end of your page, so your html load faster. so, at the end of your page open a script tag and write

$(document).ready(function(){ //you js code });

<script type="text/javascript">
$(document).ready(function(){
//ready for the action!!!
});
</script>

JQuery : Select and element

Jquery logic for select an element is similar to css, let see some examples : Our html code :

<ul>
<li class='myclass' >Item 1</li>
<li id="specialitem"<Item 2</li>
<li class='myclass' >Item 3</li>
<li>Item 4</li>
</ul>

Select based in the element, with this you can select more than one element at one time.

<script type="text/javascript">
$(document).ready(function(){
 $('li')This select all the li elements
});
</script>

Select based in the "class", with this you can select more than one element at one time.

<script type="text/javascript">
$(document).ready(function(){
 $('li.myclass') This select all the li with class equal to myclass elements
or
 $('.myclass')This select all the elements with class equal to myclass elements
});
</script>

Select based in the "id", with this you can select just one element.

<script type="text/javascript">
$(document).ready(function(){
 $('#specialitem') This select the element with id equal to specialitem elements
});
</script>

JQuery : Do something!!!!

Jquery allow you to do great stuff and attach a great range of events to your DOM (aka HTML elements) Some of the more usefull:

JQuery : Click event

$('#myelement').click(function() { } );

JQuery : Hover event

$('#myelement').hover(function() { });

JQuery : Change the content of an element

<span id='myelement'>I am red</span>

$('#myelement').html('Now i am blue');

JQuery : Hide an element

$('#myelement').hide();

JQuery : Change the css class of an element



<span id='myelement' class="someclass" >What's up</span>;

$('#myelement').attr('class','otherclass');