ИП. JavaScript. JQuery. Изменение геометрии и позиционирования МИЭТ, 2017
Под изменением геометрии понимается изменение размеров: ширины и высоты, а также можно под этим понимать скругление углов
|
.height(), .innerHeight(), .outerHeight() |
- возвращает/изменяет высоту элемента |
|
.width(), .innerWidth(), .outerWidth() |
- возвращает/изменяет ширину элемента |
|
.position(), .offset() |
- возвращает/изменяет позицию элемента |
|
.scrollTop(), .scrollLeft() |
- возвращает/изменяет величину скроллинга элемента |
Примеры:
$(".Result").height(1000);
// Установить высоту в 1000
$(".Result").outerHeight();
// может вернуть > 1000 из-за наличия внешних отступов
$(".Result").innerHeight();
// может вернуть < 1000 из-за наличия внутренних отступов
$('.Result').css("height", "1000");
// эквивалентно $(".Result").outerHeight(1000);
ИП. JavaScript. JQuery. Обработка событий |
МИЭТ, 2017 |
Под изменением геометрии понимается изменение размеров: ширины и высоты, а также можно под этим понимать скругление углов
|
.on() |
- устанавливает обработчики событий на выбранные элементы |
|
.off() |
- удаляет у элементов обработчики событий, установленные методом .on(). |
|
.one() |
- устанавливает элементам обработчик события, который сработает один раз |
.trigger() - вызывает событие у элементов, что приводит к запуску обработчиков этого события.
.triggerHandler() - вызывает выполнение обработчиков заданного события у выбранных элементов ( при этом само событие не происходит ).
Примеры:
$('#Vuz').on('click', function(){ console.log('Нажали на Vuz!');
});
$(window).on('resize', function(){
// выполняем какие-то действия при ресайзинге окна
});
$('#Vuz').trigger('click'); // заставит выполнится $('#Vuz').on('click', function() {…});
ИП. JavaScript. JQuery. Обработка событий |
МИЭТ, 2017 |
Примеры:
Передача параметров с событием
$('#Vuz').on('click', function(event, city, rating){ console.log(event.type); // вернет click
if( city !== undefined && rating !== undefined) { console.log('MIET в городе: '+city+', рейтинг '+rating); // вернет MIET в городе: Зеленоград, рейтинг Первый
}
});
$('#Vuz').trigger('click', ['Зеленоград', 'Первый']);
Отличия trigger и triggerHandler
.triggerHandler() не вызывает стандартных событий (поэтому, если вызвать событие focus из методом .triggerHandler(), то стандартное поведение браузера не сработает, а запустятся только обработчики).
.trigger() действует на все подходящие элементы в объекте jQuery,
.triggerHandler() срабатывает только для первого найденного элемента.
.triggerHandler() возвращает то, что и метод обработчик, который сработает в результате “выстрела” события. Если ни один из обработчиков не будет вызван, то будет возвращён undefined
ИП. JavaScript. Ajax и JQuery |
МИЭТ, 2017 |
AJAX - Asynchronous Javascript and XML
Технология позволяет получить данные с сервера без перезагрузки страницы за счет использования объекта XMLHttpRequest браузера
this.checkIt = function checkIt(reload) {
//Проверяет авторизацию, открывает окно для авторизации //Посылаем запрос на self._options.check.Path
//Если не авторизован - открываем всплывающее оконо с iframe-ом авторизации var Result = false;
$.ajax({
type: "GET",
url: self._options.check.Path, data: '',
async: false,
success: function(msg){
if( msg != 'IsAuthorized' ) {
if( reload == undefined )
{self.openAuth(); } else if( reload == 'Y' )
{parent.location.reload(); }
}
else
{ Result = true; }
},
error: function(jqXHR, textStatus, errorThrown) { self._options.err = jqXHR.getAllResponseHeaders( +"<hr>"+textStatus+"<hr>"+errorThrown;
}
});
return Result;
}
ИП. JavaScript. Библиотеки. ООП. jQuery |
МИЭТ, 2017 |
ИП. JavaScript. Библиотеки. ООП. MooTools |
МИЭТ, 2017 |
ИП. JavaScript. Библиотеки. ООП. Prototype |
МИЭТ, 2017 |