jQuery Function with Examples

jQuery Functions with example which used mostly in web development

To use following functions you have to include jQuery file from jquery.com

.add() : Add elements to the set of matched elements. Example Add div to all p elements

$("p").add("div")

.addBack() : Add the previous set of elements on the stack to the current set, optionally filtered by a selector. Example Add class "background" to all the "div" having class "after"

$("div.after").find("p").addBack().addClass("background");

.after(): Insert content, specified by the parameter, after each element in the set of matched elements. Example Add the content "Test Message" just after "div" having "after" class

$('div.after').after('Test Message');

.ajaxComplete(): Register a handler to be called when Ajax requests complete. Example ajaxComplete will be called automatically just after finishing the ajax

$(document).ajaxComplete(function(event,request, settings) {
alert( "Request Complete." );
});
$( ".trigger" ).click(function() {
$( ".result" ).load( "ajax/test.html" );
});

.ajaxError(): Register a handler to be called when Ajax requests complete with an error. Example ajaxError will be called automatically just after finishing the ajax with error

$(document).ajaxError(function(event, jqxhr, settings, exception) {
alert( "Request Complete with Error." );
});
$( ".trigger" ).click(function() {
$( ".result" ).load( "ajax/test.html" );
});

.ajaxSend(): Attach a function to be executed before an Ajax request is sent. This is an Ajax Event. Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend event. Any and all handlers that have been registered with the .ajaxSend() method are executed at this time. Example ajaxSend will be called automatically when ajax is about to be sent.

$(document).ajaxSend(function(event, jqxhr, settings) {
alert( "Ajax Request just send" );
});
$( ".trigger" ).click(function() {
$( ".result" ).load( "ajax/test.html" );
});

.ajaxStart(): Register a handler to be called when the first Ajax request begins. This is an Ajax Event. Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time. Example ajaxStart will be called automatically when ajax request start

$(document).ajaxStart(function() {
alert( "Ajax Request just send" );
});
$( ".trigger" ).click(function() {
$( ".result" ).load( "ajax/test.html" );
});

.ajaxStop(): Description: Register a handler to be called when all Ajax requests have completed. Example Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all handlers that have been registered with the .ajaxStop() method are executed at this time. The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function.

$( ".log" ).ajaxStop(function() {
$(this).text( "Triggered ajaxStop handler." );
});

.ajaxSuccess(): Attach a function to be executed whenever an Ajax request completes successfully. Example Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.

$(document).ajaxSuccess(function() {
$( ".log" ).text( "Triggered ajaxSuccess handler." );
});

.andSelf():Add the previous set of elements on the stack to the current set. Example This function has been deprecated and is now an alias for .addBack(), which should be used with jQuery 1.8 and later. As described in the discussion for .end(), jQuery objects maintain an internal stack that keeps track of changes to the matched set of elements. When one of the DOM traversal methods is called, the new set of elements is pushed onto the stack. If the previous set of elements is desired as well, .andSelf() can help. animate(): Perform a custom animation of a set of CSS properties. The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive. Example

$('a.clickMe').click(function() {
$('#effect').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('
Animation complete.');
}
});
});

.contents(): Get the children of each element in the set of matched elements, including text and comment nodes. Given a jQuery object that represents a set of DOM elements, the .contents() method allows us to search throughthe immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .contents() and .children() methods are similar, except that the former includes text nodes as well as HTML elements in the resulting jQuery object.

Form Submit By Ajax - Simple Example

    function submitme(){
        var data= $('#form').serialize();
        var url ="/ajax/submiturl";

        $.ajax({
            type: "POST",
            url: url,
            data: data,
            success: function(data){
                alert(data);
            },
            dataType: 'json'
        });

    }

Web Technology Experts Notes

Sunday, 30 June 2013