jquery. Введение и практика
TRANSCRIPT
![Page 1: jQuery. Введение и практика](https://reader033.vdocuments.site/reader033/viewer/2022061611/55cd0b1fbb61eb31468b47db/html5/thumbnails/1.jpg)
jQueryВВЕДЕНИЕ И ПРАКТИКА
АЛИЕВ. В
![Page 2: jQuery. Введение и практика](https://reader033.vdocuments.site/reader033/viewer/2022061611/55cd0b1fbb61eb31468b47db/html5/thumbnails/2.jpg)
Что такое jQuery?
Библиотека JavaScript-функций
Опубликована в 2006 г
Девиз – «Write less, do more» - делайте больше меньшими усилиями
JQuery отделяет поведение от структуры HTML (принцип «ненавязчивого» JavaScript)
Архитектура: ядро + плагины
Основная цель создания jQuery: повторное использование JavaScript-кода (чтобы не изобретать велосипед) кросс-браузерность (один и тот же код работает в разных браузерах)
![Page 3: jQuery. Введение и практика](https://reader033.vdocuments.site/reader033/viewer/2022061611/55cd0b1fbb61eb31468b47db/html5/thumbnails/3.jpg)
Где взять?
Официальный сайт - http://jquery.com
Текущая версия: jQuery 2.1.4 (jQuery 1.11.3)
Поставляется в двух вариантах: для разработчика (Development)для публикации (Production)
jQuery – Open Source
CDN (Google,JSCdn и проч.)
![Page 4: jQuery. Введение и практика](https://reader033.vdocuments.site/reader033/viewer/2022061611/55cd0b1fbb61eb31468b47db/html5/thumbnails/4.jpg)
Основные моменты
![Page 6: jQuery. Введение и практика](https://reader033.vdocuments.site/reader033/viewer/2022061611/55cd0b1fbb61eb31468b47db/html5/thumbnails/6.jpg)
Загрузка jQuery
Используйте запасной вариант загрузки jQuery с локального хоста при недоступности CDN
Используйте jQuery метод $.noConflict()
Для дополнительной поддержки определения браузера используйте библиотеку Modernizr
Какую версию использовать? Не используйте jQuery 2.x если вам необходимо поддерживать Internte Explorer 6/7/8
Для новых веб-приложений, если вы не ограничены какими-либо плагинами для библиотеки, используйте библиотеку последней версии.
Когда используется подгрузка библиотеки из CDN всегда указывайте необходимую версию скрипта, которую вы хотите получить (прим.: 1.11.0 загрузит версию 1.11 или просто 1).
Не загружайте несколько версий jQuery сразу
![Page 7: jQuery. Введение и практика](https://reader033.vdocuments.site/reader033/viewer/2022061611/55cd0b1fbb61eb31468b47db/html5/thumbnails/7.jpg)
jQuery переменные
Для удобства все переменные используемые вами следует вынести в кеш память используйте префикс $
Для дальнейшего удобства, объявляйте jQuery объекты один раз.
Хорошим тоном будет придерживаться правила Camel Case при определении имени переменных. КаждоеНовоеСловоСБольшойБуквы.
![Page 8: jQuery. Введение и практика](https://reader033.vdocuments.site/reader033/viewer/2022061611/55cd0b1fbb61eb31468b47db/html5/thumbnails/8.jpg)
Селекторы
По возможности используйте 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");
![Page 9: jQuery. Введение и практика](https://reader033.vdocuments.site/reader033/viewer/2022061611/55cd0b1fbb61eb31468b47db/html5/thumbnails/9.jpg)
Ajax
Избегайте использования .getJson() или .get(), используйте $.ajax()
Не используйте http запросы у сайтов с https протоколом.
Не используйте URL строку для передачи параметров. Указывайте все параметры в передаваемом объекте.
// Плохо читаемо$.ajax({url: "something.php?param1=test1¶m2=test2",....});// Так читается лучше$.ajax({url: "something.php",data: { param1: test1, param2: test2 }});
![Page 10: jQuery. Введение и практика](https://reader033.vdocuments.site/reader033/viewer/2022061611/55cd0b1fbb61eb31468b47db/html5/thumbnails/10.jpg)
Анимация
Не используйте чрезмерное применение эффектов, без необходимости. Это может вызывать визуальные эффекты торможения страницы.
Для скрытия и раскрытия используйте функции .slideUp() и .slideDown()
используйте параметры fast и slow, а также значением в миллисекундах. Нормальная скорость анимации 400 мс.
Сложные эффекты в css3
![Page 11: jQuery. Введение и практика](https://reader033.vdocuments.site/reader033/viewer/2022061611/55cd0b1fbb61eb31468b47db/html5/thumbnails/11.jpg)
Прочее
Используйте объект для обращения к множеству параметров атрибутов$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 млн. тыс. раз в сек.
![Page 12: jQuery. Введение и практика](https://reader033.vdocuments.site/reader033/viewer/2022061611/55cd0b1fbb61eb31468b47db/html5/thumbnails/12.jpg)
![Page 13: jQuery. Введение и практика](https://reader033.vdocuments.site/reader033/viewer/2022061611/55cd0b1fbb61eb31468b47db/html5/thumbnails/13.jpg)
Вопросы?
ссылка на slideshare