Fichas
jQuery - CodeSchool - Basic
Fichas del conjunto (17)
- 1Como selecionar múltiplos elementos em jQuery? como uma classe e uma ID ao mesmo tempo?$(".className, #idName");
- 2Porque é mais interessante utilizar 'traversing' do que pseudo-seletores em jQuery?Apenas de ter um pouco mais de codigo, traversing o DOM é um pouco mais rápido:
método pseudo seletores:
$("#nameID li"); -> retorna os elementos li filhos do elemento ID.
método traversing :
$("#idName").find("li"); -> retorna os elementos li filhos do elemento ID, porém um pouco mais rápido com 'traversing'.
$("li:first"); -> pseudo selection //
$("li").first(); -> Traversing // - 3Como funciona a tecnica 'Walking the DOM'?$("li").first().next().prev();
para encontrar elementos com maior especifidade no DOM, sem a utilização de pseudo seletores, podemos utilizar essas tecnias de 'Walking the DOM'.
$('li').first().parent(); - retorna o elemento pai do primeiro elemento ;
$('li').first().children() - retorna os filhos do elemento ; - 4O que os comandos: .before() .after() .prepend() .append() fazem e como podemos usa-los?Esses comandos podem ser utilizados quando queremos adicionar um elemento ao DOM.
var price = $('From $399.99
');
então se temos uma estrutura como a abaixo, os comandos vão colocar o elemento na seguinte forma:
$('target').before(price);
$('target').prepend(price);
$('target').append(price);
$('target').after(price);
Se quisermos mudar a referencia, podemos utilizar o comando prependTo(), appendTo(), insertAfter(), insertBefore():
price.appendTo($('.vacation'));
MUDAMOS A REFERENCIA. - 5O que o comando 'this' se refere?ao elemento que ativou o evento, como o botão que foi pressionado.
Lembrar que this, é uma variável javascript, para manipular como um elemento do DOM temos que converter ela, utilizando $('this');
$(this).closest('.vacation').append(price);
lembrar que closest ajuda a encontrar o elemento que está acima dele na arvore DOM. - 6Como podemos pegar informações de elementos? Como no exemplo do curso, temos varias onde clickamos no botão e ele some e parece um preço, porém o preço é diferente de um elemento para o outro, como podemo armazenar e acessar esses dados?Utilizamos o atributo HTML data-*
data-*type_name;
Que vai nos fornecer informações adicionais sobre um elemento, para interagir com esses atribuitos em jquery vamos utilizar:
.data() -> para retornar o valor que foi definido.
já para definir um valor temos que utilizar o método jquery:
.data(, )
Exemplo:
Temos no HTML
Other elements
Podemos acessar a informação 'Data-price' com :
$('my_li_class').data('price'); - 7Como funciona a técnica de 'event delegation'?$('#filters').on('click', '.onsale-filter', function(){
});
adicionamos um parametro apos o 'click', para que somente os elementos que possuem a class .onsale-filter sejam afetados pelo click handler.
$(document).ready(function() {
$('.tour').on('click', 'button', function() {
});
});
enão quando clickamos no button filho do elemento '.tour' é que temos o trigger correto. - 8o que o método .filter() faz?retornar todos os elementos que se encaixam com alguma parâmetro, por exemplo uma class.
$('.tour').filter('.on-sale').addClass('.highlight');
analisa todos os elementos '.tour' e adiciona a calss 'highlight' para aqueles que possuem a classe 'on-sale'; - 9Porque é interessante criar uma variavel para comandos de seleção no DOM que utilizamos mais de uma vez?$(div > p ) line 2
$(div > p ) line 4
devemos criar uma variavel apenas, pois isso demandará uma só query, tornando o processo mais rápido. - 10Como funciona os métodos slideUp(), slideDown() e slideToggle()?São metodos para mostrar um elemento acima ou abaixo do outro, devemos lembrar que o elemento a ser modificado com esse método deve iniciar como 'display: none;' no css;
- 11Qual é o event handle que é ativado com o hover do mouse em cima de um elemento?$('.className').on('mouseenter', function(){
Faz algo quando posicionamos o mouse acima do elemento que colocamos como triggers;
});
outro event handle para quando o mouse vai embora do elemento é:
mouseleave(); - 12Como passamos uma função como parametro para um event handler?functionName(){
var text = 'this is my function name';
}
$('.class_trigger').on('click', functionName);
ao passar como parametro de um event handler, nos não colocamos os parenteses no final, pois colocar é chamar ela imediatamente, como queremos que seja só quando o evento for acionado, devemos manter sem os parenteses. - 13Como converter uma string em um numero quando estamos atribundo algum elemento do DOM a uma variavel?var price = +$(this).closest('.vacation').data('price');
sem o mais na frente dessa opeação, a variavel 'price' seria uma string, depois de adicionar o '+' a variável se torna um numero. - 14Qual comando utilizamos para obter o valor de uma input field?+$(' input finld').val(); // retorna o valor da input field;
com um mais na frente para retornar um numero ou sem o mais para retornar uma string. - 15Como fazemos para prevenir o comportamento padrão do navegador?temos que passar em nossa função o paramento event
funciton(event) {
//e então utilizar o método:
event.preventDefault();
} - 16Qual é a melhor maneira de enviar modificações via .css() no jQuery, alterando o style de um elemento?Enviando um JavaScript Object como parametro,
exemplo: ;
$(this).css({
'background-color' : '#252b30', 'border-color' : '1px solid #967'
});
PORÉM A MELHOR PRATICA É CRIAR 2 CLASSES E ALTERAR AS CLASSES, POIS QUEREMOS GERENCIAR NOSSOS ARQUIVO CSS UNICAMENTE COM CSS E JAVASCRIPT UNICAMENTE COM JS
.toggleClass(); - 17Como funciona o método '.animate()' em jquery?.animate(), recebe como parametro assim como .css() um javascript object.
$(this).toggleClass('highlighted'); $(this).animate({'top': '-10px'});
podemos alterar a velocidade enviando mais um parametro:
$(this).animate({'top': '-10px'}, 400);
400ms -> default
Información
- Descripción
- asa (JavaScript / jQuery) Technical Skills Fichas sobre jQuery - CodeSchool - Basic, creado por Victor Bini el 18/12/2016.
- Creado por
- Victor Bini
- Visitas
- 8
- Valoración