Bem-vindo ao curso da KnowledgeCity em JavaScript avançado. Neste capítulo do nosso curso, veremos jQuery. Vamos falar um pouco primeiro sobre por que você pode querer considerar o uso de jQuery, porque há muitos de bibliotecas JavaScript por aí. O que há de tão bom neste? Bem, em primeiro lugar, é muito popular. Eu li uma estatística outro dia que dizia: 96% de todos os sites que usam JavaScript usam jQuery, que representa mais de 75% de todos os sites. Então, é muito popular. Deve haver uma razão para isso, e, sim, existem razões. Você pode fazer mais com menos código. Em primeiro lugar, manipulando o Document Object Model. Com JavaScript regular, digamos, por exemplo, que eu queria selecionar todos os parágrafos no DOM, Eu faria isso com document.querySelectorAll, por exemplo. Com jQuery, isso é tudo que preciso fazer. E quanto menos código podemos escrever, quanto mais código podemos lançar e ser mais produtivos, e definitivamente queremos isso. Portanto, o jQuery é excelente na manipulação de DOM. Também torna as chamadas AJAX muito mais fáceis do que aspas, o JavaScript regular serviria. E tem uma biblioteca de efeitos bastante grande que aproveita os efeitos do CSS. E a grande coisa é, porque não queremos nos preocupar com isso também, ele abstrai os problemas entre navegadores. jQuery é apenas uma biblioteca, é uma biblioteca bem extensa como você verá quando o instalarmos nesta lição. Mas uma das coisas que faz é que abstrai os problemas entre navegadores, para que não tenhamos que nos preocupar. Nosso código jQuery deve ser executado igualmente bem em qualquer tipo de navegador sem que tenhamos para se preocupar com a maioria das especificações do navegador no mundo. Tendo dito tudo isso, espero que tenhamos feito um caso para onde você está indo estar interessado em fazer isso. Vamos ver como podemos instalar isso. Agora, para este curso, Vou usar o Visual Studio. E este é o Visual Studio completo, Em vez disso, a Community Edition é o que tenho aqui. Então, todas as ferramentas estão disponíveis aqui, você pode fazer o download gratuitamente se não tiver. Agora, eu percebo que há muitos de diferentes lugares para os quais você pode querer escrever jQuery ou de diferentes tecnologias que você está usando junto com ele, então vou mostrar algumas abordagens diferentes aqui e então falaremos sobre o que precisamos fazer para torná-lo especificamente parte do aplicativo que estou executando aqui. Mas antes de tudo, a coisa mais fácil é apenas ir buscá-lo. Podemos ir para jquery.com, tem a documentação lá, exemplos muito bons de como usar isso. Mas você pode baixar o jQuery aqui. A versão atual na época desta gravação é 3.5.1, que é o que vou usar em meus projetos. Se você não quiser instalá-lo diretamente, como acontece com a maioria das bibliotecas de qualquer tipo de popularidade, você também pode usar o CDN. Então você está apenas vinculando a qualquer versão mais próxima de, e com o jQuery eles fornecem essas quatro opções. O descomprimido, o reduzido, o esguio e o magro diminuído. Portanto, dependendo de onde você está em seu projeto, você usaria diferentes aqui. Normalmente, usamos a versão não compactada em tempo de desenvolvimento para que possamos fazer alguma depuração, e o reduzido no tempo de produção para que nosso aplicativo tem mais desempenho, executa mais suavemente e os arquivos são menores. Todo esse tipo de coisa. Se você quiser usar o CDN, você apenas clica nisso e lá está o link do script Posso apenas copiar isso para lá, e como diz, origem cruzada e integridade estão lá para a verificação de SRI. Então, se vou fazer isso, é tudo que preciso ter em qualquer documento em que eu queira disponibilizá-lo. As outras opções, se você estiver usando NPM, que podemos fazer a partir do Visual Studio. O que eu preciso fazer é abrir uma linha de comando aqui, e uma pequena ferramenta legal que tenho para isso, Abra a linha de comando. Esta é uma extensão que você pode adicionar ao Visual Studio. Então, se você não estiver usando o Visual Studio especificamente, não se preocupe muito com esta parte. Mas eu gosto disso como uma extensão e você pode simplesmente adicionar extensões aqui através do menu Extensões. Mas a linha de comando aberta me dá o PowerShell ou meu prompt de comando Dev ou o prompt de comando padrão. E para este, realmente não importa. Mas a coisa boa que eu não tenho me preocupar quando eu fizer isso, é perceber que me coloca bem ali na pasta que preciso estar, porque o que vou fazer bem aqui é apenas instalar o jQuery usando NPM, então Node Package Manager. E o nome do pacote é simplesmente jQuery. E você pode ver disso, parece que não temos o NPM instalado. Bem, isso é muito fácil de consertar. Aqui vamos nós. Você pode obter o Node js e o NPM juntos. Então, vou instalá-lo. E vamos deixar que isso aconteça e voltar em um segundo. Tudo bem, estamos de volta à magia do vídeo. Vamos ver se o NPM está instalado atualmente. Isso é bom, pegamos a documentação. E certificando-se de que o jQuery entre lá, novamente, é uma questão muito simples do pacote é apenas nomeado jQuery e isso deve ter tudo instalado para nós. Então, neste projeto específico, o que isso acabou fazendo por mim estava criando uma pasta de módulos de nó. Agora, se isso está aparecendo esmaecido em seu projeto ou se você não está vendo nada, aqui está como o obtemos no Visual Studio. Em primeiro lugar, queremos ter certeza de que mostra todos os arquivos está mostrando todos os arquivos. E você verá pastas aqui e arquivos que não são realmente considerados parte de sua solução mas eles estão no diretório. Então, se o seu está aparecendo assim, por exemplo, então queremos incluir no projeto lá, para que faça parte do projeto. E é aí que todos os nossos pacotes de nós vão acabar. E é aí que está o jQuery. Agora, para este tipo particular de projeto, Estou fazendo um aplicativo ASP.NET Core. E para este tipo de projeto específico, para que os arquivos estáticos sejam veiculados, Tenho que fazer uma alteração no arquivo startup.cs. Então, novamente, se você não estiver usando o Visual Studio ou a forma de projeto do aplicativo principal de construí-lo, não se preocupe com esta parte, faça com que o NPM instale o jQuery, mas você pode fazer isso e então vá em frente e use-o. Mas para este tipo de aplicativo específico, precisamos desta chamada para usar arquivos estáticos, é apenas algo de que o aplicativo precisa. E estou apenas pegando o caminho raiz do meu aplicativo, anexando a pasta de módulos de nó ali, para que ele sirva ao jQuery desse local específico. Agora, quando eu acabar fazendo isso, então de volta à minha página a fim de obter a referência, ainda é apenas uma referência de script. E a fonte é que nós vamos de módulos de nó para baixo. Então, tínhamos nosso pacote jQuery lá. E, vejamos, acredito que esteja em outra subpasta. Então há dist e vou apenas usar qualquer arquivo jQuery que esteja lá. Então isso seria jQuery.js. Então, qualquer uma dessas formas está bem. No entanto, você deseja colocar esse script lá, o que quer que funcione para você, tudo bem. E vamos testar e ter certeza que realmente temos algo. O que estamos sempre chamando é a função jQuery. E então você pode usar a palavra real, jQuery. Mas o que você provavelmente verá a maioria das pessoas fazendo está usando o cifrão. Então podemos fazer qualquer um desses, tudo bem. Agora existe uma possibilidade que alguma outra biblioteca usaria cifrão como algo significativo. Então, o que você pode fazer então, é basicamente entregar o controle do cifrão para aquela outra biblioteca, se você tiver, e você pode fazer o que é chamado de modo sem conflito. Por exemplo, posso dar o nome que quiser, jq é bastante padrão, e então chamaríamos jquery.noConflict. Então, agora para o resto do que vamos fazer, jq chama a função jQuery e então podemos fazer tudo o que precisamos fazer. Preparado para documentos é algo que você usará com bastante frequência em aplicativos jQuery. Isso é o que funciona quando tudo carrega. Então, eu não preciso de nenhum modo de conflito, Vou simplesmente usar a função jQuery aqui. E o que estamos fazendo é olhar para o objeto de documento e então tudo isso é executado quando o nosso documento carrega. Então, vamos apenas dar um pequeno olá, mundo aqui, e certifique-se de que o método que escolhemos funciona. Vou apenas seguir em frente e usar este CDN por enquanto. E vamos salvar tudo e devemos ter uma página para nós mesmos. Pronto para o hello world mais memorável de todos os tempos? Melhor do que todos os outros que você já viu. Aqui vamos nós. Olá. Veja, está escrito errado, é muito memorável. Nesta lição, vimos uma variedade de maneiras para instalar o jQuery em seu projeto. Fique ligado na próxima lição, veremos mais na função jQuery e o conjunto empacotado de elementos e como usar seletores.
