Então, agora que você ouviu minha introdução para Jay Cory, bem como minha própria opinião sobre o ensino da
consulta de Jay e a abordagem que estamos levando aqui, o que resumir brevemente, nós começamos com o javascript de vanilla e
agora estamos confiantes de fazer coisas Dessa forma, estamos passando para Jay Querrey.
Então, a primeira coisa sobre a qual precisamos conversar é como incluímos uma consulta em um aplicativo.
Então eu vou começar com uma aplicação muito simples aqui apenas adicionando na minha idade para a boca e
dar-lhe um título.
Jay queery demo
Jay em Jay queery é sempre minúsculo.
Não me pergunte por que Q é maiúsculo tudo isso em apenas alguns elementos.
J.
Demo Corey.
Assim como e talvez um aliado ou dois e estes serão apenas um texto aleatório.
OK, então três aliados, etc. você.
E H-1 e irá economizar.
E, claro, iremos em frente e abriremos isso no navegador.
E aqui está a nossa página de demonstração.
Existem algumas maneiras de adicionar uma consulta à nossa própria aplicação e aos arquivos html da nossa idade.
Lembre-se de que a consulta J é apenas um arquivo javascript.
Não é diferente dos arquivos que escrevemos até agora.
Como o nosso jogo de cores, esquiva A-S ou nossa lista de tarefas.
Sim ou qualquer outro arquivo de javascript que criamos e vinculados usando uma tag de script.
Então, em ambos os métodos, aqui estamos usando uma tag de script.
A única diferença é o atributo de origem.
código para uma consulta e eles o colocaram no mesmo diretório que meu projeto e depois eu liguei-lo.
E neste caso, estamos ligando ao arquivo localmente e o que isso significa é que eu baixei o
Então, eu vou mostrar-lhe como nós fazemos isso se vamos à documentação J Crew e nós clicamos no download e então precisamos escolher uma versão
e eu vou seguir com o último que é 2. 1 ponto 4 e temos algumas
opções.
Podemos baixar a consulta Jey de compressão 2. 0 ponto 1. 4 e a versão de desenvolvimento descompactada.
Eu vou fazer os dois.
Normalmente, eu apenas faria isso porque é comprimido o ponto inteiro é que é mais rápido carregar.
Mas eu quero mostrar o que parece.
Então, eu vou pegar o descompactor e o comprimido e você pode ver se nós conseguimos
dois arquivos diferentes.
Nós temos Jay queery para apontar um ponto para Dot J. S. e nós perguntamos 2. 1 por cento para os homens.
Sim.
Então vou abrir os dois aqui em sublime.
Basta arrastá-los e vamos dar uma olhada neles.
Então este arquivo aqui é a versão descompactada.
E enquanto eu percorrer.
Observe que é apenas um arquivo de javascript muito longo.
São mais de 9000 linhas para que possamos incluir este arquivo ou podemos incluir a versão minimizada que é o mesmo código por trás
das cenas, mas quando algo é minimizado ou compactado, todos os espaços em branco são
retirados.
Então, todos esses retorna todos os comentários desapareceram e todos os nomes de variáveis ​​e
propriedades são encurtados em caracteres únicos para que você possa ver que temos coisas como em ou temos coisas como ABC que definitivamente
não são os nomes de propriedades e argumentos dentro se o arquivo descompactado para que possamos
incluir um.
E para fazer isso, precisamos ter certeza de que nós adicionaremos os arquivos ao diretório correto.
Então eu vou fazer uma nova pasta em vez do meu projeto e eu vou chamá-lo de lib.
E não precisamos fazer isso.
Nós poderíamos simplesmente arrastar nossos dois arquivos para estar no mesmo diretório que o nosso time h.
Vou arquivar e vou começar com essa maneira de mostrar.
Então eu vou abrir meu arquivo H Tim L e adicionar um script aqui tag de script e eu preciso de iguais de
fonte e eu preciso escrever esse nome aqui mesmo, que é J consulta para apontar um ponto para Dot J us e precisamos
disso traço.
Então eu vou copiá-lo e apenas definir a origem para um ponto de consulta 2. 1. 4.
J.
Sim e contanto que este arquivo que o demo J Curry envelheceu no mesmo lugar que Jay Querrey 2. 1 14: 4 devemos ser
bons.
Então, vou salvá-lo e abri-lo no navegador e atualizar.
Se abrimos o console, podemos digitar a palavra J Query e clicar em Enter.
E se não tivermos um erro que nos diga que a consulta foi adicionada corretamente à nossa aplicação.
javascript da biblioteca para que não os confundamos e não desordenamos nosso diretório estrutura, portanto não é obrigatória.
Então, uma maneira melhor de estruturar isso é realmente colocá-los em um diretório separado chamado de lib
apenas para que possamos separar nossos próprios arquivos de javascript dos arquivos de
Como você viu, tínhamos uma consulta Jay trabalhando.
Mas uma maneira melhor de fazê-lo é fazer um diretório e podemos chamar isso de nada.
Você poderia chamar J-curve se você quisesse.
Eu vou com lib e então eu preciso mudar meu link aqui.
Minha fonte para ser crítica da libra Jay consulta correu para apontar um ponto quatro e eu vou fazer o meu.
Sim e você não precisa fazer isso.
Não existe diferença na funcionalidade.
A única diferença é que isso é mais rápido para carregar, mas preciso ter aquele aqui.
Então, para reiterar, não precisamos de ambos.
Nós só precisamos de um e precisamos ligar a esse corretamente.
Então vamos verificar se isso funcionou.
Se eu atualizar a taxa que funciona bem.
Você pode digitar consulta J e também podemos digitar sinal de dólar e, se o trabalho que conhecemos, essa consulta
de folha está corretamente instalada.
Então, essa é a primeira maneira de baixar uma consulta localmente e, em seguida, associá-la à tag de script.
Há outra opção, porém, que é usar um CD no CD e representa a rede distribuída em conteúdo e
pensa nisso como apenas uma maneira de pegar um arquivo online, sem realmente ter que fazer o
download para sua máquina.
Então, eu vou te mostrar se nós apenas copiamos esse você Arel aqui mesmo, o que acontece de ser AJ queery CDN para a
versão 2. 0 1. 4.
E se eu apenas for para você, você verá que é apenas o arquivo J Corey aqui.
que há muitos deles on-line e que funcionará da mesma maneira que o link para o arquivo aqui localmente.
O que podemos fazer é vincular a este você Arel ou qualquer outro CD de J queery e você sabe
A única diferença é que isso realmente irá carregar um pouco mais rápido porque é
local no nosso computador e, se o substituímos pelo CD, não será perceptível para nós.
Mas, sob o capô, demora um pouco mais, é claro, é muito mais fácil e simples de
usar porque não precisamos baixar uma cópia da consulta Jay para cada aplicativo que fazemos.
Então eu vou atualizar.
E se nós digitarmos J consulta aqui ainda deve funcionar e isso acontece.
Por fim, vou mostrar-lhe como encontrei esse CDN.
Basta abrir uma nova guia e procurar Cdn Jay queery e se apenas pesquisarmos o Cdn e depois qualquer
outra biblioteca que veja alguns outros mais tarde.
Mike J consulta.
Você verá que temos um monte de links.
Então, a consulta Jay tem uma versão oficial.
Há o Cdn dodge city NJ s dot com e temos um monte de você ou então aqui que podemos copiar.
Teríamos que prestar atenção à versão, então isso é para 3. 00.
Se vamos para 2. 20 ponto 4 nos dá uma descompactar a versão normal e uma versão modificada.
E apenas para mostrar se eu vou para você, você está bem.
Eu os vejo em um arquivo.
Então, para encerrar.
De qualquer maneira, funciona.
Precisamos de uma tag de script em ambos os casos, mas a fonte será um arquivo local ou um arquivo hospedado
em algum lugar em que estamos vinculando o uso de um CDN.
A última coisa que você quer fazer é dar uma rápida prévia de 30 segundos do que ela parece.
Então, aqui está um pouco do que a consulta J parece.
A primeira coisa que você pode notar é que há um sinal de dólar sendo usado em quatro lugares diferentes.
Nós temos um monte de métodos como o Dom clicar que ver o ponto SS desaparecer.
Então, o que esse código realmente fará é selecionar um botão com gatilho ID e quando é clicado, ele
executa todo esse código e, quando for clicado, vamos mudar a cor de fundo do corpo para ser amarelo.
Vamos desvanecer todas as imagens na página.
Vai demorar 3 segundos para desvanecer-se e, em seguida, quando o desvanecimento for concluído, vamos
remover essas três imagens da página.
Então, clique no botão com o disparador IDF.
Mude a cor do corpo desaparecer imagens em três segundos e, em seguida, remova as imagens quando terminarem.
Tudo bem, então a previsão de velocidade de uma consulta foi essa.
Agora vamos começar a escrever alguns no próximo vídeo.