Utility Functions

The data functions are the core of jQuery's data offerings but there are also a number of extremely useful data manipulation functions that you need to know about because they will save you a lot of time. 

Data Type Testing 

There are a set of global functions that will test if a variable references an a particular type of object:

$.isArray(object)

Tests to see if the object is a proper JavaScript object and not just something with a length property. That is 

$.array($("button))

is false because $ returns an array like object not an array.

$.isFunction(object)

True if the object is a function object. This doesn't work on some functions which are not always implemented as JavaScript objects such as alert().

$.isNumeric(object)

True if object is a number or if it is a simple string that can be coerced into a number. 

$.isWindow(object)

True if object is a window including an iframe

$.isXMLDoc(element)

True if the DOM element is an XML document

$.type(object)

Returns the internal [[Class]] of the object. This uses the toString supplied by Object to retrieve the string that you will see in an alert box following alert(obj). The simplest way to use this method is to see what it returns on the object you are interested in testing. Apart from the primative values and builtin types most JavaScript objects return "object".

$.isPlainObject(object)

True if the object is a JavaScript object created using {} or new Object. False object is any of the standard built in types such as an Array or String.

$.isEmptyObject(object)

True if object is a plain JavaScript object and is empty - i.e. no properties of its own and no inherited properties from a prototype. 

Objects

JavaScript objects are also used to store data and as such they are perhaps the most flexible form of data you can use. There is a single object data function extend.

$extend(target,object1,object2...)

The extend function will take the object specified after the first parameter and merge them to produce a single object in target. This is the object version of the .merge function which applies to Arrays. If you make the first optional parameter true then a deep recursive copy is made. If you omit the first optional parameter a shallow copy is made. If you only supply one parameter, an object, then it is added to the jQuery object. This is a way of extending jQuery with functions and properties of your own. More of this in a later chapter. 

Arrays

There are some functions that do some more complicated things with Arrays than JavaScript allows directly. Remember that there is an isArray function described earlier. 

$.makeArray(object)

This converts an array like object i.e. an object that has a length property and converts it to a true Array. The main use of this is to convert a jQuery results array to a true Array. Notice that this strips out all of the jQuery or any other methods. 

$.map(array,function)

This accepts a JavaScript array or object and applies the function to each element in turn. The function has the signature function(item,index) and it returns the value to replace the item in the new Array object. If the function returns null or undefined the item is removed. If it returns an array of items then these are used to initialize items in the new array. This is a version of the .map() function that works with JavaScript Arrays and Objects.  

$.grep(array,function,invert)

This is similar to map but the function, which has the same signature as the one in map, always returns a Boolean value and elements in the array like object are transferred to the new array if the result is true and deleted if the result is false. The optional invert parameter can be used to invert the result of the function so that items are includes if the function is false. Note that the input array isn't modified.  

$.merge(arraylike1,arraylike2)

This takes two array like or Array objects and merges them together to create a new Array object. It is important to note that this changes the first array like object i.e. it is a destructive merge. You can use $.merge to copy an array like object using $.merge{[],arraylike2);

$inArray(target,array,start)

This returns the position of the target value in the Array object or -1 if it isn't found. The start parameter optionally specifies the start of the search. Notice that inArray does not return true or false but the position of the target.

$.uniqueSort(array)

This is used internally by jQuery and you are only likely to need to use it if you are doing low level manipulation. It will sort an array of DOM elements into the order that they appear in the document and it will remove duplicate references. Notice that this doesn't remove DOM elements that happen to be identical in terms of properties but only if they are the same DOM element references more than once in the array.

String functions

There is only one helpful String function but it would be a better world if more JavaScript programmers used it as the number of web sites that misbehave if you enter a String with excess white space is surprisingly high.  

$.trim(string)

This is a very simple function and it removes whitespace from the beginning and end of the string. Whitespace includes space, nonbreaking space and tabs. 

Date functions

There is only a single date function:

$.now()

Returns a number representing the current time. It is the same as (new Date).getTime() and is simply a shorthand for this expression.

Parsing 

There are two parsing functions which are most often useful when used in conjunction with Ajax calls to process the data retrieved.

$.parseHTML(data,context,keepScripts)

This parses the data String to create an Array of DOM elements. If there is just one top level HTML tag that encloses all of the other tags the array contains a single DOM element. The context passed in is used to parse the HTML. What happens is that a div is added to the context and then the HTML is parsed within the div, extracted as the result and then delected from the context. If you don't specify a context a new document object is created. Scripts are not run unless the optional keepScripts is set to true. Even if keepScripts is false there are ways to get scripts to execute while the HTML is being parsed. If you are not sure of the HTML's origin you should scan it first as a string to remove all scripts.

$.parseXML(data)

This parses valid XML in the data String using the browsers built in parsing functions.The resulting XML document can be passed to jQuery and then used as a jQuery object. 

Finally notice that the parseJSON function is deprecated in jQuery 3 and you should use the JavaScript JSON object and its corresponding parse method.  

More Information

http://jquery.com/

 Available as a Book:

buy from Amazon

1. Understanding jQuery
2. Basic jQuery CSS Selectors
      Extract: The DOM
3. More Selectors
      Extract: Basic Selectors
4. The JQuery Object
5. Filters 
6. DOM Traversal Filters 
7. Modifying DOM Objects
      Extract: Modifying The DOM 
8. Creating Objects & Modifying The DOM Hierarchy
   
9. Working With Data
      Extract: Data ***NEW!!!
10. Forms 
11. Function Queues
12. Animation 
13. jQuery UI
14. jQuery UI Custom Control
15. Easy Plugins 
16. Testing With QUnit
17. Epilog A Bonus Function

Also Available:

buy from Amazon

 

JavaScript Canvas - Fetch API Working with lower-level data is very much part of graphics. This extract from Ian Elliot's book on JavaScript Graphics looks at how to use typed arrays to access graphic data. + Full Story

JavaScript Jems - The Inheritance Tax JavaScript should not be judged as if it was a poor version of the other popular languages - it isn't a Java or a C++ clone. It does things its own way.  In particular, it doesn't do inheritance  [ ... ] + Full Story

Other Articles JavaScript Jems - Objects Are Anonymous Singletons JavaScript Canvas - Typed Arrays JavaScript Jems - Functions Are Objects Just jQuery The Core UI - Data JavaScript Jems - Lambda Expressions Just jQuery The Core UI - Easy Plugins JavaScript Async - Basic Worker Just jQuery The Core UI - Animation

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

 

 

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info