This chapter would explain most basic concepts but frequently used in jQuery based applications.
You can write and read properties of an object using the dot notation as follows −
You can define arrays using the array literal as follows −
An array has a length property that is useful for iteration −
An anonymous function can be defined in similar way as a normal function but it would not have any name.
A anonymous function can be assigned to a variable or passed to a method as shown below.
JQuery makes a use of anonymous functions very frequently as follows −
The arguments object also has a callee property, which refers to the function you're inside of. For example −
You can specify the context for a function call using the function-built-in methods call() and apply() methods.
The difference between them is how they pass arguments. Call passes all arguments through as arguments to the function, while apply accepts an array as the arguments.
Local Variables − A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.
Within the body of a function, a local variable takes precedence over a global variable with the same name −
jQuery's event system uses such callbacks everywhere for example −
Most callbacks provide arguments and a context. In the event-handler example, the callback is called with one argument, an Event.
Some callbacks are required to return something, others make that return value optional. To prevent a form submission, a submit event handler can return false as follows −
Closures are created whenever a variable that is defined outside the current scope is accessed from within some inner scope.
Following example shows how the variable counter is visible within the create, increment, and print functions, but not outside of them −
This pattern allows you to create objects with methods that operate on data that isn't visible to the outside world. It should be noted that data hiding is the very basis of object-oriented programming.
A proxy is an object that can be used to control access to another object. It implements the same interface as this other object and passes on any method invocations to it. This other object is often called the real subject.
A proxy can be instantiated in place of this real subject and allow it to be accessed remotely. We can saves jQuery's setArray method in a closure and overwrites it as follows −
The above wraps its code in a function to hide the proxied variable. The proxy then logs all calls to the method and delegates the call to the original method. Using apply(this, arguments) guarantees that the caller won't be able to notice the difference between the original and the proxied method.
|S.N.||Method & Description|
Returns the character at the specified index.
Combines the text of two strings and returns a new string.
Calls a function for each element in the array.
Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.
Returns the length of the string.
Removes the last element from an array and returns that element.
Adds one or more elements to the end of an array and returns the new length of the array.
Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.
Sorts the elements of an array.
Returns the characters in a string beginning at the specified location through the specified number of characters.
Returns the calling string value converted to lower case.
Returns the string representation of the number's value.
Returns the calling string value converted to uppercase.
The Document Object Model is a tree structure of various elements of HTML as follows −
This is a paragraph.
This is second paragraph.
This is third paragraph.
Following are the important points about the above tree structure −
The <html> is the ancestor of all the other elements; in other words, all the other elements are descendants of <html>.
The <head> and <body> elements are not only descendants, but children of <html>, as well.
Likewise, in addition to being the ancestor of <head> and <body>, <html> is also their parent.
The <p> elements are children (and descendants) of <div>, descendants of <body> and <html>, and siblings of each other <p> elements.