Naming Functions in jQuery

jQuery is just a library on top of Javascript, you can still have regular functions with jQuery code inside of them. The reason most examples are of the $(function() { ... }); variety is because Javascript in general is heavily event-based and the most common time for you do to things with jQuery is on page load, which $(function() { }); is a shortcut for.

One of the nice things about jQuery is that it lets you write unobstrusive Javascript, you really shouldn't be putting any code in the onclick of any HTML elements as it is a very poor practice and a maintenance nightmare. The more standard approach is:

HTML

<input type="button" id="slideMeUp" value="Up, up, and away!">

jQuery

$(function() {
    $('#slideMeUp').click(function() {
        $('#box').slideUp();
    });
});

However, you could easily have something like:

function slideMeUp() {
    $('#box').slideUp();
}

$(function() {
    // still need this outer function to indicate
    // to only bind the handler when the DOM is ready
    $('#slideMeUp').click(slideMeUp);
});

You are getting mixed up between jQuery, which is a Javascript library and Javascript as a whole.

To write the function slideBox() in Javascript you just do:

function slideBox() {
    $("#box").slideUp();
}

You usually need

$(function() { 
..
});

That's a shortcut of $(document).ready(function() {}) which runs when the page is loaded.

You can do this:

<script>
function slideBox(speed) {
    $("#box").slideUp(speed);
}

$(function() {
    slideBox(300);
});
</script>

Or you can create your own plugins like this:

(function($) {

$.fn.FunctionName = function() {
    return this.each(function() {
        $(this).slideUp();
    });
};

})(jQuery);

you can save that in a separate file and then do something like this:

<script>
    $(function() {
        $("#box").FunctionName();
    });
</script>

Have a look at this:

http://docs.jquery.com/Plugins/Authoring

There isn't any difference between a JavaScript function and a jQuery function; it's the same technology.

If you want to define a function that slides the box up, just write one, and then hook it up to the onclick event. Here's how I would do that:

<script type="text/javascript">

    function slideBox() {
        $('#box').slideUp();
    }

    $(function() {
        $('a').click(function() {
            slideBox();
        });
        // or, as Paolo shows:
        $('a').click(slideBox);
    });

</script>

The $(function() { }); syntax is short for:

$(document).ready(function() {
    // do things when the DOM is ready
});

Whatever you put inside it will be delayed until the DOM is finished loading. If the latter makes more sense to you, use that instead.

You can define a function and pass it to the click handler:

<script type="text/javascript">
    function onClick() {
        $('#box').slideUp();
    }

    $("#MyButton").click(onClick);
</script>

Use your original function ie

    <script type="text/javascript">

    $(function() {
        $('.uniqueclass').click(function() {
            $('#box').slideUp();

        });
    });
    </script>

I have changed the 'a' to 'uniqueclass' then create a button with the class of .uniqueclass - on clicking it, the function will fire

You don't want your function to be declared in the global scope (as a general rule), so you would declare it inside of jQuery's document ready and access your function through an event:

<script type="text/javascript">

// jQuery document's ready
$(function() {

    // your function
    var slideBox = function() {
        $('#box').slideUp();
    };

    // event
    $('a').click(function() {
        // call to your function
        slideBox();
    });

});

</script>