Você pode navegar pelas “categorias” tradicionais ou pela busca(se você tiver uma vaga lembrança do que esta procurando)

Fica a dica, favoritem aí http://jqapi.com/

	function getParameter(p,href){
		var parName = p.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  		var rx = new RegExp("[\\?&#]"+parName+"=([^&#]*)");
  		var valor = rx.exec(href);
  		if(valor == null){
    		return "";
		}else{
    		return valor[1];
		}
	}

Como onde eu precisei usar, a url nem sempre estava no browser, eu estou passando ela por parâmetro, esta função retorna o valor do parâmetro que você procurou, ou retorna vazio se não encontrar nada, ex:

        alert(getParameter('parametroDaUrl',location.href));

Espero que seja útil

Daí uma alma abençoada me mandou um link de um blog explicando graficamente como funciona as RegEx e dando 8 exemplos que devem ser comuns em nossa rotina

Favoritem esse link: http://net.tutsplus.com/tutorials/other/8-regular-expressions-you-should-know/

PS.: Desculpem a ausência do blog, quem quiser me acompanhar, segue meu cartão http://wender.com.br

1.: Utilizar uma biblioteca: Vai te poupar boas horas de trabalho, com funções prontas para HttpRequest, alteração de conteúdo, utilitários para arrays e objetos, etc. Temos diversas opções, dentre as mais conhecidas jQuery, Prototype e Dojo. Ainda temos as utilitárias para interface como jQueryUI, Scriptaculous e YUI, sendo que esta ultima é mais global, não sendo uma biblioteca só para interface. O interessante ao usar uma biblioteca é antes de mais nada estudar sua API, e num segundo momento seu código. Você encontrará soluções sofisticadas para problemas comuns. Minha primeira opção é a jQuery / jQueryUI … e em breve jQuery Mobile

2.: Mantenha um padrão de codificação. Isso vai colaborar demais na organização do código, e principalmente trabalhando em equipe: é fundamental que todos estejam falando a mesma língua. Não conheço nenhum padrão que seja “o padrão a ser seguido”. O que existe é uma convenção na qual muitos desenvolvedores se apoiam:
- indentação com espaços (4) ao invés de tabs
- limite de 80 caracteres por linha
- chaves de blocos  lógicos(if,switch,for,while,etc) começam na linha da declaração, e seguem com uma quebra de linha e indentação e seu conteúdo.
- Utilizar o formato JSON para declarar objetos e arrays ([1,2,3] ou {“nome”:”Duodraco”})
- Nomear de maneira humanamente compreensível suas variáveis. Já vi variáveis com os nomes mais bizarros possíveis, e alguns com nomes acessíveis, mas completamente fora de contexto.
- Usar o formato “camelizado” na nomenclatura: palavras todas juntas, e o primeiro caracter de cada uma em maiúsculo. maisOuMenosAssim.
- Usar ; no final de cada comando
- Codar de forma que o código seja autodescritivo.
- evitar continue, eval e with, por mais tentador que possa parecer.
Um código bem formatado deve se parecer com isso:

var contador = 0;
function popularBox(titulo,corpo){
    if(titulo == undefined || corpo == undefined){
        return false;
    }
    jQuery("#box DIV.titulo").html(titulo);
    jQuery("#box DIV.corpo").html(corpo);
    return true;
}

Uma maneira que utilizo para organizar o código é mantê-lo em arquivos separados (independente da biblioteca, mesmo que seja feito mais um request). Nesses arquivos eu agrupo minhas funções em Objetos, utilizando-os inclusive com variaveis que utilizo na página. Uso e abuso do formato JSON para me organizar. Segue um exemplo:

var customControl = {
    "defaults":{
        "title":"Atenção",
        "position":"center center"
    },
    "alert":function(body,title,callback){
        if(title == undefined || !title){
            title = customControl.defaults.title;
        }
        //mais código
    },
    "confirm":function(body,callback){
        //codigo do confirm
    }
}
var artigo = {
    "obj":{
        "id":0,
        "title":"",
        "body":""
    },
    "save":function(){
        //codigo do save
    }
}

Outra dica de extrema importância: Sabe aquela história de “CSS no começo e JS no fim”? Siga isso sempre no seu desenvolvimento.
Deixe para carregar suas bibliotecas, funções, e tudo o mais que precisar no final, preferencialmente após todo o HTML (DOM) ter sido decalrado.
Os navegadores param a renderização sempre que encontram <script> e isso pode (e vai) ser prejudicial na performance do seu sistema/site; além disso em alguns navegadores (entenda-se: IE) lançam erros se você tentar alterar a árvore DOM enquanto ela estiver sendo processada. Sua vida será melhor se tentar manipular os objetos com os quais quer trabalhar se eles já existirem.

