Что такое jQuery? – Zion & Zion
Объяснение jQuery
Возможно, вы уже слышали об этом пару раз и, вероятно, даже искали в Google точное название этого поста в поисках ответа. Что это за магия jQuery, о которой вы постоянно слышите? Ну, позвольте мне сказать вам. Но сначала позвольте мне дать вам стандартное определение того, что такое jQuery:
«jQuery — это практичная, быстрая и находчивая библиотека, созданная на основе языка программирования JavaScript. Это в основном упрощает обход HTML-документов и манипулирование ими, обработку событий, анимацию и AJAX».
jQuery Объяснение на английском языке
Если это не имеет абсолютно никакого смысла, не беспокойтесь. Теперь, когда у нас есть действительно запутанное определение jQuery, позвольте мне объяснить его на английском языке. JavaScript был языком, который никто не воспринимал всерьез, и вполне справедливо. JavaScript — отличный и мощный язык, но в необработанном виде он может сбивать с толку и разочаровывать.
JavaScript — это клиентский язык, также известный как интерфейсный язык. Это означает, что JavaScript — это язык, который взаимодействует с вашим браузером и имеет возможность манипулировать всем, что показывает и делает ваш браузер. Потрясающе, верно? Ну да, в теории. Как я упоминал ранее, JavaScript довольно мощен; единственная плохая вещь в этом — то, как трудно и сложно это писать. Что-то такое простое, как нацеливание на родительский элемент или внедрение правила CSS, занимает от трех до шести строк кода. Это кошмар каждого разработчика. Нам нужно быть быстрыми и эффективными с нашим кодом. Сотни строк «макаронного» кода сведут с ума любого разработчика!
Здесь на помощь приходит jQuery. Все аспекты, которые когда-то разочаровывали разработчиков в JavaScript, были исправлены путем реализации jQuery поверх него. Он значительно ускоряет разработку, потому что предлагает чистый и простой синтаксис и обширную библиотеку функций и методов. То, что заняло бы у вас несколько строк кода JavaScript, можно сделать в одной строке jQuery.
Бум! Это делает JavaScript настолько простым для написания и расширяет его, чтобы он стал лучше, быстрее и, что наиболее важно, совместим с разными браузерами. Это в значительной степени универсальный пояс. На самом деле это так круто, это должен быть пояс Бэтмена!
Прежде чем идти дальше и дать контекст тому, что вы собираетесь прочитать, позвольте мне немного рассказать вам о себе. Я практичный человек. Я стал разработчиком, экспериментируя и изучая новые вещи. Я самоучка с нуля, и я становлюсь все лучше и лучше, играя и находя лучшие способы делать вещи. Веб-разработка — это решение проблем по своей сути, и чтобы стать хорошим, вам придется много напортачить. Позвольте мне перефразировать это: вы много испортите. Но, работая над проблемой и находя ее решение методом проб и ошибок, вы в конце концов доберетесь до нее. Такая библиотека, как jQuery, упрощает задачи и позволяет разработчикам стать более эффективными и практичными, и именно поэтому мы все так любим эту библиотеку!
jQuery такой классный, потому что он был создан разработчиками для разработчиков.
Все, что мы ненавидим в JavaScript, уходит с jQuery. Давайте рассмотрим основные преимущества библиотеки jQuery, чтобы я мог показать вам, почему она так полезна.
Научите меня, Сэнсэй.
Вернемся к определению модного слова и разделим его на части.
«jQuery — это практичная, быстрая и находчивая библиотека, созданная на основе языка программирования JavaScript. Это в основном упрощает Обход HTML-документа и манипулирование им , обработка событий , анимация и AJAX ».
Обход HTML-документов и манипулирование ими. Если бы jQuery был супергероем, это было бы его главной сверхспособностью. Благодаря jQuery легко перемещаться по вашему веб-сайту и настраивать элементы таргетинга. Все, что требуется, — это селектор CSS, чтобы сделать элемент объектом jQuery, которым вы можете манипулировать сколько душе угодно. Например, у вас есть тег
Чтобы манипулировать им с помощью jQuery, вам нужно преобразовать его в такой объект:$(‘div.yeah’)
Вот и все. Требуется только селектор CSS, чтобы получить его. Столько побед.
Синтаксис jQuery очень прост для понимания. Вы вызываете jQuery, используя знак «$», и указываете, что вы хотите выбрать, используя селектор CSS. Как только вы овладеете им, вы сможете делать с этим элементом все, что захотите. В приведенном ниже примере должно быть указано, сколько тегов
См. Pen fapxC Рауля Салидо (@salidoraul) на CodePen.
В примере показано, как jQuery запускается и получает приказ найти элементы div «taco» и вернуть их количество. Легко свежий.
Обработка событий. События — это действия, происходящие на вашем веб-сайте. Они запускаются либо вашим пользователем, либо автоматически вашим кодом.
Такие действия, как нажатие кнопки, ввод содержимого в форму, изменение размера окна браузера и т. д., — все это события. jQuery позволяет чрезвычайно легко контролировать эти события и делать с ними все, что необходимо. Это в значительной степени контроль над разумом.
Одним из самых популярных событий jQuery является событие click. Посмотрите, как легко что-то сделать, щелкнув элемент.
См. Pen Fpnij Рауля Салидо (@salidoraul) на CodePen.
Анимация. Это была функция, которая поразила всех, когда jQuery впервые появился, поскольку он буквально вдохнул жизнь в веб-сайты. Это дало сети: движение, переходы, прозрачность, что угодно. Это вынудило CSS улучшить свою игру, и хотя в настоящее время вы можете лучше анимировать с помощью CSS3, jQuery был тем, кто установил планку для этой функции. Это дало возможность .slideToggle(‘fast’) , пока мы не сможем этого сделать. Вот пример перегрузки анимаций.
См. Pen gfkri Рауля Салидо (@salidoraul) на CodePen.
AJAX — что означает (асинхронный JavaScript и XML). Скажи это трижды быстро. По сути, это очень причудливый способ сказать: Загрузка веб-контента без перезагрузки страницы . Это функция, которая позволяет разработчикам получать контент с сервера и обновлять текущую веб-страницу без обновления. Всякий раз, когда вы видите вращающийся круг, за которым следует добавление нового контента, это AJAX. Эта функция от jQuery требует лучшего понимания JavaScript, поэтому я не буду вдаваться в подробности. Если вы хотите узнать больше об AJAX, ознакомьтесь с документацией по jQuery.
Понятно? Вы полностью поняли.
Это не было ошеломляюще, не так ли? Это был просто краткий обзор интересных возможностей jQuery. Главный вывод здесь — осознание того, что самая крутая особенность jQuery — это ее практичность. Это инструмент, который был создан, чтобы упростить и улучшить клиентскую разработку.
jQuery — это все. Большая часть Интернета теперь работает на нем, и он не замедляется. Если вы хотите узнать больше, просто поэкспериментируйте с тем, что вы видели здесь. Основ, которые мы прошли, достаточно, чтобы начать работу. Если вы хотите продолжить играть, ознакомьтесь с их API с открытым исходным кодом, чтобы узнать больше о том, насколько классным и полезным является jQuery.
Большой взрыв веб-разработки: jQuery — что это такое?
Мередит Хассет
5 июня 2018 г. 5 минут чтения
Нужно наверстать упущенное? Вот ваше резюме ниже.
1: Начнем с index.html
2: Добавим стиль с помощью CSS
3: Двигайтесь с помощью JavaScript
4: Что такое Bootstrap?
5: Специальные возможности
На этой неделе давайте поговорим о jQuery.
jQuery по своей сути является библиотекой управления DOM и навигации. Помните, что DOM — это наша объектная модель документа — фактически отображаемая веб-страница.
jQuery упрощает многие функции JavaScript от многострочных сложных фрагментов кода до отдельных функций. Он предоставляет нам API функций JavaScript, что означает, что любой браузер может интерпретировать его без необходимости компилировать код. Нам не нужно делать ничего особенного, чтобы начать работу с jQuery. Мы относимся к нему как к любому другому скрипту или файлу JavaScript.
Библиотека jQuery обслуживается либо через локальный файл в файловой системе вашего веб-сайта, либо через CDN или сеть распространения контента. Использование CDN означает, что вам не нужно размещать библиотеку самостоятельно, но вам нужно следить за поддержкой версии. Если вы этого не сделаете, версия, которую вы используете, может стать устаревшей или не поддерживаться, и вас ждут веселые времена! Если вы скачаете репозиторий, вам придется заниматься управлением и обновлениями самостоятельно, но ваша ссылка никогда не «исчезнет». Ознакомьтесь со всеми способами доступа к jQuery на их странице загрузок.
Пока вы находитесь на странице загрузки, почему бы вам не скачать несжатую версию jQuery для разработки. Сохраните его в каталоге вашей веб-страницы. Он может находиться на том же уровне, что и индексный файл, или в файле ресурсов.
jQuery является одним из строительных блоков многих интерфейсных сред, включая SAPUI5. (В принципе, все это имеет значение, если вы создаете приложение UI5 🙂 )
Теперь, когда я проболтался обо всей этой ерунде, давайте посмотрим на нее в действии.
Откройте файл index.htm для вашей веб-страницы, над которой мы работали. (Я знаю, что это было давно, поэтому я дам вам минуту, чтобы найти его.) Убедитесь, что у вас есть загрузка jQuery, или, если вам удобно, вы можете использовать CDN.
Мы можем загрузить библиотеку, вызвав тег скрипта в заголовке так же, как мы сделали с файлами js, которые мы сделали пару недель назад. Если вы загрузили библиотеку разработки jQuery и сохранили файл в папке верхнего уровня вашего веб-приложения, ваш тег скрипта должен выглядеть примерно так.
Если вы обращаетесь к нему через CDN, src будет URL-адресом. Убедитесь, что сохранили изменения.
Теперь мы можем использовать библиотеку jQuery!
Давайте посмотрим, насколько jQuery упрощает нам жизнь. Откройте файл script.js .
Переименуйте функцию onPictureButtonClicked в onOldPictureButtonClicked или что-то в этом роде. Мы хотим иметь возможность повторно использовать имя функции, но давайте сохраним старый код для справки.
Теперь создайте новую функцию onPictureButtonClicked .
функция onPictureButtonClicked() {
} Чтобы получить доступ к библиотеке jQuery, мы можем использовать Токен $. Это ярлык для вызова функций jQuery. Внутри функции сделайте вызов для переключения изображения. Вот как это сделать:
$("#myImage").toggle() Сохраните ваши изменения и откройте файл index.
html в браузере. Нажатие на кнопку по-прежнему делает то же самое, но с 1 строкой кода!
Как это работает?
С помощью jQuery мы можем сократить вызов getElementById с помощью селекторов.
$(селектор)
Мы можем использовать селекторы для получения тегов, классов или идентификаторов. В нашем примере мы добавили myImage, который является нашим идентификатором для нашего изображения, с # . # используется для обозначения идентификатора. Мы хотим выбрать что-нибудь с ID myImage. Если вы хотите выбрать на основе класса css (например, из атрибута class=»»), используйте . (точка). Чтобы выбрать тег, ничего не добавляйте.
$("#id")
$(".css-класс")
$("tag") Видите, насколько упрощен доступ к DOM?
Мы всегда хотим, чтобы наши текстовые атрибуты отражали действия элемента, поэтому откройте файл index.html в редакторе. Обновите текст кнопки с «Загрузить изображение» на «Переключить изображение».
. Сохраните изменения.
jQuery также упрощает обход DOM. Давайте посмотрим, как настроить таргетинг на связанные теги. И под родственными я подразумеваю родственников 🙂
Давайте добавим новую кнопку в наш файл index.html. Под тегом h2 создайте новую кнопку . Эта кнопка будет иметь текстовое значение Border Div’s Children. Что он сделает, так это обернет границу вокруг всех элементов, которые находятся внутри тега div! Кнопке понадобится функция обратного вызова onclick. И всегда полезно добавить уникальный идентификатор. Не помните, как добавить кнопку? Вы можете использовать код ниже.
Сохраните ваши изменения!
Теперь нам нужно реализовать функцию обратного вызова, поэтому давайте перейдем к файлу script.js.
Создайте новую пустую функцию для обратного вызова новой кнопки. Если вам нужна помощь с этим, скопируйте код ниже.
функция onUpdateDivs(){
}
Теперь нам нужно фактически обрамить все дочерние элементы div.
Как нам это сделать, когда все дочерние элементы имеют разные типы, классы и идентификаторы?
Вот что делает jQuery таким полезным! У него есть готовые методы, помогающие нам перемещаться по дереву DOM. jQuery имеет дочерний метод, который извлекает все теги, находящиеся между открывающим и закрывающим тегом для этого элемента. Как нам получить детей? Вызывая функцию .children() из селектора, мы можем ориентироваться на всех дочерних элементов выбранного элемента. Это выглядит так:
$("div").children() Теперь у нас есть все дочерние теги тега div. Как добавить границу к этим тегам? jQuery также имеет методы для добавления свойств к тегам, например класс CSS. Поскольку у нас есть начальная загрузка, доступная для нашего приложения, мы можем использовать класс границы Bootstrap, чтобы добавить границу. Чтобы добавить класс, привяжите метод .addClass к методу children().
$ («div»).Сохраните ваши изменения и откройте index.
