Arquivos de sites

Java 11 + Maven + Spring Boot – Erro: Repackage failed: Unable to load the mojo ‘repackage’ in the plugin spring-boot-maven-plugin due to an API incompatibility

Depois de muito tempo sem postar, venho novamente trazer uma solução de um problema que me levou algumas boas horas pesquisando pra identificar o problema.

Trabalhando em um projeto maven com spring boot gerado a partir do THOR, o projeto compilava corretamente local, porém através do pipeline do GitLab tomávamos o seguinte erro:

[WARNING] Error injecting: org.springframework.boot.maven.RepackageMojo
java.lang.TypeNotPresentException: Type org.springframework.boot.maven.RepackageMojo not present
    at org.eclipse.sisu.space.URLClassSpace.loadClass (URLClassSpace.java:147)
    at org.eclipse.sisu.space.NamedClass.load (NamedClass.java:46)
    at org.eclipse.sisu.space.AbstractDeferredClass.get (AbstractDeferredClass.java:48)
    at com.google.inject.internal.ProviderInternalFactory.provision (ProviderInternalFactory.java:85)
    at com.google.inject.internal.InternalFactoryToInitializableAdapter.provision (InternalFactoryToInitializableAdapter.java:57)
    ...
    at org.codehaus.plexus.classworlds.launcher.Launcher.launch (Launcher.java:225)
    at org.codehaus.plexus.classworlds.launcher.Launcher.mainWithExitCode (Launcher.java:406)
    at org.codehaus.plexus.classworlds.launcher.Launcher.main (Launcher.java:347)
Caused by: java.lang.UnsupportedClassVersionError: org/springframework/boot/maven/RepackageMojo has been compiled by a more recent version of the Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file versions up to 55.0
    at java.lang.ClassLoader.defineClass1 (Native Method)
    at java.lang.ClassLoader.defineClass (ClassLoader.java:1017)
    at java.security.SecureClassLoader.defineClass (SecureClassLoader.java:174)
    at java.net.URLClassLoader.defineClass (URLClassLoader.java:550)
    at java.net.URLClassLoader$1.run (URLClassLoader.java:458)
    at java.net.URLClassLoader$1.run (URLClassLoader.java:452)
    at java.security.AccessController.doPrivileged (Native Method)
    at java.net.URLClassLoader.findClass (URLClassLoader.java:451)
    at org.codehaus.plexus.classworlds.realm.ClassRealm.loadClassFromSelf (ClassRealm.java:425)
    at org.codehaus.plexus.classworlds.strategy.SelfFirstStrategy.loadClass (SelfFirstStrategy.java:42)
    at org.codehaus.plexus.classworlds.realm.ClassRealm.unsynchronizedLoadClass (ClassRealm.java:271)
    ...
    at org.codehaus.plexus.classworlds.launcher.Launcher.mainWithExitCode (Launcher.java:406)
    at org.codehaus.plexus.classworlds.launcher.Launcher.main (Launcher.java:347)
    ...
[ERROR] Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:3.0.0-M1:repackage (default) on project cpb-ms-core-application: Execution default of goal org.springframework.boot:spring-boot-maven-plugin:3.0.0-M1:repackage failed: Unable to load the mojo 'repackage' in the plugin 'org.springframework.boot:spring-boot-maven-plugin:3.0.0-M1' due to an API incompatibility: org.codehaus.plexus.component.repository.exception.ComponentLookupException: org/springframework/boot/maven/RepackageMojo has been compiled by a more recent version of the Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file versions up to 55.0

Analisando o pom do projeto identifiquei que a versão do spring-boot-maven-plugin não foi definida:

...
  <profiles>
    <profile>
      <id>default</id>
      <activation>
        <activeByDefault>true</activeByDefault>
      </activation>			
      <build>
      <plugins>
        <plugin>
	  <groupId>org.springframework.boot</groupId>
	  <artifactId>spring-boot-maven-plugin</artifactId>
	  <executions>
	    <execution>
	      <goals>
	        <goal>repackage</goal>
	      </goals>
	    </execution>
	   </executions>
	  </plugin>
