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/

Este é o plugin:

(function($){
	$.fn.friendly = function(to){
		//Divide o valor atual em array
		var curr = $(to).val().split('-');
		/*
		Verifico se o primeiro item é vazio, se sim,
		eu coloco o timestamp, se não, eu verifico se
		o último valor não é um número, se não for, eu
		mantenho sem timestamp, se for um número, eu mantenho
		o número, assim evita-se 404 pelo Robô do google e afins
		*/
		var ts = curr[0]==''?'-'+Math.round(((new Date()).getTime()-Date.UTC(1970,0,1))/1000):(isNaN(curr[curr.length-1])?'':'-'+curr[curr.length-1]);
		/*
		A conversão ocorre basicamente aqui, onde no final eu
		concateno com o timestamp
		*/
		$(to).val($(this).val().replace(/\s/g, '-').replace(/[^\w/-]/g, '').toLowerCase()+ts);
	};
})(jQuery);

Repare que coloquei uma variável “ts” que gera um timestamp, fiz isso para o meu caso onde o sistema não valida se a url amigável já existe, colocando um timestamp no final ele nunca vai se repetir e não faz diferença para o SEO

Como funciona?
Funciona assim… no primeiro seletor, você coloca o elemento de onde você quer o texto, e dentro do friendly, você coloca o seletor de onde você quer que o texo apareça
Ex:

$('#tab_general input[name^=product_description][name*=name]').friendly('#tab_data input[name=keyword]');

Pra que ele atualize pra cada palavra digitada, você precisa associar a um evento no elemento, no meu caso eu fiz isso aqui:

$('#tab_general input[name^=product_description][name*=name]').bind('keyup', function(){
        $(this).friendly('#tab_data input[name=keyword]');
    })

No keyup do campo, eu atualizo o segundo campo

Espero que seja útil

	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:

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

$(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

http://webplicity.net/flexigrid/

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

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

<form>
<fieldset>
  <legend>Formulário de exemplo</legend>
  <label for="cep">CEP:</label>
<input id="cep" maxlength="8" name="cep" size="9"  onBlur="getEndereco()"/>

  <label for="rua">Logadouro:</label>
<input id="rua" name="rua" size="50" />

  <label for="bairro">Bairro:</label>
<input id="bairro" name="bairro" size="30" />

  <label for="cidade">Cidade:</label>
<input id="cidade" name="cidade" />

  <label for="estado">Estado</label>
<input id="estado" maxlength="2" name="estado" size="2" />

  </fieldset>
</form>

Não esquecendo de fazer o include da lib do jQuery
Este será o Script

	// Função única que fará a transação
	function getEndereco() {
			// Se o campo CEP não estiver vazio
			if($.trim($("#cep").val()) != ""){
				/*
					Para conectar no serviço e executar o json, precisamos usar a função
					getScript do jQuery, o getScript e o dataType:"jsonp" conseguem fazer o cross-domain, os outros
					dataTypes não possibilitam esta interação entre domínios diferentes
					Estou chamando a url do serviço passando o parâmetro "formato=javascript" e o CEP digitado no formulário
					http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val()
				*/
				$.getScript("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val(), function(){
					// o getScript dá um eval no script, então é só ler!
					//Se o resultado for igual a 1
			  		if(resultadoCEP["resultado"]){
						// troca o valor dos elementos
						$("#rua").val(unescape(resultadoCEP["tipo_logradouro"])+": "+unescape(resultadoCEP["logradouro"]));
						$("#bairro").val(unescape(resultadoCEP["bairro"]));
						$("#cidade").val(unescape(resultadoCEP["cidade"]));
						$("#estado").val(unescape(resultadoCEP["uf"]));
					}else{
						alert("Endereço não encontrado");
					}
				});
			}
	}

Os arquivos deste exemplo você pode baixar aqui http://www.ajaxianos.com.br/arquivos/cepSomentejQuery.zip

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

Bom, vou responder estas perguntas durante este exemplo!
1º Por que não é recomendado fazer o site 100% em ajax?
- Simples, porque os robôs de busca como o Google, não processam javascript, então se você quiser ter o seu conteúdo indexado por ele, terá que possibilitar sua leitura sem o uso de javascript

2º O que melhora?
- Quando seu site é carregado pela primeira vez, todo o seu template é carregado, e a cada clique, lá vai o browser carregar tudo novamente… isso gera uma sobrecarga desnecessária, usando o Ajax para carregar somente o conteúdo do seu site, além de mais rápido, você tem um aproveitamento de performance e consumo de tráfego no servidor, assim, todo mundo sai ganhando!

