Мы знаем JavaScript и JQuery довольно много лет. JavaScript был изобретен раньше, чем jQuery. Оба являются мощными и используются в веб-разработке и используются с одной и той же целью, т.е. чтобы сделать веб-страницу интерактивной и динамичной. Другими словами, они оживляют веб-страницы. Люди могут задаться вопросом: если они используются для одной и той же цели, то почему эти две разные концепции? В этой статье, посвященной JavaScript и jQuery, мы узнаем, что лучше другого, в следующей последовательности:
- JavaScript: мощный язык веб-разработки
- JQuery: библиотека, разработанная на основе JavaScript.
- Зачем создается JQuery и каковы особые возможности JQuery
- Разница между JavaScript и JQuery с примерами
JavaScript: мощный язык веб-разработки
JavaScript - это язык сценариев, который используется для добавления интерактивности нашим веб-страницам. Это одна из трех основных технологий наряду с HTML и CSS, которые используются для создания веб-страниц. В то время как HTML и CSS определяют структуру веб-страницы и внешний вид / стили веб-страниц, JavaScript используется для того, чтобы сделать веб-страницу динамической, добавляя к ней интерактивность, что означает, что с помощью JavaScript мы можем добавить некоторый код для щелчка мышью, наведения курсора и прочего. события на веб-странице и многое другое.
JavaScript поддерживается всеми веб-браузерами, а в веб-браузеры есть встроенный механизм JavaScript для идентификации кода JavaScript и работы с ним. Таким образом, JavaScript в основном является клиентским языком. Это один из языков, который можно использовать как процедурный язык, а также как объектно-ориентированный язык на основе прототипов. Когда мы используем основной JavaScript, мы работаем с процедурным языком, тогда как расширенный JavaScript использует объектно-ориентированные концепции.
Давайте продолжим с нашего JavaScript против jQuery и разберемся с библиотекой, разработанной на JavaScript.
jQuery: библиотека, разработанная на основе JavaScript.
За прошедшие годы JavaScript оказался мощным языком для веб-разработки. Появилось множество библиотек и фреймворков, построенных на основе JavaScript. Эти библиотеки и фреймворки разработаны для расширения возможностей JavaScript, много чего с ним делать, а также для облегчения работы разработчика.
jQuery - одна из таких библиотек JavaScript, созданных на его основе. Это самая популярная библиотека JavaScript, изобретенная Джоном Ресайном и выпущенная в январе 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. Его бы не изобрели, если бы не было JavaScript. jQuery по-прежнему зависит от JavaScript, так как он должен быть преобразован в JavaScript, чтобы встроенный в браузер механизм JavaScript интерпретировал и запускал его. |
| Язык | Это интерпретируемый клиентский язык сценариев высокого уровня. Это комбинация сценария ECMA и DOM (объектной модели документа) | Это легкая библиотека JavaScript. У него только DOM |
| Кодирование | JavaScript использует больше строк кода, так как мы должны писать собственный код | jQuery использует меньше строк кода, чем JavaScript для той же функциональности, поскольку код уже написан в его библиотеке, нам просто нужно импортировать библиотеку и использовать соответствующую функцию / метод библиотеки в нашем коде. |
| Применение | Код JavaScript написан внутри тега скрипта на HTML-странице. | Нам нужно импортировать jQuery из CDN или из места, где загружена библиотека jQuery, чтобы использовать его. Код jQuery также написан внутри тега скрипта на странице HTML. |
| Анимации | Мы можем создавать анимацию на JavaScript с помощью многих строк кода. Анимация в основном выполняется путем изменения стиля страницы Html. | В jQuery мы можем легко добавлять эффекты анимации с меньшим количеством строк кода. |
| Удобство для пользователя | JavaScript может быть громоздким для разработчика, поскольку для достижения функциональности может потребоваться несколько строк кода. | jQuery более удобен для пользователя, чем JavaScript, с несколькими строками кода |
| Кроссбраузерная совместимость | В JavaScript нам, возможно, придется иметь дело с кросс-браузерной совместимостью, написав дополнительный код или обходной путь. | jQuery совместим с несколькими браузерами. Нам не нужно беспокоиться о написании какого-либо обходного пути или дополнительного кода, чтобы сделать наш код совместимым с браузером. |
| Спектакль | Чистый JavaScript может быть быстрее для выбора / управления DOM, чем jQuery, поскольку JavaScript напрямую обрабатывается браузером. | jQuery необходимо преобразовать в JavaScript, чтобы он работал в браузере. |
| Обработка событий, интерактивность и вызовы Ajax | Все это можно сделать на JavaScript, но нам, возможно, придется написать много строк кода. | Все это можно легко сделать с помощью jQuery с меньшим количеством строк кода. В jQuery проще добавить интерактивность, анимацию, а также выполнять вызовы ajax, поскольку функции уже предопределены в библиотеке. Мы просто используем эти функции в нашем коде в необходимых местах. |
| Многословие | JavaScript многословен, так как для функциональности нужно написать много строк кода. | jQuery краток и использует меньше строк кода, иногда только одну строку кода. |
| Размер и вес | Будучи языком, он тяжелее jQuery | Будучи библиотекой, она легкая. Он имеет уменьшенную версию своего кода, что делает его легким. |
| Возможность повторного использования и ремонтопригодность | Код JavaScript может быть многословным, поэтому его сложно поддерживать и повторно использовать. | Благодаря меньшему количеству строк кода jQuery более удобен в обслуживании, поскольку нам просто нужно вызывать предопределенные функции в библиотеке jQuery в нашем коде. Это также позволяет нам легко повторно использовать функции jQuery в разных местах кода. |
Продолжим различие между JavaScript и jQuery на примере.
JavaScript против jQuery с примерами
Давайте посмотрим на примеры.
Добавление JavaScript и jQuery в наш HTML-документ
JavaScript добавляется непосредственно в документ HTML внутри тега, или внешний файл JavaScript может быть добавлен в документ HTML с помощью атрибута src.
Написано прямо внутри тега скрипта:
alert ('Это окно предупреждения было вызвано событием onload')Чтобы использовать jQuery, мы загружаем файл с его веб-сайта и указываем путь к загруженному файлу jQuery в атрибуте src тега SCRIPT, или мы можем получить его непосредственно из CDN (сети доставки контента).
Использование CDN :
Давайте разберемся с обходом и манипулированием DOM
Обход DOM и манипуляции
В JavaScript:
Мы можем выбрать элемент DOM в JavaScript, используя метод document.getElementById () или используя метод document.querySelector ().
var mydiv = document.querySelector («# div1»)
или
document.getElementById («# div1»)
В jQuery:
Здесь нам нужно будет использовать только символ $ с селектором в скобках.
$ (selector) $ («# div1») - Селектор - это id 'div1' $ («. div1») - Селектор - это класс 'div1' $ («p») - Селектор - это абзац в HTML-страница
В приведенном выше заявлении $ - это знак, который используется для доступа к jQuery, селектор - это элемент HTML.
Добавление стилей в JavaScript:
document.getElementById ('myDiv'). style.backgroundColor = '# FFF'Добавление стилей в jQuery:
$ ('# myDiv'). css ('цвет фона', '# FFF')Селектор #myDiv относится к идентификатору myDiv.
Выбор и управление элементами DOM в jQuery намного проще, чем в JavaScript.
Переходим к обработке событий.
установить java classpath windows 7
Обработка событий
В JavaScript мы выбираем элемент HTML:
document.getElementById ('# button1'). addEventListener ('клик, myCallback) function myCallback () {console («внутри функции myCallback»)}Здесь метод getElementById () используется для выбора элемента по его идентификатору, затем мы используем метод addEventListener () для добавления прослушивателя событий к событию. В этом примере мы добавляем функцию myCallback в качестве прослушивателя события «click».
Мы также можем использовать анонимную функцию в приведенном выше примере:
document.getElementById ('# button1'). addEventListener ('щелчок', функция () {console.log («внутри функции»)})EventListener можно удалить с помощью метода removeEventListener ().
document.getElementById («# button1»). removeEventListener («щелчок», myCallback)
В jQuery
В jQuery есть предопределенные события почти для всех действий DOM. Мы можем использовать конкретное событие jQuery для действия.
$ («P»). Click (function () {// действие клика})Другие примеры:
$ («# Button1»). Dblclick (function () {// действие для события двойного щелчка на элементе html с идентификатором «button1»}Метод JQuery «on» используется для добавления одного или нескольких событий к элементу DOM.
$ («# Button1»). On («click», function () {// действие здесь})Мы можем добавить несколько событий и несколько обработчиков событий с помощью метода on.
$ («Button1»). On ({click: function () {// действие здесь}, dblclick: function () {// действие здесь}})Два или более событий могут иметь один и тот же обработчик, как показано ниже:
фреймворк, управляемый данными в selenium webdriver
$ («# Button1»). On («click dblclick», function () {// действие здесь})Таким образом, мы видим, что с меньшим и кратким кодом обработка событий в jQuery проще, чем в JavaScript.
Продолжаем с Ajax Calls.
Звонки Ajax
В JavaScript
JavaScript использовал объект XMLHttpRequest для отправки запроса Ajax на сервер. XMLHttpRequest имеет несколько методов для вызова Ajax. Два общих метода - это открытый (метод, URL, асинхронный, пользовательский, PSW), send () и send (строка).
Давайте сначала создадим XMLHttpRequest:
var xhttp = new XMLHttpRequest () Затем используйте этот объект для вызова метода open: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()Открытый метод делает запрос на получение к серверу / местоположению, значение true указывает, что запрос является асинхронным. Если значение false, это означает, что запрос синхронный.
Отправка почтового запроса:
var xhttp = new XMLHttpRequest () Затем используйте этот объект для вызова метода open и отправки почтового запроса: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()Чтобы отправить данные с запросом, мы используем метод setRequestHeader для xhttp, чтобы определить тип данных, которые будут отправлены, а метод send отправляет данные в парах ключ / значение:
xhttp.setRequestHeader ('Content-type', 'application / x-www-form-urlencoded') xhttp.send ('name = Ravi & surname = Kumar')В jQuery
В jQuery есть несколько встроенных методов для вызовов Ajax. С помощью этих методов мы можем вызывать любые данные с сервера и обновлять этими данными часть веб-страницы. Методы jQuery упрощают вызов Ajax.
Метод jQuery load (): этот метод извлекает данные из URL-адреса и загружает данные в селектор HTML.
$ («P»). Load (URL, данные, обратный вызов)
URL-адрес - это место, которое вызывается для данных, необязательный параметр данных - это данные (пары ключ / значение), которые мы хотим отправить вместе с вызовом, а необязательный параметр callback - это метод, который мы хотим выполнить после загрузки. выполнен.
Метод jQuery $ .get () и $ .post (): этот метод извлекает данные из URL-адреса и загружает данные в селектор HTML.
$ .get (URL, обратный вызов)
URL-адрес - это место, которое вызывается для данных, а обратный вызов - это метод, который мы хотим выполнить после завершения загрузки.
$ .post (URL, данные, обратный вызов)
URL-адрес - это место, которое вызывается для данных, данные - это пара / пары ключ / значение, которые мы хотим отправить с вызовом, а обратный вызов - это метод, который мы хотим выполнить после завершения загрузки. Здесь параметры данных и обратного вызова необязательны.
Вызовы jQuery Ajax более лаконичны, чем JavaScript. В JavaScript мы используем объект XMLHTTPRequest, в jQuery нам не нужно использовать такой объект.
Продолжаем анимацию.
Анимация
В JavaScript
В JavaScript нет специальной функции анимации, такой как функция jQuery animate (). В JavaScript эффект анимации в основном достигается за счет управления стилем элемента или с помощью преобразования, преобразования или анимации свойств CSS. JavaScript также использует методы setInterval (), clearInterval (), setTimeout () и clearTimeout () для эффектов анимации.
setInterval (myAnimation, 4) function myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20град) '}Анимация в JavaScript в основном связана с управлением свойствами CSS.
В jQuery
jQuery имеет множество встроенных методов для добавления анимации или эффектов к элементам HTML. Давайте проверим несколько из них.
Метод animate (): этот метод используется для добавления анимации к элементу.
$ ('# button1'). click (function () {$ ('# div1') .animate ({height: '300px'})})Метод show (): этот метод используется для того, чтобы сделать элемент видимым из скрытого состояния.
$ ('# button1'). click (function () {$ ('# div1'). show ()})Метод hide (): этот метод используется для скрытия элемента из видимого состояния.
$ ('# button1'). click (function () {$ ('# div1'). hide ()})jQuery имеет собственные методы для создания анимации и эффектов на веб-странице.
Подводя итог, JavaScript - это язык для веб-разработки, jQuery - это библиотека, созданная на основе JavaScript. JavaScript и jQuery имеют особое значение в веб-разработке.
Теперь, когда вы знаете о циклах JavaScript, ознакомьтесь с пользователя Edureka. Курс по сертификации веб-разработки поможет вам научиться создавать впечатляющие веб-сайты с использованием HTML5, CSS3, Twitter Bootstrap 3, jQuery и API Google и развертывать их в Amazon Simple Storage Service (S3).
Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев «JavaScript vs jQuery», и мы свяжемся с вами.