Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

jQuery

Learn step by step



jQuery - Basics

jQuery is a framework built using JavaScript capabilities. So we can use all the functions and other capabilities available in JavaScript.

Following chapter would explain most basic concepts but frequently used in jQuery.

String:

String in JavaScript is an immutable object which contains none, one or many characters.

Below given are the valid examples of a JavaScript String:

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"
Numbers:

Numbers in JavaScript are double-precision 64-bit format IEEE 754 values. They are immutable, just like strings.

Some of the valid examples of a JavaScript Numbers:

5350
120.27
0.26"
Boolean:

In JavaScript a boolean can be either true or false. If it is zero, it defaults to false.

Some are the valid examples of a JavaScript Boolean:

true // true
false // false
0 // false
1 // true
"" // false
"hello" // true
Objects:

JavaScript supports Object concept very well. We can create an object using the object literal as follows:

var emp = {
name: "Zara",
age: 10
};

We can write and read properties of an object using the dot notation as:

// Getting object properties
emp.name // ==> Zara
emp.age // ==> 10
// Setting object properties
emp.name = "Daisy" // <== Daisy
emp.age = 20 // <== 20
Arrays:

We can define arrays using the array literal as follows:

var x = [];
var y = [1, 2, 3, 4, 5];

Array has a length property which is useful for iteration:

var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
// Do something with x[i]
}
Functions:

Function in JavaScript can be either named or anonymous. Named function can be defined using function keyword as:

function named(){
// do some stuff here
}

A function which is anonymous can be defined in similar way that a normal function is defined but it would not have any name.

Anonymous functions can also be assigned to a variable or passed to a method as shown.

var handler = function (){
// do some stuff here
}

JQuery takes a use of anonymous functions very frequently as follows:

$(document).ready(function(){
// do some stuff here
});
Arguments:

JavaScript variable arguments is a kind of array which has length property. Given example explains it better:

function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(1); //==> "number", 1
func("1", "2", "3"); //==> "string", 3

The arguments object also has a callee property, that refers to the function that we are inside of. For an example:

function func() {
return arguments.callee;
}
func(); // ==> func
Context:

JavaScript famous keyword this always refers to the current context. Within a function this context can be change, depending upon how the function is called:

$(document).ready(function() {
// this refers to window.document
});
$("div").click(function() {
// this refers to a div DOM element
});

We can specify the context for a function call using the function-built-in methods call() and apply() methods.

Difference between them is how they pass arguments. The Call passes all arguments through as arguments to the function, while apply admits an array as the arguments.

function scope() {
console.log(this, arguments.length);
}
scope() // window, 0
scope.call("foobar", [1,2]); //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2
Scope:

Scope of a variable is the region of your program in which it is defined. A JavaScript variable will have only two scopes.

  • Global Variables: Global variable has global scope which means it is defined everywhere in your JavaScript code.
  • Local Variables: Local variable will be visible only within a function where it is defined. The function parameters are always local to that function.

Within the body of a function, Local variable has precedence over a global variable with the same name:

var myVar = "global"; // ==> Declare a global variable
function ( ) {
var myVar = "local"; // ==> Declare a local variable
document.write(myVar); // ==> local
}
Callback:

Callback is a plain JavaScript function passed to some method as an argument or option. Some callbacks are just events to give the user a chance to react when a certain state is triggered.

jQuery's event system uses such callbacks everywhere, example:

$("body").click(function(event) { console.log("clicked: " + event.target); });

Most of the callbacks provide arguments and a context. In event-handler for example, the callback is called with one argument - Event.

Some callbacks are required to return something, while others make that return value optional. To prevent a form submission, submit event handler can return false as follows:

$("#myform").submit(function() {
return false;
});
Closures

They are created whenever any variable that was defined outside the current scope is accessed from some inner scope.

Example shows that how variable counter is visible within the create, increment, and print functions, but it is not visible outside of them:


function create() {
var counter = 0;
return {
increment: function() {
counter++;
},
print: function() {
console.log(counter);
}
}
}
var c = create();
c.increment();
c.print(); // ==> 1

This pattern allows us to create objects with methods that operate on data that is not visible to the outside world. This should be noted that data hiding is the very basic concept of object-oriented programming.

Proxy Pattern:

Proxy is an object that can be used to control access to another object. It implements same interface like any other object and passes on any method invocations to it. 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 save jQuery's setArray method in a closure and overwrites it as follows:


(function() {
// log all calls to setArray
var proxied = jQuery.fn.setArray;
jQuery.fn.setArray = function() {
console.log(this, arguments);
return proxied.apply(this, arguments);
};
})();

The above wrap its code in a function to hide the proxied variable. Then proxy 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.

Built-in Functions:

JavaScript comes with a useful set of built-in functions. These functions can be used to manipulate Numbers, Strings and Dates.

Following are some of the important JavaScript functions:

MethodDescription
charAt()It returns character at the specified index.
concat()It combines the text of two strings and returns a new string.
forEach()It calls a function for each element in the array.
indexOf()It returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.
length()It returns length of any string.
pop()It removes the last element from an array and returns that element.
push()It add's one or more elements to the end of an array and returns the new length of the array.
reverse()It reverses order of the elements of an array -- the first becomes the last, and the last becomes the first.
sort()It sorts the elements of an array.
substr()It returns the characters in a string beginning at the specified location through the specified number of characters.
toLowerCase() It returns the calling string value converted to lower case.
toString()It returns the string representation of the number's value.
toUpperCase() It returns the calling string value converted to uppercase.
The Document Object Model(DOM):

The DOM is tree-structured of various elements of HTML as follows:


<html>
<head>
<title>the title</title>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
</html>

Given 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.
  • So, in addition 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.


Related Videos