...

De alguma maneira durante a compilação ele estava pegando a versão 3.0.0-M1, que pela pesquisa que fiz, parece só ser possível compilar no java 17.

Para resolver esse problema foi necessário apenas definir explicitamente a versão que deveria ser utilizada para esse plugin:

...
  <profiles>
    <profile>
      <id>default</id>
      <activation>
        <activeByDefault>true</activeByDefault>
      </activation>			
      <build>
      <plugins>
        <plugin>
	  <groupId>org.springframework.boot</groupId>
	  <artifactId>spring-boot-maven-plugin</artifactId>
	  <version>2.6.4</version>
	  <executions>
	    <execution>
	      <goals>
	        <goal>repackage</goal>
	      </goals>
	    </execution>
	   </executions>
	  </plugin>
...

Simples assim, espero que tenha ajudado 😀 See ya!

MongoDB – Erro: Can’t extract geo keys

E ai galera, estou me aventurando no mundo NoSQL com o sr. MongoDB

E ao criar meu primeiro índice para fazer pesquisas por proximidade, tomei meu primeiro erro, e tive que ir atrás para resolve-lo 😦

Oque aconteceu, peguei latitudes e longitudades pelo google maps, lá pros lados da austrália…
type: "Point", coordinates: [ -33.91991, 151.257018 ]
adicionei ao meu documento e tentei gerar o índice e tomei o erro abaixo:

db.xxx.createIndex({ xxx : "2dsphere"})

“ok” : 0,
“errmsg” : “Can’t extract geo keys… longitude/latitude is out of bounds, lng: … lat: …”,
“code” : 16755,
“codeName” : “Location16755”

Dando uma pesquisada, descobri é que o google maps disponibiliza os valores na ordem diferente (latitude/longitude) da qual o MongoDB espera (longitude/latitude)… para resolver o problema apenas precisei inverter os valores inseridos e o índice foi criado sem problemas 😀

Os valores da Longitude deve estar entre -180° e +180° e a Latitude entre -90° e 90°!!! (Y)

Espero que tenha ajudado!

Fonte: go-oleg / Paul T. Rawkeen – Stackoverflow.com

JPQL – Como criar query de DELETE com JOIN

E ai galera beleza?
Estou em um novo projeto muito legal, e me deparei com um problema, eu precisava fazer uma query para deletar uns dados no banco, só que pra selecionar exatamente oque eu precisava excluir era necessário utilizar joins, porém ao montar uma query parecida com essa:

delete from Queue q
where q.enabledMember = :enabledMember
and q.letter.eventReason.event.type = :eventType
and q.letter.eventReason.reason = :reason

Tomei o seguinte erro:

The entity abstract schema type declaration is malformed

Pesquisei um pouco na net e achei a seguinte solução, deletar a partir de um subselect, a query ficou assim:

delete from Queue q
where q in (select sq from Queue sq
where sq.enabledMember = :enabledMember
and sq.letter.eventReason.event.type = :eventType
and sq.letter.eventReason.reason = :reason )

Bom, é isso ai galera, espero que tenha ajudado 😀

Abraços!

Fonte: Jake Trent – JakeTrent.com

jQuery – Fading de elementos (Exibir/Esconder)

Fazer simples animação é muito fácil com jQuery. Um desses efeitos é o fading em um elemento, para exibí-lo ou escondê-lo. Aqui está um simples exemplo, onde nós exibimos uma caixa escondida, usando o método fadeIn():

<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>
<a href="javascript:void(0);" onclick="ShowBox();">Show box</a>
<script type="text/javascript">
function ShowBox()
{
        $("#divTestArea1").fadeIn();
}
</script>

Você pode dar um fade em um monte de elementos diferentes, como divs, spans ou links. O método fadeIn() pode receber três parâmetros. O primeiro permite você especificar a duração do efeito em milissegundos, ou “fast” (rápido) ou “slow” (devagar), que é o mesmo que especificar 200 ou 600 milissegundos. Aqui está um exemplo disso em uso:

