Alam namin ang JavaScript at JQuery sa loob ng ilang taon. Ang JavaScript ay naimbento nang mas maaga kaysa sa jQuery. Kapwa malalakas at ginagamit sa pagbuo ng web at ginagamit para sa parehong layunin ibig sabihin upang gawing interactive at pabago-bago ang web page. Sa madaling salita, binubuhay nila ang mga web page. Maaaring magtaka ang mga tao na kung ginagamit sila para sa parehong layunin kung gayon bakit ang dalawang magkakahiwalay na konsepto na ito? Sa artikulong ito ng JavaScript vs jQuery, malalaman natin kung alin ang mas mahusay kaysa sa iba pa sa sumusunod na pagkakasunud-sunod:
- JavaScript: Isang malakas na wika sa pag-unlad ng web
- JQuery: Isang library na binuo mula sa JavaScript
- Bakit nilikha ang JQuery at ano ang mga espesyal na kakayahan ng JQuery
- Pagkakaiba sa pagitan ng JavaScript at JQuery sa mga halimbawa
JavaScript: Isang malakas na wika sa pag-unlad ng web
Ang JavaScript ay isang wikang scripting na ginagamit upang magdagdag ng kakayahang maiugnay sa aming mga web page. Ito ay isa sa tatlong pangunahing teknolohiya sa tabi ng HTML at CSS na ginagamit upang lumikha ng mga web page. Habang tinutukoy ng HTML at CSS ang istraktura ng web page at hitsura / istilo ng mga web page, ginagamit ang JavaScript upang gawing pabago-bago ang web page sa pamamagitan ng pagdaragdag ng pagkakakonekta dito na nangangahulugang sa JavaScript maaari kaming magdagdag ng ilang code para sa pag-click sa mouse, mouse at iba pa mga kaganapan sa web page at marami pa.
Sinusuportahan ng JavaScript ang lahat ng mga web browser at ang mga web browser ay mayroong built-in na JavaScript engine upang makilala ang JavaScript code at gumana kasama nito. Kaya, ang JavaScript ay pangunahing wika ng panig ng client. Ito ay isang wika na maaaring magamit bilang isang pamamahala na wika pati na rin ang isang prototype-based na object-oriented na wika. Kapag gumagamit kami ng pangunahing JavaScript nakikipagtulungan kami sa wikang pamproseso habang ang advanced na JavaScript ay gumagamit ng mga konsepto na nakatuon sa object.
Tumuloy tayo sa aming JavaScript vs jQuery at unawain ang library na binuo mula sa JavaScript.
jQuery: Isang library na binuo mula sa JavaScript
Sa paglipas ng mga taon ang JavaScript ay naging isang malakas na wika para sa pag-unlad ng web. Maraming mga silid-aklatan at balangkas na dumating na naitayo sa tuktok ng JavaScript. Ang mga aklatan at balangkas na ito ay binuo upang mapalawak ang kakayahan ng JavaScript, gumawa ng maraming bagay kasama nito at upang gawing mas madali ang trabaho ng nag-develop.
Ang jQuery ay isang tulad ng library ng JavaScript na binuo mula rito. Ito ang pinakatanyag na JavaScript library na naimbento ni John Resign at inilabas noong Enero 2006 sa BarCamp NYC. Ang jQuery ay libre, isang open-source library, na lisensyado sa ilalim ng Lisensya ng MIT. Ito ay may isang malakas na tampok ng pagiging tugma ng cross-browser. Madali nitong mahahawakan ang mga isyu sa cross-browser na maaari nating harapin sa pamamagitan ng JavaScript. Kaya maraming mga tagabuo ang gumagamit ng jQuery upang maiwasan ang mga isyu sa pagiging tugma ng cross-browser.
Ngayon ay magpatuloy tayo sa aming JavaScript vs jQuery blog at tingnan kung bakit nilikha ang jQuery.
Bakit nilikha ang jQuery at ano ang mga espesyal na kakayahan ng jQuery?
Sa JavaScript, kailangan naming magsulat ng maraming code para sa pangunahing mga pagpapatakbo habang sa jQuery ang parehong operasyon ay maaaring magawa sa isang solong linya ng code. Samakatuwid ang mga developer ay mas madaling magtrabaho kasama ang jQuery kaysa sa JavaScript.
- Kahit na ang JavaScript ay ang pangunahing wika mula sa kung saan ang jQuery ay umunlad, Ginagawa ng jQuery ang paghawak ng kaganapan, pagmamanipula ng DOM, tinawag ng Ajax na mas madali kaysa sa JavaScript. Pinapayagan din kami ng jQuery na magdagdag ng mga animated na epekto sa aming web page na tumatagal ng maraming sakit at mga linya ng code gamit ang JavaScript.
- Ang jQuery ay may mga built-in na plugin upang magsagawa ng isang operasyon sa isang web page. Kailangan lang naming isama o i-import ang plugin sa aming webpage upang magamit ito. Sa gayon ang mga plugin ay nagbibigay-daan sa amin upang lumikha ng mga abstraction ng mga animasyon at pakikipag-ugnayan o epekto.
- Maaari rin naming gawin ang aming pasadyang plugin sa jQuery. Kung nangangailangan kami ng isang animasyon na magagawa sa isang web page sa isang tiyak na paraan, makakabuo kami ng isang plugin alinsunod sa kinakailangan at magamit ito sa aming web page.
- Ang jQuery ay mayroon ding isang mataas na antas na UI widget library. Ang library ng widget na ito ay may isang buong saklaw ng mga plugin na maaari naming mai-import sa aming webpage at gamitin ito para sa paglikha ng mga web page na madaling gamitin.
Unawain natin ang pagkakaiba.
Ang JavaScript kumpara sa jQuery
| Mga Tampok | JavaScript | jQuery |
| Ang pagkakaroon | Ang JavaScript ay isang malayang wika at maaaring umiiral nang mag-isa. | Ang jQuery ay isang library ng JavaScript. Hindi ito naimbento kung wala ang JavaScript. Ang jQuery ay nakasalalay pa rin sa JavaScript dahil dapat itong mai-convert sa JavaScript para sa built-in na JavaScript engine ng browser upang bigyang kahulugan at patakbuhin ito. |
| Wika | Ito ay isang mataas na antas na naisalin na wika ng script sa panig ng kliyente. Ito ay isang kumbinasyon ng ECMA script at DOM (Modelong Bagay ng Dokumento) | Ito ay isang magaan na library ng JavaScript. Mayroon lamang itong DOM |
| Coding | Gumagamit ang JavaScript ng maraming mga linya ng code dahil kailangan naming magsulat ng aming sariling code | Gumagamit ang jQuery ng mas kaunting mga linya ng code kaysa sa JavaScript para sa parehong pag-andar tulad ng ang code ay nakasulat na sa library nito, kailangan lang naming i-import ang library at gamitin ang nauugnay na pagpapaandar / pamamaraan ng library sa aming code. |
| Paggamit | Ang JavaScript code ay nakasulat sa loob ng script tag sa isang pahina ng HTML | Kailangan naming i-import ang jQuery mula sa CDN o mula sa isang lokasyon kung saan nai-download ang library ng jQuery upang magamit ito. Ang jQuery code ay nakasulat din sa loob ng script tag sa pahina ng HTML. |
| Mga Animasyon | Maaari kaming gumawa ng mga animasyon sa JavaScript na may maraming mga linya ng code. Pangunahing ginagawa ang mga animasyon sa pamamagitan ng pagmamanipula ng istilo ng isang pahina ng html. | Sa jQuery, maaari kaming madaling magdagdag ng mga effects ng animation na may mas kaunting mga linya ng code. |
| Kabaitan ng gumagamit | Ang JavaScript ay maaaring maging mahirap para sa developer dahil maaari itong tumagal ng isang bilang ng mga linya ng code upang makamit ang isang pagpapaandar | Ang jQuery ay higit na madaling gamitin kaysa sa JavaScript na may ilang mga linya ng code |
| Pagkakatugma sa cross-browser | Sa JavaScript, maaaring makitungo tayo sa pagiging tugma ng cross-browser sa pamamagitan ng pagsulat ng labis na code o isang solusyon. | Ang jQuery ay tugma ang cross-browser. Hindi namin kailangang mag-alala tungkol sa pagsusulat ng anumang pag-aayos o labis na code upang gawing tugma ang aming code sa isang browser. |
| Pagganap | Ang purong JavaScript ay maaaring maging mas mabilis para sa pagpili / pagmamanipula ng DOM kaysa sa jQuery dahil ang JavaScript ay direktang naproseso ng browser. | Ang jQuery ay dapat na mai-convert sa JavaScript upang mapatakbo ito sa isang browser. |
| Pangangasiwa ng kaganapan, Pakikipag-ugnay, at mga tawag sa Ajax | Ang lahat ng ito ay maaaring gawin sa JavaScript ngunit maaaring kailanganin nating magsulat ng maraming mga linya ng code. | Ang lahat ng ito ay maaaring magawa nang madali sa jQuery na may mas kaunting mga linya ng code. Ito ay mas madali sa jQuery upang magdagdag ng pagkakakonekta, mga animasyon at gumawa din ng mga tawag sa ajax dahil ang mga pagpapaandar ay paunang natukoy sa library. Ginagamit lamang namin ang mga pagpapaandar na iyon sa aming code sa mga kinakailangang lugar. |
| Verbosity | Ang JavaScript ay verbose dahil kailangang sumulat ng maraming mga linya ng code para sa isang pagpapaandar | Ang jQuery ay maikli at gumagamit ng mas kaunting mga linya ng code, kung minsan ay isang linya lamang ng code. |
| Laki at Timbang | Ang pagiging isang wika, ito ay mas mabigat kaysa sa jQuery | Ang pagiging isang library, ito ay magaan. Mayroon itong pinaliit na bersyon ng code nito na ginagawang magaan ang timbang. |
| Reusability at Pagpapanatili | Ang JavaScript code ay maaaring maging verbose at samakatuwid ay maaaring maging mahirap upang mapanatili at muling gamitin. | Sa mas kaunting mga linya ng code, ang jQuery ay mas mapapanatili dahil kailangan lang nating tawagan ang mga paunang natukoy na pag-andar sa jQuery library sa aming code. Ginagawa din ito sa amin upang madaling magamit muli ang mga pag-andar ng jQuery sa iba't ibang mga lugar sa code. |
Nagpapatuloy sa pagkakaiba sa pagitan ng JavaScript at jQuery na may Halimbawa.
Ang JavaScript vs jQuery na may mga halimbawa
Hayaan tumingin sa mga halimbawa.
Pagdaragdag ng JavaScript at jQuery sa aming HTML na dokumento
Direktang idinagdag ang JavaScript sa dokumento ng HTML sa loob ng tag o isang panlabas na file na JavaScript ay maaaring idagdag sa isang dokumento na HTML gamit ang katangian ng src.
Direktang nakasulat sa loob ng script tag:
alerto ('Ang kahon ng alerto na ito ay tinawag kasama ang kaganapan ng kargamento')Upang magamit ang jQuery i-download namin ang file mula sa website nito at i-refer ang landas ng na-download na jQuery file sa katangian ng src ng tag na SCRIPT o maaari nating makuha ito nang direkta mula sa CDN (network ng paghahatid ng nilalaman).
Paggamit ng CDN :
php pagkakaiba sa pagitan ng echo at print
Unawain natin ang DOM Traversal at Manipulation
DOM Traversal at Manipulasyon
Sa JavaScript:
Maaari kaming pumili ng isang elemento ng DOM sa JavaScript gamit ang pamamaraan ng document.getElementById () o sa pamamagitan ng paggamit ng pamamaraan ng document.querySelector ().
var mydiv = document.querySelector ('# div1')o
document.getElementById ('# div1')Sa jQuery:
Dito, gagamitin lamang namin ang simbolo na $ sa tagapili sa mga braket.
$ (tagapili) $ (“# div1”) - Ang pumipili ay isang id 'div1' $ (“. div1”) - Ang pumipili ay isang klase na 'div1' $ (“p”) - Ang pumipili ay ang talata sa Pahina ng html
Sa pahayag sa itaas, ang $ ay isang palatandaan na ginagamit upang ma-access ang jQuery, ang selector ay isang elemento ng HTML.
Pagdaragdag ng mga estilo sa JavaScript:
document.getElementById ('myDiv'). style.backgroundColor = '# FFF'Pagdaragdag ng mga estilo sa jQuery:
$ ('# myDiv'). css ('background-color', '# FFF')Ang tagapili ng #myDiv ay tumutukoy sa identifier ng 'myDiv'
Ang pagpili at pagmamanipula ng elemento ng DOM ay mas maikli sa jQuery kaysa sa JavaScript.
Nagpapatuloy sa paghawak ng kaganapan.
Pangangasiwa ng Kaganapan
Sa JavaScript, pumili kami ng isang elemento ng HTML:
document.getElementById ('# button1'). addEventListener ('click ', myCallback) function myCallback () {console (' inside myCallback function ')}Narito ang paraan ng getElementById () na ginagamit upang pumili ng isang elemento sa pamamagitan ng id nito, pagkatapos ay ginagamit namin ang addEventListener () na pamamaraan upang magdagdag ng isang tagapakinig ng Kaganapan sa kaganapan. Sa halimbawang ito, idinagdag namin ang pagpapaandar ng myCallback bilang isang tagapakinig sa kaganapan na 'pag-click'.
Maaari din kaming gumamit ng isang hindi nagpapakilalang pagpapaandar sa halimbawa sa itaas:
document.getElementById ('# button1'). addEventListener ('click ', function () {console.log (' sa loob ng pagpapaandar ')})Maaaring alisin ang eventListener sa pamamagitan ng paggamit ng paraan ng pagtanggalEventListener ()
document.getElementById ('# button1'). alisinEventListener ('click', myCallback)
Sa jQuery
Ang jQuery ay may paunang natukoy na mga kaganapan para sa halos lahat ng mga pagkilos ng DOM. Maaari naming gamitin ang tukoy na kaganapan sa jQuery para sa isang aksyon.
$ (“P”). Click (function () {// click action})Ang iba pang mga halimbawa ay:
$ (“# Button1”). Dblclick (function () {// na aksyon para sa kaganapan ng pag-click sa pag-click sa elemento ng html na may id na ‘button1’}Ang pamamaraang JQuery 'on' ay ginagamit upang magdagdag ng isa o higit pang mga kaganapan sa isang elemento ng DOM.
$ (“# Button1”). On (“click”, function () {// action here})Maaari kaming magdagdag ng maraming mga kaganapan at maraming mga handler ng kaganapan na may sa pamamaraan.
$ (“Button1”). On ({click: function () {// action here}, dblclick: function () {// action here}})Ang dalawa o higit pang mga kaganapan ay maaaring magkaroon ng parehong tagapamahala tulad ng sa ibaba:
$ (“# Button1”). On (“click dblclick”, function () {// action here})Sa gayon nakikita natin na sa mas kaunti at maigsi na code, ang paghawak ng kaganapan ay mas madali sa jQuery kaysa sa JavaScript.
Nagpapatuloy sa Ajax Calls.
Mga Tawag ni Ajax
Sa JavaScript
Gumamit ang JavaScript ng isang XMLHttpRequest na bagay upang magpadala ng isang kahilingan sa Ajax sa isang server. Ang XMLHttpRequest ay may maraming pamamaraan upang matawagan ang Ajax. Ang dalawang karaniwang pamamaraan ay bukas (pamamaraan, URL, async, gumagamit, PSW), ipadala () at ipadala (string).
Lumikha muna tayo ng XMLHttpRequest:
var xhttp = bagong XMLHttpRequest () Pagkatapos ay gamitin ang bagay na ito upang tawagan ang bukas na pamamaraan: xhttp.open ('GET', 'D: //getinfo.txt', totoo) xhttp.send ()Ang bukas na pamamaraan ay gumagawa ng isang kahilingan sa get sa isang server / lokasyon, ang totoong tumutukoy na ang kahilingan ay hindi magkasabay. Kung ang halaga ay mali, nangangahulugan ito na ang kahilingan ay magkasabay.
Gumagawa ng isang kahilingan sa pag-post:
var xhttp = bagong XMLHttpRequest () Pagkatapos ay gamitin ang bagay na ito upang tawagan ang bukas na pamamaraan at gumawa ng isang kahilingan sa post: xhttp.open ('POST', 'D: //postinfo.txt', totoo) xhttp.send ()Upang mag-post ng data gamit ang kahilingan, ginagamit namin ang setRequestHeader na pamamaraan ng xhttp upang tukuyin ang uri ng data na ipapadala at ang paraan ng pagpapadala ay nagpapadala ng data sa mga pares ng key / halaga:
xhttp.setRequestHeader ('Type-content', 'application / x-www-form-urlencoded') xhttp.send ('name = Ravi & apelyido = Kumar')Sa jQuery
Ang jQuery ay may maraming mga nakapaloob na pamamaraan upang tumawag sa Ajax. Sa mga pamamaraang ito, maaari naming tawagan ang anumang data mula sa server at i-update ang isang bahagi ng webpage kasama ang data. Ang mga pamamaraan ng jQuery ay ginagawang madali ang tawag sa Ajax.
Ang jQuery load () na pamamaraan: Ang pamamaraang ito ay kumukuha ng data mula sa isang URL at na-load ang data sa isang tagapili ng HTML.
$ (“P”). Load (URL, data, callback)
Ang URL ay ang lokasyon na kung saan ay tinatawag para sa data, ang opsyonal na parameter ng data ay ang data (key / halaga ng mga pares) na nais naming ipadala kasama ang tawag at ang opsyonal na parameter na 'callback' ay ang pamamaraan na nais naming ipatupad pagkatapos ng pagkarga ay nakumpleto.
Ang jQuery $ .get () at $ .post () na pamamaraan: Ang pamamaraang ito ay kumukuha ng data mula sa isang URL at na-load ang data sa isang tagapili ng HTML.
$ .get (URL, callback)
Ang URL ay ang lokasyon na tinawag para sa data at ang callback ay ang paraan na nais naming ipatupad matapos makumpleto ang pag-load.
$ .post (URL, data, callback)
Ang URL ay ang lokasyon na kung saan ay tinatawag para sa data, ang data ay ang susi / halaga ng pares / s na nais naming ipadala gamit ang tawag at ang callback ay ang paraan na nais naming maisagawa pagkatapos makumpleto ang pag-load. Dito opsyonal ang data at mga parameter ng callback.
Ang mga tawag sa jQuery Ajax ay mas maikli kaysa sa JavaScript. Sa JavaScript, gumagamit kami ng isang XMLHTTPRequest na bagay, sa jQuery hindi namin kailangang gumamit ng gayong object.
Patuloy sa Animation.
Animasyon
Sa JavaScript
Ang JavaScript ay walang isang tukoy na pag-andar ng animation tulad ng jQuery animate () na pagpapaandar. Sa epekto ng animasyon ng JavaScript ay pangunahing nakakamit sa pamamagitan ng pagmamanipula ng estilo ng elemento o sa pamamagitan ng paggamit ng CSS na nagbago, isalin o buhayin ang mga katangian. Gumagamit din ang JavaScript ng setInterval (), clearInterval (), setTimeout () at ang mga clearTimeout () na pamamaraan para sa mga effects ng animasyon.
setInterval (myAnimation, 4) function myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20deg) '}Pangunahin ang animasyon sa JavaScript tungkol sa pagmamanipula ng mga katangian ng CSS.
Sa jQuery
Ang jQuery ay may maraming mga nakapaloob na pamamaraan upang magdagdag ng mga animasyon o epekto sa mga elemento ng HTML. Suriin natin ang ilan sa mga ito.
Ang animate () na pamamaraan: Ang pamamaraang ito ay ginagamit upang magdagdag ng animasyon sa isang elemento.
$ ('# button1'). click (function () {$ ('# div1') .animate ({taas: '300px'})})Paraan ng pagpapakita (): Ginagamit ang pamamaraang ito upang makita ang isang elemento mula sa isang nakatagong estado.
$ ('# button1'). mag-click (function () {$ ('# div1'). ipakita ()})Paraan ng pagtatago (): Ginagamit ang pamamaraang ito upang itago ang isang elemento mula sa isang nakikitang estado.
kung paano tapusin ang isang programa java
$ ('# button1'). mag-click (function () {$ ('# div1'). itago ()})Ang jQuery ay may sariling pamamaraan upang makabuo ng animasyon at mga epekto sa isang webpage.
Sa kabuuan, ang JavaScript ay isang wika para sa pag-unlad ng web, ang jQuery ay isang silid-aklatan na nagmula sa JavaScript. Ang JavaScript at jQuery ay may sariling kahalagahan sa pag-unlad ng web.
Ngayong alam mo na ang tungkol sa mga JavaScript Loops, tingnan ang ni Edureka. Tutulungan ka ng Pagsasanay sa Pagpapatunay ng Pag-unlad sa Web na malaman kung paano lumikha ng mga kahanga-hangang website gamit ang HTML5, CSS3, Twitter Bootstrap 3, jQuery at Google API at i-deploy ito sa Amazon Simple Storage Service (S3).
May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng 'JavaScript vs jQuery' at babalikan ka namin.