Manipulando classes com jQuery
Neste breve post vou ensinar como utilizar a jQuery para manipular várias classes ao mesmo tempo.
Mexendo em todas ao mesmo tempo, por exemplo colocando uma cor de fundo em cada elemento com a classe “minha_classe”.
$(".minha_classe").css({ backgroundColor: "#000" });
Agora, suponha que temos um menu qualquer do site com os links home e contato.
E queremos que a cada vez que o usuário clicar em dos links, troque-se a cor do mesmo, e ao mesmo tempo, quando o usuário clicar no outro, este volte ao normal e a cor do fundo do outro seja modificada.
$(".classeDoLink").click(
function(){
// aqui, voltamos as cores de fundos de TODOS links para
// para a cor padrão, que é amarelo
$(".classeDoLink").css({ backgroundColor:"yellow" })
// agora vamos pegar somente o link que realizou o evento
// para que somente ele fique com a cor vermelha
$(this).css({ backgroundColor: "red" })
}
)
jQuery API – Manipulando Atributos
Fast-Post explicando a “Manipulação de Atributos” com o framework jQuery.
Aí vai então.
Método attr();
Este método é o que provém o acesso mais fácil aos atributos de qualquer elemento, seja qual for a intenção (visualização, manipulação). Este método somente não abrange a exclusão de atributos, já que existe outro método específico para esta tarefa.
Retornando o valor de um atributo:
// selecione o elemento através da sintaxe
var atributo_title = $(“#idElemento”).attr(“title”);
alert(atributo_title); // exibe um alert informando o resultado do resgate do atributo
Para escolher o atributo que se deseja resgatar basta apenas alterar o método attr(“atributo“), sendo possível assim retornar o valor de qualquer que seja o atributo desejado.
JQuery Traduzida – API/Seletores
Bom, este é o primeiro artigo da série que tem como objetivo trazer a documentação e API da JQuery, traduzida e adaptada por mim com exemplos de fácil atendimento. O assunto de hoje são os seletores. básicos.
Seletores Básicos:
#id
Pega os elementos pelo id.
Exemplo de utilização:
Pegando elemento com id “idTeste” e inserindo algum conteudo
$(“#idTeste”).html(“Inserindo meu texto”);
elemento
Pega os elementos diretamente pelo nome da tag.
Exemplo de utilização:
Pegando os elementos inputs e inserindo value 0 neles
$(“input”).val(“0″);
.class
Pega os elementos pela classe que lhes foi definida.
Exemplo de utilização:
Pega os elementos com a classe “minhaClass” e coloca uma borda colorida neles
$(“.minhaClass”).css(“border”,”1px solid #4d4d4d”);
*
Pega todos os elementos da página incluindo o head, o body.
Exemplo de utilização:
Pegar todos os elementos e deixá-los com a cor da fonte preta:
$(“*”).css(“color”,”#000″);
Seletor Múltiplo
Pega diversos elementos, por classe, id, objeto ou como quiser.
Exemplo de utilização:
Pega todos os elementos div, e elementos input com a class inputClasse e coloca uma borda vermelha:
$(“div,input#inputClasse”).css(“border”,”1px solid red”);
Simples Ajax com JQuery
Após muito perambular pela internet atrás de algum exemplo concreto sobre como utilizar a JQuery para realizar requisições AJAX, resolvi postar hoje aqui, um exemplo bem simples de como se fazer isso.
A idéia inicial era postar tudo bonitinho aqui, os códigos e ir comentando cada linha. Mas por falta de tempo e colaboração deste editor *** do wordpress, vou apenas postar uma breve explicação e os arquivos certinhos.
A intenção deste exemplo é apenas ilustrar uma requisição AJAX, portanto não serão abordados assuntos como validação, por exemplo. Embora seja crucial, não a incluí no arquivo, deixando livre para que cada um crie a sua 
Foram criados 3 arquivos para este exemplo.
O primeiro é o “formulario.php” que vai conter uma pagina com um formulario comum.
O segundo é o “ajax.js” onde vamos criar toda nossa estrutura de requisição.
E o terceiro é outra pagina PHP (envia_email.php) para onde vão ser enviados os dados resgatados pelo AJAX para que seja enviado o email.
formulario.php <Ver Código>
ajax.js <Ver Código>
envia_email.php <Ver Código>
Download do zip com todos os arquivos. (formulario.php, ajax.js, jquery.js, envia_email.php)
Mascarando campos com JQuery
Por que usar máscara?
Por que? É simples. Pra facilitar. Isso mesmo, facilitar. Para tornar o preenchimento de algum formulário de seu site mais fácil, mais rápido de ser preenchido, evitando usar recursos desnecessários do usuário.
Plugins JQuery
O framework JQuery conta hoje com uma vasta quantidade de plugins feita pela comunidade que constantemente contribui com excelentes soluções para melhorar a vida de todos.
O plugin que irei utilizar aqui é o Masked Input Plugin que foi criado justamente para essa finalidade.
A máscara é uma forma de facilitar o preenchimento de formulários, determinando previamente a formatação e o conjunto de caracteres que possuirá tal campo, vou explicar melhor.
O um campo de telefone, por exemplo:
(00) 0000-0000
Este campo possui diversos conjuntos de caracteres, o primeiro conjunto, de dois caracteres numéricos (00) consiste no DDD do usuário, o segundo e o terceiro grupo de quatro caracteres separados por hífen (-) consistem no número do telefone em si tambem numéricos.
Tendo isso em mente, imaginamos que seria muito chato para o usuário digitar caractere por caractere nesse formato bonitinho. Ele provavelmente iria fazer algo assim: 0000000000
Então, utilizando a máscara definimos os diversos conjuntos de caracteres e seu tipo de dados (numéricos no nosso caso) fazendo com que o usuário se preocupe apenas em digitar os números, e o resto o nosso plugin irá fazer.
Na Prática
Primeiramente inclua o arquivo do plugin na sua página:
<script src=”jquery.maskedinput.js” type=”text/javascript”></script>
Após isso apenas chame a função mask para mascarar seus campos, da seguinte maneira:
jQuery(function($){
$(”#date”).mask(”99/99/9999″); // onde #date é o id do campo
$(”#phone”).mask(”(99) 999-9999″);
$(”#cpf).mask(”999.999.999-99″);
});
Eu recomendo que o código acima seja inserido num JavaScript externo e incluido na página onde se deseja utilizar as máscaras, para deixar mais limpo o código.
E pronto, seus campos já vão assumir a máscara definida no parâmetro mask();
Créditos também para Comunidade JQuery Brasil
$(“.raymon”).style.display = “none”;
