Básico JQuery

1 – Inclua na sua página HTML o jquery obtido de http://www.jquery.org

<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>

2 – Adicione a TAG com o código que ficará disponível na página

<script type="text/javascript">
$(function() {
  // seu código jquery aqui
});
</script>

Entendimento: $( é uma abreviação para JQuery(

3 – O corpo da página HTML

<input type="text" id="nome">
<input type="text" id="idade">

4 – Pegar o id e valor de um único elemento

$("#nome").blur(function() {
  var id = $(this).attr('id');
  var value = $(this).attr('value');
  alert(id + " " + " " +  value);
});

Entendimento: Foi usado o seletor de id # seguido do id de um elemento na página. Em seguida criamos uma função dentro do evento blur que entra em ação toda vez que um elemento perde o foco na página. Por fim, pegamos os atributos dos elementos HTML com o manipulador $(this).attr()

Dica: Você pode pegar o valor de um elemento um dos manipuladores:

$(this).attr('value') ou $(this).val()

+ Outros seletores: http://api.jquery.com/category/selectors/
+ Outros eventos: http://api.jquery.com/category/events/
+ Outros manipuladores: http://api.jquery.com/category/manipulation/

5 – Como pegar o id e o valor de qualquer campo input

$(":input").blur(function() {
  var id = $(this).attr('id');
  var value = $(this).attr('value');
  alert(id + " " + " " +  value);
});

Explicação: Foi usado o seletor :input que opera em qualquer campo input da página

6 – Validar campos em branco com seletor de classe .class

$(".required").blur(function() {
  if ($(this).val().length == 0) {
    var id = $(this).attr('id');
    $("label[for=" + id + "]").remove();
    $("#" + id).after("<label for=" + id +"> Campo obrigatorio</label>");
    $("label[for=" + id + "]").css("color","red");
  }
});

– Adicione o atributo class=”required” a todos os inputs que devem ser validados

<input type="text" id="idade" class="required">

Entendimento: A função do seletor required será chamada para todos os elementos que a usarem

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s