Continuando a revisão de conceitos de programação que comentei nos posts anteriores, terminei a terceira parte da “Front End Development Certification” do freeCodeCamp, a parte “jQuery”.
Gostei bastante dessa parte por que ela dá uma passada boa por sobre como a jQuery funciona, como selecionar os elementos de várias maneiras e complementa com a lib animate.css para fazer animações nos elementos.
Estranhei um pouco não falar nada sobre AJAX nessa parte, mas acho que isso vai vir mais pra frente já dentro da parte de JavaScript mesmo, aqui foi mais uma passada pra entender como jQuery funciona.
No mais, assim como na parte de Bootstrap, vale uma aprofundada no jQuery fora do freeCodeCamp, mas pra quem nunca mexeu com jQuery achei uma ótima introdução.
Segue as perguntas e respostas que tirei como aprendizado dessa parte.
O que é jQuery?
Uma biblioteca JavaScript.
HTML: Qual elemento é usado para conter código Javascript?
<script>
jQuery: Por que deve-se colocar o código dentro da função $(document).ready()?
Para que o código só seja executado quando a página estiver completamente carregada.
jQuery: O que faz a função $(document)?
Seleciona o documento atual para ser usado.
jQuery: Como é chamado a função $?
bling
jQuery: Como se seleciona um elemento?
Se adiciona o nome do elemento dentro de $()
jQuery: Escreva o seletor para selecionar todos os buttons da página.
$("button")
jQuery: Qual função adiciona uma classe CSS ao elemento selecionado?
.addClass()
CSS: Qual biblioteca faz com que os elementos da tela possam ser animados?
animate.css
animate.css: Qual classe CSS faz com que os elementos possam ter animação?
animated
animate.css: Quais classe CSS faz os elementos pularem?
bounce
animate.css: Qual classe CSS faz com que os elementos balancem?
shake
jQuery: Escreva o seletor para selecionar todos os elementos .well da página.
$(".well")
jQuery: Escreva o seletor para selecionar o elemento #target3 da página.
$("#target3")
animate.css: Qual classe que faz com que o elemento suma da tela?
fadeOut
jQuery: Qual função remove uma classe CSS do elemento selecionado?
.removeClass()
jQuery: Qual função aplica CSS ao elemento selecionado?
.css()
jQuery: Escreva o seletor que muda a cor de #target1 para vermelho.
$("#target1").css("color", "red");
jQuery: Qual função altera as propriedades do elemento selecionado?
.prop()
jQuery: Escreva o seletor que desabilita #target1.
$("#target1").prop("disabled", true);
jQuery: Qual função é usada para mudar o HTML de um elemento?
.html()
jQuery: Qual função é usada para mudar o texto de um elemento?
.text()
jQuery: Diferença em .html() e .text()?
.html() muda o HTML do elemento e .text() muda o texto do elemento.
jQuery: Qual função remove um elemento da página?
.remove()
jQuery: Qual função permite mover um elemento para outro lugar?
.appendTo()
jQuery: Selecione o elemento #target2 e o adicine em #right-well.
$("#target2").appendTo("#right-well");
jQuery: Qual função copia um elemento?
.clone()
jQuery: Qual função acessa o elemento pai do elemento selecionado?
.parent()
jQuery: Qual função acessa os elementos filho do elemento selecionado?
.children()
jQuery: Como se acessa um elemento filho X específico do elemento selecionado?
Com :nth-child(X)
jQuery: Acesse o segundo elemento da classe .target.
$(".target:nth-child(2)")
jQuery: Como se acessa os elementos impares do elemento selecionado?
Com :odd
jQuery: Como se acessa os elementos pares do elemento selecionado?
Com :even