3º Como isso funciona?
- Para que o script funcione corretamente, o seu site tem que ter uma estrutura preparada para isso, ou seja, tem que existir algum parâmetro onde você possa desabilitar o layout do lado do servidor, assim, quando você fizer a requisição via ajax, somente o conteúdo será retornado.

Ok, agora que temos as explicações e o conceito, vamos codificar :p
Vou utilizar somente a lib jquery

// Converte todos os links para Ajax
function convert2Ajax(){
// Busco na pagina, todas as tags "a", e para cada uma encontrada eu faço uma verificação
	$("a").each(
		function(){
			// Vejo os primeiros 6 caracteres do conteúdo do atributo href
			var linkType = $(this).attr("href").substring(0,6);
			// Se o link não for de javascript ou mailto
			if(linkType != "javasc" && linkType != "mailto"){
				// Se não existe o atributo "target"
				if(!$(this).attr("target")){
				/*
				Aqui eu faço uma graça, mudo o status da pagina para a descrição/texto do link
				*/
				$(this).mouseover(function(){
						   window.status = $.trim($(this).html());
						   return (true);
							   }).mouseout(function(){
							   window.status = $.trim($(this).html());
							   return (true);
							   });
				// Finalmente troco o conteúdo do href pelo comando javascript que vai chamar a função ajax
				// Antes eu colocava javascript:void(0); mas depois que adquiri um MacBook percebi
				// que não funcionava bem no safari, então passei a chamar assim mesmo!
				$(this).attr("href","javascript:carregaConteudo('"+$(this).attr("href")+"&Ajax=true');");
			}
		}
	}
)}

Analisando o código, você pode verificar que estou acrescentando o parâmetro “Ajax=true” à url na entrada de dados da função “carregaConteudo”, no servidor, este parmetro inibe o layout do site, trazendo somente o conteúdo.

A função que carrega o conteúdo é extremamante simples

function carregaConteudo(url){
	$.ajax({
		url: url,
		data:{},
		dataType:"html",
		beforeSend: function(){
			// Antes de enviar a requisição, exibo a mensagem "Carregando"
			$("#loading").show();
		},
		success: function(r){
			// Se ocorrer tudo bem, insiro o conteúdo retornado na div #contentRight
			$("#contentRight").html(r);
			// Após o carregamento, chamo novamente a função convert2Ajax para o caso
			// de ainda existir algum link no novo conteúdo
			convert2Ajax();
		},
		complete:function(){
			// Depois de concluído o processo, eu escondo a mensagem "Carregando"
			$('#loading').hide();
		},
		error: function(r){
			// Se ocorrer algum erro, também escondo a mensagem
			$('#loading').hide();
		}
	});
}

Para iniciar o processo no site, use o seguinte script, atenção, é extremamente complicado!

//Quando a página estiver pronta/carregada...
$(document).ready(
	function(){
		// Chama a função convert2Ajax
		convert2Ajax();
	}
);

É só isso, você pode conferir este exemplo em uso no site www.oapce.com.br, experimente desabilitar o javascript do navegador para comprovar o funcionamento nas duas situações!

Valeu!

function jsDump( objeto, recursividade )
{
    document.writeln("<ul>")
    for ( prop in objeto )
    {
        var tipo = typeof objeto[prop];
        var valor = objeto[prop]+"";
        //Eliminando o conteudo das funcoes
        valor = valor.replace(/\{[^\{]*\}/g,"");
        document.writeln("<li> ("+tipo+") "+prop+" =>"+valor+"<\/li>");

        // implementando a recursividade
        if (recursividade > 0 && tipo ==  "object")
        {
            jsDump(objeto[prop],recursividade-1);
        }
    }
    document.writeln("<\/ul>");
}

Uma outra alternativa, principalmente para quem gosta de Coldfusion, é este outro método baseado na tag do ColdFusion.

É uma boa pra quem quer ajudar os usuários a não usar senhas do tipo “123″ ou a data de aniversário :p

// assim que a página é carregada
$(document).ready(function(){
	// Verifico se existe algum link
	if($("#contentAdm a").length > 0){
		// se existir, eu dou foco nele e crio um atalho ALT + C
		// para ir direto para o elemento
		$("#contentAdm a").get(0).focus();
		$("#contentAdm a").get(0).attr("accesskey","C");
	}else{
		// Caso contrario, faço o mesmo para elementos Input
		if($("#contentAdm input").length > 0){
			$("#contentAdm input").get(0).focus();
			$("#contentAdm input").get(0).attr("accesskey","C");
		};
	};
});

Espero que seja útil pra você também