•  
     

Selecionando por ID - jQuery

Se podemos selecionar por classe, significa que também podemos selecionar por ID. Fazemos isso colocando o nome do ID (entre aspas) dentro de $(). Assim como precisamos do . para classes, precisamos do # para IDs. Poderíamos selecionar id="header" assim:

Código: Selecionar todos

$('#header');

O ponto e vírgula no final é importante — é assim que a jQuery sabe que terminamos de dar um comando. Por enquanto, uma boa regra a seguir é colocar ponto e vírgula ao final de qualquer linha que não termina com uma { aberta. (O editor vai tentar ajudá-lo com o posicionamento do ponto e vírgula, então preste atenção aos avisos). Exemplos de usos corretos e incorretos podem ser encontrados nas Dicas.


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 id="blue"></div>
<div></div>
<div></div>
<div></div>
<br><button>Click Me!</button>  
</body>
</html>


CSS

Código: Selecionar todos

div {
    height: 100px;
    width: 100px;
    display: inline-block;
    background-color: #F38630;
    border-radius: 5px;
}

#blue {
    background-color: #A7DBD8;
}


JavaScript

Código: Selecionar todos

$(document).ready(function(){
$('button').click(function(){
$("#blue").fadeOut('slow');
});
});


Demo: http://jsfiddle.net/0ma7nkkL/