Pesquisar na Comunidade

Diferença entre JavaScript e jQuery Este artigo é principalmente para aqueles desenvolvedores que são novos para desenvolvimento web.As pessoas que iniciam sua carreira geralmente questionam - por que jQuery enquanto há JavaScript;ou a diferença entre JavaScript e jQuery; o que é melhor usar - JavaScript ou jQuery; jQuery é uma alternativa para JavaScript; ou jQuery substituir JavaScript etc. Vejamos primeiro o que é o JavaScript e o que é jQuery. JavaScript JavaScript (JS) é uma linguagem de programação dinâmica. É uma linguagem interpretada. Além da semelhança infeliz em nome, não tem nada a ver com a linguagem de programação Java. Como o nome sugere, o JavaScript é uma linguagem de script. É mais comumente usado para atrair UI (como objetos em movimento, elementos chamativos na tela), interações do usuário (validação do lado do cliente, mostrando pop-up etc.) e para controlar o conteúdo do documento exibido para o usuário. Não há nada que você precise incluir no navegador para suportar JavaScript. Isso ocorre porque foi considerado como o idioma da web desde o seu nascimento. Ele é executado em todos os navegadores modernos sem plugins adicionais. O que você quer dizer com JavaScript é dinâmico A maioria das linguagens de programação tem comportamentos dinâmicos. Mas no caso do JavaScript, praticamente tudo é dinâmico. Todas as variáveis são dinâmicas no tipo e na existência. Você declara uma variável como, var msg = "Olá Mundo!" ; O código escrito em JavaScript é dinâmico, você pode criar uma variável no tempo de execução e o tipo é determinado no tempo de execução. Você pode criar novas funções ou substituir funções existentes em tempo de execução. Novos códigos são adicionados ao navegador quando mais arquivos de script são carregados e você pode adicionar qualquer número de arquivos a qualquer momento. jQuery O site jQuery define jQuery (jQ) como "jQuery é uma biblioteca de JavaScript rápida e concisa que simplifica as interações do documento HTML, o gerenciamento de eventos, a animação e o Ajax para o desenvolvimento rápido da web". jQuery não é uma linguagem de programação em vez disso é uma biblioteca de JavaScript multiplataforma. Existem muitas outras bibliotecas de JavaScript disponíveis como MooTools, Knockout ou até Angular (Embora Angular usa TypeScript, compila para JavaScript no final) e jQuery é um dos mais populares entre eles. jQuery é uma biblioteca rápida de JavaScript rica em recursos. Ele é criado para ajudar os programadores a criar UI comum e cuidar dos problemas de compatibilidade do navegador com mais facilidade. jQuery, de fato, não é senão JavaScript. Todo o código que você escreve no jQuery é convertido em JavaScript internamente. Uma linha de código escrito usando jQuery pode ser igual a muitas linhas de código escritas usando o JavaScript, o que significa que os programadores terão que escrever somente linhas menores de código. Para começar a usar jQuery em sua página, você precisa incluir uma linha de código no cabeçalho da sua página como, <script src = "[Hidden Content]" > </ script> A linha acima inclui uma biblioteca jQuery em sua página usando o Microsoft CDN (Content Delivery Network). A biblioteca jQuery é um único arquivo JavaScript. Você também pode incluir a biblioteca jQuery como um recurso local da pasta do projeto. Mas há benefícios usando o CDN. Se você usa a versão minificada da biblioteca, você terá a vantagem de conexões simultâneas e vários servidores. JavaScript vs jQuery Agora, podemos discutir as questões mencionadas no início deste artigo. A maioria dessas questões pode surgir devido à falta de compreensão clara de JavaScript e jQuery. Como jQuery não é mais que uma biblioteca de JavaScript, não pode substituir o JavaScript. Todo o código jQuery é JavaScript, mas jQuery não inclui todo o código JavaScript. Uma coisa que você deve entender é que não são duas linguagens de programação; Em vez disso, ambos são JavaScript. jQuery é apenas otimizado para fazer as funções comuns de script com menos linhas de código. Linhas de código Muitas ações como Animate, Delay, Fade-In podem ser feitas usando jQuery com poucas linhas de código. Por outro lado, o JavaScript terá muitas linhas de código para o mesmo. Podemos considerar um exemplo mais simples, Suponha que eu quero selecionar todos os elementos que tenham classe-simples-li, Se eu usar JavaScript, document.getElementsByClassName ( "simple-li" ); Por outro lado, se eu usar jQuery, $ ( 'simples-li' ) atuação Se você verificar o desempenho dos dois, você pode achar que o JavaScript simples é mais rápido do que jQuery para acessar o DOM. Mas o JavaScript pode ser mais lento quando você escreve alguma lógica complexa, dado que podemos cometer grandes erros ou usar códigos ruins que podem levar a um sucesso de desempenho. Por outro lado, o jQuery foi testado há anos para usar códigos de JavaScript rápidos e melhores. Na minha opinião, não é correto comparar os dois ou não pode dizer que é melhor do que o outro.Precisamos usar o que for mais adequado à nossa exigência. Alguns pontos para lembrar Algumas vantagens de usar jQuery Você pode codificar ações JS mais comuns usando jQuery com menos linhas de código. Compatibilidade do navegador - você pode escrever o código que é executado em navegadores sem ter que conhecer os vários complexos do navegador e não vai quebrar. Permite que você escreva JavaScript mais rápido e mais fácil. Evita erros comuns do navegador Simplificação de operações geralmente complicadas - operações complexas como interações do Ajax, animação, manipulação de eventos etc. são tratadas pelo jQ com as melhores linhas de código. jQ é testado em batalha e usa as melhores e rápidas linhas de código para realizar a maioria das tarefas. Conclusão O jQuery é adequado para a maioria das aplicações, especialmente aquelas que precisam de um rápido desenvolvimento. jQuery cuida dos erros comuns do navegador, passando as correções diretamente na biblioteca. jQuery também cuida do problema de compatibilidade do navegador que é um pesadelo do desenvolvedor durante a implantação. Usar JavaScript ou jQuery realmente depende da sua necessidade e de outros fatores. A maioria dos projetos de desenvolvimento web funcionará perfeitamente usando jQuery. Mas haverá uma pequena porcentagem que requer JavaScript. Uma vez que o JavaScript puro é o método de melhor desempenho do lado do cliente, há uma razão para usá-lo. Mas uma biblioteca como jQuery irá ajudá-lo a chegar ao mercado mais rápido e mais barato. Portanto, é melhor depender fortemente do jQuery para as versões iniciais do seu produto.Uma vez que seu produto é estabelecido no marcado e você obteve as receitas para voltar e refatorar o código, você pode prosseguir e codificar o código personalizado. Fonte: [Hidden Content]

