•  
     

Mudando de Alvo - jQuey

Não se sinta intimidado pela quantidade de códigos que está vendo — vamos passar por eles passo a passo para garantir que você entenda tudo.

Assim como o div de CSS se refere ao elemento HTML <div>, o 'div' da jQuery se refere ao mesmo elemento HTML <div>. Você pode pensar no nome do elemento passado para a jQuery como sendo idêntico ao elemento CSS, ele apenas fica entre aspas. Então, por exemplo, você pode apontar qualquer coisa da classe 'button' com

Código: Selecionar todos

$('.button').someAction

Como você deve lembrar, .button no seu arquivo CSS é como você aponta qualquer coisa de class="button" no seu arquivo HTML.



HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
    <head>
    	<title></title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
	</head>
	<body>
        <div></div>
        <div id="green"></div>
	</body>
</html>


CSS

Código: Selecionar todos

div {
    height:100px;
    width:100px;
    background-color:#FF0000;
    border-radius:5px;
    margin-bottom:5px;
}

#green {
    background-color:#008800;
}


JavaScript

Código: Selecionar todos

$(document).ready(function() {
    $("#green").fadeOut(4000);
});


Demo: http://jsfiddle.net/j7y50f4n/1/