JavaScript vs jQuery: Kľúčové rozdiely, ktoré potrebujete vedieť

JavaScript a JQuery poznáme už pekných pár rokov. JavaScript bol vynájdený skôr ako jQuery. Obidve sú účinné a používajú sa pri vývoji webu. Používajú sa na rovnaký účel, tj na interaktivitu a dynamiku webovej stránky. Inými slovami, oživujú webové stránky. Ľudia sa môžu čudovať, že ak sa používajú na rovnaký účel, tak prečo tieto dva samostatné pojmy? V tomto článku venovanom JavaScriptu vs jQuery zistíme, ktorá je v porovnaní s ostatnými lepšia, v nasledujúcom poradí:

• JavaScript: Silný jazyk pri vývoji webu
• JQuery: Knižnica vyvinutá z JavaScriptu
• Prečo je JQuery vytvorený a aké sú špeciálne schopnosti JQuery
• Rozdiel medzi JavaScriptom a JQuery s príkladmi
  • Pridanie JavaScriptu a JQuery do nášho dokumentu HTML
  • Traversal a manipulácia s DOM
  • Spracovanie udalostí
  • Ajax volá
  • Animácia

JavaScript: Silný jazyk pri vývoji webu

JavaScript je skriptovací jazyk, ktorý sa používa na zvýšenie interaktivity našich webových stránok. Je to jedna z troch základných technológií popri HTML a CSS, ktoré sa používajú na tvorbu webových stránok. Zatiaľ čo HTML a CSS definujú štruktúru webovej stránky a vzhľad a štýl webových stránok, pomocou JavaScriptu sa webová stránka stáva dynamickou pridaním interaktivity, čo znamená, že pomocou JavaScriptu môžeme pridať nejaký kód na kliknutie myšou, prejdenie myšou a ďalšie. udalosti na webovej stránke a oveľa viac.

JavaScript je podporovaný všetkými webovými prehľadávačmi a webové prehľadávače majú zabudovaný modul JavaScript na identifikáciu kódu JavaScript a prácu s ním. JavaScript je teda hlavne jazyk na strane klienta. Je to jeden jazyk, ktorý je možné použiť ako procedurálny jazyk, tak aj ako prototyp založený na objektovo orientovanom jazyku. Keď používame primárny JavaScript, pracujeme s procedurálnym jazykom, zatiaľ čo pokročilý JavaScript používa objektovo orientované koncepty.

Poďme ďalej s naším skriptom JavaScript vs jQuery a pochopme knižnicu vyvinutú z JavaScriptu.

jQuery: Knižnica vyvinutá z JavaScriptu

V priebehu rokov sa JavaScript ukázal ako výkonný jazyk pre vývoj webových aplikácií. Existuje veľa knižníc a architektúr, ktoré sú postavené na JavaScripte. Tieto knižnice a rámce sú vyvinuté s cieľom rozšíriť možnosti JavaScriptu, robiť s ním veľa vecí a tiež uľahčiť prácu vývojárom.

jQuery je jedna taká knižnica JavaScriptu, ktorá je z nej vytvorená. Je to najpopulárnejšia knižnica JavaScriptu, ktorú vymyslel John Resign a bola vydaná v januári 2006 v BarCamp NYC. jQuery je bezplatná knižnica typu open-source s licenciou MIT License. Toto má výkonnú funkciu kompatibility medzi rôznymi prehliadačmi. Môže ľahko vyriešiť problémy s rôznymi prehliadačmi, ktorým môžeme čeliť pomocou JavaScriptu. Mnoho vývojárov teda používa jQuery, aby sa vyhlo problémom s kompatibilitou medzi rôznymi prehliadačmi.

Poďme teraz k nášmu blogu JavaScript vs jQuery a pozrime sa, prečo bol jQuery vytvorený.

Prečo je jQuery vytvorený a aké sú špeciálne možnosti jQuery?

V JavaScripte musíme napísať veľa kódu pre základné operácie, zatiaľ čo s jQuery sa dajú rovnaké operácie robiť s jedným riadkom kódu. Preto je vývojárom jednoduchšie pracovať s jQuery ako s JavaScriptom.

