Querying without jquery

no-jquery1.js

//getting something by id
var element = document.getElementById("idName"); //remeber to not use a "#"
//getting something by class
var elements = document.getElementsByClassName("className");//remeber not to user a "."
//Notice that getElementsByClassName returns a collection not just a singular item. and although it is array like. it isn't an array

no-jquery2.js

//common things you would do in jquery 


//
//  FadeOut
//

function fadeout(element, time){
    //if they didnt supply a time default to one second
     time = time || 1000;
    //setting up the amount of interations we want to do.
    var steps = time/50;
    var stepsCompleted = 0;
    var interval;
    //Elements current opacity
    var opacity = (+element.style.opacity) || 0;
    //how much we want to incereace opacity each time
    var opactiyStep = (1-opacity)/steps;
    //We can't do this in a for loop because the browser won't repaint the window so we have to do it later
    //We sace the interval in a varibale so we can cancel it when we are done
    interval = setInterval(function(){
        //If we have done all the steps we clear the interval so it stops running and we are done
        if(steps <= stepsCompleted){
            clearInterval(inerval)
        }
        //We increment the opacity of the element
        else{
            element.style.opacity += opacityStep;
        }
    }, 50);
}
//useage
var element = document.getElementById("test");
fadeOut(test);
//For a fadein you would do something very similar but in reverse makes sense doesn't it

//
// Hiding an element
//

var element = docment.getElementById("test");
element.style.display = "none";

//
//showing an element
//

var element = docment.getElementById("test");
element.style.display = "block";