Pulando campos (tabulando) ao pressionar Enter

Não sei quem foi o infeliz que teve a infeliz ideia de fazer isso desse jeito, mas por algum motivo infeliz, ainda tem gente que acha que, pressionando 'Enter', o cursor do infeliz deve pular para o próximo campo infeliz, ao invés de, alegremente, enviar o formulário atual.

Enfim.

 function navegarEnter(){  
   $(document).on('keypress', 'input,select,textarea', function(event){  
     if(event.keyCode === 13) {  
       $('input,select,textarea')[$('input,select,textarea').index(this)+1].focus();  
       event.preventDefault();  
     }  
   });  
 }  

Coloquei como função mesmo, porque deu preguiça de fazer um plugin.

Forçando o usuário a digitar em um campo com jQuery

É chato, mas às vezes é necessário.

 $('.campochato').on( "keydown contextmenu", function(event) {  
     switch(event.which){  
       case 3://botao direito  
       case 17://ctrl  
       case 86://ctrl+v  
         event.preventDefault();  
         break;  
     }  
   });  

O evento 'contextmenu' captura o clique no botão direito.

Jquery On

Assim:

 $('.qualquerItemPai').on("click", ".algumItemFilho", function(){  
      //algumacoisa  
 });  

Fonte: http://www.weblizards.com.br/pt/blog/jquery-metodo-on/

Plugin para 'zebrar' tabelas ou listas com jQuery

 (function( $ ){  
   $.fn.zebrar = function(options) {  
   var defaults = {  
     'par' : 'lightgrey',  
     'impar' : 'white'  
   };  
   var settings = $.extend( {}, defaults, options );  
   return this.each(function(index,elemento) {  
     if((index % 2)==0)  
     {  
       $(this).css({ background: settings.par });  
     }else{  
       $(this).css({ background: settings.impar });  
     }  
   });  
   };  
 })( jQuery );  

Utiliza assim:

 <script src="js/zebrar.js"></script>  
 <script>  
      $(function(){  
           $('ul li').zebrar();  
      )  
 </script>  
 <style>  
 ul{  
      list-style-type:none;  
      padding:0;  
      margin:0;  
 }  
 ul li{  
      display:block;  
 }  
 </style>  
 <ul>  
      <li><a href="#">Nunc tincidunt</a></li>  
      <li><a href="#">Proin dolor</a></li>  
      <li><a href="#">Aenean lacinia</a></li>  
 </ul>  

Também dá pra passar os parâmetros para as cores das linhas, assim:

 $('ul li').zebrar({par:'blue',impar:'red'});  

Nota: deixar de ser preguiçoso e usar o github pra códigos grandes.

Avisar se o usuário esqueceu de gravar o formulário

Primeiro, criamos uma variável:

 var alguem_mexeu_no_meu_queijo = false;  

No evento change de qualquer elemento, alteramos essa variável, para sabermos que o usuário mexeu no formulário:

 $('select, input, textarea').change(function(){  
      alguem_mexeu_no_meu_queijo = true;  
 });  

Depois, no evento beforeunload da janela, precisamos ver se a variável foi alterada.
Se sim, damos o alerta, perguntando se ele quer mesmo sair.

 window.onbeforeunload = function(){  
      if(alguem_mexeu_no_meu_queijo==true)  
      {  
           return 'Alguém mexeu no meu queijo.';  
      }  
 }  

Ah, quando o usuário envia o formulário, precisamos setar a variável como true, para que não apareça o alerta.
Se tu tiver usando o jquery validation, fica assim:

 $('#form').validate({  
           , submitHandler: function(form) {  
                alguem_mexeu_no_meu_queijo = false;  
                form.submit();  
           }  
      });  

Utilizando jquery-ui tabs + jquery validation plugin

Quando o plugin encontra um elemento com erro, o elemento automaticamente ganha foco.
Mas quando o elemento está em uma aba que não está habilitada no momento, não acontece nada.

Pra que o elemento ganhe foco e a aba passe a ser a ativa, segue a função:

 $('#formulario').validate({  
           ignore: "",//para validar os elementos que estão nas abas desabilitadas  
           highlight: function(element, errorClass, validClass) {  
                var div = $(element).parents('.ui-tabs-panel').attr('id');//encontra a div em que está o elemento inválido  
                var index = $('#tabs ul li a').index($('a[href="#'+div+'"]')); //encontra o indice nos links  
                $("#tabs").tabs( "option", "active", index ); //seta a aba como ativa  
           }  
      });  

Quando se usa o editor tinyMCE junto com o jquery.validate, acontece um problema que o usuário precisa clicar duas vezes no botão de salvar, por um motivo que não lembro qual é.

Pra resolver isso, precisa chamar a função triggerSave no clique no botão de enviar, mais ou menos assim:

 $('button.salvar').click(function(){  
     if (tinyMCE) tinyMCE.triggerSave();  
 });  

Validando datas em pt-br com jQuery Validate

assim:

 $.validator.addMethod(  
      "date",  
      function(value, element) {  
           var check = false;  
           var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;  
           if( re.test(value)){  
                var adata = value.split('/');  
                var gg = parseInt(adata[0],10);  
                var mm = parseInt(adata[1],10);  
                var aaaa = parseInt(adata[2],10);  
                var xdata = new Date(aaaa,mm-1,gg);  
                if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) )  
                     check = true;  
                else  
                     check = false;  
           } else  
                check = false;  
           return this.optional(element) || check;  
      },  
      "Insira uma data válida"  
 );  