• Aj keď je JavaScript základným jazykom, z ktorého sa vyvinul jQuery, jQuery umožňuje manipuláciu s udalosťami, manipuláciu s DOM, Ajax volá oveľa jednoduchšie ako JavaScript. jQuery nám tiež umožňuje pridávať animované efekty na našu webovú stránku, čo vyžaduje veľa bolesti a riadkov kódu pomocou JavaScriptu.
• jQuery má zabudované doplnky na vykonávanie operácií na webovej stránke. Na to, aby sme doplnok mohli používať, musíme ho zahrnúť alebo importovať na našu webovú stránku. Pluginy nám teda umožňujú vytvárať abstrakcie animácií a interakcií alebo efektov.
• Náš vlastný doplnok môžeme vytvoriť aj pomocou jQuery. Ak požadujeme, aby sa na webovej stránke určitým spôsobom vykonala animácia, môžeme podľa požiadaviek vyvinúť doplnok a použiť ho na našej webovej stránke.
• jQuery má tiež knižnicu widgetov UI na vysokej úrovni. Táto knižnica widgetov obsahuje celý rad doplnkov, ktoré môžeme importovať na našu webovú stránku a použiť ju na vytváranie užívateľsky príjemných webových stránok.

Poďme pochopiť rozdiel.

JavaScript vs jQuery

Pokračujeme rozdielom medzi jazykom JavaScript a jQuery v príklade.

JavaScript vs jQuery s príkladmi

Pozrime sa na príklady.

Pridanie JavaScriptu a jQuery do nášho dokumentu HTML

JavaScript sa pridáva priamo do dokumentu HTML vo vnútri značky alebo je možné do dokumentu HTML pridať externý súbor JavaScriptu pomocou atribútu src.
Napísané priamo vo vnútri značky skriptu:

výstraha („Toto výstražné okno bolo volané s udalosťou onload“)

Aby sme mohli používať jQuery, stiahneme si súbor z jeho webovej stránky a odkazujeme na cestu stiahnutého súboru jQuery v atribúte src značky SCRIPT alebo ho môžeme získať priamo z CDN (Content delivery network).

Pomocou CDN :

Poďme rozumieť prechádzaniu DOM a manipulácii

dátový typ dátumu v sql

Traversal a manipulácia s DOM

V JavaScripte:

Element DOM môžeme vybrať v JavaScripte pomocou metódy document.getElementById () alebo pomocou metódy document.querySelector ().

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

alebo

