CODEWITHSUNDEEP
javascriptjquery
Jackstah Comrad Davis
Jackstah Comrad Davis

Reputation: 13

Naming Functions in jQuery

So I just started with jQuery and the functions are confusing me. I want to be able to just name a jQuery function and then call it, without saying when it should be called in the function. I've looked and I can't seem to understand any of the answers. My code is below:

<script type="text/javascript">

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

            });
        });
    </script>

I want it to do something more like this however:

$(function slideBox() {
        $('#box').slideUp();
    });
    </script>

And then call it through a OnClick event or something on a button.

Upvotes: 0

Views: 4326

Answers (7)

Adaz
Adaz

Reputation: 1665

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

Upvotes: 1

Shirak
Shirak

Reputation: 65

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>

Upvotes: 0

lifeIsGood
lifeIsGood

Reputation: 1229

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

Upvotes: 0

Tuan
Tuan

Reputation: 5412

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

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

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

Upvotes: 0

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107508

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.

Upvotes: 0

christophmccann
christophmccann

Reputation: 4211

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();
}

Upvotes: 1

Paolo Bergantino
Paolo Bergantino

Reputation: 488384

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);
});

Upvotes: 7

Related Questions