Что такое jQuery? Изучите самую популярную библиотеку JavaScript

Что такое jQuery?

jQuery — это легкий JavaScript с открытым исходным кодом библиотека , которая помогает нам создавать интерактивные веб-страницы с анимацией, визуальными эффектами и расширенными функциями. Это самая популярная библиотека JavaScript, которую используют около 70 миллионов веб-сайтов по всему миру.

Девиз jQuery — «меньше пиши, делай больше» , потому что он сокращает количество строки необработанного кода JavaScript в одну строку с простым интерфейсом. Основные возможности jQuery:

• Обработка событий
• Манипуляции с DOM
• Анимация и эффекты
• Платформа AJAX

Давайте посмотрим, как работает jQuery для упрощения нашего кода JavaScript. Вот популярный метод манипуляции, который мы используем с ванильным JavaScript для загрузки некоторых абзацев в DOM:

Посмотрите, как он сравнивается с некоторым jQuery, который дает такие же результаты . Библиотека jQuery использует JavaScript под капотом, чтобы сделать код более читабельным..

//Обновление текста, представленного в 4 элементах абзаца $ (document) .ready (function () {$ ("p"). Html ("Это абзац")}); 

Зачем изучать jQuery?

Библиотека jQuery по-прежнему остается одной из самых популярных библиотек в устаревшем коде. Его мантра — писать меньше, чтобы делать больше, делает ее по-прежнему популярной библиотекой, которую продолжают использовать и сегодня.

«Пишите меньше, делайте больше».

jQuery, вероятно, самая популярная и расширяемая библиотека JavaScript. Его используют такие крупные компании, как Netflix, Google, IBM и Microsoft. IT обычно является первой библиотекой, которую изучают разработчики JavaScript, потому что:

• Его синтаксис для вызовов AJAX очень прост по сравнению с собственным XmlHttpRequest
• Он предлагает сокращенные решения для общих задач JavaScript, таких как сортировка и фильтрация массивов.
• Многие другие библиотеки имеют jQuery зависимости
• Он работает на стороне сервера узла

Последние достижения в мире внешнего интерфейса Благодаря фреймворкам JavaScript, таким как React и Angular, и API выборки jQuery становится немного длинным, но варианты использования все еще существуют в зависимости от того, что требуется для вашего проекта.

Bootstrap, на данный момент, и WordPress используют jQuery для создания своих компонентов и тем. Многие крупные технологические компании, хотя они и не могут начинать проекты с нуля с jQuery, по-прежнему опираются на те, которые начинались с jQuery. Поэтому неплохо понять jQuery, чтобы включить его в свое резюме.

Синтаксис jQuery

Библиотека jQuery состоит из селекторов, обработчиков событий и помощников обхода DOM. Наряду с Ajax, jQuery делает практически все, что вам нужно, чтобы JavaScript делал для вашей веб-страницы. Есть три самых важных элемента , которые заставляют jQuery работать:

1. $ () или jQuery () : $ () существует с единственной целью — сделать это, поэтому вам не нужно писать jQuery () каждый раз, когда вы хотите использовать селектор.
2. selector : так мы выбираем наш элемент DOM (объектной модели документа). Это элемент, в который мы хотим внести изменения при загрузке страницы.
3. action () : это функция, которая сообщает DOM, что делать. Это может быть прослушиватель событий, это может быть эффект в зависимости от варианта использования..

Вместе простой оператор jQuery записывается как:

$ () предпочтительнее jQuery () просто потому, что он используется чаще. Однако оба будут работать.

Краткое введение в DOM

jQuery использует объектную модель документа ( DOM) для управления, перемещения и выбора элементов. Документ HTML загружается в модель DOM, где браузер создает дерево узлов при загрузке страницы. Семейные иерархические отношения формируются с элементами в дереве, где элементы являются родителями, потомками и братьями и сестрами друг друга.

Затем jQuery может управлять этим деревом объектов. Мы инкапсулируем всю нашу логику jQuery с помощью следующего селектора:

  $ (document) .ready (cb)//cb - это функция обратного вызова  

Как видите, этот селектор является экземпляром синтаксиса $ (selector) .action () , который мы установили выше. Документ в объекте окна является селектором, а действие — методом ready () . Эта функция будет выполнять всю логику, которая находится внутри функции обратного вызова, которая передается в качестве аргумента методу.