document.getElementById („# div1“)

V jQuery:

Tu budeme musieť používať symbol $ iba so selektorom v zátvorkách.

$ (selektor) $ („# div1“) - Selektor je ID „div1“ $ („. div1“) - Selektor je trieda „div1“ $ („p“) - Selektor je odsek v Stránka HTML

Vo vyššie uvedenom výroku je $ znak, ktorý sa používa na prístup k jQuery, selektor je prvok HTML.

Pridávanie štýlov do JavaScriptu:

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

Pridávanie štýlov do jQuery:

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

Selektor #myDiv odkazuje na identifikátor „myDiv“

Výber a manipulácia s prvkami DOM je v jQuery oveľa stručnejší ako v JavaScripte.

Pokračujeme v riešení udalostí.

Spracovanie udalostí

V JavaScripte vyberieme element HTML:

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

Tu sa na výber prvku podľa jeho ID používa metóda getElementById (), potom na pridanie poslucháča udalosti k udalosti použijeme metódu addEventListener (). V tomto príklade pridáme funkciu myCallback ako poslucháča udalosti ‘kliknutie’.

Vo vyššie uvedenom príklade môžeme tiež použiť anonymnú funkciu:

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

EventListener je možné odstrániť pomocou metódy removeEventListener ()

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

V jQuery

ako pristupovať k AWS cli

jQuery má preddefinované udalosti pre takmer všetky akcie DOM. Pre akciu môžeme použiť konkrétnu udalosť jQuery.

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

Ďalšie príklady sú:

$ („# Button1“). Dblclick (function () {// akcia pre udalosť dvojitého kliknutia na html element s id „button1“}

Metóda JQuery „zapnutá“ sa používa na pridanie jednej alebo viacerých udalostí k prvku DOM.

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

Pomocou metódy on môžeme pridať viac udalostí a viac obslužných rutín udalostí.

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

Dve alebo viac udalostí môže mať rovnaký obslužný program ako nižšie:

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

Vidíme teda, že s menším a stručným kódom je spracovanie udalostí v jQuery jednoduchšie ako v JavaScripte.

Pokračujeme v hovoroch Ajaxu.

Ajax volá

V JavaScripte

JavaScript použil objekt XMLHttpRequest na odoslanie žiadosti Ajaxu na server. XMLHttpRequest má niekoľko metód na volanie Ajaxu. Dve bežné metódy sú otvorená (metóda, URL, asynchrónna, užívateľská, PSW), send () a send (string).
Najprv si vytvoríme XMLHttpRequest:

var xhttp = new XMLHttpRequest () Potom pomocou tohto objektu zavolajte otvorenú metódu: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Metóda otvorenia zadáva požiadavku get na server / umiestnenie, hodnota true určuje, že požiadavka je asynchrónna. Ak je hodnota false, znamená to, že požiadavka je synchrónna.

Podanie žiadosti o príspevok:

var xhttp = new XMLHttpRequest () Potom pomocou tohto objektu zavolajte otvorenú metódu a požiadajte o príspevok: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Na zverejnenie údajov s požiadavkou používame metódu setRequestHeader programu xhttp na definovanie typu údajov, ktoré sa majú odoslať, a metóda send odosiela údaje v pároch kľúč / hodnota:

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

V jQuery

jQuery má niekoľko zabudovaných metód na volanie Ajaxu. Pomocou týchto metód môžeme zavolať akékoľvek údaje zo servera a aktualizovať časť webovej stránky pomocou údajov. Metódy jQuery uľahčujú volanie Ajaxu.
Metóda jQuery load (): Táto metóda načíta údaje z adresy URL a načíta ich do selektora HTML.
$ („P“). Načítanie (URL, dáta, spätné volanie)
URL je umiestnenie, ktoré sa volá pre dáta, voliteľným dátovým parametrom sú dáta (páry kľúč / hodnota), ktoré chceme poslať spolu s hovorom a voliteľný parameter 'callback' je metóda, ktorú chceme vykonať po načítaní je dokončená.

Metóda jQuery $ .get () a $ .post (): Táto metóda načíta údaje z adresy URL a načíta ich do selektora HTML.
$ .get (URL, spätné volanie)
URL je umiestnenie, ktoré sa volá pre údaje, a spätné volanie je metóda, ktorú chceme vykonať po dokončení načítania.

$ .post (URL, dáta, spätné volanie)
URL je umiestnenie, ktoré sa volá pre dáta, dáta sú pár kľúč / hodnota, ktorý chceme poslať s volaním, a spätné volanie je metóda, ktorú chceme vykonať po dokončení načítania. Tu sú parametre údajov a spätného volania voliteľné.

Hovory jQuery Ajax sú stručnejšie ako JavaScript. V JavaScripte používame objekt XMLHTTPRequest, v jQuery taký objekt nemusíme používať.

Ďalej s animáciou.

Animácia

V JavaScripte

JavaScript nemá konkrétnu animačnú funkciu, ako je funkcia jQuery animate (). V JavaScripte sa efekt animácie dosahuje hlavne manipuláciou so štýlom prvku alebo použitím vlastností transformácie, prekladu alebo animácie CSS. JavaScript tiež používa metódy setInterval (), clearInterval (), setTimeout () a clearTimeout () pre efekty animácie.

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

Animácia v JavaScripte je hlavne o manipulácii s vlastnosťami CSS.

V jQuery

jQuery má veľa zabudovaných metód na pridávanie animácií alebo efektov k prvkom HTML. Pozrime sa na pár z nich.
Metóda animate (): Táto metóda sa používa na pridanie animácie k prvku.

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

Metóda show (): Táto metóda sa používa na zviditeľnenie prvku zo skrytého stavu.

ako používať súbor v jave -

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

Metóda hide (): Táto metóda sa používa na skrytie prvku pred viditeľným stavom.

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

jQuery má svoje vlastné metódy na vytváranie animácií a efektov na webovej stránke.

Stručne povedané, JavaScript je jazyk pre vývoj webových aplikácií, jQuery je knižnica, ktorá pochádza z jazyka JavaScript. JavaScript a jQuery majú pri vývoji webu svoj vlastný význam.

Teraz, keď viete o cykloch JavaScriptu, sa pozrite na od Edureka. Osvedčenie o školení v oblasti vývoja webu vám pomôže naučiť sa, ako vytvárať pôsobivé webové stránky pomocou rozhraní HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a ako ich nasadiť do služby Amazon Simple Storage Service (S3).

Máte na nás otázku? Uveďte to v sekcii komentárov „JavaScript vs jQuery“ a my sa vám ozveme.