JavaScript срещу jQuery: Основни разлики, които трябва да знаете

Ние познаваме JavaScript и JQuery от доста години. JavaScript е изобретен по-рано от jQuery. И двете са мощни и се използват при уеб разработката и се използват за същата цел, т.е.за да направят уеб страницата интерактивна и динамична. С други думи, те носят живот на уеб страниците. Хората може да се чудят, че ако се използват за една и съща цел, защо тези две отделни понятия? В тази статия за JavaScript срещу jQuery ще разберем кое е по-добро от останалото в следната последователност:

• JavaScript: Мощен език в уеб разработката
• JQuery: Библиотека, разработена от JavaScript
• Защо се създава JQuery и какви са специалните възможности на JQuery
• Разлика между JavaScript и JQuery с примери
  • Добавяне на JavaScript и JQuery в нашия HTML документ
  • Преминаване и манипулация на DOM
  • Обработка на събития
  • Обаждания от Аякс
  • Анимация

JavaScript: Мощен език в уеб разработката

JavaScript е скриптов език, който се използва за добавяне на интерактивност към нашите уеб страници. Това е една от трите основни технологии заедно с HTML и CSS, които се използват за създаване на уеб страници. Докато HTML и CSS дефинират структурата на уеб страницата и външния вид / стила на уеб страниците, JavaScript се използва, за да направи уеб страницата динамична, като добави интерактивност към нея, което означава, че с JavaScript можем да добавим код за щракване с мишката, мишка и други събития на уеб страницата и много повече.

JavaScript се поддържа от всички уеб браузъри и уеб браузърите имат вграден JavaScript механизъм за идентифициране на JavaScript кода и работа с него. По този начин JavaScript е предимно клиентски език. Това е един език, който може да се използва като процедурен език, както и като основан на прототип обектно-ориентиран език. Когато използваме първичен JavaScript, ние работим с процедурния език, докато усъвършенстваният JavaScript използва обектно-ориентирани концепции.

Нека да продължим с нашия JavaScript срещу jQuery и да разберем библиотеката, разработена от JavaScript.

jQuery: Библиотека, разработена от JavaScript

През годините JavaScript се оказа мощен език за уеб разработка. Има много създадени библиотеки и рамки, които са изградени върху JavaScript. Тези библиотеки и рамки са разработени, за да разширят възможностите на JavaScript, да правят много неща с него и също така да улеснят работата на разработчика.

какво прави буферираният четец в java

jQuery е една такава библиотека на JavaScript, която е изградена от нея. Това е най-популярната библиотека на JavaScript, измислена от John Resign и издадена на януари 2006 г. в BarCamp NYC. jQuery е безплатна, библиотека с отворен код, лицензирана под лиценза MIT. Това има мощна функция за съвместимост между браузърите. Той може лесно да се справи с проблеми в различни браузъри, с които можем да се сблъскаме с JavaScript. По този начин много разработчици използват jQuery, за да избегнат проблеми със съвместимостта на различни браузъри.

Сега нека продължим с нашия блог JavaScript срещу jQuery и да видим защо jQuery е създаден.

Защо се създава jQuery и какви са специалните възможности на jQuery?

В JavaScript трябва да напишем много код за основни операции, докато с jQuery едни и същи операции могат да се извършват с един ред код. Следователно разработчиците намират за по-лесно да работят с jQuery, отколкото с JavaScript.

• Въпреки че JavaScript е основният език, от който се е развил jQuery, jQuery прави обработката на събития, DOM манипулацията, Ajax извиква много по-лесно от JavaScript. jQuery също така ни позволява да добавяме анимирани ефекти на нашата уеб страница, което отнема много болка и редове код с JavaScript.
• jQuery има вградени приставки за извършване на операция на уеб страница. Просто трябва да включим или импортираме приставката в нашата уеб страница, за да я използваме. По този начин приставките ни позволяват да създаваме абстракции от анимации и взаимодействия или ефекти.
• Също така можем да направим своя персонализиран плъгин с jQuery. Ако изискваме да се направи анимация на уеб страница по определен начин, можем да разработим приставка според изискването и да я използваме на нашата уеб страница.
• jQuery разполага и с библиотека с джаджи на потребителски интерфейс на високо ниво. Тази библиотека с джаджи има цял набор от приставки, които можем да импортираме на нашата уеб страница и да ги използваме за създаване на лесни за ползване уеб страници.

