![\"dicas](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/07\/dicas-jquery.png\")
<\/p>\n<\/p>\n
O artigo dicas r\u00e1pidas jQuery ir\u00e1 apresentar simples e r\u00e1pidas dicas de jQuery. N\u00e3o h\u00e1 nada de complexo, s\u00e3o scripts bem simples mas que com certeza v\u00e3o ajudar muitos desenvolvedores.
\n<\/p>\n
Com o script abaixo voc\u00ea consegue desativar o bot\u00e3o direito do mouse do usu\u00e1rio.<\/p>\n
\r\n$(document).ready(function(){\r\n $(document).bind("contextmenu",function(e){\r\n return false;\r\n });\r\n});\r\n<\/pre>\n2 – Verificar se um elemento existe<\/h2>\n
Verifique se um elemento HTML existe na p\u00e1gina.<\/p>\n
\r\n$(document).ready(function() {\r\n\tif ($("#conteudo").length)\r\n\t{ \r\n\t\talert("O elemento existe no DOM");\r\n\t}\r\n\telse\r\n\t{\r\n\t\talert("O elemento n\u00e3o existe no DOM");\r\n\t}\r\n});\r\n<\/pre>\n3 – Como verificar se um elemento \u00e9 vis\u00edvel<\/h2>\n
Tes para verificar se um elemento \u00e9 vis\u00edvel ou n\u00e3o.<\/p>\n
\r\n$(document).ready(function() {\r\n\tif($("#conteudo").is(":visible"))\r\n\t{ \r\n\t\talert('elemento \u00e9 vis\u00edvel no DOM');\r\n\t}\r\n\telse\r\n\t{\r\n\t\talert('elemento n\u00e3o \u00e9 vis\u00edvel no DOM');\r\n\t}\r\n});\r\n\r\n<\/pre>\n4 – Criando um temporizador<\/h2>\n
Caso deseje executar alguma fun\u00e7\u00e3o ap\u00f3s um tempo determinado.<\/p>\n
\r\n$(document).ready(function()\r\n\t{\r\n\twindow.setTimeout(function()\r\n\t{\r\n\t\/\/c\u00f3digo que ser\u00e1 executado depois do tempo determinado\r\n\t}, 1000);\r\n});\r\n<\/pre>\n5 – Carregue somente o conte\u00fado necess\u00e1rio<\/h2>\n
Esta dica \u00e9 para o conte\u00fado ser carregado apenas quando o usu\u00e1rio puder visualizar o conte\u00fado da p\u00e1gina<\/strong>. T\u00e9cnica muito utilizada para p\u00e1ginas com muitas imagens; \u201cpor que carregar todas as imagens de uma p\u00e1gina se o usu\u00e1rio visualizou apenas as primeiras\u201d?<\/p>\nPrimeiro baixe o plugin Lazyload.js no site Mika Tuupola<\/a><\/p>\nChamando as bibliotecas<\/h3>\n\r\n<script src="js\/jquery.js" type="text\/javascript"><\/script>\r\n<script src="js\/jquery.lazyload.js" type="text\/javascript"><\/script>\r\n<\/pre>\nComo usar o plugin Lazy Load<\/h3>\n
Em data-original<\/strong> voc\u00ea deve informar a imagem que ser\u00e1 vista pelo usu\u00e1rio. Ela s\u00f3 vai ser carregada quando o usu\u00e1rio rolar a p\u00e1gina at\u00e9 esta imagem.<\/p>\nNo atributo src<\/strong> de todas imagens voc\u00ea pode informar uma imagem de 1px X 1px, por exemplo. Esta imagem ser\u00e1 substitu\u00edda pela imagem do atributo data-original<\/strong>.<\/p>\n\r\n<img class="lazy" src="img\/grey.gif" data-original="img\/example.jpg" width="640" height="480">\r\n<\/pre>\nPara aplicar o plugin use:<\/p>\n
\r\n$("img.lazy").lazyload({ \r\n effect : "fadeIn"\r\n});\r\n<\/pre>\nPara maiores informa\u00e7\u00f5es visite o site oficial do plugin lazy load<\/a>.<\/p>\n6 – Contar quantidade de elementos<\/h2>\n
O c\u00f3digo abaixo conta a quantidade de elementos divs que est\u00e3o dentro da div “conteudo”.
\njQuery<\/p>\n
\r\n$(document).ready(function(){\r\n\tvar qtd = $("#conteudo > div").size()\r\n\talert(qtd);\r\n});\r\n<\/pre>\nHTML<\/p>\n
\r\n<div id="conteudo">\r\n <div id="div-um"><\/div>\r\n <div id="di-dois">\r\n \t<div id="div-tres"><\/div>\r\n <\/div><!-- di-dois -->\r\n <span><span>\r\n<\/div><!-- conteudo -->\r\n<\/pre>\n\nATEN\u00c7\u00c3O: A fun\u00e7\u00e3o conta apenas os elementos divs que est\u00e3o dentro da div conte\u00fado, ou seja DOIS.\n<\/div>\n7 – Como habilitar e desabilitar um elemento HTML<\/h2>\n\r\n$(document).ready(function(){\r\n\t$('#nome').attr('disabled','disable');\/\/desabilita o elemento\r\n\t$('#nome').removeAttr('disabled');\/\/habilita o elemento\r\n\r\n});\r\n<\/pre>\n8 – Quantidade de elementos no DOM<\/h2>\n\r\n$(document).ready(function(){\r\n\t console.log( $('*').length );\r\n});\r\n<\/pre>\nMostra no console do navegador a quantidade de elementos no DOM.<\/p>\n
9 – Qual a diferen\u00e7a entre append e prepend<\/h2>\n
Append<\/code> (ou appendTo<\/code>) tem a finalidade de inserir conte\u00fado antes da tag de fechamento de um elemento.
\nPrepend<\/code> (ou prependTo<\/code>) tem a finalidade de inserir conte\u00fado ap\u00f3s a tag de abertura de um elemento.
\nCaso o elemento que receba o conte\u00fado de append <\/code>ou prepend <\/code>esteja vazio n\u00e3o ter\u00e1 nenhuma diferen\u00e7a. Caso esse elemento esteja com alguma informa\u00e7\u00e3o o conte\u00fado a ser inserido vir\u00e1 antes do conte\u00fado (prepend<\/code>) ou depois do conte\u00fado (apend<\/code>).<\/p>\njQuery<\/p>\n
\r\n$(document).ready(function(){\r\n\t $('#div-um').append('<p>texto inserido<\/p>');\r\n\t $('#div-dois').prepend('<p>texto inserido<\/p>');\r\n});\r\n<\/pre>\nHTML<\/p>\n
\r\n<div id="div-um">Primeira DIV(append)<\/div>\r\n<div id="div-dois">Segunda DIV(preppend)<\/div>\r\n<\/pre>\nResultado
\n![\"jQuery.](\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/07\/diferenca-append-e-preppend.png\")
<\/p>\n
10 – Qual a diferen\u00e7a de val() e text()<\/h2>\n
Ambos os m\u00e9todos da biblioteca n\u00e3o aceitam argumentos.
\nval() \u00e9 um m\u00e9todo jQuery usado principalmente para obter os valores dos elementos dos formul\u00e1rios, como input, select e textarea.
\nA fun\u00e7\u00e3o abaixo pega o value do input e a insere no par\u00e1grafo<\/p>\n
\r\n$("input").keyup(function () {\r\n var value = $(this).val();\r\n $("p").text(value);\r\n })\r\n<\/pre>\nPara pegar o conte\u00fado de um option<\/code> (n\u00e3o o seu value<\/code>, e sim o conte\u00fado que aparece na combo) use:<\/p>\n\r\nvar valor = $("#combo option:selected").text();\r\n<\/pre>\ntext()<\/code> \u00e9 tamb\u00e9m usado para inserir texto nos elementos HTML, veja:<\/p>\n\r\n$("p").text("sadasd");\r\n<\/pre>\nPor hoje era isso, uma excelente semana a todos!<\/p>\n
Siga-me no Twitter: @kadunew<\/a> ou assine nosso Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":"O artigo dicas r\u00e1pidas jQuery ir\u00e1 apresentar simples e r\u00e1pidas dicas de jQuery. N\u00e3o h\u00e1 nada de complexo, s\u00e3o scripts bem simples mas que com certeza v\u00e3o ajudar muitos desenvolvedores.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-2665","post","type-post","status-publish","format-standard","hentry","category-jquery"],"yoast_head":"\n
10 Dicas r\u00e1pidas para iniciantes em jQuery<\/title>\n<meta name=\"description\" content=\"Artigo com 10 dicas r\u00e1pidas de jQuery para os iniciantes da biblioteca. Todas as dicas s\u00e3o simples, r\u00e1pidas e objetivas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Dicas r\u00e1pidas para iniciantes em jQuery\" \/>\n<meta property=\"og:description\" content=\"Artigo com 10 dicas r\u00e1pidas de jQuery para os iniciantes da biblioteca. Todas as dicas s\u00e3o simples, r\u00e1pidas e objetivas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-22T16:17:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-08-05T15:58:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/07\/dicas-jquery.png\" \/>\n\t<meta property=\"og:image:width\" content=\"550\" \/>\n\t<meta property=\"og:image:height\" content=\"188\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery\",\"url\":\"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery\",\"name\":\"10 Dicas r\u00e1pidas para iniciantes em jQuery\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/07\/dicas-jquery.png\",\"datePublished\":\"2013-07-22T16:17:55+00:00\",\"dateModified\":\"2013-08-05T15:58:36+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Artigo com 10 dicas r\u00e1pidas de jQuery para os iniciantes da biblioteca. Todas as dicas s\u00e3o simples, r\u00e1pidas e objetivas.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery#primaryimage\",\"url\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/07\/dicas-jquery.png\",\"contentUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/07\/dicas-jquery.png\",\"width\":550,\"height\":188,\"caption\":\"dicas jQuery\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JS\/jQuery\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/jquery\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"10 Dicas r\u00e1pidas para iniciantes em jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"10 Dicas r\u00e1pidas para iniciantes em jQuery","description":"Artigo com 10 dicas r\u00e1pidas de jQuery para os iniciantes da biblioteca. Todas as dicas s\u00e3o simples, r\u00e1pidas e objetivas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery","og_locale":"pt_BR","og_type":"article","og_title":"10 Dicas r\u00e1pidas para iniciantes em jQuery","og_description":"Artigo com 10 dicas r\u00e1pidas de jQuery para os iniciantes da biblioteca. Todas as dicas s\u00e3o simples, r\u00e1pidas e objetivas.","og_url":"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery","og_site_name":"KADUNEW","article_published_time":"2013-07-22T16:17:55+00:00","article_modified_time":"2013-08-05T15:58:36+00:00","og_image":[{"width":550,"height":188,"url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/07\/dicas-jquery.png","type":"image\/png"}],"author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery","url":"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery","name":"10 Dicas r\u00e1pidas para iniciantes em jQuery","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery#primaryimage"},"image":{"@id":"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery#primaryimage"},"thumbnailUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/07\/dicas-jquery.png","datePublished":"2013-07-22T16:17:55+00:00","dateModified":"2013-08-05T15:58:36+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Artigo com 10 dicas r\u00e1pidas de jQuery para os iniciantes da biblioteca. Todas as dicas s\u00e3o simples, r\u00e1pidas e objetivas.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery#primaryimage","url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/07\/dicas-jquery.png","contentUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/07\/dicas-jquery.png","width":550,"height":188,"caption":"dicas jQuery"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/jquery\/10-dicas-rapidas-para-iniciantes-em-jquery#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"JS\/jQuery","item":"https:\/\/www.kadunew.com\/blog\/category\/jquery"},{"@type":"ListItem","position":3,"name":"10 Dicas r\u00e1pidas para iniciantes em jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2665"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=2665"}],"version-history":[{"count":11,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2665\/revisions"}],"predecessor-version":[{"id":2698,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2665\/revisions\/2698"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=2665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=2665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=2665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}