jquery. Введение и практика

jQueryВВЕДЕНИЕ И ПРАКТИКА

АЛИЕВ. В

Что такое jQuery?

Библиотека JavaScript-функций

Опубликована в 2006 г

Девиз – «Write less, do more» - делайте больше меньшими усилиями

JQuery отделяет поведение от структуры HTML (принцип «ненавязчивого» JavaScript)

Архитектура: ядро + плагины

Основная цель создания jQuery: повторное использование JavaScript-кода (чтобы не изобретать велосипед) кросс-браузерность (один и тот же код работает в разных браузерах)

Где взять?

Официальный сайт - http://jquery.com

Текущая версия: jQuery 2.1.4 (jQuery 1.11.3)

Поставляется в двух вариантах: для разработчика (Development)для публикации (Production)

jQuery – Open Source

CDN (Google,JSCdn и проч.)

Основные моменты

Все возможности

http://oscarotero.com/jquery/

Загрузка jQuery

Используйте запасной вариант загрузки jQuery с локального хоста при недоступности CDN

Используйте jQuery метод $.noConflict()

Для дополнительной поддержки определения браузера используйте библиотеку Modernizr

Какую версию использовать? Не используйте jQuery 2.x если вам необходимо поддерживать Internte Explorer 6/7/8

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

Когда используется подгрузка библиотеки из CDN всегда указывайте необходимую версию скрипта, которую вы хотите получить  (прим.: 1.11.0 загрузит версию 1.11 или просто 1).

Не загружайте несколько версий jQuery сразу

jQuery переменные

Для удобства все переменные используемые вами следует вынести в кеш память используйте префикс $

Для дальнейшего удобства, объявляйте jQuery объекты один раз.

Хорошим тоном будет придерживаться правила Camel Case при определении имени переменных. КаждоеНовоеСловоСБольшойБуквы.

Селекторы

По возможности используйте ID для выбора элементов, этот селектор обрабатывается быстрее за счет использования document.getElementById()

var $products = $("div.products"); // медленноvar $products = $(".products"); // быстро

$(".data table.attendees td.gonzalez");// Так будет лучше и быстрее$(".data td.gonzalez");

$('div.container > *'); // Медленно$('div.container').children(); // Быстрее

$('#outer #inner'); // плохо$('div#inner'); // плохо$('.outer-container #inner'); // плохо$('#inner'); // Хорошо, используется только document.getElementById()

// Плохо, используется вложенный запросvar $productIds = $("#products div.id");// Хорошо, #products уже выбрано с помощью document.getElementById() теперь выборка будет происходить в рамках одного объектаvar $productIds = $("#products").find("div.id");

Ajax

Избегайте использования .getJson() или .get(), используйте $.ajax()

Не используйте http запросы у сайтов с https протоколом.

Не используйте URL строку для передачи параметров. Указывайте все параметры в передаваемом объекте.

// Плохо читаемо$.ajax({url: "something.php?param1=test1&param2=test2",....});// Так читается лучше$.ajax({url: "something.php",data: { param1: test1, param2: test2 }});

Анимация

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

Для скрытия и раскрытия используйте функции .slideUp() и .slideDown()

используйте параметры fast и slow, а также значением в миллисекундах. Нормальная скорость анимации 400 мс.

Сложные эффекты в css3

Прочее

Используйте объект для обращения к множеству параметров атрибутов$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // Плохо, 3 вызова attr()// Хорошо, 1 вызов attr()$myLink.attr({href: "#",title: "my link",rel: "external"});

Не смешивайте CSS и jQuery$("#mydiv").css({'color':red, 'font-weight':'bold'}); /Плохо

Не используйте устаревших методов. Постоянно читайте про релизы библиотеки

По возможности используйте нативный javascript в место jQuery, это даст больший прирост производительности.$("#myId"); // медленно - около 350 тыс. раз в сек.document.getElementById("myId"); // быстрее - около 12 млн. тыс. раз в сек.

Вопросы?

ссылка на slideshare