This chapter covers
- The jQuery properties
- Avoiding conflict between jQuery and other libraries
- Array manipulation functions
- Extending and merging objects
- Parsing different formats
- Dynamically loading new scripts
9.1 Using the jQuery properties
9.1.1 Disabling animations
9.1.2 Changing the animations rate
$.fx.interval = 100;
9.1.3 The $.support property
9.2 Using other libraries with jQuery
$.noConflict(jqueryPropertyToo)
Parameters
jqueryPropertyToo (Boolean)
Returns
jQuery
var $j = jQuery;
window.$new = $.noConflict(true);
$new('p').find('a');
(function($) {
// Function body here
})(jQuery);
$ = 'Hello world!';
try {
$('#button-test').on('click', function(){
alert('$ is an alias for jQuery');
});
} catch (ex) {
alert('$ has been replaced. The value is "' + $ + '"')
}
try {
(function($) {
$('#button-test').on('click', function() {
alert('$ is an alias for jQuery');
});
})(jQuery);
} catch (ex) {}
9.3 Manipulating JavaScript objects and collections
9.3.1 Trimming strings
$.trim(value)
Parameters
value (String)
Returns
The trimmed string.
var trimmedString = $.trim($('#some-field').val());
9.3.2 Iterating through properties and collections
var anArray = ['one', 'two', 'three'];
for (var i = 0; i < anArray.length; i++) {
// Do something here with anArray[i]
}
var anObject = {one: 1, two: 2, three: 3};
for (var prop in anObject) {
// Do something here with prop
}
$.each(collection, callback)
Parameters
collection (Array|Object)
callback (Function)
Returns
The same collection passed.
var anArray = ['one', 'two', 'three'];
$.each(anArray, function(i, value) {
// Do something here
});
var anObject = {one:1, two:2, three:3};
$.each(anObject, function(name, value) {
// Do something here
});
var $divs = $('div');
for(var element of $divs) {
// Do something with element
}
9.3.3 Filtering arrays
$.grep(array, callback[, invert])
Parameters
array (Array)
callback (Function)
inver (Boolean)
Returns
The array of collected values.
var bigNumbers = $.grep(originalArray, function(value) {
return value > 100;
});
var badZips = $.grep(
originalArray,
function(value) {
return value.match(/^\d{5}(-\d{4})?$/) !== null;
},
true
);
9.3.4 Translating arrays
$.map(collection, callback)
Parameters
collection (Array|Object)
callback (Function)
Returns
The array of collected values
var oneBased = $.map(
[0, 1, 2, 3, 4],
function(value) {
return value + 1;
}
);
var strings = ['1', '2', '3', '4', 'S', '6'];
var values = $.map(strings, function(value) {
var result = new Number(value);
return isNaN(result) ? null : result;
});
var characters = $.map(
['this', 'that'],
function(value) {
return value.split('');
}
);
9.3.5 More fun with JavaScript arrays
$.inArray(value, array[, fromIndex])
Parameters
value (Any)
array (Array)
fromIndex (Number)
Returns
The index of the first occurence of the value within the array, or -1 if the value isn't found.
var index = $.inArray(2, [1, 2, 3, 4, 5]);
$.makeArray(object)
Parameters
object (Object)
Returns
The resulting Javascript array
function foo(a, b) {
var sortedArgs = $.makeArray(arguments).sort();
}
$.unique(array)
Parameters
array (Array)
Returns
An array of DOM elements returned in document order, consisting of the unique elements in the passed array.
$.merge(array1, array2)
Parameters
array1 (Array)
array2 (Array)
Returns
The first array, modified with the results of the merge.
var arr1 = [1, 2, 3, 4, 5];
var arr2 = [5, 6, 7, 8, 9];
var arr3 = $.merge(arr1, arr2);
9.3.6 Extending objects
$.extend([deep,] target, [source1, source2, ... sourceN])
Parameters
deep (Boolean)
target (Object)
source1 ... (Object)
sourceN
Returns
The extended target object.
var target = {a: 1, b: 2, c: 3};
var source1 = {c: 4, d: 5, e: 6};
var source2 = {c: 7, e: 8, f: 9};
$.extend(target, source1, source2);
target (after) = {a: 1, b: 2, c: 7, d: 5, e: 8, f: 9}
var mergeObject = $.extend({}, object1, object2);
var target = {a: 1, b: 2};
var source1 = {b: {foo: 'bar'}, c: 3};
var source2 = {b: {hello: 'world'}, d: 4};
$.extend(true, target, source1, source2)
target (after) = {a: 1, b: {foo: bar, hello: world}, c: 3,d: 4}
9.3.7 Serializing parameter values
$.param(params[, traditional])
Parameters
params (Array|jQuery|Object)
traditional (Boolean)
Returns
The formatted query string.
$.param($('input'));
9.3.8 Testing objects
jQuery utility functions for testing objects
| Function | Description |
|---|---|
| $.isArray(param) | |
| $.isEmptyObject(param) | |
| $.isFunction(param) | |
| $.isNumberic(param) | |
| $.isPlainObject(param) | |
| $.isWindow(param) | |
| $.isXMLDoc(param) |
multiplier(collection[, factor][, customFunction])
$.type(param)
Parameters
param (Any)
Returns
A string describing the type of the value
$.type(3);
'number'
$.type([1, 2, 3]);
'array'
if (typeof [1, 2, 3] === 'array')
typeof [1, 2, 3] is 'object'
9.3.9 Parsing functions
$.parseJSON(json)
Parameters
json (String)
Returns
The evaluation of the JSON string
$.parseXML(xml)
Parameters
xml (String)
Returns
The XML document derived from the string.
$.parseHTML(html[, context][, keepScripts])
Parameters
html (String)
context (Element)
keepScripts (Boolean)
Returns
An array of DOM elements derived from the string.
9.4 Miscellaneous utility functions
9.4.1 Doing nothing
$.noop()
Parameters
none
Returns
undefined
9.4.2 Testing for containment
$.contains(container, contained)
Parameters
container (Element)
contained (Element)
Returns
true if the contained element is contained within the container; false otherwise.
console.log($.contains(
document.getElementById('wrapper'),
document.getElementById('description')
));
console.log($.contains(
document.getElementById('empty'),
document.getElementById('description')
));
9.4.3 Prebinding function contexts
$.proxy(function, proxy[, argument, ..., argument])
$.proxy(proxy, property[, argument, ..., argument])
Parameters
function (Function)
proxy (Object)
argument (Any)
property (String)
Returns
The new function whose context is set to the proxy object.
$(whatever).click(obj.hello);
$(whatever).click($.proxy(obj.hello, obj));
$(whatever).click($.proxy(obj, 'hello'));
9.4.4
$.globalEval(code)
Parameters
code (String)
Returns
The evaluation of the javaScript code.
9.4.5 Throwing exceptions
*** $.error(string)***
Parameters
string (String)
Returns
undefined
function isPrime(number) {
if(typeof number !== 'number') {
$.error('The argument provided is not a number');
}
// Remaining code here...
}
9.5 Summary
$.fx.off
$.fx.interval
$.noConflict()
$.each()
$.grep()
$.map()
$.inArray()
$.isArray()
$.isFunction()
$.type()
$.parseJSON()
$.parseXML()
$.parseHTML()
$.extend()
$.proxy()