Resumo - Jquery (Facilita JS)

Prévia do material em texto

SOBRE VERSÃO:
LINK:
DOWNLOAD DA BIBLIOTECA:
APONTAMENTO NO HTML:
<script src=”jquery-3.5.0.min.js”></script>
-------------------------------------------------------------------------------
Função $() seleciona algo da página para gerar interação.
$( ) é igual a document.getElementById.
$(document).ready({ }) é a mesma coisa do window.onload( );
Estrutura Jquery de Function:
$(document).ready(function( ) {
	$(‘a’).click (function ( ) {
		Alert(‘ O link foi clicado’);
		evento.preventDefault( );
});
});
-------------------------------------------------------------------------------
HTML:
<button id="ola">Olá mundo.</button>
<script>
$('#ola').click( function() { //seleciona o item pelo id = #ola
 alert("Olá mundo!"); // manda a mensagem para a tela
});
</script>
Exemplo no código:
Explicação:
<button id="ola">Olá mundo.</button>
<script>
$(document).ready(function(){ //chama o documento todo.
})
</script>
SELETORES DE ELEMENTOS: (alterando CSS com Jquery)
Por: (‘h1’) - titulo
Por: (‘p’) - paragrafo
Por: (‘p1’) - #id
Por: (‘li’) - lista
Por: (‘primeiro’) - class
Por: (‘li.primeiro’) – Lista + class
Por: (‘[lang=’en’]’) - idioma
Também podemos selecionar de diversas outras formas, como por atributos, por pseudo-classes, por tipos de campos de formulário, pelos estados desses campo, por conteúdo ou pela ordem que aparecem em um conjunto. A lista é bem extensa e não vale a pena reproduzir tudo aqui. Assim, deixo a referência online para você: https://api.jquery.com/category/selectors/Links to an external site.
Contador com Jquery:
Criando elementos em html com Jquery:
<script>
$(‘#lista’).append($(‘<li>item</li>’)); // cria o elemento quando clica no +1
</script>
Inserindo foto no HTML:
html: aceita marcação: exibição: 
text: não aceita marcação: exibição: 
--------------------------------------------------------------------------------
Recebendo valores no console:
attr: é o valor no documento.
Prop: é o valor inserido no momento pelo usuário.
Exemplo: 
CSS
Toggle: (inverte a classe, quando clica ativa, quando clica novamente desativa.)
Filtros:
Vetor Jquery:
Vetor Javascript { get.( ); <- transforma jquery em um vetor Javascript)
Obs: .add(‘#titulo’). addClass(‘marcado’) <- adiciona mais elementos
Clique:
image7.png
image8.png
image9.png
image10.png
image11.png
image12.png
image13.png
image14.png
image15.png
image16.png
image17.png
image18.png
image19.png
image20.png
image21.png
image22.png
image23.png
image24.png
image25.png
image26.png
image27.png
image28.png
image29.png
image30.png
image31.png
image32.png
image1.png
image2.png
image3.png
image4.png
image5.png
image6.png