Subscribe to My adventures in coding!        RSS Feed
-----

Hands in the jQuery library [ JQ2 ]

Icon Leave Comment
Posted Image


This is an addition to my first post here. My last post was a heads up on the jQuery library where this one will be getting your hands into jquery and it's syntax. Good luck and have fun!

What is jQuery?
To expand on my first description, "jQuery is a Javascript library that makes writing Javascript code easier, faster, and cleaner", jQuery is a library of functions that are used to do a vast amount of Javascript coding and add complex elements to your client side experience.

What do I need to know?
  • Javascript
  • HTML
  • CSS

jQuery is written in Javascript and you will need to have a good understanding of how Javascript works to use jQuery proficiently. Javascript is used to manipulate HTML elements in the DOM (Document Object Model), this means you need to understand HTML and it's tag elements. CSS is used for styling DOM elements in the HTML document which also can be manipulated by Javascript, this means you will need to know css and its selectors.

What do I need?
As far as software all you need is a text editor ( notepad++ ) or IDE ( NetBeans ) and a browser ( Google Chrome ).

What is that $ for?
Looks scary huh? It's not. jQuery ( and other JS libraries ) uses the $ sign as a shortcut. jQuery uses the jQuery('selector') function to select an element, this is also written $('selector') for the shortcut.

Beware using the shortcut method when you are using multiple libraries. Using multiple libraries that use the $ with jquery will result in an error. In this case I prefer to use the long syntax so there is no confusion.

Time to grab some elements.
Now that we know what the element selector syntax lets select the document $(document) so that we can check the readyState of the DOM by adding .ready(). When the DOM is loaded and the elements are ready to be manipulated we can call an anonymous function to get started.
$(document).ready(function(){
  //document is ready to manipulate.
});


Now that the document has been loaded and is ready for changes we can make a selection.

opps... we need a well formed document first. Lets make a simple button with a hidden p tag that will show when the button is clicked.
<!DOCTYPE html>
<html>
    <head>
        <title>Show me the message!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            p.showme{
               display: none;
            }
        </style>
    </head>
    <body>
        <button id="btn1">Show my text</button>
        <p class="showme">Is my text showing?</p>
    </body>
</html>



Notice that the p tag is set in the CSS ( which is in the head for this example ) to display: none. We don't want to see this when the page loads so it can be shown when we click the button.

Ok.... back to the selection of an element but which one should we choose?
We are going to want the element that we will interact with. We will click the button to create an event. In order for the jQuery to know what we want to happen when the button is clicked we need to listen for the click event on the button. There are a few ways to do this but we will start simple.
$(document).ready(function(){
  //document is ready to manipulate.
  //select the button and add a click event listener
  $('#btn1').click(function(){
      //button has been clicked
      //do stuff here
  });
})


This code selects the element with the id of btn1 and adds a click jQuery shortcut event listener. Notice the selector syntax? It looks like a CSS selector, why, jQuery uses the same syntax that CSS uses for selecting elements from the DOM. So, if we wanted to select a class we should do $('.classname') and to select a p tag we would do $('p'). To see a list of selectors see this. Now when the element with the id of btn1 is clicked it will call the anonymous function to fire.

Now in side the function we will select the p tag and show it.
$(document).ready(function(){
  //document is ready to manipulate.
  //select the button and add a click event listener
  $('#btn1').click(function(){
      //button has been clicked
      //select the p tag with the class of showme
      $('p.showme').show();
  });
})


Notice that we selected only the p tag that has the class of showme, this is useful when you want to manipulate multiple elements at the same time. For example, if we had more than one p tag and we just selected p $('p') all of them would show. By adding a class we can change the selection to just the ones we need to show. Cool huh?

Now we know how to select elements by tag name, id and class name. Great next we will talk about moving from the element we select to another in the DOM, and we will explore the ways to find elements parents or children and manipulate them.

See you next time.

0 Comments On This Entry

 

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

Recent Entries

July 2014

S M T W T F S
  12345
6789101112
13141516171819
202122232425 26
2728293031