JavaScript vs jQuery: Principais diferenças que você precisa saber

Conhecemos JavaScript e JQuery há alguns anos. JavaScript foi inventado antes do jQuery. Ambos são poderosos e são usados ​​no desenvolvimento da web e são usados ​​para o mesmo propósito, ou seja, para tornar a página da web interativa e dinâmica. Em outras palavras, eles dão vida às páginas da web. As pessoas podem se perguntar se eles são usados ​​para o mesmo propósito, por que esses dois conceitos separados? Neste artigo JavaScript vs jQuery, descobriremos qual é melhor sobre o outro na seguinte sequência:

• JavaScript: uma linguagem poderosa em desenvolvimento web
• JQuery: uma biblioteca desenvolvida a partir de JavaScript
• Por que o JQuery é criado e quais são os recursos especiais do JQuery
• Diferença entre JavaScript e JQuery com exemplos
  • Adicionando JavaScript e JQuery em nosso documento HTML
  • DOM Traversal e Manipulação
  • Manipulação de eventos
  • Chamadas Ajax
  • Animação

JavaScript: uma linguagem poderosa em desenvolvimento web

JavaScript é uma linguagem de script usada para adicionar interatividade às nossas páginas da web. É uma das três tecnologias principais ao lado de HTML e CSS que são usados ​​para criar páginas da web. Enquanto HTML e CSS definem a estrutura da página da web e aparência / estilo das páginas da web, JavaScript é usado para tornar a página da web dinâmica, adicionando interatividade a ela, o que significa que com JavaScript podemos adicionar algum código para clique do mouse, mouse over e outros eventos na página da web e muito mais.

como classificar uma matriz em ordem crescente c ++

JavaScript é suportado por todos os navegadores da web e os navegadores da web têm um mecanismo de JavaScript integrado para identificar o código JavaScript e trabalhar com ele. Portanto, JavaScript é principalmente uma linguagem do lado do cliente. É uma linguagem que pode ser usada como uma linguagem procedural, bem como uma linguagem orientada a objetos baseada em protótipo. Quando usamos JavaScript primário, estamos trabalhando com a linguagem procedural, enquanto o JavaScript avançado usa conceitos orientados a objetos.

Vamos prosseguir com nosso JavaScript vs jQuery e entender a biblioteca desenvolvida a partir de JavaScript.

jQuery: uma biblioteca desenvolvida a partir de JavaScript

Com o passar dos anos, o JavaScript se tornou uma linguagem poderosa para desenvolvimento web. Existem muitas bibliotecas e estruturas que são criadas com base no JavaScript. Essas bibliotecas e estruturas são desenvolvidas para expandir a capacidade do JavaScript, fazer muitas coisas com ele e também para tornar o trabalho do desenvolvedor mais fácil.

jQuery é uma dessas bibliotecas de JavaScript que é construída a partir dele. É a biblioteca JavaScript mais popular inventada por John Resign e foi lançada em janeiro de 2006 no BarCamp NYC. jQuery é gratuita, uma biblioteca de código aberto, licenciada sob a Licença MIT. Isso tem um recurso poderoso de compatibilidade entre navegadores. Ele pode lidar facilmente com problemas entre navegadores que podemos enfrentar com JavaScript. Assim, muitos desenvolvedores usam jQuery para evitar problemas de compatibilidade entre navegadores.

Agora vamos prosseguir com nosso blog JavaScript vs jQuery e ver por que o jQuery foi criado.

Por que o jQuery é criado e quais são os recursos especiais do jQuery?

Em JavaScript, temos que escrever muitos códigos para operações básicas, enquanto com jQuery as mesmas operações podem ser feitas com uma única linha de código. Portanto, os desenvolvedores acham mais fácil trabalhar com jQuery do que com JavaScript.

• Embora o JavaScript seja a linguagem básica da qual o jQuery evoluiu, o jQuery torna o tratamento de eventos, manipulação de DOM e chamadas Ajax muito mais fáceis do que JavaScript. O jQuery também nos permite adicionar efeitos animados em nossa página da web, o que exige muito trabalho e linhas de código com JavaScript.
• jQuery tem plug-ins embutidos para realizar uma operação em uma página da web. Basta incluir ou importar o plugin em nossa página para usá-lo. Assim, os plug-ins nos permitem criar abstrações de animações e interações ou efeitos.
• Também podemos fazer nosso plugin personalizado com jQuery. Se desejarmos que uma animação seja feita em uma página web de uma certa forma, podemos desenvolver um plugin de acordo com a necessidade e utilizá-lo em nossa página web.
• jQuery também tem uma biblioteca de widgets de UI de alto nível. Esta biblioteca de widgets tem uma grande variedade de plug-ins que podemos importar em nossa página da web e usá-los para criar páginas da web fáceis de usar.

