Arquivo: entendendoJQuery.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Entendendo jQuery</title>
<link rel='stylesheet' href='css/estilo.css'>
<script src="js/jquery.js"></script>
</head>
<body class="conteudo exercicio">
<h1>Entendendo jQuery</h1>
<div>1</div>
<div>2</div>
<script>
//conjunto de seletores 'div'
//$('div').hide(5000) // tempo de processo para esconder o processo
//$('div').hide(5000).show(7000)//escondendo e aparecendo por 5 e 7 segundos
$('div').hide(5000).show(5000).fadeOut(7000)
console.log($('div').get(1));
console.log($.isEmptyObject({nome: null}));
console.log(jQuery.inArray(3, [1, 2, 3]));// está dentro do array o número 1, 2, 3 ?
//função para colocar uma propriedade css
$.fn.fundoVerde = function(){
this.css('background-color','green')
return this // retorna o próprio objeto
}
$('body').fundoVerde().fadeOut(7000)
</script>
</body>
Arquivo: estilo.css
@font-face {
font-family: 'Oswald';
src: url('../fonts/Oswald-Regular.ttf') format('truetype');
}
* {
font-family: 'Oswald', sans-serif;
}
html {
height: 100%;
}
body {
margin: 0;
background-color: #0D262D;
color: #fff;
height: 100%;
}
table {
border-collapse: collapse;
}
tr {
border-bottom: solid 1px white;
}
td {
font-size: 1.6em;
padding: 10px;
}
li {
font-size: 1.6em;
}
.conteudo {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100%;
}
.exercicio div {
font-size: 1.8em;
border: solid 5px #fff;
padding: 0px 40px;
margin: 10px;
}
.exercicio div:nth-of-type(1) {
background-color: darkgoldenrod;
}
.exercicio div:nth-of-type(2) {
background-color: crimson;
}
.exercicio div:nth-of-type(3) {
background-color: darkcyan;
}
.exercicio div:nth-of-type(4) {
background-color: darkorchid;
}
.exercicio div:nth-of-type(5) {
background-color: dodgerblue;
}
.exercicio div:nth-of-type(6) {
background-color: salmon;
}
.exercicio .destaque {
border: solid 10px greenyellow;
color: greenyellow;
font-weight: bold;
}