Нека разберем разликата.

JavaScript срещу jQuery

Продължавайки с разликата между JavaScript и jQuery с пример.

JavaScript срещу jQuery с примери

Нека разгледаме примерите.

Добавяне на JavaScript и jQuery в нашия HTML документ

JavaScript се добавя директно в HTML документа вътре в маркера или външен JavaScript файл може да се добави в HTML документ с помощта на атрибута src.
Написано директно в тага на скрипта:

alert („Това поле за предупреждение е извикано със събитието при зареждане“)

За да използваме jQuery, ние изтегляме файла от уебсайта му и препращаме пътя на изтегления jQuery файл в атрибута src на SCRIPT маркера или можем да го получим директно от CDN (мрежа за доставка на съдържание).

Използване на CDN :

Нека разберем DOM Traversal and Manipulation

Преминаване и манипулация на DOM

В JavaScript:

Можем да изберем DOM елемент в JavaScript, използвайки метода document.getElementById () или чрез метода document.querySelector ().

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

или

document.getElementById (“# div1”)

В jQuery:

Тук ще трябва да използваме само символа $ със селектора в скоби.

как да направя мощност в python

$ (селектор) $ ('# div1') - Селекторът е идентификатор 'div1' $ ('. div1') - Селекторът е клас 'div1' $ ('p') - Селекторът е абзацът в Html страница

В горното изявление $ е знак, който се използва за достъп до jQuery, селекторът е HTML елемент.

Добавяне на стилове в JavaScript:

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

Добавяне на стилове в jQuery:

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

Селекторът #myDiv се позовава на идентификатора ‘myDiv’

Изборът и манипулацията на DOM елементи е много по-кратък в jQuery, отколкото в JavaScript.

Продължаване с обработка на събития.

Обработка на събития

В JavaScript избираме HTML елемент:

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

Тук методът getElementById () се използва за избор на елемент по неговия идентификатор, след което използваме метода addEventListener (), за да добавим слушател на събитие към събитието. В този пример добавяме функцията myCallback като слушател към събитието ‘click’.

Можем да използваме и анонимна функция в горния пример:

document.getElementById ('# button1'). addEventListener ('щракване', функция () {console.log ('вътре във функцията')})

EventListener може да бъде премахнат с помощта на метода removeEventListener ()

document.getElementById (“# button1”). removeEventListener (“щракване”, myCallback)

В jQuery

jQuery има предварително дефинирани събития за почти всички DOM действия. Можем да използваме конкретното събитие jQuery за действие.

$ (“P”). Щракнете (функция () {// кликнете действие})

Други примери са:

$ (“# Button1”). Dblclick (function () {// действие за двойното щракване върху html елемента с id ‘button1’}

Методът JQuery ‘on’ се използва за добавяне на едно или повече събития към DOM елемент.

$ (“# Button1”). On (“click”, function () {// действие тук})

Можем да добавяме множество събития и множество обработчици на събития с метода on.

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

Две или повече събития могат да имат същия манипулатор, както по-долу:

$ (“# Button1”). On (“click dblclick”, function () {// действие тук})

По този начин виждаме, че с по-малък и кратък код обработката на събития е по-лесна в jQuery, отколкото в JavaScript.

Продължаваме с разговорите от Ajax.

Обаждания от Аякс

В JavaScript

JavaScript използва обект XMLHttpRequest за изпращане на заявка Ajax до сървър. XMLHttpRequest има няколко метода за осъществяване на извикване на Ajax. Двата често срещани метода са отворени (метод, URL, асинхронни, потребителски, PSW), send () и send (низ).
Нека първо създадем XMLHttpRequest:

var xhttp = new XMLHttpRequest () След това използвайте този обект, за да извикате отворения метод: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Отвореният метод прави заявка за получаване към сървър / местоположение, true посочва, че заявката е асинхронна. Ако стойността е false, това означава, че заявката е синхронна.

Изпращане на заявка за публикация:

var xhttp = new XMLHttpRequest () След това използвайте този обект, за да извикате отворения метод и да направите заявка за публикуване: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

За да публикуваме данни с искането, използваме метода setRequestHeader на xhttp, за да дефинираме типа на данните, които трябва да бъдат изпратени, а методът за изпращане изпраща данните в двойки ключ / стойност:

xhttp.setRequestHeader ('Тип съдържание', 'application / x-www-form-urlencoded') xhttp.send ('name = Ravi & surname = Kumar')

В jQuery

jQuery има няколко вградени метода за извършване на Ajax повиквания. С тези методи можем да извикаме всякакви данни от сървъра и да актуализираме част от уеб страницата с данните. Методите jQuery улесняват повикването на Ajax.
Методът jQuery load (): Този метод извлича данни от URL и зарежда данните в HTML селектор.
$ („P“). Зареждане (URL, данни, обратно извикване)
URL адресът е местоположението, което се извиква за данните, незадължителният параметър за данни е данните (двойки ключ / стойност), които искаме да изпратим заедно с повикването, а незадължителният параметър 'callback' е методът, който искаме да изпълним след зареждането е завършено.

Методът jQuery $ .get () и $ .post (): Този метод извлича данни от URL и зарежда данните в HTML селектор.
$ .get (URL, обратно извикване)
URL адресът е местоположението, което се извиква за данните, а обратното повикване е методът, който искаме да изпълним след приключване на зареждането.

$ .post (URL, данни, обратно извикване)
URL адресът е местоположението, което се извиква за данните, данните са двойката ключ / стойност, която искаме да изпратим с повикването, а обратното повикване е методът, който искаме да изпълним след приключване на зареждането. Тук данните и параметрите за обратно извикване не са задължителни.

jQuery Ajax повикванията са по-кратки от JavaScript. В JavaScript използваме обект XMLHTTPRequest, в jQuery не е нужно да използваме такъв обект.

Продължаваме с анимацията.

как да компилирам Java кодове

Анимация

В JavaScript

JavaScript няма специфична анимационна функция като jQuery animate () функция. В JavaScript анимационният ефект се постига главно чрез манипулиране на стила на елемента или чрез използване на CSS трансформира, превежда или анимира свойства. JavaScript също използва методите setInterval (), clearInterval (), setTimeout () и clearTimeout () за анимационни ефекти.

setInterval (myAnimation, 4) функция myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20deg) '}

Анимацията в JavaScript се отнася главно до манипулиране на CSS свойствата.

В jQuery

jQuery има много вградени методи за добавяне на анимации или ефекти върху HTML елементи. Нека проверим няколко от тях.
Методът animate (): Този метод се използва за добавяне на анимация върху елемент.

$ ('# button1'). щракнете (function () {$ ('# div1') .animate ({height: '300px'})})

Методът show (): Този метод се използва, за да направи елемент видим от скрито състояние.

$ ('# button1'). кликнете (function () {$ ('# div1'). show ()})

Методът hide (): Този метод се използва за скриване на елемент от видимо състояние.

$ ('# button1'). кликнете (function () {$ ('# div1'). hide ()})

jQuery има свои собствени методи за създаване на анимация и ефекти в уеб страница.

В обобщение, JavaScript е език за уеб разработка, jQuery е библиотека, която произхожда от JavaScript. JavaScript и jQuery имат своето собствено значение в уеб разработката.

След като вече знаете за цикли на JavaScript, разгледайте от Edureka. Обучението за сертифициране на уеб разработки ще ви помогне да научите как да създавате впечатляващи уебсайтове с помощта на HTML5, CSS3, Twitter Bootstrap 3, jQuery и Google API и да го разположите в Amazon Simple Storage Service (S3).

Имате въпрос към нас? Моля, споменете го в раздела за коментари на „JavaScript срещу jQuery“ и ние ще се свържем с вас.