Trocando obrigatoriedade de campo com jQuery Validate

Temos um campo obrigatório e, ao lado dele, um checkbox que, se estiver marcado, faz com que o campo não seja obrigatório.

A regra fica assim:

 $("#form_cadastro").validate({  
           rules: {  
                senha: {  
                     minlength:8  
                },  
                repetir_senha: {  
                     equalTo: "#senha"  
                },  
                campo_obrigatorio: {  
                      required: function(element) {  
                          return $('#campo_checkbox:checked').length < 1  
                      }  
                }  
           }  
      });  

jQuery hasAttr

Um plugin simples para utilizar a função hasAttr com jQuery, que funciona do mesmo jeito que hasClass.

$.fn.hasAttr = function(name) { return this.attr(name) !== undefined; };

Colocando um elemento dentro de outro com Javascript

1:      $.each($('input.check_red'), function(index, elemento){  
2:        var id_rand = Math.floor((Math.random()*1000)+1);  
3:        var id_rand2 = Math.floor((Math.random()*1000)+1);  
4:        var id_span = "span_"+id_rand+'_'+id_rand2;  
5:        $(elemento).before('<span class="check_red" id="'+id_span+'" title="Espaço do Corretor"></span>');  
6:        $(elemento).prependTo($('#'+id_span));  
7:      })  

1: Seleciona os elementos que serão inseridos dentro do novo elemento criado
2: Gera um número aleatório para criar o ID do novo elemento
3: Gera outro número aleatório(porque, como é aleatório, pode acontecer de gerar duas vezes o mesmo número. Claro que é possível que os dois numeros aleatórios sejam iguais...
4: Concatena os dois números gerados para criar o id do elemento novo
5: Cria o novo elemento antes do elemento que será 'arrastado'
6: Arrasta o elemento para dentro do novo elemento

Pegando a altura da tela de dentro de um iframe com jQuery

Estava mais uma vez brigando com iframes, tentando pegar a altura interna da janela.

Como já é de costume, não funcionou no ie - pegava sempre a altura do iframe sem considerar o tamanho do conteúdo.

A solução foi pegar a altura da primeira tabela (não é um layout tableless), assim:

jQuery('table:first').css('height')

Como interceptar o pressionamento de teclas do teclado

Com jQuery, óbvio.

jQuery("input").keypress(function(event){
  if(event.keyCode=='13')
  {
     event.preventDefault();
  }
})

Nesse caso, está impedindo o pressionamento do Enter (keycode=13).

Caso precise descobrir o keycode das demais teclas, ao invés de procurar uma tabela poraí, é mais fácil assim:

jQuery("input").keypress(function(event){
   console.log(event.keyCode)
})

Passando variáveis em requisições Ajax com Jquery

Aprendi um negócio esquisito em jQuery hoje.
Digamos que eu precise fazer a seguinte requisição:

$.get("test.php", { name: "John", time: "2pm" } );

Até aí tudo simples. Mas digamos que o nome esteja na variável name.

var name = 'john';
var time = '2pm';

A requisição ficaria assim:

$.get("test.php", { name:name, time:time } );