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

Heads up on the jQuery library [ JQ1 ]

Icon 2 Comments
Posted Image


What is jQuery?
jQuery is a Javascript library that makes writing Javascript code easier, faster, and cleaner. Think of it as a big script containing functions that you can call.

What do I need to know?
In order to write jQuery code you will need a firm grip on the Javascript language. This includes, but is not limited to:
  • Variables
  • Functions
  • Plain Objects
  • Syntax
  • and much more

If you need a place to start with Javascript I suggest searching for a Javascript tutorial site that you are comfortable using, there are may free learning sites on the web. Do keep in mind when looking that not all are great sites for learning, take w3schools for example. W3schools is usually one of the first sites to come up on a Javascript search on Google, this is great for them but not for you. W3schools, and may others, don't keep there site up to date on many things that they post. This is bad because it may get you used to using deprecated code or techniques.

You will also need a good grasp on HTML and CSS to be able to understand jQuery and its syntax.

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

How do I start?
The first thing you will need is a fully formed html document.
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        
    </body>
</html>


Now in the head tags you will need to add the link to the jQuery library, I choose to use the one that is hosted on Google but you can host it also by downloading it from jQuery.com.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Once you have the jQuery library linked to you can create script tags just above the body tag where you can add jQuery code.
    <script type="text/javascript">

    </script>
</body>

I add the script tag for my jQuery code just above the body tag so that it the elements in the html document have a chance to load into memory before I start to make changes to it with my jQuery code. If an element to to the page is not loaded yet you will get an error when you run your jQuery code. This leads me to the readyState or loading status. In jquery we write this like this:
$(document).ready(function(){

});


This code will check if the DOM had finished loading, when loading is complete it will run the code inside the anonymous function. Now that we have a basic layout we will need something to manipulate.

Content
Inside the body tag above the jquery script block we will create a few elements to change.
<div id="wrapper">
   <div id="one">
      <p id="btn1">Click me</p>
      <p class="show">I have a class of show!</p>
   </div>
   <div id="two">
      <button id="btn2">Show me the text</button>
      <p>Is my text showing?</p>
   </div>
</div>


Now we will use css to hide the elements we don't want to see when the page loads.
<style type="text/css">
   .show, #two > p {
      display:none;
   }
</style>


Now to get to the jQuery code.

Finally we get to write some jQuery!
So now that we have some content on the page we can use jquery to get some elements and change them. For this we will be showing some hidden elements on the page with a click and rollover of the mouse. These are called mouse events. The first one we will make will be the click event. When the user clicks the p tag with the id of btn1 we want to have the elements with the class of show to then display. So here we go...
                //Select the id of btn1 and add a click event listener for it
                //when it is cliked a function will fire.
                $("#btn1").click(function() {
                    //select the elements that have a class of show
                    //then show them with a durration time of 1 seconds
                    $(".show").show(1000);
                });


Now when the user hovers over the button with the id of btn2 we want to show the next p tag in half a second. Then when the user moves away from the button we want to hide it in half a second.
                //Select the id of btn2 and add a hover event listener for it
                //this will take two functions, one for mouse enter and one for
                //mouse leave
                $("#btn2").hover(
                    function() {
                        //using the this allows us to use the selection we have
                        //already made to find the next p element and show it 
                        //in half a second
                        $(this).next("p").show(500);
                    },
                    function() {
                        //using the this allows us to use the selection we have
                        //already made to find the next p element and hide it 
                        //in half a second
                        $(this).next("p").hide(500);
                });


Now that is all done you can go and test it and make your own cool things with it.

I have the entire code here for reference. Good luck and have fun.
Spoiler

2 Comments On This Entry

Page 1 of 1

andrewsw Icon

14 June 2013 - 04:42 PM
Nice :)

I do find that I need to include http: in front of //

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

when testing locally, otherwise it tries to find this in the local file system.
1

laytonsdad Icon

15 June 2013 - 11:02 AM

andrewsw, on 14 June 2013 - 11:42 PM, said:

Nice :)

I do find that I need to include http: in front of //

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

when testing locally, otherwise it tries to find this in the local file system.


I haven't had this problem but it is good to know. Thank you andrewsw.
0
Page 1 of 1

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
2021222324 25 26
2728293031