{"id":53,"date":"2018-06-04T18:50:56","date_gmt":"2018-06-04T21:50:56","guid":{"rendered":"http:\/\/fabiobrandao.net.br\/blog\/?p=53"},"modified":"2023-03-11T23:51:44","modified_gmt":"2023-03-12T02:51:44","slug":"jquery-instalando","status":"publish","type":"post","link":"https:\/\/fabiobrandao.net.br\/blog\/javascript-e-bivliotecas\/jquery-instalando\/","title":{"rendered":"jQuery &#8211; Instalando"},"content":{"rendered":"<p>A bliblioteca jQuery \u00e9 apenas um arquivo de texto puro salvo com a extens\u00e3o \u201cjs\u201d. Para fazer uso da biblioteca em seu projeto voc\u00ea precisa descarreg\u00e1-la do site oficial e fazer refer\u00eancia em seu documento HTML com o uso do elemento script ou poder\u00e1 fazer uso de um CDN (Content Delivery Network) que nada mais \u00e9 que uma rede de distribui\u00e7\u00e3o de conte\u00fado.<\/p>\n<h3>jQuery Local<\/h3>\n<p>Para baixar a biblioteca, visite o endere\u00e7o <a href=\"http:\/\/jquery.com\/download\/\">http:\/\/jquery.com\/download\/<\/a>. A ado\u00e7\u00e3o do jQuery \u00e9 tamanha que existem v\u00e1rias op\u00e7\u00f5es dispon\u00edveis mas voc\u00ea dever\u00e1 procurar por jQuery 1.x que \u00e9 a vers\u00e3o com maior compatibilidade entre os navegadores.<\/p>\n<p>Voc\u00ea encontrar\u00e1 links para a vers\u00e3o de desenvolvimento e de produ\u00e7\u00e3o.<\/p>\n<h4>Vers\u00e3o de desenvolvimento<\/h4>\n<p>Est\u00e1 \u00e9 a vers\u00e3o que deve ser usada para o ambiente de desenvolvimento onde podemos fazer estudos e testes. Quando voc\u00ea est\u00e1 criando os seus c\u00f3digos em sua m\u00e1quina, dizemos que voc\u00ea est\u00e1 trabalhando no ambiente de desenvolvimento. Esta vers\u00e3o do jQuery est\u00e1 em formato leg\u00edvel para os humanos e toda comentada.<\/p>\n<h4>Vers\u00e3o de produ\u00e7\u00e3o<\/h4>\n<p>Esta \u00e9 a vers\u00e3o que deve ser usada no ambiente de produ\u00e7\u00e3o. Nesta vers\u00e3o todos os espa\u00e7os e coment\u00e1rios foram removidos, gerando um arquivo menor e de dif\u00edcil leitura pelos humanos. O conte\u00fado deste arquivo \u00e9 o mesmo conte\u00fado da vers\u00e3o de desenvolvimento, por\u00e9m em um arquivo menor.<\/p>\n<p>O servidor de produ\u00e7\u00e3o \u00e9 o ambiente onde nosso site est\u00e1 instalado. Quando voc\u00ea transfere seus arquivos por FTP para o servidor onde seu site est\u00e1 instalado, voc\u00ea est\u00e1 transferindo os arquivos para o ambiente de produ\u00e7\u00e3o. A vers\u00e3o de produ\u00e7\u00e3o \u00e9 uma vers\u00e3o compactada da biblioteca. Por ter um tamanho em bytes menor a sua transferencia \u00e9 mais r\u00e1pida durante as requisi\u00e7\u00f5es.<\/p>\n<p>Para utilizar a biblioteca, descarregue a vers\u00e3o desejada para seu computador. Eu costumo utilizar sempre a vers\u00e3o de produ\u00e7\u00e3o j\u00e1 que n\u00e3o vou alterar a biblioteca. Geralmente ao descarregar o arquivo, seu nome conter\u00e1 a vers\u00e3o. Para simplificar eu gosto de renomear o arquivo, por exemplo jquery.min.js. Este &#8220;min&#8221; significa minify ou minificado.<\/p>\n<h3>Configurando o HTML<\/h3>\n<p>Com o arquivo que corresponde a biblioteca jQuery descarregado, precisamos referenci\u00e1-lo em nosso documento HTML.<\/p>\n<p>Veja um exemplo de como fazer isso em seu c\u00f3digo:<\/p>\n<figure id=\"attachment_54\" aria-describedby=\"caption-attachment-54\" style=\"width: 740px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-54 size-full\" src=\"http:\/\/fabiobrandao.net.br\/blog\/wp-content\/uploads\/2018\/06\/jquery-instalacao-1.png\" alt=\"Configurando o jQuery no documento HTML\" width=\"740\" height=\"414\" srcset=\"https:\/\/fabiobrandao.net.br\/blog\/wp-content\/uploads\/2018\/06\/jquery-instalacao-1.png 740w, https:\/\/fabiobrandao.net.br\/blog\/wp-content\/uploads\/2018\/06\/jquery-instalacao-1-300x168.png 300w, https:\/\/fabiobrandao.net.br\/blog\/wp-content\/uploads\/2018\/06\/jquery-instalacao-1-355x199.png 355w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><figcaption id=\"caption-attachment-54\" class=\"wp-caption-text\">Configurando o jQuery no documento HTML<\/figcaption><\/figure>\n<p>Note a linha 9 fazendo a refer\u00eancia para a biblioteca. Deve-se estar atendo ao nome e local do arquivo. Entre a linha 11 e 12 temos um pequeno bloco de c\u00f3digo que nos permite identificar se a biblioteca foi carregada por meio de uma mensagem escrita no corpo do documento.<\/p>\n<p>Agora abra seu documento HTML no navegador para test\u00e1-lo.<\/p>\n<h3>CDN<\/h3>\n<p>Uma excelente alternativa \u00e9 o uso da biblioteca jQuery de forma remota. Isto \u00e9 feito com uso de um CDN, ou seja, uma rede de distribui\u00e7\u00e3o de conte\u00fado. Neste caso voc\u00ea n\u00e3o faz refer\u00eancia para o arquivo local e sim para o arquivo remoto pois ele est\u00e1 em outro computador.<\/p>\n<p>Este m\u00e9todo n\u00e3o \u00e9 aconselh\u00e1vel para aplica\u00e7\u00f5es que v\u00e3o ser executadas localmente pois caso n\u00e3o exista conex\u00e3o com internet a biblioteca n\u00e3o ser\u00e1 carregada e todas as funcionalidades dependentes da biblioteca deixar\u00e3o de funcionar.<\/p>\n<p>Seu uso pode ser interessante em ambiente de produ\u00e7\u00e3o j\u00e1 que o fato de a biblioteca estar em outro servidor pode aumentar significativamente o tempo de transfer\u00eancia da biblioteca assim como tirar esta tr\u00e1fego do seu servidor. Isso passa a ser relevante se seu projeto tiver milhares de acessos. Em caso de projetos pequenos com poucos acessos torna-se desnecess\u00e1rio.<\/p>\n<p>O endere\u00e7o para o CDN voc\u00ea tamb\u00e9m pode pegar em <a href=\"http:\/\/jquery.com\/download\/\">http:\/\/jquery.com\/download\/<\/a>.<\/p>\n<p>Para configurar seu documento basta trocar a refer\u00eancia local para o endere\u00e7o CND.<\/p>\n<p>Isso \u00e9 o que \u00e9 necess\u00e1rio saber para que voc\u00ea possa instalar a biblioteca em seu ambiente de desenvolvimento e produ\u00e7\u00e3o.<\/p>\n<p>Um abra\u00e7o e at\u00e9 o pr\u00f3ximo post.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A bliblioteca jQuery \u00e9 apenas um arquivo de texto puro salvo com a extens\u00e3o \u201cjs\u201d. Para fazer uso da biblioteca em seu projeto voc\u00ea precisa descarreg\u00e1-la do site oficial e&#8230; <\/p>\n","protected":false},"author":1,"featured_media":377,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[69],"tags":[9],"class_list":["post-53","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-e-bivliotecas","tag-jquery"],"_links":{"self":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":3,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":386,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions\/386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/media\/377"}],"wp:attachment":[{"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fabiobrandao.net.br\/blog\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}