Programmatically Speaking ...

This site

Fav Blogs

Sponsors

  • MaximumASP
  • Packet Sniffer

JQuery, the very very basics - Lesson 6

 
On with my JQuery learning series. 

For every programming language, there is invariably string manipulation and array fiddling. No exception with JQuery. Being unobtrusive in principal and complimentary in nature, it does not try to replace the existing bulk of JavaScript functions with its own, rather, it simply adds some of the most sorely missed functions.  

Trimming a string: $.trim(value)
In dealing with strings, JavaScript already has quite a comprehensive set of functions, such as split, substr, charAt (see references at http://www.w3schools.com/jsref/jsref_obj_string.asp), however, for some mysterious reasons, it does not have a trim function for ridding of leading and trailing white space. Smart and generous people have contributed to the web various versions of their trim functions. Such as:
var trimmed = str.replace(/^\s+|\s+$/g, '') ;
It works perfectly. However, how about simply call trim() function provided by JQuery? The syntax is $.trim(value) 
var trimmed = $.trim(" this really needs to be trimmed ");

Clean and plain English, right?

Array functions:
 
$.each (container, callback)
 
In JQery, in addition to the conventional JavaScript array (array of strings, numerics, elements), there is also specifically object array in the form of key-value pairs.
 
The former array is coded as: 
var arr = [ "one", "two", "three", "four", "five" ];
 The later (each pair seperated by a colon :) :
var obj = { item1: "one", item2: "two" ,item3: "three", item4: "four"};
It has always been easy to loop through an JavaScript array. However, it can be easier with the JQuery $.each function. The syntax is
$.each (container, callback). The callback function receives two arguments with the passing of each element: with [] type (traditional JavaScript) array, index and value; with {} type (array of objects with properties), key and value.
 
So we can access JQuery array elements as such (forgive me for using so many alerts):
 
$.grep (array, callback, invert) 
 
JQuery offers a $.grep() function to return an array of elements that matches a certain condition. The callback function is passed two parameters: the current value and its index. For example,
 
$.map (array, callback) 
 
One convenient function to transform all of the elements in an array in one shot. Change a string array into a numeric array? Yes; Change the numeric array back to a string array? Yes; Add a 10 to every number in an array? Yes. Just call the $.map function.
 
For example:
 
Other extremely useful JQuery array functions are:
 
$.inArray(value, array), returns the position of the first occurance of the element by a specified value. As in:

$.unique(array), returns a deduplicated array. As in:

$.makeArray(object), create an array out of a selected elements. As in:
 
$.extend(target, source1, source2, ... sourceN), extends the target object with the properties of the sources. For example:
  
 
 

kick it on DotNetKicks.com

Posted: Oct 21 2008, 01:12 AM by xxxd | with 4 comment(s)
Filed under:

Comments

DotNetKicks.com said:

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# October 20, 2008 5:34 PM

2008 October 21 - Links for today « My (almost) Daily Links said:

Pingback from  2008 October 21 - Links for today « My (almost) Daily Links

# October 21, 2008 4:33 AM

Code Monkey Labs said:

Pick of the week: Demotivating a (Good) Programmer General Insidious Dependencies : Steve Smith writes about some obvious and not so obvious dependencies lurking in your supposedly loosely-coupled application. Embrace The New .NET Logo : Scott Barnes

# October 28, 2008 9:54 AM

Code Monkey Labs said:

Pick of the week: Demotivating a (Good) Programmer General Insidious Dependencies : Steve Smith writes about some obvious and not so obvious dependencies lurking in your supposedly loosely-coupled application. Embrace The New .NET Logo : Scott Barnes

# February 22, 2009 10:44 PM