javascript - Naming Functions in jQuery - Stack Overflow

admin管理员组

文章数量:1399932

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.

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.

• javascript
• jquery

Share Improve this question Follow asked Feb 22, 2012 at 0:11 Jackstah Comrad DavisJackstah Comrad Davis 1311 silver badge33 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 7

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 mon 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./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>

本文标签： javascriptNaming Functions in jQueryStack Overflow