JavaScript vs jQuery: Klíčové rozdíly, které potřebujete vědět

JavaScript a JQuery známe již několik let. JavaScript byl vynalezen dříve než jQuery. Oba jsou výkonné a používají se při vývoji webu a používají se ke stejnému účelu, tj. K tomu, aby webová stránka byla interaktivní a dynamická. Jinými slovy, oživují webové stránky. Lidé se mohou divit, že pokud jsou používány pro stejný účel, tak proč tyto dva samostatné pojmy? V tomto článku JavaScript vs jQuery zjistíme, která je lepší než ostatní, v následujícím pořadí:

• JavaScript: Silný jazyk pro vývoj webových aplikací
• JQuery: Knihovna vyvinutá z JavaScriptu
• Proč je JQuery vytvořen a jaké jsou speciální možnosti JQuery
• Rozdíl mezi JavaScriptem a JQuery s příklady
  • Přidání JavaScriptu a JQuery do našeho dokumentu HTML
  • Traversal a manipulace DOM
  • Zpracování událostí
  • Ajax volá
  • Animace

JavaScript: Silný jazyk pro vývoj webových aplikací

JavaScript je skriptovací jazyk, který se používá k přidání interaktivity na naše webové stránky. Je to jedna ze tří základních technologií vedle HTML a CSS, které se používají k vytváření webových stránek. Zatímco HTML a CSS definují strukturu webové stránky a vzhled / styl webových stránek, JavaScript se používá k dynamické webové stránce přidáním interaktivity, což znamená, že pomocí JavaScriptu můžeme přidat nějaký kód pro kliknutí myší, přejetí myší a další události na webové stránce a mnoho dalšího.

JavaScript je podporován všemi webovými prohlížeči a webové prohlížeče mají vestavěný modul JavaScript, který identifikuje kód JavaScript a pracuje s ním. JavaScript je tedy hlavně jazykem na straně klienta. Je to jeden jazyk, který lze použít jako procedurální jazyk i jako objektově orientovaný jazyk založený na prototypu. Když používáme primární JavaScript, pracujeme s procedurálním jazykem, zatímco pokročilý JavaScript používá objektově orientované koncepty.

Pojďme dál s naším JavaScript vs jQuery a pochopme knihovnu vyvinutou z JavaScriptu.

jQuery: Knihovna vyvinutá z JavaScriptu

V průběhu let se JavaScript ukázal jako silný jazyk pro vývoj webových aplikací. Existuje mnoho knihoven a frameworků, které se objevily a které jsou postaveny na JavaScriptu. Tyto knihovny a rámce jsou vyvinuty s cílem rozšířit možnosti JavaScriptu, dělat s ním spoustu věcí a také usnadnit práci vývojáře.

jQuery je jedna taková knihovna JavaScriptu, která je z ní vytvořena. Jedná se o nejpopulárnější knihovnu JavaScript, kterou vynalezl John Resign a byla vydána v lednu 2006 v BarCamp NYC. jQuery je bezplatná knihovna s otevřeným zdrojovým kódem licencovaná na základě licence MIT. To má výkonnou funkci kompatibility mezi prohlížeči. Může snadno řešit problémy mezi prohlížeči, kterým můžeme čelit pomocí JavaScriptu. Mnoho vývojářů tak používá jQuery, aby se vyhnulo problémům s kompatibilitou mezi prohlížeči.

Nyní pojďme s naším blogem JavaScript vs jQuery a podívejme se, proč byl jQuery vytvořen.

Proč je jQuery vytvořen a jaké jsou speciální možnosti jQuery?

V JavaScriptu musíme napsat spoustu kódu pro základní operace, zatímco s jQuery lze stejné operace provést pomocí jediného řádku kódu. Proto vývojářům připadá snazší pracovat s jQuery než s JavaScriptem.