Bom, eu postei um tópico aqui a um tempo atrás e vi que o titulo ficou errado e fiquei bolada. kkk Resolvi fazer um melhor e mais completo para postar aqui até porque posso corrigir o titulo do post anterior. Pense o seguinte: O sistema que desenvolvi ele visa uma única pagina para a criação de um artigo e edição. Através da variável na URL, podemos saber quando o usuário está querendo inserir algo no banco de dados, ou seja, criar uma pagina, ou editar um artigo já existente. Assim: // se não foi setado o primeiro, os outros também não // lembrando que $_GET['t'] = 'painel'; // pois no site que desenvolvi é inserido em uma div através do método include if (!isset($_GET['t'])||!isset($_SESSION['id'])) exit; $post_titulo = null; $post_descricao = null; $post_content = null; $post_categoria = null; $post_tipo = null; O GET['tt'] representa o 'novoartigo' ou 'editartigo' // caso seja edição, através do id coletamos os dados do artigo e inserimos nas variáveis que representaram o formulário de criação/edição if ( $_GET['tt'] == 'editartigo' && isset($_GET['ttt']) ) { $c = (int)$_GET['ttt']; $d = $db->prepare('SELECT titulo,descricao,content,categoria,tipo FROM post WHERE id = :id'); $d->bindParam(':id',$c); if ($d->execute()) if ($d->rowCount() > 0) { $e = $d->fetch(PDO::FETCH_NUM); $post_titulo = $e[0]; $post_descricao = $e[1]; $post_content = $e[2]; $post_categoria = $e[3]; $post_tipo = $e[4]; } } Segue o restante: ?> <div id="new-artigo"> <h1>Novo Artigo</h1> <div class="new-artigo-click"> <ul id="new-artigo-click"> <li><a href="">Artigo Escrito</a></li> <li><a href="">Artigo Line, ex:document.getElementById('')</a></li> <li><a href="">Artigo Composto</a></li> </ul> </div> <form id="new-artigo-form" method="POST" action="<?php echo $local ?>painel/<?php echo $_GET['tt'] ?>/"> <input type="text" name="titulo" placeholder="Titulo" value="<?php echo $post_titulo ?>"/><br /> <textarea name="descricao" placeholder="Descrição do Artigo"> <?php echo $post_descricao ?> </textarea> <div id="lcs-editor"> <ul> <li class="lcs-editor" data-tipo="a">EDITOR</li> <li class="lcs-editor" data-tipo="tituloA">TITULO 1</li> <li class="lcs-editor" data-tipo="tituloAA">TITULO A</li> <li class="lcs-editor" data-tipo="texto">TEXTO</li> <li class="lcs-editor" data-tipo="code">CODE</li> <li class="lcs-editor" data-tipo="html">HTML</li> <li class="lcs-editor" data-tipo="js">JS</li> <li class="lcs-editor" data-tipo="resposta">RESPOSTA</li> </ul> </div> <div class="pre-view"></div> <textarea name="content" style="display:none"> <?php echo $post_content ?> </textarea> <select name="categoria"> <option value="<?php echo $post_categoria ?>"> <?php echo $post_categoria == null ? 'Categoria:' : $post_categoria ?> </option> <option value="javascript">Javascript</option> </select> <select name="tipo"> <option value="<?php echo $post_tipo ?>"> <?php echo $post_tipo == null ? 'Tipo de Artigo:' : $post_tipo ?> </option> <option value="curso">Curso</option> <option value="dicas">Dicas</option> </select><br /> <?php if (isset($_GET['ttt'])) { echo '<input type="hidden" name="id" value='.$_GET['ttt'].'">'; } ?> <div style="clear:both"></div> <input type="submit" value="Concluir!" /> </form> </div> <script> var newArtigoForm = '#new-artigo-form', $newArtigoForm = $(newArtigoForm), txtContent = 'textarea[name=content]', txtDescricao = 'textarea[name=descricao]', cLcsEditor = '.lcs-editor', cPreview = '.pre-view', cBox = '.LCSbox', cEtapaIndex = '.box_etapa_index', cEtapaEdit = '.box_etapa_edit', cEtapaDelete = '.box_etapa_delete', cEtapaMove = '.box_etapa_move', cEtapaMoveText = '.box_etapa_moveText', cEtapaMoveCima = '.box_etapa_moveCima', cEtapaMoveBaixo = '.box_etapa_moveBaixo', cEtapaClear = '.box_etapa_clear', cElemEdicao = '.LCSeditor', keys = [true]; </script> <?php if ($_GET['tt'] == 'editartigo') { ?> <script> // EDIÇÃO DO ARTIGO $(cPreview).html($(txtContent).text()); // edição $(cEtapaIndex).click(function() { // permissão para execução do evento // evita bugs if ( !keys[0] ) return false; // ... var index = $(cEtapaIndex).index(this), tipo = $(this).attr('data-tipo'); editarLCSeditor(true,index,tipo); // após execução o evento deve ser bloqueado keys[0] = false; }); // click delete elemento $(cEtapaDelete).on('click',function(event) { var _cElemEdicao = cElemEdicao; if (document.getElementsByClassName(_cElemEdicao.replace('.','')).length) { alert('Feche o campo aberto antes!'); return false; } // permissão para deletar, caso seja deletado o evento desse elemento será encerrado também if (confirm("Deseja Realmente Deletar Esse Bloco?")) $(this).off(event); else return false; // prossiga... var _index = $(cEtapaDelete).index(this); $(cBox+':eq('+_index+')').remove(); }); // click move $(cEtapaMove+' span').click(function() { // var cEtapaMoveIndex = $(this).closest(cBox).index(); // var cEtapaMoveSpanIndex = $(this).index(); // mover elemeto para cima if ( cEtapaMoveSpanIndex == 0 ) { // if ($(cBox+':eq('+(cEtapaMoveIndex - 1)+')')) { // $(cBox+':eq('+cEtapaMoveIndex+')'). insertBefore($(cBox+':eq('+(cEtapaMoveIndex - 1)+')')); // } // } else if ( cEtapaMoveSpanIndex == 2 ) { // if ($(cBox+':eq('+(cEtapaMoveIndex + 1)+')')) { // $(cBox+':eq('+cEtapaMoveIndex+')'). insertAfter($(cBox+':eq('+(cEtapaMoveIndex + 1)+')')); }; } }); // verificando chave if ( !keys[0] ) keys[0] = true; // removendo bug de interpretação das tags $('.prettyprint').each(function() { $(this).text($(this).html()); }); </script> <?php } ?> <script> // removendo bug descricao $(document).ready(function() { var a = $(txtDescricao).text(); a = a.replace(' ','').replace(' ',''); $(txtDescricao).text(a); }); // formulario $newArtigoForm.submit(function() { $(txtContent).text($(cPreview).html()); }); // inserir elemento no editor $(cLcsEditor).click(function() { var insertTipo = $(this).attr('data-tipo'), insertIndex = $(cLcsEditor).index(this); insertLCSeditor(insertTipo); insertLCSdelete(); }); // deletar o elemento - OBS: deve-se acompanhar o .box_etapa_index function insertLCSdelete() { $(''+ '<div class="box_etapa_delete">'+ '<span>'+ '[DELETAR]'+ '</span>'+ '</div>'+ '').appendTo(cBox+':last'); $(cEtapaDelete+':last').on('click', function(event) { var _cElemEdicao = cElemEdicao; if (document.getElementsByClassName(_cElemEdicao.replace('.','')).length) { alert('Feche o campo aberto antes!'); return false; } // permissão para deletar, caso seja deletado o evento desse elemento será encerrado também if (confirm("Deseja Realmente Deletar Esse Bloco?")) $(this).off(event); else return false; // prossiga... var _index = $(cEtapaDelete).index(this); $(cBox+':eq('+_index+')').remove(); }); $(''+ '<div class="box_etapa_move">'+ '<span class="box_etapa_moveCima">'+ '[MOVER PARA CIMA]'+ '</span>'+'<br/>'+ '<span class="box_etapa_moveBaixo">'+ '[MOVER PARA BAIXO]'+ '</span>'+ '</div>'+ '').appendTo(cBox+':last'); // mover elemento // precisamos de chave para ter o controle e evitar bugs keys[1] = true; keys[2] = false; $(cEtapaMove+':last span').click(function() { // var cEtapaMoveIndex = $(this).closest(cBox).index(); // var cEtapaMoveSpanIndex = $(this).index(); // mover elemeto para cima if ( cEtapaMoveSpanIndex == 0 ) { // if ($(cBox+':eq('+(cEtapaMoveIndex - 1)+')')) { // $(cBox+':eq('+cEtapaMoveIndex+')'). insertBefore($(cBox+':eq('+(cEtapaMoveIndex - 1)+')')); // } // } else if ( cEtapaMoveSpanIndex == 2 ) { // if ($(cBox+':eq('+(cEtapaMoveIndex + 1)+')')) { // $(cBox+':eq('+cEtapaMoveIndex+')'). insertAfter($(cBox+':eq('+(cEtapaMoveIndex + 1)+')')); }; } }); // $(''+ '<div class="box_etapa_clear">'+ '</div>'+ '').appendTo(cBox+':last'); } // mover o elemento - OBS: deve-se acompanhar o .box_etapa_index e .box_etapa_delete function insertLCSmove(_index) { } // edição textual do elemento function insertLCSeditor(_insertTipo) { // texto default var titulo = 'Pronto Para Editar! :)', elemento = null; // alterando valor padrão, no final o valor volta no padrão cEtapaEdit = cEtapaEdit.replace('.',''); // criação do elemento switch (_insertTipo) { case 'tituloA': tipoCampo = 'textarea'; elemento = ''+ '<pre class="'+cEtapaEdit+' box_etapa_tituloA">'+ titulo+ '</pre>'; break; case 'tituloAA': tipoCampo = 'text'; elemento = ''+ '<h4 class="'+cEtapaEdit+' box_etapa_tituloAA">'+ titulo+ '</h4>'; break; case 'texto': tipoCampo = 'textarea'; elemento = ''+ '<pre class="'+cEtapaEdit+' box_etapa_text">'+ titulo+ '</pre>'; break; case 'code': tipoCampo = 'text'; elemento = ''+ '<code class="'+cEtapaEdit+' prettyprint">'+ '<span></span>'+ '</code>'; break; case 'html': tipoCampo = 'textarea'; elemento = ''+ '<h6 class="box_etapa_html">HTML</h6><br />'+ '<pre class="'+cEtapaEdit+' prettyprint">'+ '<html></html>'+ '</pre>'; break; case 'js': tipoCampo = 'textarea'; elemento = ''+ '<h6 class="box_etapa_js">JS</h6><br />'+ '<pre class="'+cEtapaEdit+' prettyprint">'+ '<script></script>'+ '</pre>'; break; case 'resposta': tipoCampo = 'textarea'; var textoElemento = prompt("Insira o Titulo"); if ( !textoElemento ) textoElemento = 'Resposta'; elemento = ''+ '<h6 class="box_etapa_js">'+textoElemento+'</h6><br />'+ '<pre class="'+cEtapaEdit+' prettyprint">'+ '<script></script>'+ '</pre>'; break; } // voltando valor padrão cEtapaEdit = '.'+cEtapaEdit; // $(''+ '<div class="LCSbox">'+ '<div class="box_etapa_index" data-tipo="'+tipoCampo+'">'+ // box_etapa_edit onde ocorre a alteração do texto elemento+ '</div>'+ '</div>'+ '').appendTo(cPreview); // edição $(cEtapaIndex).click(function() { // permissão para execução do evento // evita bugs if ( !keys[0] ) return false; // ... var index = $(cEtapaIndex).index(this), tipo = $(this).attr('data-tipo'); editarLCSeditor(true,index,tipo); // após execução o evento deve ser bloqueado keys[0] = false; }); } function editarLCSeditor(key,_index,_tipo) { // premissão de acesso if ( ! key ) return false; // setando variaveis var txtCEtapaIndex = cEtapaIndex+':eq('+_index+') '+cEtapaEdit, cEtapaIndexText = $(txtCEtapaIndex).text(); // criando o elemento para edição var elemEdicaoTexto = null; switch (_tipo) { case 'text': elemEdicaoTexto = ''+ '<input class="LCSeditor" data-tipo="text" type="text" value="'+ cEtapaIndexText+ '" />'; break; case 'textarea': elemEdicaoTexto = ''+ '<textarea class="LCSeditor" data-tipo="textarea" type="text">'+ cEtapaIndexText+ '</textarea>'; break; } // removendo conteudo do campo clicado $(txtCEtapaIndex).empty(); // inserção do elemento no campo de pre-visualização $(elemEdicaoTexto).appendTo(txtCEtapaIndex); // atalhos para edicao $(cElemEdicao).keydown(function(e) { if (e.keyCode == 13 && _tipo == 'text') { var a = $(cElemEdicao).val(); $(txtCEtapaIndex).text(a); $(cElemEdicao).remove(); keys[0] = true; // libera evento novamente } else if (e.keyCode == 27 && _tipo == 'textarea') { var a = $(cElemEdicao).val(); $(txtCEtapaIndex).text(a); $(cElemEdicao).remove(); keys[0] = true; // libera evento novamente // atalho TAB } else if (e.keyCode == 9) { _cElemEdicao = cElemEdicao; e = document.getElementsByClassName(_cElemEdicao.replace('.','')); e = e[0]; var start = e.selectionStart; var end = e.selectionEnd; var $this = $(e); var value = $this.val(); // set textarea value to: text before caret + tab + text after caret $this.val(value.substring(0, start) + "\t" + value.substring(end)); // put caret at right position again (add one for the tab) e.selectionStart = e.selectionEnd = start + 1; // prevent the focus lose return false; } }); } </script> Criação: Visualização: Edição: Voltando para os script, o arquivo que recebe o conteúdo <?php $acess = false; if (isset($_SESSION['id'])) { $acess = true; } if (isset($_GET['tt']) && $acess) { // pagina post $a = $_GET['t']; $b = $_GET['tt']; switch ($b) { case 'novoartigo': case 'editartigo': if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) { extract($_POST); $aa = $titulo; $ab = $descricao; $ac = $content; date_default_timezone_set('America/Sao_Paulo'); $ad = date('Y/m/d H:i:s'); $ae = $categoria; $af = (int)$_SESSION['id']; $ag = $tipo; if ($b == 'novoartigo') { $d = $db->prepare('INSERT INTO post VALUES (:id,:titulo,:descricao,:content,'. ':datatempo,:categoria,:usuario,:tipo)'); } else { $d = $db->prepare('UPDATE post SET titulo = :titulo,descricao = :descricao,content = :content,'. 'datatempo = :datatempo,categoria = :categoria,usuario = :usuario,tipo = :tipo WHERE id = :ids'); } if (!isset($id)) $d->bindValue(':id',0); else $d->bindValue(':ids',$id); $d->bindValue(':titulo',$aa); $d->bindValue(':descricao',$ab); $d->bindValue(':content',$ac); $d->bindValue(':datatempo',$ad); $d->bindValue(':categoria',$ae); $d->bindValue(':usuario',$af); $d->bindValue(':tipo',$ag); if ($d->execute()) { if ($d->rowCount() > 0) { header('location:'.$local.'artigosucesso/'); } else // rowCount echo 'Nenhum dado encontrado!'; } else // execute echo '[ERRO] Não foi possivel executar o SQL'; } else // request method include 'painel/novo_artigo.php'; break; default: header('location:'.$local); } // para exibir a pagina, o usuário precisa estar logado em sua conta } Para quem precisar da classe de conexão: <?php /** * Classe de conexão ao banco de dados usando PDO no padrão Singleton. * Modo de Usar: * require_once './Database.class.php'; * $db = Database::conexao(); * E agora use as funções do PDO (prepare, query, exec) em cima da variável $db. */ class Database { # Variável que guarda a conexão PDO. protected static $db; # Private construct - garante que a classe só possa ser instanciada internamente. private function __construct() { # Informações sobre o banco de dados: $db_host = "localhost"; $db_nome = "database_nome"; $db_usuario = "root; $db_senha = "senha"; $db_driver = "mysql" // tipo de conex]ao; # Informações sobre o sistema: $sistema_titulo = "Titulo"; $sistema_email = "[email protected]"; try { # Atribui o objeto PDO à variável $db. self::$db = new PDO("$db_driver:host=$db_host; dbname=$db_nome", $db_usuario, $db_senha); # Garante que o PDO lance exceções durante erros. self::$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); # Garante que os dados sejam armazenados com codificação UFT-8. self::$db->exec('SET NAMES utf8'); } catch (PDOException $e) { # Envia um e-mail para o e-mail oficial do sistema, em caso de erro de conexão. mail($sistema_email, "PDOException em $sistema_titulo", $e->getMessage()); # Então não carrega nada mais da página. die("Connection Error: " . $e->getMessage()); } } # Método estático - acessível sem instanciação. public static function conexao() { # Garante uma única instância. Se não existe uma conexão, criamos uma nova. if (!self::$db) { new Database(); } # Retorna a conexão. return self::$db; } } Créditos: [felladrin - GitHub] Pela Classe de Conexão com o PDO. Eu pelo resto. Dúvidas? Só perguntar...

