20 Useful jQuery Methods Part -3
11. isArray()
Description:
Determine whether the argument is an array.
$.isArray() returns a Boolean indicating whether the object is a JavaScript array (not an array-like object, such as a jQuery object).
Finds out if the parameter is an array.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.isArray demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> Is [] an Array? <b></b> <script> $( "b" ).append( "" + $.isArray([]) ); </script> </body> </html> |
12 makeArray()
Description:
Convert an array-like object into a true JavaScript array.
When you create a collection of DOM elements with jQuery, you’re returned a jQuery object; in some situations, you might prefer that this be an array or regular DOM elements; the makeArray() function can do just that.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.makeArray demo</title> <style> div { color: red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div>First</div> <div>Second</div> <div>Third</div> <div>Fourth</div> <script> // Returns a NodeList var elems = document.getElementsByTagName( "div" ); // Convert the NodeList to an Array var arr = jQuery.makeArray( elems ); // Use an Array method on list of dom elements arr.reverse(); $( arr ).appendTo( document.body ); </script> </body> </html> |
13. map()
Description:
Translate all items in an array or object to new array of items.
The map() method is remotely similar to grep(). As you might expect, it takes one parameter, a function. That function can have two parameters: the index of the current element and the element itself. Here’s what happens: the function that you pass in will be run once for each item in the collection; whatever value is returned from that function takes the place of the item it was run for in the collection.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.map demo</title> <style> div { color: blue; } p { color: green; margin: 0; } span { color: red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div></div> <p></p> <span></span> <script> var arr = [ "a", "b", "c", "d", "e" ]; $( "div" ).text( arr.join( ", " ) ); arr = jQuery.map( arr, function( n, i ) { return ( n.toUpperCase() + i ); }); $( "p" ).text( arr.join( ", " ) ); arr = jQuery.map( arr, function( a ) { return a + a; }); $( "span" ).text( arr.join( ", " ) ); </script> </body> </html> |
14 parseJSON()
Description:
Takes a well-formed JSON string and returns the resulting JavaScript value.
If you’re using $.post or $.get—and in other situations that you work with JSON strings—you’ll find the parseJSON function useful. It’s nice that this function uses the browsers built-in JSON parser if it has one (which will obviously be faster).
|
1 2 |
var obj = jQuery.parseJSON( '{ "name": "John" }' ); alert( obj.name === "John" ); |
15. proxy()
Description:
Takes a function and returns a new one that will always have a particular context.
This method is most useful for attaching event handlers to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from jQuery.proxy() it will still unbind the correct function if passed the original.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.proxy demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p><button type="button" id="test">Test</button></p> <div id="log"></div> <script> var me = { type: "zombie", test: function( event ) { // Without proxy, `this` would refer to the event target // use event.target to reference that element. var element = event.target; $( element ).css( "background-color", "red" ); // With proxy, `this` refers to the me object encapsulating // this function. $( "#log" ).append( "Hello " + this.type + "<br>" ); $( "#test" ).off( "click", this.test ); } }; var you = { type: "person", test: function( event ) { $( "#log" ).append( this.type + " " ); } }; // Execute you.test() in the context of the `you` object // no matter where it is called // i.e. the `this` keyword will refer to `you` var youClick = $.proxy( you.test, you ); // attach click handlers to #test $( "#test" ) // this === "zombie"; handler unbound after first click .on( "click", $.proxy( me.test, me ) ) // this === "person" .on( "click", youClick ) // this === "zombie" .on( "click", $.proxy( you.test, me ) ) // this === "<button> element" .on( "click", you.test ); </script> </body> </html> |