<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div>
<div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div>
<a href="javascript:void(0);" onclick="ShowBoxes();">Show boxes</a>
<script type="text/javascript">
function ShowBoxes()
{
        $("#divTestArea21").fadeIn("fast");
        $("#divTestArea22").fadeIn("slow");
        $("#divTestArea23").fadeIn(2000);
}
</script>

Não se importe com todo o HTML, está lá apenas para que você possa ver a diferença entre as durações do fading. Agora, o segundo parâmetro pode ser o nome de uma função de atenuação (que nós não vamos usar nesse tutorial) ou uma função de callback que você pode fornecer, para ser chamada uma vez que o efeito terminar. Aqui está um exemplo disso, combinado com o uso do método fadeOut(), que obviamente tem o efeito reverso do fadeIn():

<div id="divTestArea3" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea3").fadeIn(2000, function()
        {
                $("#divTestArea3").fadeOut(3000);
        });
});
</script>

Pode ter situações onde você quer esconder ou exibir um element dependendo do estado corrente do mesmo. Você poderia com certeza checar se ele está visível ou não, e então chamar ou fadeIn() ou fadeOut(), mas os desenvolvedores legais do jQuery tem nos fornecido um método específico para alternar (toggling) um elemento, chamado fadeToggle().  Ele leva os mesmo parâmetros como fadeIn() e fadeOut(), então ele é muito fácil de usar. Aqui está um pequeno exemplo:

<div id="divTestArea4" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div><br />
<a href="javascript:void(0);" onclick="ToggleBox();">Toggle box</a>
<script type="text/javascript">
function ToggleBox()
{
        $("#divTestArea4").fadeToggle("slow");  
}
</script>

E isso é quão fácil é usar os efeitos de fading do jQuery.

Fonte: jquery-tutorial.net

jQuery – Selectors relação Parent/child (Pai/filho)

O jQuery também permite você selecionar elementos baseado em seus elemento pai. Temos duas variações: Uma que vai apenas combinar elementos que tem um filho direto ao elemento pai, e um qual irá combinar todo o caminho através da hierarquia, ex.: um filho de um filho de um filho de um elemento pai.

A sintaxe para encontrar filhos que são descendentes direto de um elemento se parece com isso:

$(“div > a”)

Esse selector irá encontrar todos os links que são filho direto de um elemento div. Substituindo o símbolo de “maior que” por um simples espaço em branco irá mudar isso para combinar todos links dentro de um elemento div, não interessa se eles estão diretamente relacionados ou não:

$(“div a”)

Aqui está um exemplo onde nós colorimos tags bold de azul se elas são descendentes diretas da primeira área de teste:

<div id="divTestArea1">
        <b>Bold text</b>
        <i>Italic text</i>
        <div id="divTestArea2">
                <b>Bold text 2</b>
                <i>Italic text 2</i>
                <div>
                        <b>Bold text 3</b>
                </div>
        </div>
</div>
<script type="text/javascript">
$("#divTestArea1 > b").css("color", "blue");
</script>

Como você verá, apenas a primeira tag bold está colorida. Agora, se você usou a segunda abordagem, ambas tags bold deverão estar coloridas de azul. Tente o seguinte exemplo, onde a única coisa alterada foi o caractere “maior que” que foi substituído por um espaço em branco, observe que nós também aceitados descendentes não diretos ou “netos” assim eles são chamados algumas vezes:

<div id="divTestArea1">
        <b>Bold text</b>
        <i>Italic text</i>
        <div id="divTestArea2">
                <b>Bold text 2</b>
                <i>Italic text 2</i>
                <div>
                        <b>Bold text 3</b>
                </div>
        </div>
</div>
<script type="text/javascript">
$("#divTestArea1 b").css("color", "blue");
</script>

Agora a coisa legal é que você pode na verdade voltar a cima da hierarquia se necessário, usando o método parent().

Fonte: jquery-tutorial.net

jQuery – Selectors usando atributos

