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);