Dica extra: Utilize ferramentas de debugging/inspect … no firefox você tem o mais que excelente firebug, e em navegadores webkit existe o web inspector; o Opera tem o DragonFly e o IE … bem o IE é o IE…

Bom, por hora é só. Em breve voltaremos com mais dicas. Fiquem ligados

// Este código afeta toda requisição ajax que for feita usando jQuery
// não é necessário replicar esta operação em nenhuma outra parte
$("#loading").ajaxStart(function(){
//Quando a requisição começar, Exibe a DIV
   $(this).show();
});
$("#loading").ajaxStop(function(){
//Quando a requisição parar, Esconde a DIV
   $(this).hide();
});

</script>

Como manter o loading ou menu flutuante ou o que quer que seja visível mesmo quando você faz o scroll.
Nos browsers mais inteligentes como FireFox e Safari uma propriedade no CSS é o suficiente para fazer o loading ficar paradinho sempre visível, mas para o IE(Pelo menos até a versão 6) é necessário fazer uma interferência com javascript para ajustar a posição do elemento.

CSS do loading:

JavaScript:

// Só faz o cheat se for o IE
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
document.documentElement.onscroll = updatePos;
}
function updatePos(){
var pos = document.documentElement.scrollTop;
document.getElementById('loading').style.top = pos;
}

HTML do Loading:

	Carregando...

UPDATE:
Nosso colega Anderson Straube(http://www.andersonstraube.com) indicou um hack mais esperto para o IE.
Mais uma vez… só funciona no IE, é uma função chamada “expression”
http://msdn.microsoft.com/en-us/library/ms537634(VS.85).aspx
assim, para o IE não seria necessário mais uma função JS, basta o comando “híbrido” no CSS, Exemplo:

E depois chamar a função com a configuração da máscara

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Você ainda pode dizer o que vai ficar no lugar do carácter, até que este espaço possa ser preenchido pelo usuário, exemplo “__/__/____” neste caso o placeholder é um “underline”

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:"_"});
});

Ou você pode deixar com um espaço em branco.

Os parâmetros que o plugin aceita para a máscara são:

• a – Representa um carácter alpha numérico (A-Z,a-z)
• 9 – Representa um carácter numérico (0-9)
• * – Representa um carácter alpha numeric character (A-Z,a-z,0-9)

Você também pode obrigar alguns carácteres como no exemplo abaixo