No capítulo anterior, nós vimos como podemos encontrar elementos em uma página a partir de suas classes e IDs. Essas duas propriedades estão relacionadas por que o fato de que você pode usar elas para estilizar os elementos com CSS, mas com jQuery, você pode na realidade encontrar elementos baseado em qualquer tipo de atributo. Ele vem com um monte de tipo de selector de atributo e neste artigo, nós veremos cara um deles.

Encontre elementos com um atributo específico

A tarefa mais básica quando selecionando elementos baseados em atributos é encontrar todos os elementos que tem um atributo específico. Esteja ciente que o próximo exemplo não necessita o atributo ter um valor específico, de fato, ele nem mesmo precisa ter um valor. A sintaxe para esse selector é um conjunto de colchetes com o nome do atributo desejado dentro dele, por exemplo [name] ou [href]. Aqui vai um exemplo:

<span title="Title 1">Test 1</span><br />
<span>Test 2</span><br />
<span title="Title 3">Test 3</span><br />

<script type="text/javascript">
$(function()
{
        $("[title]").css("text-decoration", "underline");
});
</script>

Nós usamos o selector de atributo para encontrar todos os elementos na página que tem um atributo title e depois um underline. Como mencionado, isso irá combinar elementos com um elemento title sem importar qual é o valor dele, mas as vezes você vai querer encontrar elementos com uma tributo específico com um valor específico.

Encontra elementos com um valor específico para um atributo específico

Aqui está um exemplo onde nós encontramos elementos com um valor específico

<a href="http://www.google.com" target="_blank">Link 1</a><br />
<a href="http://www.google.com" target="_self">Link 2</a><br />
<a href="http://www.google.com" target="_blank">Link 3</a><br />
<script type="text/javascript">
$(function()
{
        $("a[target='_blank']").append(" [new window]");
});
</script>

O selector simplesmente diz ao jQuery para encontrar links (os elemenetos <a>) que tem um atributo alvo que é igual o valor “_blank” e então acrescenta o texto “[new window]” a ele. Mas e se você está procurando por todos os elementos que não tem o valor? Inverter o selector é muito fácil:

$("a[target!='_blank']").append(" [same window]");

A diferença é o != em vez de =, um jeito comum de negativar um operador dentro de muitas linguagens de programação.

E aqui está ainda mais possibilidades:

Encontre elementos com um valor que começa com uma string específica usando o operador ^=:

$("input[name^='txt']").css("color", "blue");

Encontre elementos com um valor que termina com uma string específica usando o operador $=:

$("input[name$='letter']").css("color", "red");

Encontre elementos com um valor o qual contenha uma palavra específica:

$("input[name*='txt']").css("color", "blue");

Fonte: jquery-tutorial.net

jQuery – Introdução ao selectors (seletores) e Usando elementos, IDs e classes

Uma tarefa muito comum quando se está usando JavaScript, é ler e modificar o conteúdo da página. Para fazer isso, você precisa encontrar o(s) elemento(s) que você deseja modificar, e ai é onde o selector no jQuery ajudará você. Com o JavaScript normal, encontrar elementos pode ser extremamente pesado, ao menos que você precise encontrar um único elemento que tem um valor especificado no atributo ID. O jQuery pode ajudar você a encontrar elementos baseado em seus IDs, classes, tipos, atributos, valores de atributos e muito, muito mais. Ele é baseado no selectors do CSS e como você verá através desse tutorial, ele é extremamente poderoso. Quando usamos esse tipo de programa para fazer mudanças em seu site, é importante que você tenha autenticação de dois fatores (two factor authentication (em Inglês)) de modo que o seu site e computador não são compromissados.

Pela razão dessa ser uma tarefa tão comum, o construtor do jQuery vem em várias formas que recebem uma selector query como argumento (parâmetro), permitindo você localizar elementos com uma quantidade bastante limitada de código para uma eficiência ótima. Você pode instanciar o objeto jQuery simplesmente escrevendo jQuery() ou até mais curto usando o nome de atalho do jQuery: $().

Portanto, selecionar um conjunto de elementos é simples assim:

$(<query aqui>)

Com o objeto jQuery retornado, você pode então começar a usar e alterar os elementos que você encontrou.