O JS evolui muito com o tempo... a edição de conteúdo ficou bem mais dinâmico, o código em si é limpo e da para entender com analises básicas, claro, daquele jeito. Vamos lá: Obrigatoriamente precisamos do jQuery <script src="[Hidden Content]; Criando os elemento para o acontecimento do evento <div class="pre-view"> <p class="texto">Aqui como exemplo, vou colocar um texto box para a edição desse paragrafo</p> </div> Código comentado... <script> // chave global para o controle de eventos var keys = [true]; /* Elemento a ser editado Lembrando que deve necessáriamente ser 'classe' pois ele buscará o indice */ $('.texto').click(function() { var a,b; // deve haver o controle do click, se não da bug :( // ele é liberado após o texto ser editado na função preview(a,b) if (keys[0]) { // bloqueia esse evento apos o primeiro click keys[0] = false; a = $(this).attr('class'); // nome da classe do elemento atual a = '.'+a; // lembrando que é uma classe... -> .texto b = $(a).index(this); // indice do elemento atual preview(a,b); } }); function preview(a,b) { var c = [$(a+':eq('+b+')')]; // seleciona o elemento atual c[1] = c[0].text(); // texto inicial do elemento // limpa o elemento // insere o textarea c[0].empty(). prepend('<textarea cols="60" type="text" class="lol">'+c[1]+'</textarea>'). click(function() { // chama o foco para o elemento criado acima $('.lol').focus(); }). keydown(function(evt) { // caso a tecla pressionada seja 13, ou melhor, ENTER faça... if (evt.keyCode == 13) { d = $('.lol'); // selecionando elemento textarea /* if minificado if (d.val() == '') { c[0].text(c[1]); } else { c[0].text(d.val()); } */ c[0].text(d.val() == '' ? c[1] : d.val()); d.remove(); // remove o textarea keys[0] = true; // libera para edição novamente } }); } </script> Dúvidas? Só perguntar... [spoiler=titulo - off] title,Converter elemento em textarea pra edição