5 things you might not know about jQuery
jQuery is a very powerful library, but some of its rich features are unclear, if you have not studied the jQuery source code and have not read the jQuery Pocket Reference book (written by my new book), you may not know about them. This article presents excerpts from this book - 5 useful things that you might not know.
1) You are not required to use $ (document) .ready () If you want to execute a function when the document is ready for manipulation just pass it to $ ()
2) You probably already know that you can pass a tag to the $ () function to create an element of this type and that you can pass the object attributes (as the second argument) that will be set to the created element. The second argument can be any property that you pass to the attr () method. In addition, if a property has the same name as the event (click, mouseover), then the property value is used as a function of the event handler.
The following code, for example, creates a new element, sets up three HTML attributes, and registers an event handler function (click) on it:
3) jQuery has simple methods such as click () and change () for registering event handlers, and also defines a more general method for registering events - bind (). An important feature of bind () is that it allows you to specify a namespace (or several names) for event handlers when they are registered. This allows you to define groups of handlers, which is very convenient if you later want to call or unregister all handlers in a particular group. Handler namespaces are especially useful for programmers who write libraries or modules of reusable jQuery code. The handler namespace looks like a class selector in CSS.
To bind an event handler in the namespace, use the event name and handler namespace:
If your module registered all events using the namespace, you can easily unlink them all using unbind ():
4) jQuery has simple animation methods such as fadeIn (), and also includes a general-purpose animation method called animate (). The queue property of the options object that you send to animate () determines whether the scheduled animation will be delayed until all previous animations have been executed. By default, animations are called in turn, but you can turn this off by setting the queue property to false. Animations out of turn start immediately.
Subsequent animation queues will not be deferred for non-queue animations. Consider the following code:
The fadeIn () and fadeOut () effects have a queue, and we called the queue using the animate () method (which animates the width property for 1 second). An object width animation starts at the same time as fadeIn (). The fadeOut () effect starts as soon as the fadeIn () effect finishes.
')
5) jQuery triggers the “ajaxStart” and “ajaxStop” events to indicate the beginning and end of Ajax network activity. When jQuery does not perform any Ajax requests and a new request is initialized, jQuery triggers an “ajaxStart” event. If new requests are invoked, but the current request is not executed, the “ajaxStart” event is not raised. The “ajaxStop” event is triggered when the last pending Ajax request is completed and jQuery no longer shows network activity.
A pair of these events could be useful for showing / hiding the “Loading ...” animation or network activity icons. For example:
These 2 events “ajaxStart” and “ajaxStop” can be attached to any element of the page. jQuery calls them globally.
I didn’t know from translator 2 out of 5, although I regularly follow jQuery releases (especially ajaxStart / ajaxStop was pleased with the bundle), I think it's worth reading this book. What other features can you add?
1) You are not required to use $ (document) .ready () If you want to execute a function when the document is ready for manipulation just pass it to $ ()
2) You probably already know that you can pass a tag to the $ () function to create an element of this type and that you can pass the object attributes (as the second argument) that will be set to the created element. The second argument can be any property that you pass to the attr () method. In addition, if a property has the same name as the event (click, mouseover), then the property value is used as a function of the event handler.
The following code, for example, creates a new element, sets up three HTML attributes, and registers an event handler function (click) on it:
var image = $("<img>", { src: image_url, alt: image_description, className: "translucent_image", click: function() {$(this).css("opacity", "50%");} }); 3) jQuery has simple methods such as click () and change () for registering event handlers, and also defines a more general method for registering events - bind (). An important feature of bind () is that it allows you to specify a namespace (or several names) for event handlers when they are registered. This allows you to define groups of handlers, which is very convenient if you later want to call or unregister all handlers in a particular group. Handler namespaces are especially useful for programmers who write libraries or modules of reusable jQuery code. The handler namespace looks like a class selector in CSS.
To bind an event handler in the namespace, use the event name and handler namespace:
// f mouseover "myMod" $('a').bind('mouseover.myMod', f); If your module registered all events using the namespace, you can easily unlink them all using unbind ():
// mouseover, mouseout // "myMod" $('a').unbind("mouseover.myMod mouseout.myMod"); // myMod $('a').unbind(".myMod"); 4) jQuery has simple animation methods such as fadeIn (), and also includes a general-purpose animation method called animate (). The queue property of the options object that you send to animate () determines whether the scheduled animation will be delayed until all previous animations have been executed. By default, animations are called in turn, but you can turn this off by setting the queue property to false. Animations out of turn start immediately.
Subsequent animation queues will not be deferred for non-queue animations. Consider the following code:
$("img").fadeIn(500) .animate({"width":"+=100"}, {queue:false, duration:1000}) .fadeOut(500); The fadeIn () and fadeOut () effects have a queue, and we called the queue using the animate () method (which animates the width property for 1 second). An object width animation starts at the same time as fadeIn (). The fadeOut () effect starts as soon as the fadeIn () effect finishes.
')
5) jQuery triggers the “ajaxStart” and “ajaxStop” events to indicate the beginning and end of Ajax network activity. When jQuery does not perform any Ajax requests and a new request is initialized, jQuery triggers an “ajaxStart” event. If new requests are invoked, but the current request is not executed, the “ajaxStart” event is not raised. The “ajaxStop” event is triggered when the last pending Ajax request is completed and jQuery no longer shows network activity.
A pair of these events could be useful for showing / hiding the “Loading ...” animation or network activity icons. For example:
$("#loading_animation").bind({ ajaxStart: function() { $(this).show(); }, ajaxStop: function() { $(this).hide(); } }); These 2 events “ajaxStart” and “ajaxStop” can be attached to any element of the page. jQuery calls them globally.
I didn’t know from translator 2 out of 5, although I regularly follow jQuery releases (especially ajaxStart / ajaxStop was pleased with the bundle), I think it's worth reading this book. What other features can you add?
Source: https://habr.com/ru/post/111314/
All Articles