Fonte

Usando elementos , IDs e classes

O selector #id

Um tipo de selector muito comum é o baseado em ID, que nós vimos no exemplo “Hello, world”. Ele usa o atributo ID de uma tag HTML para localizar o elemento desejado. Um ID deve ser único,então você deve apenas usar esse selectior quando você deseja localizar um único elemento. Para localizar um elemento com um ID específico, escreva um caractere hash (#), seguido pelo ID do elemento que você deseja localizar, assim:

$("#divTest")

Um exemplo disso em uso:

<div id="divTest"></div>
<script type="text/javascript">
$(function()
{
        $("#divTest").text("Test");
});
</script>

Agora, enquanto tiver apenas um único elemento que combina com a nossa query acima, você deve estar ciente que o resultado é uma lista, significando que isso pode conter mais de um elemento, se a query combina com mais de um. Um exemplo disso é combinar todos os elementos quais usam uma ou varias classes CSS.

O selector .class

Elementos com uma classe específica podem ser localizados escrevendo um caractere ponto (.) seguido pelo nome da classe. Aqui vai um exemplo:

<ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
</ul>
<script type="text/javascript">
$(function()
{
        $(".bold").css("font-weight", "bold");
});
</script>

O selector element

Você também pode combinar baseado em elementos nos nomes das tags.

You can also match elements based on their tag names. Por exemplo, você pode combiner todos os links emu ma página assim:

$(“a”)

Ou todas as tags div assim:

$(“div”)

Se você usar um selector de multi-elemento (multi-element), como o selector de classe que nós usamos no exemplo anterior, e nó sabemos que nós estamos procurando por emento de um tipo específico, é uma boa prática especificar o tipo do elemento antes do selector. Não é apenas mais preciso, mas também é mais rápido para o jQuery processar, resultando em sites mais responsivos. Aqui vai uma versão reescrita do exemplo anterior, onde nós usamos esse método:

$("span.bold").css("font-weight", "bold");

Isso combinará todos os elementos span com “bold” como classe. Claro, isso pode ser usado com IDs e praticamente com todos os outros selector também.

Fonte: jquery-tutorial.net / jquery-tutorial.net

jQuery – Evento Ready e Encadeamento de método (Method chaining)

Como mencionado, é uma boa prática esperar o documento ser totalmente carregado (loaded) e pronto (ready), antes de trabalhar com ele. Isso também permite você ter seu código JavaScript antes do body (corpo) do seu documento, na sessão head (cabeçalho), senão diretamente ou através de um link para um arquivo JavaScript externo. Você pode fazer isso apenas colocando seu código dentro do evento ready do documento. Nós vamos usar o mesmo exemplo como no capítulo “Hello, world!”, mas dessa vez o código está dentro do evento ready:

<div id=”divTest1″></div>
<script type=”text/javascript”>
function DocumentReady()
{
$(“#divTest1”).text(“Hello, world!”);
}

$(document).ready(DocumentReady);
</script>

O que fazemos aqui é que criamos uma function (função), chamada DocumentReady, a qual deve ser disparadas assim que o documento estiver pronto para manipulação do DOM. Na última linha, usamos o método ready() para atribuir nossa função ao evento ready, para dizer ao jQuery que assim que o documento estiver pronto, nós queremos que ele chame nossa função.

Entretanto, nós podemos encurtá-la um pouco usando uma função anônima (anonymous function) do JavaScript em vez disso. Isso basicamente apenas significa que ao invés de declarar a função e dá-la um nome, nós simplesmente criamos ela e então imediatamente passamos a referencia à função ready(). Se você é novo em JavaScript, então isso pode parecer demasiadamente complicado, mas assim você se acostuma a isso, você talvez possa apreciar as poucas keystrokes e o menor espaço necessário para realizar o mesmo:

<div id=”divTest2″></div>
<script type=”text/javascript”>
$(document).ready(function()
{
$(“#divTest2”).text(“Hello, world!”);
});
</script>

Mas com certeza, isso ainda não foi curto o bastante para o time do jQuery, então eles decidiram criar uma versão (sobrecarga) do construtor do jQuery, que leva uma função ready como um parâmetro, para fazer isso ainda mais curto:

<div id=”divTest3″></div>
<script type=”text/javascript”>
$(function(){
$(“#divTest3”).text(“Hello, world!”);
});
</script>

No ultimo exemplo, nossa função anonima é passada diretamente ao contrutor do jQuery, que a atribui ao evento ready. Como você verá quando você testar o código, o evento é disparado assim que a página for carregada, a maioria das vezes tão rápido que você nem se quer percebe.

Como já descrito, envolver nosso código na função de evento ready é a melhor prática para trabalhar com jQuery em nosso documento, e portanto você verá esse tutorial usando essa abordagem na maioria dos exemplos, a não ser ignorado para manter o tamanho dos nossos exemplos baixo.

Encadeamento de método (Method chaining)

Também um outro aspecto de tantos outros aspectos realmente legais do jQuery é o fato de que a maioria dos métodos retornam um objeto jQuery que você pode então usar para chamar outro método. Isso permite você fazer um encadeamento de método, onde você pode chamar múltiplos métodos no mesmo conjunto de elementos, que é realmente agradável porque isso salva você e o navegador de ter que procurar o mesmo elemento mais de uma vez. Aqui vai um exemplo, e não se preocupe sobre os métodos do jQuery usados nos exemplos seguintes – eles serão explicados nos capítulos posteriores:

<div id=”divTest1″></div>
<script type=”text/javascript”>
$(“#divTest1”).text(“Hello, world!”).css(“color”, “blue”);
</script>

Isso funciona assim: Nós instanciamos um novo objeto jQuery e selecionamos o elemento divTest1 com o caractere $, que é o atalho para a classe jQuery. No retorno, nós pegamos um objeto jQuery, permitindo-nos manipular o elemento selecionado. Nós usamos aquele objeto para chamar o método text(), que define o texto ao(s) elemento(s) selecionado(s). Esse método retorna o objeto jQuery de novo, nos permitindo usar outra chamada de método diretamente no valor de retorno, que é o método css().

Nós podemos adicionar mais métodos se nós precisarmos, mas até certo ponto, a linha de código se tornará bastante grande. Felizmente para nós, o JavaScript não é muito rigoroso em relação a sintaxe, então você pode formatar como você quiser, incluindo linebreaks (quebra de linha) e indentações.  Por exemplo, isso irá funcionar muito bem também:

<div id=”divTest2″></div>
<script type=”text/javascript”>
$(“#divTest2”).text(“Hello, world!”)
.removeClass(“blue”)
.addClass(“bold”)
.css(“color”, “blue”);
</script>

O JavaScript irá simplesmente jogar fora os espaços extras em branco, quando interpretar o código e executa-lo como uma longa linha de código com várias chamadas de métodos.

Observe que alguns métodos não retornam o objeto jQuery, enquanto outro apenas retornam isso dependendo dos parâmetros que você passar pra ele. Um bom exemplo disso é o método text() usado acima. Se parâmetros não forem passados a ele, o texto atual do(s) objeto(s) selecionado(s) é retornado em vez do objeto jQuery, enquanto um único parâmetro provoca o jQuery a definir o texto especificado e retornar um objeto jQuery.

Fonte: jquery-tutorial.net / jquery-tutorial.net

jQuery – Primeiros passos; Hello, world!

Para usar jQuery, você precisa incluí-lo nas páginas onde deseja tirar proveito dele. Você pode fazer isso baixando o jQuery do site dele em www.jquery.com. Lá tem geralmente a escolha entre uma versão de “Produção” (Production) e uma versão de “Desenvolvimento” (Development).

A versão de “Produção” é para o seu site real na web, por que ela foi reduzida e comprimida para ocupar o mínimo de espaço, o que é importante para os seus visitantes, do qual o navegador terá que baixar o arquivo do jQuery juntamente com o resto do seu website. Para teste e desenvolvimento, a versão “Desenvolvimento” é melhor. Ela não foi reduzida ou comprimida, então quando você encontrar um erro, você pode na verdade ver onde no jQuery isso aconteceu.

Uma vez que o arquivo JavaScript do jQuery foi baixado, você terá que referenciá-lo em suas páginas, usando a tag HTML <script>. O jeito mais fácil é colocar o arquivo do jQuery baixado no mesmo diretório da página onde deseja usá-lo e então referenciá-lo assim, na sessão <head> do seu documento:

<script type="text/javascript" src="jquery-1.5.1.js"></script>

Uma parte da sua página deve agora se parecer com isso:

<head>
<title>jQuery test</title>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
</head>

Uma abordagem mais moderna, ao invés de você mesmo baixar e hospedar o jQuery, é incluí-lo de um CDN – Content Delivery Network (Rede de Fornecimento de Conteúdo). Tanto a Google quanto a Microsoft hospedam várias versões de jQuery e outros frameworks JavaScript. Isso lhe salva de ter que baixar e armazenar o framework jQuery, mas isso tem uma vantagem muito maior: Porque o arquivo vem de uma URL popular que outros websites podem utilizar também, há possibilidades de que quando as pessoas cheguem ao seu website e o navegador delas solicitar o framework jQuery, isso pode já estar no cachê, porque outro website está usando exatamente a mesma versão e arquivo. Além disso, a maioria dos CDN’s terão certeza de que uma vez que o usuário solicitou um arquivo dele, isso será fornecido por um servidor mais perto dele, então seus usuários Europeus não terão que transportar o arquivo por todo o caminho a partir dos Estados Unidos e assim por diante.

Você pode usar o jQuery de um CDN do mesmo jeito como você faria com a versão baixada, apenas a URL que muda. Por exemplo, para incluir o jQuery 1.5.1 a partir do Google, você deveria escrever o seguinte:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Eu sugiro que você use essa abordagem, a não ser que você tenha uma razão específica para você mesmo hospedar o jQuery. Aqui vai um link de informação do CDN do jQuery a partir do Google:

http://code.google.com/intl/da/apis/libraries/devguide.html#jquery

Ou se você preferir usar a partir da Microsoft:

http://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0

Vamos ao Hello, world!

Todo tutorial de programação decente começará com um exemplo “Hello, world!” e este tutorial é também um desses. No capítulo anterior, nó aprendemos como incluir o jQuery na nossa página, de modo que nós podemos começar a usar todos esses grandes recursos. Você precisa conhecer um pouco mais sobre como jQuery trabalha, antes de você começar a escrever seu próprio código, mas apenas para ter certeza que tudo está funcionando, e para você ver como é simples o jQuery, vamos começar com um pequeno exemplo:

<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>

Ok, então temos uma tag div com o id “divTest1”. No código JavaScript nós usamos o atalho $ para acessar o jQuery, então nós selecionamos todos os elementos com um id “divTest1” (há apenas um porém) e setamos seu texto para “Hello, world!”. Você pode não saber o suficiente sobre jQuery para entender porque e como isso funciona, mas como você progredirá através deste tutorial, todos esses elementos serão explicados em detalhes.

Mesmo uma tarefa tão simples como essa deve na verdade necessitar de um bom número extra de keystrokes se você tivesse que fazer isso em JavaScript puro, sem ajuda do jQuery:

<div id="divTest2"></div>
<script type="text/javascript">
document.getElementById("divTest2").innerHTML = "Hello, world!";
</script>

E isso seria ainda maior se nosso elemento HTML não tivesse um ID, por exemplo, apenas uma classe.

Normalmente, entretanto, você espera pelo documento entrar no estado READY (Pronto) antes de você começar manipular seu conteúdo. Os exemplos acima funcionarão na maioria dos navegadores e provavelmente até mesmo funcionará quando você fizer mais coisas avançadas, mas determinadas tarefas podem falhar se você tentar fazê-las antes do documento estar carregado (loaded) e pronto (ready). Felizmente, o jQuery faz isso muito fácil também.

Fonte: jquery-tutorial.net / jquery-tutorial.net