JavaScript é uma linguagem versátil e de boa reputação, usada principalmente para adicionar funcionalidades interativas a sites. Ele vem com uma biblioteca chamada jQuery que executa essas tarefas com eficiência. Os métodos jQuery são basicamente as ações que executam uma tarefa específica sem muito envolvimento do código. Um desses métodos é o “ mudar() ” que dispara o evento “change” para perceber imediatamente que o valor do campo de entrada foi alterado. É usado principalmente nos campos de formulário HTML, bem como nas caixas de seleção, botões de opção e caixas de seleção.
Este artigo detalha o funcionamento e a implementação prática do método jQuery “change()”.
Como funciona o método jQuery “change ()”?
O jQuery “ mudar() ” método dispara o “ mudar ” manipulador de eventos. O evento “change” é um tipo especial de evento JavaScript que ocorre quando o valor do elemento HTML especificado (“ ”, “
Sintaxe
$ ( seletor ) .mudar ( função )
Na sintaxe acima:
-
- seletor: Permite a manipulação do elemento HTML.
- função: É um parâmetro opcional que especifica a função a ser executada com o método “change()”.
Exemplo 1: Aplicando o método “change()” para obter o valor alterado do campo de entrada
Neste exemplo, o “ mudar() ” é aplicado para retornar um valor alterado do elemento HTML “ ” específico.
Código HTML
Primeiro, uma visão geral do seguinte código HTML:
< h2 > mudança jQuery ( ) Método h2 >< p > Altere o valor do campo de entrada: p >
Campo de entrada: < entrada tipo = 'texto' valor = 'Linux' em mudança = 'alerta(este.valor)' >
< p > Clique no botão dado para disparar o 'em mudança' evento: p >
< botão > Clique aqui botão >
Neste bloco de código:
-
- Defina um subtítulo de nível 2 usando o “ ' marcação.
- Em seguida, especifique o parágrafo com a ajuda do “ ' marcação.
- Depois disso, adicione um campo de entrada através do “
” etiqueta chamada “ Campo de entrada ”, tendo o tipo como “ texto ”, e o valor como “ Linux ”, respectivamente. - Também associa um “ em mudança() ” que exibe uma caixa de alerta quando o valor de entrada especificado é alterado.
- O ' ” marca cria outro parágrafo com a declaração declarada.
- Por fim, adicione um botão usando o botão “
' marcação.
Código jQuery
Agora, considere o seguinte código jQuery:
< cabeça >< roteiro origem = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > roteiro >
< roteiro >
$ ( documento ) .preparar ( função ( ) {
$ ( 'botão' ) .clique ( função ( ) {
$ ( 'entrada' ) .mudar ( ) ;
} ) ;
} ) ;
roteiro >
cabeça >
Nas linhas de código acima:
-
- Especifique o ' ” na seção “head” que inclui o caminho CDN do jQuery do site oficial “ ”.
- Em seguida, o código jQuery primeiro corresponde ao “ documento ” para selecionar o elemento DOM de destino e associar o “ preparar() ” método que invoca a função indicada () assim que o documento é carregado.
- Depois disso, o “ botão ” é adicionado e está vinculado ao seletor “ clique() ” que permitirá a execução de uma função ao clicar no botão.
- Na definição da função, aplique o “ mudar() ” no método “ entrada ” elemento que dispara o evento “onchange” quando seu valor muda.
Saída
A saída exibe uma caixa de alerta com o valor alterado do campo de entrada após o evento “onchange” acionado.
Exemplo 2: Aplicando o método “change()” para alterar a cor de fundo de um campo de entrada
Este exemplo particular explica o funcionamento do “ mudar() ” para alterar a cor de fundo do campo de entrada ao alterar o valor.
Código HTML
Siga o código HTML fornecido:
< h2 > mudança jQuery ( ) Método h2 >< p > Altere o valor do campo de entrada: p >
Campo de entrada: < entrada tipo = 'texto' valor = 'Linux' > p >
Aqui, o elemento “ ” especifica apenas seu tipo e o valor.
Código jQuery
Agora, passe para o código jQuery:
< cabeça >< roteiro origem = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > roteiro >
< roteiro >
$ ( documento ) .preparar ( função ( ) {
$ ( 'entrada' ) .mudar ( função ( ) {
$ ( esse ) .css ( 'cor de fundo' , 'amarelo' ) ;
} ) ;
} ) ;
roteiro >
cabeça >
Nas linhas de código acima, o “ mudar () ” método anexa um “ função() ” que aplica a propriedade de estilo “CSS” “ cor de fundo ” no elemento HTML selecionado, ou seja, “entrada” no valor de entrada alterado.
Saída
A saída confirma que a cor de fundo do campo de entrada fornecido muda quando seu valor é alterado.
Conclusão
jQuery oferece o “ mudar() ” que dispara o evento “change” quando o usuário altera o valor do campo de entrada. Também pode ser associado a um evento adicional para suportar suas funcionalidades Funciona apenas nos elementos HTML “ ”, “