6. Жизнь без Jquery Михаил Ларченко | High To6
✔
Работа с DOM-структурой (селекторы)
✔
Добавление / удаление / изменение классов
✔
Анимации
✔
Валидация форм
✔
Одностраничные сайты
✔
Обработка событий
✔
Ajax-запросы
7. Жизнь без Jquery Михаил Ларченко | High To7
$(selector)... — , ,id class tag
document.querySelectorAll(selector) — id, class, tag
var $ = document.querySelectorAll.bind(document);
8. Жизнь без Jquery Михаил Ларченко | High To8
.addClass(classname)
.removeClass(classname)
.toggleClass(classname)
.hasClass(classname)
HTML5 classList
document.body.classList
.add(classname)
.remove(classname)
.contains(classname)
.toggle(classname)
9. Жизнь без Jquery Михаил Ларченко | High To9
Анимацияя 300 блоков на странице (нагрузка на процессор)
10. Жизнь без Jquery Михаил Ларченко | High To10
Анимацияя 300 блоков на странице (время анимации)
11. Жизнь без Jquery Михаил Ларченко | High To11
Плагины для Jquery-validation
<input required=required type=email />
<input pattern="[a-z0-9]" />
<input readonly=readonly />
<input disabled=disabled />
12. Жизнь без Jquery Михаил Ларченко | High To12
Backbone.js | Jquery hashchange plugin
window.onhashchange
13. Жизнь без Jquery Михаил Ларченко | High To13
$(selector).on(event, function() {});
var $ = document.querySelectorAll.bind(document);
Element.prototype.on = Element.prototype.addEventListener;
$(selector)[0].on(event, function(){});
14. Жизнь без Jquery Михаил Ларченко | High To14
$.ajax({ 'option' : 'value', … });
15. Жизнь без Jquery Михаил Ларченко | High To15
function request(type, url, opts, callback) {
var xhr = new XMLHttpRequest(), fd;
if (typeof opts === 'function') {
callback = opts;
opts = null;
}
xhr.open(type, url);
if (type === 'POST' && opts) {
fd = new FormData();
for (var key in opts) {
fd.append(key, JSON.stringify(opts[key]));
}
}
xhr.onload = function () {
callback(JSON.parse(xhr.response));
};
xhr.send(opts ? fd : null);
}
var get = request.bind(this, 'GET');
var post = request.bind(this, 'POST');
16. Жизнь без Jquery Михаил Ларченко | High To16
Что почитать:
●
http://cubiq.org/do-you-really-need-jquery-for-mobile-dev
●
http://dev.opera.com/articles/view/css3-vs-jquery-animations/
●
https://github.com/remy/min.js
●
http://caniuse.com/