Vamos entender a diferença.

JavaScript vs jQuery

Continuando com a diferença entre JavaScript e jQuery com Exemplo.

JavaScript vs jQuery com exemplos

Vamos examinar os exemplos.

Adicionando JavaScript e jQuery em nosso documento HTML

JavaScript é adicionado diretamente no documento HTML dentro da tag ou um arquivo JavaScript externo pode ser adicionado em um documento HTML usando o atributo src.
Escrito diretamente dentro da tag do script:

alert ('Esta caixa de alerta foi chamada com o evento onload')

Para usar o jQuery, baixamos o arquivo de seu site e consultamos o caminho do arquivo jQuery baixado no atributo src da tag SCRIPT ou podemos obtê-lo diretamente no CDN (Content delivery network).

Usando CDN :

Vamos entender DOM Traversal and Manipulation

DOM Traversal e Manipulação

Em JavaScript:

Podemos selecionar um elemento DOM em JavaScript usando o método document.getElementById () ou usando o método document.querySelector ().

var mydiv = document.querySelector (“# div1”)

ou

document.getElementById (“# div1”)

Em jQuery:

Aqui, teremos que usar apenas o símbolo $ com o seletor entre colchetes.

$ (seletor) $ (“# div1”) - O seletor é um id 'div1' $ (“. div1”) - O seletor é uma classe 'div1' $ (“p”) - O seletor é o parágrafo no Página html

Na declaração acima, $ é um sinal que é usado para acessar jQuery, o seletor é um elemento HTML.

Adicionar estilos em JavaScript:

document.getElementById ('myDiv'). style.backgroundColor = '# FFF'

Adicionando estilos em jQuery:

$ ('# meuDiv'). css ('cor de fundo', '# FFF')

O seletor #myDiv se refere ao identificador 'myDiv'

A seleção e manipulação de elementos DOM são muito mais concisas em jQuery do que em JavaScript.

Continuando com o tratamento de eventos.

Manipulação de eventos

Em JavaScript, selecionamos um elemento HTML:

document.getElementById ('# button1'). addEventListener ('click ”, myCallback) function myCallback () {console (“ dentro da função myCallback ”)}

Aqui, o método getElementById () é usado para selecionar um elemento por seu id, então usamos o método addEventListener () para adicionar um ouvinte de evento ao evento. Neste exemplo, adicionamos a função myCallback como ouvinte do evento ‘click’.

Também podemos usar uma função anônima no exemplo acima:

document.getElementById ('# button1'). addEventListener ('click ”, function () {console.log (“ dentro da função ”)})

O eventListener pode ser removido usando o método removeEventListener ()

document.getElementById (“# button1”). removeEventListener (“click”, myCallback)

Em jQuery

jQuery tem eventos predefinidos para quase todas as ações DOM. Podemos usar o evento jQuery específico para uma ação.

$ (“P”). Click (function () {// click action})

Outros exemplos são:

$ (“# Button1”). Dblclick (function () {// ação para o evento de clique duplo no elemento html com id ‘button1’}

O método JQuery ‘on’ é usado para adicionar um ou mais eventos a um elemento DOM.

$ (“# Button1”). On (“click”, function () {// ação aqui})

Podemos adicionar vários eventos e vários manipuladores de eventos com o método on.

$ (“Button1”). On ({click: function () {// ação aqui}, dblclick: function () {// ação aqui}})

Dois ou mais eventos podem ter o mesmo manipulador conforme abaixo:

$ (“# Button1”). On (“click dblclick”, function () {// ação aqui})

Assim, vemos que, com código menor e conciso, o tratamento de eventos é mais fácil em jQuery do que em JavaScript.

java cria um array de objetos

Continuando com as chamadas Ajax.

Chamadas Ajax

Em JavaScript

JavaScript usou um objeto XMLHttpRequest para enviar uma solicitação Ajax a um servidor. O XMLHttpRequest possui vários métodos para fazer a chamada Ajax. Os dois métodos comuns são open (method, URL, async, user, PSW), send () e send (string).
Vamos criar um XMLHttpRequest primeiro:

var xhttp = new XMLHttpRequest () Em seguida, use este objeto para chamar o método aberto: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

O método aberto faz uma solicitação get para um servidor / local, o verdadeiro especifica que a solicitação é assíncrona. Se o valor for falso, significa que a solicitação é síncrona.

Fazendo uma solicitação de postagem:

var xhttp = new XMLHttpRequest () Em seguida, use este objeto para chamar o método aberto e fazer uma solicitação de postagem: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Para postar dados com a solicitação, usamos o método setRequestHeader de xhttp para definir o tipo de dados a serem enviados e o método send envia os dados em pares chave / valor:

xhttp.setRequestHeader ('Content-type', 'application / x-www-form-urlencoded') xhttp.send ('name = Ravi & surname = Kumar')

Em jQuery

jQuery tem vários métodos embutidos para fazer chamadas Ajax. Com esses métodos, podemos chamar qualquer dado do servidor e atualizar uma parte da página da Web com os dados. Os métodos jQuery tornam a chamada Ajax fácil.
O método jQuery load (): Este método busca dados de um URL e carrega os dados em um seletor HTML.
$ (“P”). Load (URL, dados, callback)
O URL é o local que é chamado para os dados, o parâmetro opcional de dados são os dados (pares de chave / valor) que desejamos enviar junto com a chamada e o parâmetro opcional 'callback' é o método que queremos executar após o carregamento está completo.

O método jQuery $ .get () e $ .post (): Este método busca dados de uma URL e carrega os dados em um seletor HTML.
$ .get (URL, retorno de chamada)
A URL é o local que é chamado para os dados e o retorno de chamada é o método que desejamos executar após a conclusão do carregamento.

$ .post (URL, dados, retorno de chamada)
O URL é o local que é chamado para os dados, os dados são os pares de chave / valor que queremos enviar com a chamada e o retorno de chamada é o método que queremos executar após a conclusão do carregamento. Aqui, os parâmetros de dados e retorno de chamada são opcionais.

As chamadas jQuery Ajax são mais concisas do que JavaScript. Em JavaScript, estamos usando um objeto XMLHTTPRequest, em jQuery não temos que usar tal objeto.

Continuando com a animação.

Animação

Em JavaScript

JavaScript não tem uma função de animação específica como a função jQuery animate (). Em JavaScript, o efeito de animação é obtido principalmente pela manipulação do estilo do elemento ou pelo uso de propriedades CSS transform, translate ou animate. JavaScript também usa os métodos setInterval (), clearInterval (), setTimeout () e clearTimeout () para efeitos de animação.

setInterval (myAnimation, 4) function myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20deg) '}

A animação em JavaScript trata principalmente da manipulação das propriedades CSS.

Em jQuery

jQuery tem muitos métodos embutidos para adicionar animações ou efeitos em elementos HTML. Vamos verificar alguns deles.
O método animate (): este método é usado para adicionar animação a um elemento.

$ ('# button1'). click (function () {$ ('# div1') .animado ({height: '300px'})})

O método show (): Este método é usado para tornar um elemento visível de um estado oculto.

$ ('# button1'). click (function () {$ ('# div1'). show ()})

O método hide (): este método é usado para ocultar um elemento de um estado visível.

$ ('# button1'). click (function () {$ ('# div1'). hide ()})

jQuery tem seus próprios métodos para produzir animação e efeitos em uma página da web.

Resumindo, JavaScript é uma linguagem para desenvolvimento web, jQuery é uma biblioteca originada do JavaScript. JavaScript e jQuery têm sua própria importância no desenvolvimento web.

o que é um certificado de pós-graduação

Agora que você sabe sobre os loops de JavaScript, verifique o por Edureka. O Treinamento de Certificação de Desenvolvimento da Web o ajudará a aprender como criar sites impressionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery e APIs do Google e implantá-lo no Amazon Simple Storage Service (S3).

Tem alguma questão para nós? Mencione isso na seção de comentários de “JavaScript vs jQuery” e entraremos em contato com você.