close

Sintaxe básica do jQuery- Seleção, manipulação e efeitos

A sintaxe básica do jQuery envolve o uso de um seletor(seletor estilo CSS) e métodos para manipular os elementos selecionados. Aqui estão alguns exemplos básicos de sintaxe do jQuery:

 

Selecionando elementos

  • Selecionar elementos pelo nome da tag HTML: $("tagname") Exemplo: $("p") seleciona todos os <p> elementos da página.

  • Selecionar elementos por classe CSS: $(".classname") Exemplo: $(".myClass") seleciona todos os elementos com a classe "minhaClasse".

  • Selecionar elementos por ID: $("#idname") Exemplo: $("#myElement") seleciona o elemento com o ID "myElement".

  • Selecionar elementos por atributo: $("[attribute='value']") Exemplo: $("[data-type='button']") seleciona elementos com o atributo data-type definido como "botão".

  • Combinando seleções: $("tagname.classname"), $("#idname .classname"), ...

 

Manipulando elementos selecionados

  • Alterando o conteúdo de um elemento: .html(), .text() Exemplo: $("#myElement").html("New content") define o conteúdo HTML do elemento com ID "myElement".

  • Modificando os atributos dos elementos: .attr(), .prop() Exemplo: $("img").attr("src", "newimage.jpg") altera o src atributo de todos <img> os elementos.

  • Manipulando classes CSS de um elemento: .addClass(), .removeClass(), .toggleClass() Exemplo: $("#myElement").addClass("highlight") adiciona a classe "highlight" ao elemento com ID "myElement".

  • Ocultar/exibir elementos: .hide(), .show(), .toggle() Exemplo: $(".myClass").hide() oculta todos os elementos com a classe "minhaClasse".

  • Manipulando eventos em elementos: .click(), .hover(), .submit(), ... Exemplo: $("button").click(function() { ... }) registra um manipulador de eventos click

 

Trabalhando com coleções de elemento

  • Iterando por uma coleção: .each() Exemplo: $("li").each(function() { ... }) itera sobre cada <li> elemento da página.

  • Filtrando uma coleção: .filter(), .not() Exemplo: $("div").filter(".myClass") filtra os <div> elementos e seleciona aqueles com a classe "minhaClasse".

  • Inserindo elementos em uma coleção: .append(), .prepend(), .after(), .before() Exemplo: $("#myElement").append("<p>New paragraph</p>") anexa um novo <p> elemento ao elemento com ID "myElement".

 

Efeitos e animações

  • Executando efeitos fadeIn/fadeOut: .fadeIn(), .fadeOut() Exemplo: $("#myElement").fadeIn(1000) fades no elemento com ID "myElement" durante 1 segundo.

  • Executando efeitos slideUp/slideDown: .slideUp(), .slideDown() Exemplo: $(".myClass").slideUp(500) desliza para cima todos os elementos com a classe "myClass" durante 0,5 segundos.

  • Executando animações personalizadas: .animate() Exemplo: $("#myElement").animate({ left: '250px', opacity: '0.5' }) anima o elemento com ID "myElement" alterando sua posição à esquerda e opacidade.

 

Esses exemplos demonstram como usar diferentes aspectos da sintaxe básica do jQuery para selecionar elementos, manipular suas propriedades e aplicar efeitos ou animações. jQuery oferece um rico conjunto de métodos e funcionalidades para simplificar e aprimorar as tarefas de desenvolvimento web.