Jó néhány éve ismerjük a JavaScriptet és a JQuery-t. A JavaScript-et korábban találták ki, mint a jQuery. Mindkettő erőteljes, és a webfejlesztésben használják, és ugyanarra a célra használják, azaz a weboldal interaktívvá és dinamikussá tételéhez. Más szavakkal, életet keltenek a weboldalakon. Az emberek elgondolkodhatnak azon, hogy ha ugyanazon célra használják őket, akkor miért éppen ez a két különálló fogalom? Ebben a JavaScript vs jQuery cikkben a következő sorrendben megtudhatjuk, hogy melyik jobb a másiknál:
- JavaScript: hatékony nyelv a webfejlesztésben
- JQuery: JavaScript-ből kifejlesztett könyvtár
- Miért jön létre a JQuery és mik a JQuery speciális képességei?
- Különbség a JavaScript és a JQuery között példákkal
JavaScript: hatékony nyelv a webfejlesztésben
A JavaScript egy szkriptnyelv, amelyet arra használnak, hogy interaktivitást adjon hozzá weboldalainkhoz. Ez a három alapvető technológia egyike a HTML és CSS mellett, amelyeket weboldalak létrehozására használnak. Míg a HTML és a CSS meghatározza a weboldal struktúráját és a weboldalak kinézetét / stílusát, addig a JavaScript-et használják a weboldal dinamikussá tételére interaktivitás hozzáadásával, ami azt jelenti, hogy a JavaScript segítségével hozzáadhatunk néhány kódot az egérkattintáshoz, az egérrel való egérmutatáshoz és más események a weboldalon és még sok más.
Az összes webböngésző támogatja a JavaScript-et, és a webböngészők beépített JavaScript-motorral rendelkeznek a JavaScript-kód azonosításához és a vele való együttműködéshez. Így a JavaScript elsősorban ügyféloldali nyelv. Ez egy olyan nyelv, amely eljárási nyelvként, valamint prototípus-alapú objektum-orientált nyelvként is használható. Az elsődleges JavaScript használatakor az eljárási nyelvvel dolgozunk, míg a fejlett JavaScript objektum-orientált fogalmakat használ.
Menjünk tovább a JavaScript vs jQuery szolgáltatásunkkal, és értsük meg a JavaScript-ből kifejlesztett könyvtárat.
jQuery: JavaScript-ből kifejlesztett könyvtár
Az évek során a JavaScript a webfejlesztés hatékony nyelvének bizonyult. Sok olyan könyvtár és keretrendszer jött létre, amelyek a JavaScript tetejére épülnek. Ezeket a könyvtárakat és keretrendszereket úgy fejlesztették ki, hogy bővítsék a JavaScript képességeit, sok mindent végezzenek vele, és megkönnyítsék a fejlesztő munkáját.
tolmács írása java nyelven
A jQuery egy ilyen JavaScript könyvtár, amely abból épül fel. Ez a legnépszerűbb JavaScript könyvtár, amelyet John Resign talált ki, és 2006. januárjában jelent meg a BarCamp NYC-n. A jQuery ingyenes, nyílt forráskódú könyvtár, az MIT licenc alapján licencelt. Ez a böngészők közötti kompatibilitás hatékony tulajdonságával rendelkezik. Könnyen kezelheti a böngészőkön átívelő problémákat, amelyekkel a JavaScript-sel szembesülhetünk. Így sok fejlesztő használja a jQuery-t a böngészők közötti kompatibilitási problémák elkerülése érdekében.
Most lépjünk tovább a JavaScript vs jQuery blogunkra, és nézzük meg, miért jött létre a jQuery.
Miért jön létre a jQuery, és mik a jQuery speciális képességei?
A JavaScript-ben sok kódot kell írnunk az alapvető műveletekhez, míg a jQuery használatával ugyanazok a műveletek elvégezhetők egyetlen kódsorral. Ezért a fejlesztők könnyebben dolgoznak a jQuery-vel, mint a JavaScript-szel.
- Bár a JavaScript az alapnyelv, amelyből a jQuery fejlődött, a jQuery megkönnyíti az eseménykezelést, a DOM-manipulációt, az Ajax sokkal könnyebben hív, mint a JavaScript. A jQuery lehetővé teszi számunkra, hogy animált effektusokat adjunk hozzá weboldalunkhoz, ami sok fájdalmat és kódsorokat igényel a JavaScript-sel.
- A jQuery beépített beépülő modulokkal rendelkezik egy weboldalon végzett műveletek végrehajtására. Csak be kell illesztenünk vagy be kell importálnunk a bővítményt a weboldalunkba, hogy használhassuk. Így a beépülő modulok lehetővé teszik az animációk és az interakciók vagy effektek absztrakcióinak létrehozását.
- A jQuery segítségével elkészíthetjük egyedi bővítményünket is. Ha megköveteljük, hogy egy animációt egy weboldalon bizonyos módon végezzenek, akkor a követelményeknek megfelelően kifejleszthetünk egy beépülő modult, és felhasználhatjuk azt a weboldalunkon.
- A jQuery rendelkezik egy magas szintű felhasználói felületű widget könyvtárral is. Ebben a widget könyvtárban számos beépülő modul található, amelyeket importálhatunk a weboldalunkra, és felhasználhatunk felhasználóbarát weboldalak létrehozására.
Értsük meg a különbséget.
JavaScript vs jQuery
| Jellemzők | JavaScript | jQuery |
| Létezés | A JavaScript független nyelv, és létezhet önmagában is. | A jQuery egy JavaScript könyvtár. Nem lett volna feltalálva, ha a JavaScript nincs meg. A jQuery továbbra is függ a JavaScript-től, mivel azt a böngészőbe épített JavaScript-motornak át kell alakítania a JavaScript értelmezéséhez és futtatásához. |
| Nyelv | Ez egy magas szinten értelmezett kliensoldali szkriptnyelv. Ez az ECMA szkript és a DOM (Document Object Model) kombinációja | Ez egy könnyű JavaScript könyvtár. Csak a DOM rendelkezik |
| Kódolás | A JavaScript több kódsort használ, mivel saját kódot kell írnunk | A jQuery kevesebb kódsort használ, mint a JavaScript ugyanahhoz a funkcionalitáshoz, mint ahogy a kód már be van írva a könyvtárába, csak importálnunk kell a könyvtárat, és a könyvtárunkban a könyvtár megfelelő funkcióját / módszerét kell használnunk. |
| Használat | A JavaScript kódot egy HTML oldal szkript címkéjébe írják | A használat érdekében be kell importálnunk a jQuery-t a CDN-ből, vagy egy olyan helyről, ahova a jQuery könyvtár letölthető. A jQuery kód szintén be van írva a HTML oldal szkript címkéjébe. |
| Animációk | Animációkat készíthetünk JavaScript-ben, sok kódsorral. Az animációkat főleg egy Html oldal stílusának manipulálásával készítik el. | A jQuery-ben kevesebb kódsorral könnyedén hozzáadhatunk animációs effektusokat. |
| Felhasználóbarátság | A JavaScript nehézkes lehet a fejlesztő számára, mivel számos kódsorra lehet szükség a funkcionalitás eléréséhez | A jQuery felhasználóbarátabb, mint a JavaScript, kevés kódsorral |
| Böngészők közötti kompatibilitás | A JavaScript-ben előfordulhat, hogy a böngészők közötti kompatibilitással külön kód vagy egy megoldás megírásával kell megküzdenünk. | A jQuery több böngészővel kompatibilis. Nem kell attól tartanunk, hogy bármilyen megoldást vagy extra kódot írunk, hogy kompatibilis legyen a kódunk egy böngészővel. |
| Teljesítmény | A tiszta JavaScript gyorsabb lehet a DOM kiválasztásához / kezeléséhez, mint a jQuery, mivel a JavaScriptet közvetlenül a böngésző dolgozza fel. | A jQuery-t JavaScript-be kell konvertálni, hogy egy böngészőben fusson. |
| Eseménykezelés, interaktivitás és Ajax hívások | Mindezek elvégezhetők JavaScript-ben, de előfordulhat, hogy sok kódsort kell írnunk. | Mindezeket a jQuery segítségével könnyebben meg lehet valósítani kevesebb kódsorral. A jQuery-ben könnyebb interaktivitást, animációkat hozzáadni, és ajax hívásokat is kezdeményezni, mivel a függvények már előre vannak meghatározva a könyvtárban. Csak a szükséges helyeken használjuk ezeket a függvényeket a kódunkban. |
| Bőbeszédűség | A JavaScript bőbeszédű, mivel sok kódsort kell írni a funkcionalitáshoz | A jQuery tömör és kevesebb kódsort használ, néha csak egy kódsort. |
| Méret és súly | Nyelv lévén nehezebb, mint a jQuery | Könyvtár lévén könnyű. Kódjának egy aprócska változata van, ami könnyűvé teszi. |
| Újrafelhasználhatóság és karbantarthatóság | A JavaScript kód bőbeszédű lehet, ezért nehéz fenntartani és újrafelhasználni. | Kevesebb kódsorral a jQuery jobban karbantartható, mivel csak meg kell hívnunk a jQuery könyvtár előre definiált függvényeit a kódunkban. Ez arra is késztet bennünket, hogy a jQuery függvényeket könnyen újra felhasználhassuk a kód különböző helyein. |
Továbblépve a JavaScript és a jQuery közötti különbséggel a Példa segítségével.
JavaScript vs jQuery példákkal
Vizsgáljuk meg a példákat.
JavaScript és jQuery hozzáadása HTML dokumentumunkba
A JavaScript közvetlenül a címke belsejében lévő HTML-dokumentumba kerül, vagy egy külső JavaScript-fájl hozzáadható egy HTML-dokumentumba az src attribútum használatával.
Közvetlenül a szkript címkéjébe írva:
riasztás ('Ezt a riasztási mezőt az onload esemény hívta meg')A jQuery használatához letöltjük a fájlt a weboldaláról, és a letöltött jQuery fájl elérési útját a SCRIPT tag src attribútumába utaljuk, vagy közvetlenül megszerezhetjük a CDN-től (Content delivery network).
A CDN használata :
Értsük meg a DOM bejárását és a manipulációt
DOM bejárása és manipulálása
JavaScript-ben:
Kiválaszthatunk egy DOM elemet a JavaScript-ben a document.getElementById () módszerrel vagy a document.querySelector () módszerrel.
var mydiv = document.querySelector (“# div1”)
vagy
document.getElementById (“# div1”)
A jQuery-ben:
Itt csak a $ szimbólumot kell használni a zárójelben lévő választóval.
java hogyan kell használni az iterátort
$ (selector) $ (“# div1”) - A választó azonosítója: “div1” $ (“. div1”) - A választó egy osztály: “div1” $ (“p”) - A választó a bekezdés a HTML oldal
A fenti utasításban a $ egy olyan jel, amelyet a jQuery elérésére használnak, a választó egy HTML elem.
Stílusok hozzáadása a JavaScript-ben:
document.getElementById ('myDiv'). style.backgroundColor = '# FFF'Stílusok hozzáadása a jQuery-ben:
$ ('# myDiv'). css ('háttérszín', '# FFF')A #myDiv választó a „myDiv” azonosítóra utal
A DOM elem kiválasztása és kezelése sokkal tömörebb a jQuery-ben, mint a JavaScript-ben.
Az eseménykezelés folytatása.
Eseménykezelés
A JavaScript-ben kiválasztunk egy HTML elemet:
document.getElementById ('# button1'). addEventListener ('click', myCallback) függvény myCallback () {konzol („myCallback funkción belül”)}Itt a getElementById () metódust használjuk az elem azonosító alapján történő kiválasztására, majd az addEventListener () metódussal hozzáadunk egy eseményfigyelőt az eseményhez. Ebben a példában hozzáadjuk a myCallback függvényt hallgatóként a „click” eseményhez.
A fenti példában használhatunk egy névtelen függvényt is:
document.getElementById ('# button1'). addEventListener ('click', function () {console.log ('a függvény belsejében')})Az eventListener eltávolítható az removeEventListener () módszerrel
document.getElementById (“# button1”). removeEventListener (“click”, myCallback)
A jQuery-ben
A jQuery előre definiált eseményeket szinte az összes DOM-művelethez. Használhatjuk az adott jQuery eseményt egy művelethez.
$ („P”). Click (function () {// click action})További példák:
$ (“# Button1”). Dblclick (function () {// művelet a dupla kattintású eseményhez a html elemen, azonosítója: “button1”}A JQuery ‘on’ módszerrel egy vagy több esemény hozzáadható egy DOM elemhez.
$ (“# Button1”). On (“click”, function () {// művelet itt})Hozzáadhatunk több eseményt és több eseménykezelőt a on módszerrel.
$ (“Button1”). On ({click: function () {// action here}, dblclick: function () {// action here}})Két vagy több eseménynek ugyanaz a kezelője lehet, mint az alábbiakban:
$ (“# Button1”). On (“click dblclick”, function () {// művelet itt})Így azt látjuk, hogy kisebb és tömör kóddal az jQuery-ben az események kezelése könnyebb, mint a JavaScript-ben.
Továbblépés az Ajax hívásokkal.
Ajax hívások
JavaScript-ben
A JavaScript XMLHttpRequest objektummal küldött Ajax-kérést egy szerverre. Az XMLHttpRequest számos módszerrel rendelkezik az Ajax hívás kezdeményezésére. A két általános módszer nyitott (metódus, URL, aszinkron, felhasználó, PSW), send () és send (string).
Először hozzunk létre egy XMLHttpRequest-et:
var xhttp = new XMLHttpRequest () Ezután használja ezt az objektumot az open metódus meghívására: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()Az open módszer lekérési kérelmet küld egy szerverhez / helyre, a true megadja, hogy a kérés aszinkron. Ha az érték hamis, az azt jelenti, hogy a kérés szinkron.
Postai kérelem benyújtása:
var xhttp = new XMLHttpRequest () Ezután használja ezt az objektumot az open metódus meghívására és postai kérelem készítésére: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()Adatok feladásához a kéréssel az xhttp setRequestHeader metódusával definiáljuk a küldendő adatok típusát, és a küldési módszer kulcs / érték párokban küldi az adatokat:
xhttp.setRequestHeader ('Tartalom-típus', 'alkalmazás / x-www-form-urlenkódolt') xhttp.send ('név = Ravi & vezetéknév = Kumar')A jQuery-ben
A jQuery számos beépített módszerrel rendelkezik az Ajax hívások kezdeményezésére. Ezekkel a módszerekkel hívhatunk bármilyen adatot a szerverről, és frissíthetjük az adatokkal a weboldal egy részét. A jQuery módszerek megkönnyítik az Ajax hívását.
A jQuery load () metódus: Ez a módszer lekéri az adatokat egy URL-ből, és betölti az adatokat egy HTML-választóba.
$ („P”). Betöltés (URL, adatok, visszahívás)
Az URL az a hely, amelyet az adatokhoz meg kell hívni, az opcionális adatparaméter az az adat (kulcs / érték pár), amelyet a hívással együtt el akarunk küldeni, és az opcionális „visszahívás” paraméter az a módszer, amelyet a betöltés után végre akarunk hajtani. kész.
A jQuery $ .get () és $ .post () módszer: Ez a módszer lekéri az adatokat egy URL-ből, és betölti az adatokat egy HTML-választóba.
$ .get (URL, visszahívás)
Az URL az a hely, amelyet az adatokhoz meg kell hívni, és a visszahívás az a módszer, amelyet a betöltés befejezése után végre akarunk hajtani.
$ .post (URL, adatok, visszahívás)
Az URL az a hely, amelyet az adatokhoz meg kell hívni, az adatok az a kulcs / érték pár (ok), amelyet el akarunk küldeni a hívással, és a visszahívás az a módszer, amelyet a betöltés befejezése után végre akarunk hajtani. Itt az adat- és visszahívási paraméterek nem kötelezőek.
A jQuery Ajax hívások tömörebbek, mint a JavaScript. A JavaScript-ben XMLHTTPRequest objektumot használunk, a jQuery-ben nem kell ilyen objektumot használnunk.
Továbblépés az animációval.
magyarázza példával a java mvc architektúráját
Élénkség
JavaScript-ben
A JavaScript nem rendelkezik olyan animációs funkcióval, mint a jQuery animate () függvény. A JavaScript-ben az animációs effektus elsősorban az elem stílusának manipulálásával, vagy CSS transzformáció, fordítás vagy tulajdonságok animálása révén érhető el. A JavaScript a setInterval (), a clearInterval (), a setTimeout () és a clearTimeout () metódusokat is használja az animációs effektusokhoz.
setInterval (myAnimation, 4) függvény myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20deg) '}Az animáció a JavaScript-ben elsősorban a CSS tulajdonságainak manipulálásáról szól.
A jQuery-ben
A jQuery számos beépített módszerrel animációkat vagy effektusokat adhat hozzá a HTML elemekhez. Ellenőrizzünk néhányat közülük.
Az animációs () módszer: Ez a módszer animáció hozzáadására szolgál egy elemhez.
$ ('# button1'). kattintson (function () {$ ('# div1') .anim ({magasság: '300px'})})A show () metódus: Ezt a módszert arra használják, hogy egy elem rejtett állapotból látható legyen.
$ ('# button1'). kattintson (function () {$ ('# div1'). show ()})Hide () metódus: Ez a módszer egy elem elrejtésére szolgál egy látható állapotból.
$ ('# button1'). kattintson (function () {$ ('# div1'). hide ()})A jQuery saját módszerekkel állítja elő az animációkat és az effektusokat egy weboldalon.
Összegezve: a JavaScript a webfejlesztés egyik nyelve, a jQuery egy olyan könyvtár, amely a JavaScript-ből származik. A JavaScript és a jQuery saját jelentőséggel bír a webfejlesztésben.
Most, hogy tud a JavaScript hurokról, nézze meg a írta Edureka. A webfejlesztési tanúsítási képzés segít megtanulni, hogyan hozhat létre lenyűgöző weboldalakat a HTML5, CSS3, Twitter Bootstrap 3, jQuery és Google API-k használatával, és telepítheti az Amazon Simple Storage Service (S3) szolgáltatásba.
Van egy kérdésünk? Kérjük, említse meg a „JavaScript vs jQuery” megjegyzés rovatban, és mi kapcsolatba lépünk Önnel.