Вот базовый пример Hello World загрузки и управления DOM с помощью jQuery:

       
   
  
 
 
 
        
 
 
 
 
 
 
 
 
 
 
 
 $ (document) .ready (() => {$ ("h1"). html ("Hello World");}); 

     


 jQuery/JS 















 

 Возьмите свой JavaSc  скопировать код на следующий уровень. 
 Этот курс  познакомит вас с jQuery , фреймворком для создания интерактивных веб-страниц с анимацией, визуальными эффектами и расширенными функциями.  Вы начнете с краткого введения в курс и jQuery.  Работайте над интерактивным проектом на протяжении всего курса с тестами и задачами.. 
  Полное руководство по jQuery  
 
















 
 Введение в селекторы 
 Точно так же, как селекторы CSS находят элементы HTML для применения  style, селекторы jQuery находят элементы DOM для применения эффектов или прослушивателей событий.  Мы используем функцию  $ ()  с переданной строкой, которая каким-то образом идентифицирует определенные элементы. 
 Некоторые способы выбора элементов  : 

 Имя тега 
 Идентификатор 
 Класс 
 Атрибут 
 Дочерний 
 Потомки 

 
 Выбрать по имени тега 
 Когда вы  выберите по имени тега, используйте имена тегов HTML, такие как div или h1, как показано в примере Hello World выше. 
 
 Выбрать по идентификатору 
 Использовать  знакомый синтаксис CSS, который вы используете при выборе элемента по идентификатору для захвата элемента DOM в jQuery: 


















     
   
 
 
 
 
 














 

 $ (document) .ready (() => {$ ('  #logo '). append (' Китти Кэтттт! '); //добавляем текст к элементу div с id = logo}); 

     


 jQuery/JS 


















 Во фрагменте кода текст добавляется к  div  только с  id  из  logo . 

 
 Выбрать по классу 
 Как и в случае с CSS, мы также можем выбирать элементы по их имени класса.  Используйте '.' Перед именем класса, чтобы выбрать этот элемент: 
















 

      
 
 
 
 
  
 
 
 
 
  
 
     
 
 
 
 














 

 $ (документ). ready (() => {$ ('. example-1'). append ('это абзац');//добавляем текст в элемент div с class = «example-1»}); 

     



 jQuery/JS 


















 Во фрагменте кода текст добавляется к каждому  element  с классом example-1.

 
 Выбрать по атрибуту и ​​значению атрибута  
 Также существует выбор по атрибуту и ​​значению атрибута.  Используйте квадратные скобки  []  для выбора этих элементов: 
















 

      
 
 
 
 
 
 
 
 
 
 
 
 
 
 














 

 $ (document  ) .ready (function () {$ ('. example-1'). append ("Это элемент абзаца '"); $ (' [id = "red"] '). css ("color", "  красный "); $ ('[id =" зеленый "]'). css (" цвет "," зеленый "); $ ('[id =" желтый "]'). css (" цвет "," желтый "  ); $ ('[id = "blue"]'). css ("color", "blue"); $ ('[class]'). css ({"background": "lightgray",  padding: '20px'});}); 

     


 jQuery/JS 
















 
 Создание новых элементов 
 Создание новых элементов в jQuery так же просто, как использование функции  $ () : 
   $ (document) .ready (function () {var newDiv = $ ("
")//Создаем пустой элемент div var newListItem = $ ("
 ab 
") //Создаем элемент списка с содержимым "ab"});   
 Это создает только элемент.  Он не добавляет его в DOM.  Нам нужно сделать отдельное действие для добавления его на веб-страницу. 
 
 
 Действия/обработчик событий 
 
 На высоком уровне действие или  обработчик событий - это функция, которая запускается при взаимодействии пользователя с вашей веб-страницей.. В jQuery есть все виды событий, которые можно использовать для запуска обработчика событий: мышь, клавиатура, форма и т. Д. 
 
 Ответственность за прослушивание конкретного события лежит на обработчике событий.  событие для данного элемента.  Как только пользователь взаимодействует с этим элементом, запускается обработчик событий, который выполняет логику этой функции. 
 
 В jQuery мы используем знакомый  $ («селектор»)  .action ()  в качестве основы для нашего обработчика: 
 
 















 

      
  Нажми меня  
  
 
     
 
 
 
 














 

 $ (document) .ready (() => {$ ("button"). click ((event) => {alert  ("Кнопка нажата пользователем!");});}); 

     


 jQuery/JS 

















 Селектор выбирается так же, как и раньше.  Действие - это фактическое событие, которое мы прослушиваем для выбранного элемента.  Здесь тег  button  прослушивает событие клика.  При нажатии кнопки   пользователь получает предупреждение. 
 Попробуйте зарегистрировать на консоли событие  .  Объект события полон различных свойств, которые могут оказаться полезными в вашей логике.  Этот объект по умолчанию включен во все обработчики событий. 
 

















 Как установить jQuery 
 Чтобы использовать jQuery, вам необходимо иметь ссылку на библиотеку в вашем проекте.  Это можно сделать тремя способами. 

 Загрузите локальную копию библиотеки jQuery со своего веб-сайта в папку проекта и сделайте ссылку на нее в заголовке вашего HTML-документа.  

     

 Если вам удобно использовать npm или yarn с файлом  package.json , установите пакет jQuery: 

 //npm install jquery//yarnyarn add jquery  

 Используйте CDN (сеть доставки контента) для связи с библиотекой jQuery, которую вы '  хочу использовать.  Поместите сценарий в заголовок документа. 

     

 Создайте свое первое приложение jQuery 
 Попробуйте свои силы в настройке простого приложения jQuery. Если вы застряли, есть решение, которое поможет направить ваш процесс. 
 Мы сделаем первый шаг к созданию простого приложения jQuery  To Do list . Эта часть программы должна назначить обработчик события щелчка кнопке добавления и сгенерировать предупреждение, отображающее задачу  добавлено в текстовое поле. 
 Чтобы добавить задачу на нашу веб-страницу со списком дел, пользователь вводит новую задачу в текстовом поле и затем нажимает кнопку добавления. Задача в этом  Задача заключается в следующем: 

 Назначьте обработчик события  click  кнопке добавления с  id  из   addTask . 
 При нажатии кнопки добавления:

 Если текстовое поле пусто, сгенерируйте   предупреждение  с текстом  «Ошибка: введите задачу перед нажатием кнопки« Добавить ». 
 Если текстовое поле не пустое, сгенерируйте  предупреждение  с  текст, содержащий название задачи.  Например, если текст в поле ввода -  «Завершить назначение» , сгенерируйте  предупреждение  с текстом  «Новая задача: полное задание»  ”. 


 Очистить текст внутри текстового поля после нажатия кнопки добавления. 


  Примечание.  К текущему значению поля ввода можно получить доступ с помощью  $ ("selector"). val () . 
 Кроме того, текст, присутствующий в текстовом поле, можно очистить с помощью $("selector").val("").

 
  Пример ввода:  введите  «Полное назначение»  в текстовое поле и нажмите кнопку добавления. 
  Пример выходных данных:  создается  предупреждение  с текстом  «Новая задача: полное задание»  и  текстовое поле очищено. 
 
  Попробуйте это ниже, чтобы проверить решение!  





















 JavaScript 
 HTML 
 CSS (SCSS) 




 



 
 


 























 
 Обзор решения 






















 Вывод 
 JavaScript 
 HTML 
 CSS (SCSS) 


 

 
 
 




 

 


















 В  строке 2  мы назначаем обработчик события щелчка кнопке с идентификатором  addTask .  Класс кнопки уже назначен в HTML веб-страницы. 
 В  строке 3  мы извлекаем текущее значение текстового поля с помощью класса  textBox  с помощью  $ (". textBox"). val () .  Класс текстового поля также назначается в HTML веб-страницы. 
 Если текстовое поле не пустое, мы генерируем  предупреждение  с задачей на  строка 4  и  очистите  текстовое поле в  строке 5 . 
 Если поле ввода  пусто, мы генерируем  предупреждение  с текстом  «Ошибка: введите задачу, прежде чем нажимать кнопку« Добавить » в  строке 8 . 

 

















 Чему научиться дальше 
 Поздравляем!  Теперь вы знакомы с jQuery и сделали свой первый шаг к созданию работающего приложения.  Следующие шаги: 

 всплытие событий 
 Обход DOM 
 Эффекты и анимация 
 Функции обратного вызова 
 AJAX 
 и методы GET vs POST 

 На этом этапе вы готовы  Чтобы приступить к нашему курсу, обратитесь к  Полное руководство по jQuery .  В этом курсе вы продолжите свое путешествие по jQuery с большим количеством обработки событий, анимацией, обходом и манипуляциями DOM и методами AJAX.  На протяжении всего курса вы будете работать над интерактивным проектом с тестами и задачами в конце каждой главы. 
  Удачного обучения!  
 
 Продолжить чтение о JavaScript 

 Что такое Node. js?  Введение в среду выполнения JavaScript для новичков. 
 Что такое React?  Учебное пособие о том, как начать работу. 
 Рекомендации по обращению строки в JavaScript, C ++ и Python