O que é jQuery? Um Tok em umas das bibliotecas JavaScript mais usada da Web

Quer dominar jQuery, mas ainda não está familiarizado com JavaScript? Não se preocupe! Comece sua jornada agora mesmo clicando aqui e descubra como fazer a web ganhar vida!

jQuery – Write Less, Do More

A biblioteca é um projeto da Fundação JavaScript, surgiu como resposta à necessidade de simplificar os scripts interpretados no client-side. Seu objetivo principal é capacitar os desenvolvedores a alcançarem mais com menos esforço, adotando o lema “Write Less, Do More” (Escreva menos, faça mais) como mantra da comunidade.

Com o jQuery, tarefas que normalmente exigiriam longos e complexos blocos de código podem ser simplificadas para uma única linha. Desde a implementação de efeitos visuais dinâmicos até a manipulação de eventos interativos, essa biblioteca possibilita que os desenvolvedores atinjam seus objetivos de forma rápida e eficiente, ao mesmo tempo que promove a escrita de código mais limpo, legível e conciso. Isso resulta em uma compreensão aprimorada do código para todos os envolvidos no projeto.

Demostração

// Em JavaScript puro
var botaoOcultar = document.getElementById('ocultarConteudo');
var conteudoDiv = document.querySelector('.conteudo');

botaoOcultar.addEventListener('click', function() {
  if (conteudoDiv.style.display === 'none') {
    conteudoDiv.style.display = 'block';
  } else {
    conteudoDiv.style.display = 'none';
  }

Minha div .conteudo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

// Em jQuery 
$("#ocultarConteudo").click(function() {
  $(".conteudo").toggle();
});

Demostração

Minha div .conteudo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Suas principais Funcionalidades

  • Resolução da incompatibilidade entre os navegadores.
  • Redução de código para otimização e desempenho.
  • Reutilização do código através de plugins.
  • Integração com uma vasta quantidade de plugins criados por outros desenvolvedores.
  • Facilidade para acessar e manipular o DOM de forma simplificada.
  • Compatibilidade com AJAX (Asynchronous JavaScript And XML) para comunicação assíncrona com o servidor.
  • Implementação segura de recursos do CSS1, CSS2 e CSS3 para garantir consistência visual e comportamento.
  • Adoção de programação encadeada, em que cada método retorna um objeto, para melhor legibilidade e manutenção do código.

Seletores

No jQuery, os filtros são métodos que permitem selecionar elementos específicos de um conjunto de elementos correspondentes a um seletor. Eles são úteis para refinar a seleção de elementos, permitindo escolher elementos com base em diferentes critérios, como classe, ID, atributos, etc.

$(“*”)Seleciona todos os elementos da página.
$(this)Seleciona o elemento atual que será manipulado dentro de uma função.
$(“p”)Seleciona todas as instâncias da tag < p >.
$(“.example”)Seleciona todos os elementos com a classe “example” aplicada.
$(“[type=’text’]”)Seleciona qualquer elemento com o atributo type aplicado como “text”.
$(“p:first-of-type”)Seleciona o primeiro elemento < p > encontrado na página.

Verifica se pelo menos um dos elementos selecionados possui a classe especificada.

var hasMenuClass = $("#m2").hasClass("menu");

Remove elementos indesejados com base em uma função que retorna true para os elementos desejados e false para os indesejados.

$("p").filter(function(i) {
  return i === 3;
});

Retorna um array de valores, onde cada valor está ligado a um elemento selecionado. Os valores são retornados pela função passada como parâmetro.


var ids = $("div").map(function() {
  return $(this).attr("id");
});

Esses são apenas alguns exemplos de filtros que você pode usar no jQuery para interagir com os elementos da página de forma mais simples.


Veja na documentação oficial do jQuery mais exemplos

READ MORE

Enviar dados de formulário do Elementor Pro para função PhP e responder

A tempos venho trabalhando com Elementor Pro e tem ajudado muito nas entregas que temos feito aqui na agência em termos de agilidade no desenvolvimento. Nos últimos anos entregamos alguns sistemas de gestão e utilizamos Elementor Pro para construir as interfaces gráficas desses sistemas e o ponto alto desse processo se deu essa semana, quando conseguimos pela primeira vez receber os dados de um formulário em uma função PhP e retornar para o Java Script a resposta da nossa função, e não apenas “success”.

Nosso grande dilema até então era o fato de não termos controle sobre o que acontecia no back-end, apenas sabíamos que os dados haviam sido enviados com sucesso, se a função havia armazenado ou se algum dado estava com problemas era sempre uma incógnita.

Vamos a prática!

<?php
    add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) { } );
?>

Essa é a action que trata os dados enviados por todos os formulários do site, ou seja, dentro da função pode-se identificar qual formulário enviou os dados e executar um script ou até mesmo funções com os dados enviados pelo formulário. Até aqui tudo certo, já era uma prática nossa, sua não? Então vou mostrar um pouco mais dessa action.

<?php
    add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
        $form_name = $record->get_form_settings( 'form_name' );
        $raw_fields = $record->get( 'fields' );
        if( 'nome-do-formulario' == $form_name ) {
            $return = function_trata_dados( $raw_fields );
	    $handler->data['customer_mail'] = $return;
        }
    }, 10, 2 );
?>

A função executada na action usa dois parâmetros, o $record trás os dados do dormulário, então nele consigo identificar o nome do formulário (linha 2) e um array com os campos dele (linha 3), faça o que quiser com essas informações, acima estou mostrando um exemplo de uso.

O segundo parâmetro “$handler” foi o grande sucesso da semana, ele devolve ao front-end resposta sobre o envio, na posição “customer_mail” pode-se passar uma String que será tratada no JS a seguir:

<script>
    $(document).on('submit_success', '#id-formulario', function( event, response ) {
        if ( response.data.customer_mail ) {
            console.log( response.data.customer_mail );
        }
    });
</script>

E esse é o JS que trata a resposta da action “’elementor_pro/forms/new_record’”. Simples assim! (Depois de sabermos da existência disso hehehe).

Dúvidas, fica a vontade para comentar…

READ MORE