jQuery(function($){
   $.mask.definitions['~']='[+-]';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

Neste caso ele esta dizendo que o “~” deve aceitar somente sinal de “+”(mais) ou “-”(menos)

Você pode encontrar mais exemplos práticos e fazer o download na página dos caras
http://digitalbush.com/projects/masked-input-plugin/

Limitação de registros por página e ordenação

Busca instantânea em todos os campos da tabela

A ativação é praticamente ridícula, tenho até vergonha de postar aqui, mas vamos lá…
Primeiro óbviamente, para que tudo funcione corretamente, você deve instalar a lib do jQuery e o plugin dataTables no seu sistema, isso deve ser o mais difícil perto do próximo passo.

Crie sua tabela respeitando as tags <thead> e <tbody> que são praticamente desconhecidas por muitos programadores, e dê um ID para sua tabela


Depois disso, adicione em um bloco script o comando $(‘#idDaSuaTabela’).dataTable() como no exemplo abaixo

Agora imagine a economia que você pode fazer em desenvolvimento, tendo isso em suas mãos!
Isso valoriza suas aplicações e só traz benefícios, tanto para você quanto para o seu cliente, quem sabe você não ganha até um aumento!
Foi útil? então, vamos colaborar com os caras, não seja mão-de-vaca :-p

Link: http://www.datatables.net/

Quase esqueci de mencionar a quantidade de eventos, o que é muito importante, para o jCrop eu tive que criar funções paralelas para executar algumas tarefas que são feitas com facilidade por esse plugin

Link: http://tools.uvumi.com/crop.html

Uma das correções que me foram úteis foi a da função “clone” com parâmetro “true” no IE.
Esta função faz o que o nome diz, literalmente um clone de qualquer elemento, no meu caso um formulário complexo cheio de event handlers, o atributo “true” faz com que todos os event handlers também sejam clonados, no FireFox(como sempre) funciona direitinho, mas no IE quando você clonava um elemento clonado ele gerava um bug que pelo menos pra mim, clonava o elemento 2 vezes.

Com a versão 1.3.2 o bug foi corrigido e está aprovado!

Uma observação que faço pra quem possuia uma versão mais velha(1.2.6) e usava “@” no seletor jQuery, suas aplicações precisam ser atualizadas removendo o “@”, ele não é mais utilizado,
antes $(“input[@name=xxx]“) agora $(“input[name=xxx]“)

jQuery: www.jquery.com

Exemplo:

jQuery(function() {
	jQuery('#jcrop_target').Jcrop({
		keySupport: false
	});
});

Sendo assim o suporte a teclas não funcionará, mas seu crop(que mais importa) continuará bonito

Uma outra opção(que no meu caso não é viável já que o tamanho da área varia de acordo com uso do browser e resolução da tela), seria definir o tamanho da área destinada ao Crop

Exemplo:

$(function() {
    $('#cropbox').Jcrop({ boxWidth: 450, boxHeight: 400 });
});

Espero que essa dica possa ajudar muita gente, pra que não fiquem igual algumas pessoas(eu) pastando horas para tentar solucionar esse problema.

$('li').click(function(){
   alert('Pan!');
})

Só que você terá que executar essa operação de bind todas as vezes, daí vai acontecer algo estranho… fazendo assim você vai somar o bind click em todos os itens que já o possuem, ou seja, no segundo bind, quem já estava “binded” terá 2 alerts e assim por diante, então o que você tinha que fazer?

$('li').unbind();
$('li').click(function(){
   alert('Pan!');
})

Tinha que desfazer o bind e em seguida aplicar novamente.
Com a função Live, você faz o bind apenas uma vez, os novos itens que vão entrando, automaticamente recebem esse bind.

$('li').live('click',function(){
   alert('Pan!');
})

Simples assim!
Para cancelar você pode usar o “preventDefault” no evento

$('li').live('click', function(event){
  event.preventDefault();
});

[]s

Depois de incluído os devidos scripts(jQuery e jWYSIWYG), a aplicação do bichinho é muito simples

$(<span class="reserved">function</span>()
{
    $(<span class="string">'#wysiwyg'</span>).wysiwyg();
});

A página do projeto você encontra aqui: http://code.google.com/p/jwysiwyg/

A instalação é bastante simples, você vai precisar da lib jQuery e do plugin s3Slider
os exemplos e arquivos para download você vai encontrar no site do desenvolvedor, o plugin é compatível com todos os browsers mais utilizados atualmente.

Link: http://www.serie3.info/s3slider/index.php

Link: http://www.emblematiq.com/projects/niceforms/

Demo: http://www.emposha.com/demo/fcbkcomplete/

Download: http://www.emposha.com/upload/jquerymultiselect1_0_3.zip

Fonte: http://www.emposha.com/javascript/jquery/jquerymultiselect.html

$(document).ready(function () {
	$('#TABLETOCONTROL').jTPS( {perPages:[5,12,15,50,'ALL']} );
});

O resultado é: Mais um cliente feliz!

Link

Link

Muito bacana e nostálgico, o código é bem poluído, mas imagina só o tanto de interação que você tem que controlar, o som provavelmente vem de um swf, é uma pratica muito comum. Link

Vamos matar alguns Aliens! Link

Mario Kart Link

Super Mario Link

São trabalhos excelentes, você pode conferir varios outro exemplos, aqui http://blog.nihilogic.dk/search/label/games

Exemplo:

jQuery(function() {
		jQuery('#jcrop_target').Jcrop({
			setSelect: [ 20, 130, 480, 230 ],
			addClass: 'custom',
			bgColor: 'yellow',
			bgOpacity: .8,
			sideHandles: false
		});
	});

CSS Customizado:

.custom .jcrop-vline, .custom .jcrop-hline {
	background: yellow;
}
.custom .jcrop-handle {
	border-color: black;
	background-color: #C7BB00;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

Agora que você ja ficou curioso, segue aí o link http://deepliquid.com/projects/Jcrop/demos.php?demo=handler

var chrome = navigator.userAgent.toLowerCase().indexOf("chrome") > -1;

Exemplos:
Selecionando objetos, por Tag.
CSS: a{//}
jQuery: $(“a”);

Selecionando objetos, pelo ID.
CSS: #itemMenu{//}
jQuery: $(“#itemMenu”);

Selecionando objetos, por classe.
CSS: .className{//}
jQuery: $(“.className”);

Acho que deu pra entender não é? Ele também aceita agrupamento de objetos se você precisar selecionar vários itens de uma só vez, exemplo:

$("input, textarea, select, #itemMenu, .className");

Não para por aí… e que tal chamar um elemento dentro de outro objeto específico?

$("input","#idForm");

neste caso estamos selecionando todos os inputs de dentro de um objeto informado pelo id

Caramba… legal hein! Mas como eu pego um objeto pelo nome usando jQuery? (como se fosse o getElementsByName)

$("input[name=nomeDoCara]");

Hmmm então se eu posso pegar pelo nome desse jeito… eu posso procurar por outros atributos!!!

Vamos lá…

$("input[type=checkbox]");

Assim eu peguei todos os inputs do tipo checkbox, mas eu quero só os que estão checados!!
Como faço isso?
Simples

$("input[type=checkbox]:checked");

My Holy God!! That’s Amazing!!!
Yeap… i know!

Mas aqui é só input eu não sei qual tipo de elemento o nome vai ser.
Tchanannn

$("*[name=nomeDoCara]");

sim, você pode usar o asterisco, eu não recomendo fazer isso porque você vai obrigar o jQuery a percorrer tooodo o código da página, o desenpenho ja não é tão legal, mas funciona.

Agora que eu tenho os objetos, posso trabalhar com eles de forma generalizada ou isolada.
Um exemplo generalizado:

$("a").css({color: "red"});

Assim, estou dizendo que todos os links serão vermelhos, eu não conheço cada elemento, mas quero que sejam vermelhos.

Um exemplo de trabalho isolado:

$("a").each(function(){
if($(this).attr("target") == "_blank"){
$(this).css({color: "red"});
};
});

Com a função “each” você pode percorrer cada elemento(representado por “this”) retornado pelo seletor $, neste caso estou verificando se o atributo target é igual a _blank, então só neste caso a cor será vermelha.

Espero que tenha sido útil, qualquer dúvida que tiver, é só mandar no comentário

[]s

A instalação é muito facil, e o resultado excelente!

tatata…. kd o link???

http://fancy.klade.lv/

enjoy ;p

• Scripts separados para upload e scripts separados para processar o formulário.
• Primeiro, os uploads são processados.
• Segundo, o formulário é submetido.
• A idéia é validar o formulario antes de fazer o upload, para isso, você usar Ajax como no demo3 do site.

Veja aqui este exemplo: http://uploader.webunity.nl/

Aproveite http://www.my-debugbar.com/wiki/CompanionJS/HomePage

jQuery Sparklines

Veja aqui: http://omnipotent.net/jquery.sparkline/

http://webplicity.net/flexigrid/

Aí vai a dica: http://stanlemon.net/projects/jgrowl.html

http://www.kryogenix.org/code/browser/sorttable/

Este é o código do plugin:
http://www.ajaxianos.com.br/arquivos/preloadCssImages.jQuery_v2.js

/**
 * --------------------------------------------------------------------
 * jQuery-Plugin "preloadCssImages"
 * by Scott Jehl, scott@filamentgroup.com
 * http://www.filamentgroup.com
 * reference article: http://www.filamentgroup.com/lab/automated_image_preloading/
 * demo page: http://www.filamentgroup.com/examples/preloadImages/
 *
 * Copyright ©2008 Filament Group, Inc
 * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
 *
 * Version: 2.0, 06.04.2008
 * Changelog:
 * 	02.20.2008 initial Version 1.0
 *  06.04.2008 Version 2.0 : removed need for any passed arguments. Images load from any and all directories.
 * --------------------------------------------------------------------
 */
jQuery.preloadCssImages = function(){
	var allImgs = [];//new array for all the image urls
	var k = 0; //iterator for adding images
	var sheets = document.styleSheets;//array of stylesheets

	for(var i = 0; i0 && imgUrls != ''){//loop array
			var arr = jQuery.makeArray(imgUrls);//create array from regex obj
			jQuery(arr).each(function(){
				allImgs[ k ] = new Image(); //new img obj
				allImgs[ k ].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this;	//set src either absolute or rel to css dir
				k++;
			});
		}
	}//loop
	return allImgs;
}

Para usar, além de ter a Lib jQuery na sua página(óbvio), basta rodar este comando:

$.preloadCssImages();

Eu particularmente executaria depois que a página estivesse inteiramente carregada, usando a função “ready” do jQuery:

$(document).ready(function(){$.preloadCssImages();});

Na página do Scott você pode ver um exemplo dessa belezinha funcionando
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

Vale a pena conferir