•  
     

Modelo de Objetos de Documentos - jQuery

Para aprender o máximo sobre jQuery, devemos fazer uma revisão sobre como uma página HTML é construída.

Um documento HTML é estruturado de acordo com o Modelo de Objetos de Documentos, ou DOM (do inglês Document Object Model). É por meio da interação com o DOM que a jQuery é capaz de acessar e modificar códigos HTML.

O DOM é composto por todos os elementos da página, organizados de forma hierárquica, refletindo a maneira como o documento HTML é ordenado. Você deve se lembrar que podemos pensar no documento HTML como uma árvore? Você pode pensar no DOM da mesma forma. Assim como um elemento HTML, os elementos no DOM podem ter pais, filhos e irmãos.


HTML

Código: Selecionar todos


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


CSS

Código: Selecionar todos

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


JavaScript

Código: Selecionar todos

$(document).ready(function(){
$("div").fadeOut(1000);
});


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