• Ačkoli JavaScript je základní jazyk, ze kterého se vyvinul jQuery, jQuery umožňuje zpracování událostí, manipulaci DOM, volání Ajaxu mnohem jednodušší než JavaScript. jQuery nám také umožňuje přidat animované efekty na naši webovou stránku, což vyžaduje spoustu bolesti a řádků kódu pomocí JavaScriptu.
• jQuery má vestavěné doplňky k provádění operací na webové stránce. Abychom jej mohli použít, musíme plugin zahrnout nebo importovat na naši webovou stránku. Pluginy nám tedy umožňují vytvářet abstrakce animací a interakcí nebo efektů.
• Můžeme také vytvořit náš vlastní plugin pomocí jQuery. Pokud požadujeme, aby byla na webové stránce provedena animace určitým způsobem, můžeme podle požadavku vyvinout plugin a použít jej na naší webové stránce.
• jQuery má také knihovnu widgetů UI na vysoké úrovni. Tato knihovna widgetů obsahuje celou řadu pluginů, které můžeme importovat na naši webovou stránku a použít ji k vytváření uživatelsky přívětivých webových stránek.

Pochopme rozdíl.

JavaScript vs jQuery

Pokračujeme rozdílem mezi JavaScriptem a jQuery v příkladu.

JavaScript vs jQuery s příklady

Podívejme se na příklady.

Přidání JavaScriptu a jQuery do našeho dokumentu HTML

JavaScript se přidává přímo do dokumentu HTML uvnitř značky nebo lze do dokumentu HTML přidat externí soubor JavaScriptu pomocí atributu src.
Napsáno přímo uvnitř značky skriptu:

výstraha („Toto výstražné pole bylo voláno s událostí onload“)

Abychom mohli používat jQuery, stáhneme si soubor z jeho webových stránek a odkazujeme na cestu staženého souboru jQuery v atributu src tagu SCRIPT, nebo jej můžeme získat přímo z CDN (Content delivery network).

Pomocí CDN :

Pojďme rozumět procházení DOM a manipulaci

jak se naučit vizuální studio

Traversal a manipulace DOM

V JavaScriptu:

Můžeme vybrat prvek DOM v JavaScriptu pomocí metody document.getElementById () nebo pomocí metody document.querySelector ().

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

nebo

