Библиотека Jquery

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

В данной статье мы рассмотрим самую известную библиотеку JS — Jquery. Сразу отмечу тот факт, что изучать Jquery надо только после изучения основ JavaScript, а именно вам надо знать структуру кода, типы данных, что такое переменные, операторы, циклы и функции, а также как они работают, это упростит задачу по изучению библиотеки.

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

Преимущества библиотеки Jquery

Рассмотрим преимущества Jquery:

  1. Скорость. Время написания кода на Jquery в разы уменьшается в сравнение с чистым JS. Парой строк на Jquery можно решить то, на что понадобится десять строк на JS.
  2. Кросс-браузерность. Практически все, что вы напишите на Jquery, будет работать на всех браузерах с вероятностью 99%.
  3. Чистота кода и понятность чтения. Код Jquery намного проще понять и прочитать, чем код чистого JS.
  4. Обилие дополнений и плагинов. Для этой библиотеки существует очень большое количество плагинов, готовых решений, которые вы можете использовать в своих проектах.
  5. Поддержка. Над этой библиотекой трудится тысячи программистов, поддержка просто огромная. Также существует огромное количество сообществ, посвященных библиотеке. Вы без труда найдете ответы на свои вопросы.
  6. Актуальность и конкурентоспособность. Знания библиотеки Jquery ценится в кругах разработчиков и на рынке труда.

Очень убедительные и понятные преимущества, как вы думаете?

В сравнение Jquery и JavaScript, я покажу как сделать плавный скролл наверх, при помощи плавающей кнопки на чистом JS и с помощью библиотеки.

Плавный скролл наверх на чистом JavaScript:

function trackScroll() {
    var scrolled = window.pageYOffset;
    var coords = document.documentElement.clientHeight;

    if (scrolled > coords) {
      goTopBtn.classList.add('back_to_top-show');
    }
    if (scrolled < coords) {
      goTopBtn.classList.remove('back_to_top-show');
    }
  }

  function backToTop() {
    if (window.pageYOffset > 0) {
      window.scrollBy(0, -80);
      setTimeout(backToTop, 0);
    }
  }

Плавный скролл наверх с помощью Jquery:

$(function(){
	$(window).scroll(function(){
		if($(window).scrollTop() > 100) {
			$('#scroll_top').show();
		} else {
			$('#scroll_top').hide();
		}
	});
	$('#scroll_top').click(function(){
		$('html, body').animate({scrollTop: 0}, 600);
		return false;
	});
}

Писать разъяснение кода я не буду в этой статье, а сделаю отдельный обзор в следующих статьях.

Посмотрите разницу восприятия кода. Код на jquery выглядит и читается проще, его легче понять, чем код JS, а также занимает меньше строчек. Вот наглядный пример плюсов библиотеки.

Заключение

В заключение хотелось бы выделить еще два проекта Jquery:

  • Jquery UI — набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса, встроенных в библиотеку jQuery. Jquery UX предназначена для создания насыщенного пользовательского интерфейса на сайтах и в веб-приложениях. Официальный сайт — jQuery UI.
  • Jquery Mobile — это система пользовательского интерфейса на основе HTML5, предназначенная для создания гибких веб-сайтов и приложений, которые доступны на всех смартфонах, планшетах и настольных устройствах. Официальный сайт — jQuery Mobile.

Наличие дополнительных проектов ставит еще один большой плюс к библиотеке Jquery, а также говорит о том, что это большой, функциональный проект с профессиональной и постоянной поддержкой.

Официальный сайт библиотеки Jquery — jQuery.


Спасибо за внимание, оставайтесь на M.Blogger.