jQuery Basics

Below are the basics of jQuery. How to create a simple variable, array, objects and a function.

This is explained by Mike Kamminga (Managing director of W3industries). We had a nice session on some other things but I've considered below is the basic jQuery reference for creating objects, arrays.


// simple variable
var myVar = 'value1';
console.log(myVar); //By having console.log we can check the output of javascript in Console of Chrome


// simple array
var myArray = ['value1','value2'];
console.log(myArray);
console.log(myArray[1]);


// simple object
var myObject = {
key1:'value1',
key2:'value2'
};
console.log(myObject);
console.log(myObject.key2);


// multidimensional array
var myArray2 = ['value1','value2', ['value3','value4']];
console.log(myArray2);
console.log(myArray2[2][0]);
console.log(myArray2.length);


// multidimensional object
var myObject2 = {
key1:'value1',
key2:'value2',
key3:{key4:'value4'}
};
console.log(myObject2);
console.log(myObject2.key3.key4);


// example of object references
var settings = {
width : '100',
height : '200',
img : ['img/img1.jpg']
};
// creating reference (not copy)
var someSettings = settings;
// this overwrites the original
settings.img = ['img/img1.jpg','img/img1.jpg','img/img1.jpg','img/img1.jpg'];
someSettings.img = ['boe'];

console.log('settings');
console.log(settings);
console.log('someSettings');
console.log(someSettings);


// creating an object as a function
var settingsObj = function(){

this.width = '100';
this.height = '200';
this.img = ['img/img1.jpg'];
return this;
}


// instantiating the settingsObj twice (copies)
var mySettings1 = new settingsObj;
var mySettings2 = new settingsObj;

var testSettings = settingsObj();

// give first instance a new value
mySettings1.img = ['img/img1.jpg','img/img1.jpg','img/img1.jpg','img/img1.jpg'];

console.log('mySettings1.img:');
console.log(mySettings1.img);
console.log('mySettings2.img:');
console.log(mySettings2.img);
console.log('testSettings.img:');
console.log(testSettings.img);


// make a function that does a simple calculation
function test(i) {
this.value = 5;
return this.value*i;
}

// store result in a variable
var myTest = test(5);
console.log('myTest: '+myTest);
var myTest2 = test(10);
console.log('myTest2: '+myTest2);





/*
* Binding events to elements
*/

$('#my_button').bind({
click : function(){
console.log('clicked');
},
mouseenter : function(){
console.log('mouseenter');

var my_div = $('<div>This is my div</div>');
$('#container').append(my_div);
my_div.slideUp().fadeIn();

console.log(this);

// binding mouseleave inside mouseenter
// this way I have access to the variable my_div
$(this).bind({
mouseleave : function(){
my_div.fadeOut();
}
});
},
mouseleave : function(){
// binding mouseleave again
console.log('mouseleave');
}
});




// difference between each() and for() and while()
var arraylength = myArray.length;

// for loop
for(i = 0; i < arraylength; i++){
console.log(myArray[i]);
}

// while loop
var k = -1;
while(++k < arraylength){
console.log('testing while:');
console.log(myArray[k]);
}

// each() notiation 1
$(myArray).each(function(key, value){
console.log(key, value);
});

// each() notation 2
$.each(myArray, function(key, some){
console.log(key, some);
});

// jquery notation for array length (length is native JS)
console.log($(myArray).length);