document.getElementById („# div1“)

V jQuery:

Zde budeme muset použít symbol $ pouze se selektorem v závorkách.

$ (selector) $ (“# div1”) - Selektor je id 'div1' $ (“. div1”) - Selektor je třída 'div1' $ (“p”) - Selektor je odstavec v Stránka HTML

Ve výše uvedeném prohlášení je $ znaménko, které se používá pro přístup k jQuery, selektor je prvek HTML.

Přidání stylů v JavaScriptu:

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

Přidání stylů do jQuery:

$ ('# myDiv'). css ('background-color', '# FFF')

Volič #myDiv odkazuje na identifikátor „myDiv“

Výběr a manipulace s prvky DOM je v jQuery mnohem výstižnější než v JavaScriptu.

Pokračujeme v zpracování událostí.

Zpracování událostí

V JavaScriptu vybereme prvek HTML:

document.getElementById ('# button1'). addEventListener ('click', myCallback) funkce myCallback () {console (“inside myCallback function”)}

Zde se metoda getElementById () používá k výběru prvku podle jeho id, pak použijeme metodu addEventListener () k přidání posluchače události k události. V tomto příkladu přidáme funkci myCallback jako posluchače události ‚click '.

Ve výše uvedeném příkladu můžeme také použít anonymní funkci:

document.getElementById ('# button1'). addEventListener ('click', function () {console.log (“inside the function”)})

EventListener lze odebrat pomocí metody removeEventListener ()

document.getElementById („# button1“). removeEventListener („kliknutí“, myCallback)

V jQuery

plat vývojářů Java v Indii

jQuery má předdefinované události pro téměř všechny akce DOM. Pro akci můžeme použít konkrétní událost jQuery.

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

Další příklady jsou:

$ („# Button1“). Dblclick (function () {// akce pro událost dvojitého kliknutí na elementu html s ID „button1“}

Metoda JQuery „on“ se používá k přidání jedné nebo více událostí k prvku DOM.

$ („# Button1“). On („click“, function () {// action here})

Můžeme přidat více událostí a více obslužných rutin událostí pomocí metody on.

$ („Button1“). On ({click: function () {// action here}, dblclick: function () {// action here}})

Dvě nebo více událostí může mít stejnou obslužnou rutinu jako níže:

$ („# Button1“). On („click dblclick“, function () {// action here})

Vidíme tedy, že s menším a stručným kódem je zpracování událostí v jQuery jednodušší než v JavaScriptu.

Pokračujeme v volání Ajaxu.

Ajax volá

V JavaScriptu

JavaScript použil objekt XMLHttpRequest k odeslání požadavku Ajax na server. XMLHttpRequest má několik metod pro volání Ajaxu. Dvě běžné metody jsou open (metoda, URL, asynchronní, uživatel, PSW), send () a send (string).
Nejprve vytvořme XMLHttpRequest:

var xhttp = new XMLHttpRequest () Pak použijte tento objekt k volání otevřené metody: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Otevřená metoda dělá požadavek get na server / umístění, true určuje, že požadavek je asynchronní. Pokud je hodnota false, znamená to, že požadavek je synchronní.

Vytvoření žádosti o příspěvek:

var xhttp = new XMLHttpRequest () Pak použijte tento objekt k volání metody open a proveďte požadavek na příspěvek: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

K odeslání dat s požadavkem používáme metodu setRequestHeader xhttp k definování typu dat, která se mají odeslat, a metoda send odesílá data v párech klíč / hodnota:

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

V jQuery

jQuery má několik vestavěných metod pro volání Ajaxu. Pomocí těchto metod můžeme volat libovolná data ze serveru a aktualizovat část webové stránky o data. Díky metodám jQuery je volání Ajaxu snadné.
Metoda jQuery load (): Tato metoda načte data z adresy URL a načte data do selektoru HTML.
$ („P“). Load (URL, data, zpětné volání)
URL je umístění, které se volá pro data, volitelným datovým parametrem jsou data (páry klíč / hodnota), která chceme odeslat spolu s voláním, a volitelný parametr 'zpětné volání' je metoda, kterou chceme provést po načtení je hotová.

Metoda jQuery $ .get () a $ .post (): Tato metoda načte data z adresy URL a načte data do voliče HTML.
$ .get (URL, zpětné volání)
URL je umístění, které je voláno pro data, a zpětné volání je metoda, kterou chceme provést po dokončení načítání.

$ .post (URL, data, zpětné volání)
URL je umístění, které je voláno pro data, data jsou pár klíč / hodnota, který chceme odeslat s voláním, a zpětné volání je metoda, kterou chceme provést po dokončení načítání. Zde jsou parametry dat a zpětného volání volitelné.

Volání jQuery Ajax jsou stručnější než JavaScript. V JavaScriptu používáme objekt XMLHTTPRequest, v jQuery takový objekt nemusíme používat.

Pokračujeme animací.

Animace

V JavaScriptu

JavaScript nemá konkrétní funkci animace, jako je funkce jQuery animate (). V JavaScriptu se efektu animace dosáhne hlavně manipulací se stylem prvku nebo použitím vlastností CSS transformace, překladu nebo animace. JavaScript také používá metody setInterval (), clearInterval (), setTimeout () a clearTimeout () pro efekty animace.

setInterval (myAnimation, 4) funkce myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20 stupňů) '}

Animace v JavaScriptu je hlavně o manipulaci s vlastnostmi CSS.

V jQuery

jQuery má mnoho vestavěných metod pro přidávání animací nebo efektů na prvky HTML. Podívejme se na pár z nich.
Metoda animate (): Tato metoda se používá k přidání animace k prvku.

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

Metoda show (): Tato metoda se používá k zviditelnění prvku ze skrytého stavu.

Výukový program ms sql pro začátečníky

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

Metoda hide (): Tato metoda se používá ke skrytí prvku z viditelného stavu.

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

jQuery má své vlastní metody pro vytváření animací a efektů na webové stránce.

Stručně řečeno, JavaScript je jazyk pro vývoj webových aplikací, jQuery je knihovna, která pochází z JavaScriptu. JavaScript a jQuery mají ve vývoji webu svůj vlastní význam.

Nyní, když víte o smyčkách JavaScriptu, podívejte se na podle Edureka. Certifikační školení pro vývoj webových aplikací vám pomůže naučit se, jak vytvářet působivé webové stránky pomocí HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a jak je nasadit do služby Amazon Simple Storage Service (S3).

Máte na nás dotaz? Uveďte to prosím v sekci komentářů „JavaScript vs jQuery“ a my se vám ozveme.