20 Useful jQuery Methods Part -2

20 Useful jQuery Methods Part -2

6. delay()
Description:
Set a timer to delay execution of subsequent items in the queue.
.delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings ‘fast’ and ‘slow’ can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

Using the standard effects queue, we can, for example, set an 800-millisecond delay between the .slideUp() and .fadeIn() of

:

When this statement is executed, the element slides up for 300 milliseconds and then pauses for 800 milliseconds before fading in for 400 milliseconds.

Animate the hiding and showing of two divs, delaying the first before showing it.

7 on(), off()

Description:
on()
Attach an event handler function for one or more events to the selected elements.
off()
Remove an event handler.

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

event
Required.
Specifies one or more event(s) or namespaces to attach to the selected elements.

Multiple event values are separated by space. Must be a valid event

childSelector
Optional.
Specifies that the event handler should only be attached to the specified child elements (and not the selector itself, like the deprecated delegate() method).
data
Optional.
Specifies additional data to pass along to the function
function
Required.
Specifies the function to run when the event occurs
map
Specifies an event map ({event:function, event:function, …}) containing one or more event to attach to the selected elements, and functions to run when the events occur

The .off() method removes event handlers that were attached with .on(). See the discussion of delegated and directly bound events on that page for more information. Calling .off() with no arguments removes all handlers attached to the elements. Specific event handlers can be removed on elements by providing combinations of event names, namespaces, selectors, or handler function names. When multiple filtering arguments are given, all of the arguments provided must match for the event handler to be removed.

event
Required.
Specifies one or more events or namespaces to remove from the selected element(s).

Multiple event values are separated by a space. Must be a valid event

selector
Optional.
A selector which should match the one originally passed to the on() method when attaching event handlers.
function(eventObj)
Optional.
Specifies the function to run when the event occurs
map
Specifies an event map ({event:function, event:function, …}) containing one or more event to attach to the elements, and functions to run when the events occur

8. eq()
If you’re looking for a specific element within a set of elements, you can pass the index of the element to the eq() method and get a single jQuery element. Pass in a negative index to count back from the end of the set.

You can also use :eq() in your selectors; so the previous example could have been done like this:

9 get()

When getting a collection of element, jQuery returns them as a jQuery object, so you have access to all the methods. If you just want the raw DOM elements, you can use the get() method.

You can specify an index to get only one element.

10 grep()
Description:
Finds the elements of an array which satisfy a filter function. The original array is not affected.

The $.grep() method removes items from an array as necessary so that all remaining items pass a provided test. The test is a function that is passed an array item and the index of the item within the array. Only if the test returns true will the item be in the result array.

The filter function will be passed two arguments: the current array item and its index. The filter function must return ‘true’ to include the item in the result array.

Examples:
Filters the original array of numbers leaving that are not 5 and have an index greater than 4. Then it removes all 9s.

Output:

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *