JavaScript a jQuery: kluczowe różnice, które musisz znać

JavaScript i JQuery znamy od kilku lat. JavaScript został wynaleziony wcześniej niż jQuery. Oba są potężne i są używane w tworzeniu stron internetowych i są używane w tym samym celu, tj. Do tworzenia interaktywnej i dynamicznej strony internetowej. Innymi słowy, ożywiają strony internetowe. Ludzie mogą się zastanawiać, czy jeśli są one używane w tym samym celu, to dlaczego te dwa oddzielne pojęcia? W tym artykule JavaScript vs jQuery dowiemy się, która jest lepsza od innych w następującej kolejności:

• JavaScript: potężny język w tworzeniu stron internetowych
• JQuery: biblioteka stworzona z JavaScript
• Dlaczego powstaje JQuery i jakie są specjalne możliwości JQuery
• Różnica między JavaScript a JQuery z przykładami
  • Dodanie JavaScript i JQuery do naszego dokumentu HTML
  • Przemieszczanie i manipulowanie DOM
  • Obsługa zdarzeń
  • Połączenia Ajax
  • Animacja

JavaScript: potężny język w tworzeniu stron internetowych

JavaScript to język skryptowy używany do dodawania interaktywności do naszych stron internetowych. Jest to jedna z trzech podstawowych technologii, obok HTML i CSS, które są używane do tworzenia stron internetowych. Podczas gdy HTML i CSS definiują strukturę strony internetowej i wygląd / styl stron internetowych, JavaScript jest używany do nadawania dynamiki stronie internetowej poprzez dodanie do niej interaktywności, co oznacza, że ​​w JavaScript możemy dodać kod do kliknięcia myszą, najechania myszą i innych wydarzenia na stronie internetowej i wiele więcej.

JavaScript jest obsługiwany przez wszystkie przeglądarki internetowe, a przeglądarki internetowe mają wbudowany silnik JavaScript do identyfikacji kodu JavaScript i pracy z nim. Tak więc JavaScript jest głównie językiem po stronie klienta. Jest to jeden język, który może być używany jako język proceduralny, a także jako język obiektowy oparty na prototypach. Kiedy używamy podstawowego JavaScript, pracujemy z językiem proceduralnym, podczas gdy zaawansowany JavaScript wykorzystuje koncepcje zorientowane obiektowo.

Przejdźmy dalej, porównując JavaScript z jQuery i zapoznajmy się z biblioteką opracowaną na podstawie JavaScript.

jQuery: biblioteka stworzona z JavaScript

Przez lata JavaScript okazał się potężnym językiem do tworzenia stron internetowych. Istnieje wiele bibliotek i frameworków, które powstały na bazie JavaScript. Te biblioteki i frameworki zostały opracowane w celu rozszerzenia możliwości JavaScript, robienia z nim wielu rzeczy, a także ułatwienia pracy programisty.

jQuery to jedna z takich bibliotek JavaScript, która jest z niego zbudowana. Jest to najpopularniejsza biblioteka JavaScript wymyślona przez Johna Resign i została wydana w styczniu 2006 roku w BarCamp NYC. jQuery jest bezpłatną biblioteką typu open source, na licencji MIT. Ma to potężną funkcję kompatybilności z różnymi przeglądarkami. Z łatwością radzi sobie z problemami z różnymi przeglądarkami, które możemy napotkać dzięki JavaScript. Dlatego wielu programistów używa jQuery, aby uniknąć problemów ze zgodnością między przeglądarkami.

Przejdźmy teraz do naszego bloga JavaScript i jQuery i zobaczmy, dlaczego stworzono jQuery.

czy możesz rzucić double na int

Dlaczego powstaje jQuery i jakie są specjalne możliwości jQuery?

W JavaScript musimy napisać dużo kodu dla podstawowych operacji, podczas gdy w jQuery te same operacje można wykonać za pomocą jednej linii kodu. Dlatego programiści uważają, że łatwiej jest pracować z jQuery niż z JavaScript.

• Chociaż JavaScript jest podstawowym językiem, z którego wyewoluował jQuery, jQuery sprawia, że ​​obsługa zdarzeń, manipulacja DOM, wywołania Ajax są dużo łatwiejsze niż JavaScript. jQuery pozwala nam również dodawać animowane efekty na naszej stronie internetowej, co wymaga dużo bólu i linii kodu za pomocą JavaScript.
• jQuery ma wbudowane wtyczki do wykonywania operacji na stronie internetowej. Musimy tylko dołączyć lub zaimportować wtyczkę na naszej stronie internetowej, aby z niej skorzystać. W ten sposób wtyczki pozwalają nam tworzyć abstrakcje animacji i interakcji lub efektów.
• Możemy również stworzyć naszą niestandardową wtyczkę za pomocą jQuery. Jeśli wymagamy, aby animacja na stronie była wykonana w określony sposób, możemy opracować wtyczkę zgodnie z wymaganiami i użyć jej na naszej stronie internetowej.
• jQuery ma również bibliotekę widżetów interfejsu użytkownika wysokiego poziomu. Ta biblioteka widżetów zawiera całą gamę wtyczek, które możemy zaimportować na naszej stronie i wykorzystać do tworzenia przyjaznych dla użytkownika stron internetowych.

Zrozummy różnicę.

JavaScript a jQuery

Przechodząc dalej z różnicą między JavaScript i jQuery z przykładem.

JavaScript vs jQuery z przykładami

Przyjrzyjmy się przykładom.

Dodanie JavaScript i jQuery do naszego dokumentu HTML

JavaScript jest dodawany bezpośrednio w dokumencie HTML wewnątrz tagu lub zewnętrzny plik JavaScript można dodać do dokumentu HTML za pomocą atrybutu src.
Napisane bezpośrednio w tagu skryptu:

alert („To okno alertu zostało wywołane ze zdarzeniem onload”)

Aby skorzystać z jQuery, pobieramy plik z jego strony internetowej i odnosimy ścieżkę do pobranego pliku jQuery w atrybucie src tagu SCRIPT lub możemy go pobrać bezpośrednio z CDN (Content Delivery network).

Korzystanie z CDN :

Rozumiemy przemierzanie i manipulacje DOM

Przemieszczanie i manipulowanie DOM

W JavaScript:

Możemy wybrać element DOM w JavaScript przy pomocy metody document.getElementById () lub przy pomocy metody document.querySelector ().

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

lub

document.getElementById („# div1”)

W jQuery:

Tutaj będziemy musieli używać tylko symbolu $ z selektorem w nawiasach.

$ (selector) $ ('# div1') - Selektor to id 'div1' $ ('. div1') - Selektor to klasa 'div1' $ ('p') - Selektor to akapit w Strona HTML

W powyższej instrukcji $ jest znakiem używanym do uzyskania dostępu do jQuery, selektor jest elementem HTML.

Dodawanie stylów w JavaScript:

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

Dodawanie stylów w jQuery:

co to jest język programowania SAS

$ ('# myDiv'). css ('kolor tła', '# FFF')

Selektor #myDiv odnosi się do identyfikatora „myDiv”

Wybór i manipulowanie elementami DOM jest znacznie bardziej zwięzłe w jQuery niż w JavaScript.

Przechodząc do obsługi zdarzeń.

Obsługa zdarzeń

W JavaScript wybieramy element HTML:

document.getElementById ('# button1'). addEventListener ('click', myCallback) function myCallback () {console ('wewnątrz funkcji myCallback')}

Tutaj metoda getElementById () jest używana do wybrania elementu według jego id, a następnie używamy metody addEventListener (), aby dodać detektor zdarzeń do zdarzenia. W tym przykładzie dodajemy funkcję myCallback jako detektor do zdarzenia „click”.

W powyższym przykładzie możemy również użyć funkcji anonimowej:

document.getElementById ('# button1'). addEventListener ('click', function () {console.log ('wewnątrz funkcji')})

Element eventListener można usunąć za pomocą metody removeEventListener ()

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

W jQuery

jQuery ma predefiniowane zdarzenia dla prawie wszystkich akcji DOM. Do akcji możemy użyć określonego zdarzenia jQuery.

$ („P”). Click (function () {// akcja kliknięcia})

Inne przykłady to:

$ („# Button1”). Dblclick (function () {// akcja dla zdarzenia dwukrotnego kliknięcia elementu html o identyfikatorze „button1”}

Metoda „on” JQuery służy do dodawania jednego lub więcej zdarzeń do elementu DOM.

$ („# Button1”). On („click”, function () {// akcja tutaj})

Możemy dodać wiele zdarzeń i wiele programów obsługi zdarzeń za pomocą metody on.

$ („Button1”). On ({click: function () {// akcja tutaj}, dblclick: function () {// akcja tutaj}})

Co najmniej dwa zdarzenia mogą mieć tę samą procedurę obsługi, co poniżej:

$ („# Button1”). On („click dblclick”, function () {// akcja tutaj})

Widzimy więc, że przy mniejszym i zwięzłym kodzie obsługa zdarzeń jest łatwiejsza w jQuery niż w JavaScript.

Przechodząc dalej z połączeniami Ajax.

Połączenia Ajax

W JavaScript

JavaScript użył obiektu XMLHttpRequest do wysłania żądania Ajax do serwera. XMLHttpRequest ma kilka metod wywołania Ajax. Dwie popularne metody to open (metoda, URL, async, user, PSW), send () i send (string).
Najpierw utwórzmy XMLHttpRequest:

pobierz długość tablicy js

var xhttp = new XMLHttpRequest () Następnie użyj tego obiektu do wywołania metody open: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Metoda open wysyła żądanie get do serwera / lokalizacji, wartość true określa, że ​​żądanie jest asynchroniczne. Jeśli wartość jest fałszywa, oznacza to, że żądanie jest synchroniczne.

Wysyłanie prośby o wpis:

var xhttp = new XMLHttpRequest () Następnie użyj tego obiektu, aby wywołać metodę open i wysłać żądanie wiadomości: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Aby wysłać dane z żądaniem, używamy metody setRequestHeader xhttp, aby zdefiniować typ danych do wysłania, a metoda wysyłania przesyła dane w parach klucz / wartość:

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

W jQuery

jQuery ma kilka wbudowanych metod do wykonywania wywołań Ajax. Dzięki tym metodom możemy wywołać dowolne dane z serwera i zaktualizować część strony internetowej danymi. Metody jQuery sprawiają, że wywołanie Ajax jest łatwe.
Metoda jQuery load (): ta metoda pobiera dane z adresu URL i ładuje je do selektora HTML.
$ („P”). Ładowanie (adres URL, dane, wywołanie zwrotne)
Adres URL to lokalizacja wywoływana dla danych, opcjonalny parametr danych to dane (pary klucz / wartość), które chcemy wysłać wraz z wywołaniem, a opcjonalny parametr 'callback' to metoda, którą chcemy wykonać po załadowaniu jest zakończony.

Metody jQuery $ .get () i $ .post (): Ta metoda pobiera dane z adresu URL i ładuje je do selektora HTML.
$ .get (adres URL, wywołanie zwrotne)
Adres URL to lokalizacja wywoływana dla danych, a wywołanie zwrotne to metoda, którą chcemy wykonać po zakończeniu ładowania.

$ .post (adres URL, dane, wywołanie zwrotne)
Adres URL to lokalizacja wywoływana dla danych, dane to para / i klucz / wartość, które chcemy wysłać wraz z wywołaniem, a wywołanie zwrotne to metoda, którą chcemy wykonać po zakończeniu ładowania. Tutaj parametry danych i wywołania zwrotnego są opcjonalne.

Wywołania jQuery Ajax są bardziej zwięzłe niż JavaScript. W JavaScript używamy obiektu XMLHTTPRequest, w jQuery nie musimy używać takiego obiektu.

Przechodząc dalej z animacją.

Animacja

W JavaScript

JavaScript nie ma określonej funkcji animacji, takiej jak funkcja jQuery animate (). W JavaScript efekt animacji uzyskuje się głównie poprzez manipulowanie stylem elementu lub użycie właściwości transformacji, translacji lub animacji CSS. JavaScript używa również metod setInterval (), clearInterval (), setTimeout () i clearTimeout () do tworzenia efektów animacji.

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

Animacja w JavaScript polega głównie na manipulowaniu właściwościami CSS.

W jQuery

jQuery ma wiele wbudowanych metod dodawania animacji lub efektów do elementów HTML. Sprawdźmy kilka z nich.
Metoda animate (): ta metoda służy do dodawania animacji do elementu.

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

Metoda show (): ta metoda służy do uwidocznienia elementu ze stanu ukrytego.

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

Metoda hide (): ta metoda służy do ukrywania elementu przed stanem widoczności.

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

jQuery ma własne metody tworzenia animacji i efektów na stronie internetowej.

Podsumowując, JavaScript to język do tworzenia stron internetowych, jQuery to biblioteka, która wywodzi się z JavaScript. JavaScript i jQuery mają swoje znaczenie w tworzeniu stron internetowych.

Teraz, gdy wiesz już o pętlach JavaScript, zapoznaj się z przez Edureka. Szkolenie z zakresu certyfikacji w zakresie rozwoju sieci pomoże Ci nauczyć się, jak tworzyć imponujące strony internetowe przy użyciu HTML5, CSS3, Twitter Bootstrap 3, jQuery i interfejsów API Google oraz wdrażać je w usłudze Amazon Simple Storage Service (S3).

Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy „JavaScript vs jQuery”, a my skontaktujemy się z Tobą.