SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2010
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Confused - jQuery Function?

    Hi all, I'm a little confused on how and why I need to use the function in jQuery, such as the following example:

    Code JavaScript:
    $('#showButton').click(function() {
         $('#disclaimer').show();
    });

    Any help would be appreciated, just need to understand why I need to use if and why I couldn't just do without it!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Simple native javascript will look something like this...

    Code JavaScript:
    document.getElementById('showButton').onclick = function() {
        document.getElementById('disclaimer').style.display = 'block';
    }

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2010
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there, thank you for your message. Still a little confussed why I need to use the word function, what's the point? Can't seem to find much information on this one. Cheers dude

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sorry got confused by what you meant.

    The basic logic behind using an "Anonymous" function is so you can use structured code inside a method/object, without using a function the code would not work and you would end up getting errors resulting in a useless script.

    A good example of this is using jQuery's fadeIn() and fadeOut() methods, both essentially do the same thing just in reverse but the options you can pass to it are not limited. For instance the below is a small snippet of 2 versions of the exact same code just using an "Anonymous" function to execute an alert box.

    Code JavaScript:
    $('a').click(function(e) {
        e.preventDefault();
     
        $(this).fadeOut(function() {
            alert('done');
        });
    });

    The above uses an "Anonymous" function to create an alert box which wouldn't have been possible unless we declared the alert() function after the fadeOut() method.

    Code JavaScript:
    $('a').click(function(e) {
        e.preventDefault();
     
        $(this).fadeOut(2000, function() {
            alert('done');
        });
    });

    Basically the above is the same as the first example but this time i passed 2 arguments to the fadeOut() method but because jQuery knows and understands this we can still execute the code we want within the "Anonymous" function but as an argument collection rather then a single argument.

    Another key use for "Anonymous" functions is been able to pass parameters back to the function like in the example above where e is a parameter which is an object of window.event. Using the "Anonymous" function allows us to take advantage of that parameter and use it to prevent the default action of the anchor link and continue on with the code we set out to use.

    Its not as detailed as some people but its the basic understanding of it, hope it helps.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •