Element.outerhtml

Манипуляции

Атрибуты

.attr() Позволяет получать и изменять значение атрибутов у элементов страницы .prop() Возвращает или изменяет значение свойств у выбранных элементов страницы. .removeAttr() Удаляет атрибуты у выбранных элементов страницы .removeProp() Удаляет свойства у выбранных элементах страницы. .addClass() Добавляет класс(ы) выбранным элементам страницы .removeClass() Удаляет классы у выбранных элементов страницы .toggleClass() Изменяет наличие класса у выбранных элементов страницы на противоположное (добавляет/удаляет) .hasClass() Проверяет наличие заданного класса хотя бы у одного из выбранных элементов .val() Позволяет получать и изменять значение атрибута value у элементов страницы

Стили и параметры

.css() Позволяет получать и изменять css-значения у элементов страницы .height()Позволяет получать и изменять значения высоты элемента (без учета отступов и толщины рамки) .outerHeight()Позволяет получить значения высоты элемента (с учетом внутренних отступов, рамки (border-width) и при необходимости внешних отступов (margin)) .innerHeight()Позволяет получить значения высоты элемента (с учетом размера внутренних отступов (padding)) .width()Позволяет получать и изменять значения ширины элемента (без учета отступов и толщины рамки) .outerWidth()Позволяет получить значения ширины элемента (с учетом внутренних отступов, рамки (border-width) и при необходимости внешних отступов (margin)) .innerWidth()Позволяет получить значения ширины элемента (с учетом размера внутренних отступов (padding)) .offset() Позволяет получать и изменять позицию элемента, относительно начала страницы .position() Позволяет получать и изменять позицию элемента, относительно ближайшего родственника .offsetParent() Возвращает ближайшего предка c позиционированием, отличным от static (позиционирование по умолчанию) .scrollTop() Позволяет получать и изменять значения вертикальной прокрутки элементов на странице .scrollLeft() Позволяет получать и изменять значения горизонтальной прокрутки элементов на странице

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .offset() для получения координат</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	   var pos = $( "p" ).offset();
	   var posBody = $( "body" ).offset();
	   console.log( pos ); // выводим в консоль объект с двуми значениями (позиция элемента <p>)
	   console.log( pos.top ); // выводим в консоль значение ключа top (позиция элемента <p> от верхнего края)
	   console.log( pos.left ); // выводим в консоль значение ключа left (позиция элемента <p> от левого края)
	   console.log( posBody ); // выводим в консоль объект с двуми значениями (позиция элемента <body>)
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p style = "margin-top:200px">My position</p>
	</body>
</html>

В этом примере с использованием jQuery метода .offset() мы получаем и выводим в консоль браузера:


в первом случае объект с двумя ключами — позиции (относительно документа) от верхнего и левого края элемента

в пикселях (обратите внимание, что внешние отступы margin учитываются). во втором случае значение от верхнего края элемента

в пикселях. в третьем значение от левого края элемента

в пикселях. в четвертом случае объект с двумя ключами — позиции (относительно документа) от верхнего и левого края элемента

в пикселях (обратите внимание, что внешние отступы margin учитываются).

Результат нашего примера:

Пример использование jQuery метода .offset() для получения координат

Рассмотрим пример в котором мы используем метод .offset(), чтобы установить значения координат для выбранного элемента:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .offset() для установки координат</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	   var pos = $( "p" );
	   console.log( pos.offset() ); // выводим в консоль браузера текущие координаты элемента
	   pos.offset({left:100, top:200}) // устанавливаем значения координат для элемента <p>   
	   console.log( pos.offset() ); // выводим в консоль браузера координаты элемента после изменения
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p>My position</p>
	</body>
</html>

В этом примере с использованием jQuery метода .offset() мы:

выводим в консоль браузера информацию о текущих координатах элемента

в пикселях. устанавливаем новые значения координат для элемента

(смещаем элемент от левого края на 100 пикселей, а от верхнего края на 200 пикселей)

Обратите внимание, что элемент автоматически получает встроенный стиль, определяющий, что элемент имеет относительное позиционирование (position: relative) и значения от левого и верхнего края за минусом значений текущей позиции, таким образом, чтобы сумма соответствовала заданному нами числу смещения. затем мы выводим в консоль браузера информацию о координатах элемента

в пикселях после установки новых значений.. Результат нашего примера:

Результат нашего примера:

Пример использование jQuery метода .offset() для установки координат

В следующем примере мы передадим в качестве параметра метода .offset() функцию:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование функции с методом .offset() для установки координат</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
            $("p").offset(function( index, currentOffset ){ 
              var newOffset = {};  // создаем пустой объект
              newOffset.left = currentOffset.left + 10; // добавляем свойство left (значение left свойства старого объекта + 10) 
              newOffset.top = currentOffset.top + 10; // добавляем свойство top (значение left свойства старого объекта + 10) 
              return newOffset; // возвращаем новый объект со свойствами left и top
            });
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p>My position</p>
	</body>
</html>

В этом примере с использованием jQuery метода .offset() и функции, которая возвращает новый объект, содержащий новые значения координат, от верхнего и левого края документа (старое значение координат + 10), мы изменяем позицию элемента <p> при нажатии на кнопку.

Результат нашего примера:

Пример использования функции с методом .offset() для установки координатjQuery DOM методы

Удаление узлов

Удаление узла из дерева осуществляется в 2 этапа:

  1. Получить (найти) этот узел в дереве. Это действие обычно осуществляется одним из следующих методов: , , , , или .
  2. Вызвать у родительского узла метод removeChild(), которому в качестве параметра необходимо передать узел, который мы хотим у него удалить.Метод возвращает в качестве значения удалённый узел или , если узел, который мы хотели удалить, не существовал.
//найти узел, который мы хотим удалить
var findElement = document.getElementById("notebook");
//вызвать у родительского узла метод removeChild
//и передать ему в качестве параметра найденный узел
findElement.parentNode.removeChild(findElement);

Например, удалить последний дочерний элемент у элемента, имеющего :

//получить элемент, имеющий id="myID"
var myID = document.getElementById("myID");
//получить последний дочерний узел у элемента myID
var lastNode = myID.lastChild;
//т.к. мы не знаем, является ли последний дочерний узел элемента элементом,
//то воспользуемся циклом while для поиска последнего дочернего элемента у элемента myID 
//пока у элемента есть узел и его тип не равен 1 (т.е. он не элемент) выполнять
while(lastNode && lastNode.nodeType!=1) {
  //перейти к предыдущему узлу
  lastNode = lastNode.previousSibling;
}
//если у узла myID мы нашли элемент
if (lastNode) {
  //то его необходимо удалить
  lastNode.parentNode.removeChild(lastNode);
}

Например, удалить все дочерние узлы у элемента, имеющего :

//получить элемент, у которого мы хотим удалить все его дочерние узлы
var elementQuestion = document.getElementById("myQuestion");
//пока есть первый элемент
while (elementQuestion.firstElement) {
  //удалить его
  elementQuestion.removeChild(element.firstChild);
}

Задание

  1. Напишите функцию, удаляющую все текстовые узлы у элемента.
  2. Имеется 2 списка (…), напишите код на языке JavaScript, удаляющий все элементы из 1 и 2 списка.

Комбинированный вариант

Что делать, если метод не поддерживается?

С одной стороны, мы могли бы рассмотреть корректную кросс-браузерную реализацию для FF2/Safari/Chrome/Konqueror. Она включает в себя много кода для обхода браузерных багов при подсчетах, которые нам совсем не интересны.

С другой — FF2 давно умер, а движок Safari/Chrome содержит поддержку в SVN, и значит она скоро будет в релизе. Думаю, и такие явные аутсайдеры как Konqueror подсуетятся, т.к движок Konqueror — по сути такой же, как и Safari.

Поэтому предлагаю использовать:

function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        // "правильный" вариант
        return getOffsetRect(elem)
    } else {
        // пусть работает хоть как-то
        return getOffsetSum(elem)
    }
}

Устаревшие методы вставки/удаления

Старая школа Эта информация помогает понять старые скрипты, но не нужна для новой разработки.

Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.

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

Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:

Добавляет в конец дочерних элементов .

Следующий пример добавляет новый в конец :

Вставляет перед в .


Следующий пример вставляет новый элемент перед вторым :

Чтобы вставить в начало, мы можем сделать вот так:

Заменяет на среди дочерних элементов .

Удаляет из (предполагается, что он родитель ).

Этот пример удалит первый из :

Все эти методы возвращают вставленный/удалённый узел. Другими словами, вернёт . Но обычно возвращаемое значение не используют, просто вызывают метод.

Свойства и методы объекта Event

jQuery скрывает различия реализации между браузерами, определяя свой собственный объект события. Большинство свойств исходного события копируются и нормализуются в новый объект события. Ниже представлены свойства и методы этого объекта:

Свойство / Метод Описание
event.currentTarget Определяет текущий элемент DOM, в котором в настоящий момент обрабатывается событие.
event.data Необязательный объект данных, передаваемый методу события, когда текущий обработчик события привязывается.
event.delegateTarget Возвращает элемент, к которому был прикреплен вызванный в данный момент обработчик события. Это свойство будет отличаться от свойства event.currentTarget только в том случае, если обработчик события делегирован, а не на прямую привязан к элементу.
event.isDefaultPrevented() Метод возвращает логическое значение true, если для этого объекта событий вызывался метод event.preventDefault() и false в обратном случае.
event.isImmediatePropagationStopped() Метод возвращает логическое значение true, если для этого объекта событий вызывался метод event.stopImmediatePropagation() и false в обратном случае.
event.isPropagationStopped() Метод возвращает логическое значение true, если для этого объекта событий вызывался метод event.stopPropagation() и false в обратном случае.
event.metaKey Содержит логическое значение, которое указывает на то, была ли нажата, или нет мета клавиша Сmd (Mac) / Windows (Windows), когда событие сработало.
event.namespace Соответствует пользовательскому пространству имён, определенному при срабатывании события (строковое значение).
event.pageX Позиция курсора мыши относительно левого края документа, или элемента.
event.pageY Позиция курсора мыши относительно верхнего края документа, или элемента.
event.preventDefault() Если этот метод вызывается, то действие события по умолчанию не будет срабатывать (отменяет действие события по умолчанию). Событие продолжает распространяться как обычно, только с тем исключением, что событие ничего не делает.
event.relatedTarget Соответствует другому элементу DOM, который участвует в событии, если таковой имеется.
event.result Содержит последнее значение, возвращаемое обработчиком события, которое было вызвано этим событием (если значение не было равно undefined).
event.stopImmediatePropagation() Прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM) и останавливает цепочку вызова событий для текущего элемента.
event.stopPropagation() Прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM).
event.target DOM элемент, который инициировал событие.
event.timeStamp Разница в миллисекундах между тем моментом, когда браузер создал событие и полуночи 1 января 1970 года (Unix-время).
event.type Описывает тип события, которое было вызвано.
event.which В зависимости от типа события свойство указывает на определенную клавишу клавиатуры или кнопку мыши, которая была нажата пользователем.

Пример

Есть 2 слоя, родительский и дочерний. Задача получить координаты обоих слоев.

<!DOCTYPE HTML> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Координаты элемента (jQuery)</title> <script type=»text/javascript» src=»/js/jquery/jquery.js»></script> <script type=»text/javascript»> $(document).ready(function(){ $(‘#btn_parent’).click(function(){ var position = $(‘#parent’).position(); var offset = $(‘#parent’).offset(); var coords = $(‘#coords’); coords.show(); coords.empty(); coords.append(‘<h2>Координаты родительского слоя</h2>’); coords.append(‘<p>Position: top=’+Math.round(position.top)+’; left=’+Math.round(position.left)+'</p>’); coords.append(‘<p>Offset: top=’+Math.round(offset.top)+’; left=’+Math.round(offset.left)+'</p>’); }); $(‘#btn_child’).click(function(){ var position = $(‘#child’).position(); var offset = $(‘#child’).offset(); var coords = $(‘#coords’); coords.show(); coords.empty(); coords.append(‘<h2>Координаты дочернего слоя</h2>’); coords.append(‘<p>Position: top=’+Math.round(position.top)+’; left=’+Math.round(position.left)+'</p>’); coords.append(‘<p>Offset: top=’+Math.round(offset.top)+’; left=’+Math.round(offset.left)+'</p>’); }); }); </script>

<style type=»text/css»> #parent {border:#CCC 1px solid; padding:5px 10px; position:relative; width:600px; height:200px; margin:200px 0 0 100px;} #child {border:#930 1px solid; position:absolute; top:100px; left:100px; padding:5px 10px; background-color:#FEE;} #coords {position:absolute; left:30%; top:90px; border:#000 2px solid; padding:5px 10px; display:none;} h2 {margin:0; padding:0 0 10px 0; font-weight:normal;} p {margin:0; padding:0 0 5px 0;} </style> </head>

<body>

<h1><a href=»/e/Координаты_элемента_(jQuery)»>Координаты элемента (jQuery)</a></h1>

<div id=»coords»></div>

<div id=»parent»>Родительские слой (position:relative)<div id=»child»>Дочерний слой (position:absolute)</div></div>

<br><br>

<input type=»button» value=»Координаты родительского слоя» id=»btn_parent»> <input type=»button» value=»Координаты дочернего слоя» id=»btn_child»>

</body> </html>

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

DocumentFragment

В JavaScript есть DOM-объект специального вида – DocumentFragment. Он как бы образует фрагмент документа со своим DOM-деревом, то есть, со своим содержимым. Затем, это содержимое можно целиком вставить в любое место HTML-документа. Приведем такой простой пример. Предположим, имеется пустой список:

<ul></ul>

И мы хотим в него вставить заготовленный фрагмент списка. Это может выглядеть так:

let fr = new DocumentFragment();
let list="Меркурий", "Венера", "Земля", "Марс";
for(let p of list) {
    let item = document.createElement('li');
    item.innerHTML = p;
    fr.append(item);
}
 
let ul = document.querySelector("ul");
ul.append(fr);

Но это лишь пример использования DocumentFragment. В данном конкретном случае все можно реализовать проще:

let list="Меркурий", "Венера", "Земля", "Марс";
let ul = document.querySelector("ul");
for(let p of list) {
    let item = document.createElement('li');
    item.innerHTML = p;
    ul.append(item);
}

Вообще DocumentFragment используется крайне редко. Я здесь рассказал о нем, скорее, для целостности изложения материала. Хотя в ряде случаев он незаменим, например, при создании шаблонов документов. Но это выходит за рамки данного занятия.

Также приведу список некоторых устаревших методов вставки и удаления элементов, так как вы можете их встретить в старых скриптах и знали бы, что это такое:

  • parent.appendChild(node) – добавляет элемент в конец списка дочерних элементов;

  • parent.insertBefore(node, nextSibling) – вставляет элемент перед nextSibling;

  • parent.removeChild(node) – удаляет элемент node (здесь parent является родителем node);

  • parent.replaceChild(newElem, node) – заменяет дочерний элемент node на новый newElem.

Все эти методы работают вполне очевидным образом.

Координаты на экране screenX/screenY

Есть ещё одна система координат, которая используется очень редко, но для полноты картины необходимо её упомянуть.

Координаты относительно экрана отсчитываются от его левого-верхнего угла. Имеется в виду именно весь экран, а не окно браузера.

Такие координаты могут быть полезны, например, при работе с мобильными устройствами или для открытия нового окна посередине экрана вызовом window.open.

  • Размеры экрана хранятся в глобальной переменной screen:

  • Координаты левого-верхнего угла браузера на экране хранятся в (не поддерживаются IE8-):

    Они могут быть и меньше нуля, если окно частично вне экрана.

Заметим, что общую информацию об экране и браузере получить можно, а вот координаты конкретного элемента на экране – нельзя, нет аналога или иного метода для этого.

Методы jQuery для управления DOM-свойствами

В jQuery имеется два метода для управления DOM-свойствами элементов.


Первый метод – это prop .

Метод prop

Метод prop предназначен для выполнения различных операций над DOM-свойствами элементов.

Первая операция – это чтение значения DOM-свойства.

Синтаксис метода prop для получения значения DOM-свойства:

Пример, в котором рассмотрим принцип получения значения DOM-свойств с помощью метода prop :

Но DOM-свойства для элементов создаются не только в соответствии с теми атрибутами, которые есть у каждого из них в HTML. Для каждого элемента в соответствии с его встроенным классом создаётся целый набор стандартных для него DOM-свойств. Например, для элемента input (его класс HTMLInputElement ) создаётся один набор DOM-свойств, а для элемента a (его класс HTMLAnchorElement ) создаётся немного другой, но стандартный уже для него набор DOM-свойств.

Пример, в котором изменим значения DOM-свойств элемента:

Воторая операция – это изменение значения DOM-свойства.

Синтаксис метода prop для установления DOM-свойству нового знчаения:

Кроме этого варианта jQuery предлагает ещё два:

Пример, в котором изменим значения DOM-свойств элементов:

Пример, в котором установим заголовкам h2 и h3 , находящихся в элементе .article , идентификаторы, если их у данных элементов нет:

Удалить стандартное DOM-свойство у элемента нельзя. Но вы можете установить ему значение по умолчанию.

Пример, в котором установим для некоторого элемента, например button , значение DOM-свойства равным false .

Сейчас данный элемент в качестве значения DOM-свойства disabled имеет значение true , т.к. атрибут disabled присутствует у тега.

Теперь установим данному DOM-свойству значение false . Это изменение также повлияет на HTML код, данный атрибут будет убран у элемента. Это действие связано с тем, что браузер синхронизирует DOM и HTML код.

Пример, в котором переведём кнопку submit в активное состояние (т.е. установим ей свойство disabled равное false ) когда содержимое элемента input не будет равно пустой строке:

Принцип работы с checked ничем не отличается от disabled .

Примеры работы с checked

1. Пример, в котором установим флажок checkbox, а затем снимем его у него через 5 секунд:

2. Пример, в котором будем перед отправкой формы проверять состояния checkbox #agree , и если он не установлен в true , то выводить некоторое сообщение и отменять отправку формы на сервер.

3. Пример, в котором выполним две операции, связанные с checked . Первое – это установим после загрузки страницы второму элементу radio состояние checked , равное true . Второе – это создадим обработчик для события change , который будет выводить в #log значение выбранного переключателя:

Пример работы с selected

Пример, в котором выполним несколько действий. Первое – это установим состояние selected второму option . Второе – это создадим обработчик для события change , который будет выводить в #log выбранный пункт.

Не стоит брать width/height из CSS

Мы рассмотрели метрики – свойства, которые есть у DOM-элементов. Их обычно используют для получения их различных высот, ширин и прочих расстояний.


Теперь несколько слов о том, как не надо делать.

Как мы знаем, CSS-высоту и ширину можно установить с помощью и извлечь, используя , которые в подробностях обсуждаются в главе Стили и классы.

Получение ширины элемента может быть таким:

Не лучше ли получать ширину так, вместо метрик? Вовсе нет!

  1. Во-первых, CSS-свойства зависят от другого свойства – , которое определяет, что такое, собственно, эти ширина и высота. Получается, что изменение , к примеру, для более удобной вёрстки, сломает такой JavaScript.

  2. Во-вторых, в CSS свойства могут быть равны , например, для инлайн-элемента:

    Конечно, с точки зрения CSS размер – совершенно нормально, но нам-то в JavaScript нужен конкретный размер в пикселях, который мы могли бы использовать для вычислений. Получается, что в данном случае ширина из CSS вообще бесполезна.

Есть и ещё одна причина.

Полоса прокрутки – причина многих проблем и недопониманий. Как говорится, «дьявол кроется в деталях». Недопустимо, чтобы наш код работал на элементах без прокрутки и начинал «глючить» с ней.

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

Получается, что реальная ширина содержимого меньше CSS-ширины. И это учитывают свойства .

…Но при этом некоторые браузеры также учитывают это в результате , то есть возвращают реальную внутреннюю ширину, а некоторые – именно CSS-свойство. Эти кросс-браузерные отличия – ещё один повод не использовать такой подход, а использовать свойства-метрики.

Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.

У элемента с текстом в стилях указано .

На момент написания этой главы при тестировании в Chrome под Windows выводил , а в Firefox – . При этом оба браузера показывали прокрутку. Это из-за того, что Firefox возвращал именно CSS-ширину, а Chrome – реальную ширину, за вычетом прокрутки.

Описанные разночтения касаются только чтения свойства из JavaScript, визуальное отображение корректно в обоих случаях.

Замыкания на практике

Замыкания полезны тем, что позволяют связать данные (лексическое окружение) с функцией, которая работает с этими данными. Очевидна параллель с объектно-ориентированным программированием, где объекты позволяют нам связать некоторые данные (свойства объекта) с одним или несколькими методами.

Следовательно, замыкания можно использовать везде, где вы обычно использовали объект с одним единственным методом.

Такие ситуации повсеместно встречаются в web-разработке. Большое количество front-end кода, который мы пишем на JavaScript, основанно на обработке событий. Мы описываем какое-то поведение, а потом связываем его с событием, которое создается пользователем (например, клик мышкой или нажатие клавиши). При этом наш код обычно привязывается к событию в виде обратного/ответного вызова (callback): callback функция — функция выполняемая в ответ на возникновение события.

Давайте рассмотрим практический пример: допустим, мы хотим добавить на страницу несколько кнопок, которые будут менять размер текста. Как вариант, мы можем указать свойство font-size на элементе body в пикселах, а затем устанавливать размер прочих элементов страницы (таких, как заголовки) с использованием относительных единиц em:

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}

Тогда наши кнопки будут менять свойство font-size элемента body, а остальные элементы страницы просто получат это новое значение и отмасштабируют размер текста благодаря использованию относительных единиц.

Используем следующий JavaScript:

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
};

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

Теперь , , и  — это функции, которые меняют размер текста в элементе body на значения 12, 14, и 16 пикселов, соответственно. После чего мы цепляем эти функции на кнопки примерно так:

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a> 

Список функций

Базовые

.on() Универсальный метод для установки обработчиков событий на выбранные элементы страницы.
.off() Удаляет обработчики, установленные с помощь .on().
.bind() Устанавливает обработчик события на выбранные элементы страницы. Обработчик не сработает на элементах, появившихся после его установки.
.live() Устанавливает обработчик события на выбранные элементы страницы. Обработчик сработает и на элементах, появившихся после его установки.
.delegate() Устанавливает обработчик события на выбранные элементы страницы. Элементы выбираются с помощью уточняющего селектора. Обработчик будет действовать и на элементах, появившихся после его установки.
.one() Устанавливает обработчик события на выбранные элементы страницы, который сработает только по одному разу, на каждом из элементов.
.unbind() Удаляет обработчик событий у выбранных элементов.
.die() Удаляет обработчик событий, который был установлен с помощью live().
.undelegate() Удаляет обработчик событий, который был установлен с помощью delegate().
.trigger() Выполняет указанное событие и запускает его обработчик.
.triggerHandler() Запускает обработчик указанного события, без его выполнения.
jQuery.proxy() По заданной функции, создает другую, внутри которой переменная this будет равна заданному значению.
event Объект, содержащий данные о текущем событии. Передается всем обработчикам событий.

События мыши

.click() Устанавливает обработчик «клика» мышью по элементу, либо, запускает это событие.
.dblclick() Устанавливает обработчик двойного «клика» мышью по элементу, либо, запускает это событие.
.hover() Устанавливает обработчик двух событий: появления/исчезновения курсора над элементом.
.mousedown() Устанавливает обработчик нажатия кнопки мыши, либо, запускает это событие.
.mouseup() Устанавливает обработчик поднятия кнопки мыши, либо, запускает это событие.
.mouseenter() Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseover.
.mouseleave() Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseout.
.mousemove() Устанавливает обработчик движения курсора в области элемента, либо, запускает это событие.
.mouseout() Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие.
.mouseover() Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие.
.toggle() Поочередно выполняет одну из двух или более заданных функций, в ответ на «клик» по элементу.

События клавиатуры

.keydown() Устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие.
.keyup() Устанавливает обработчик возвращение клавиши клавиатуры в ненажатое состояние, либо, запускает это событие.
.keypress() Устанавливает обработчик ввода символа с клавиатуры, либо, запускает это событие.

События формы

.focus() Устанавливает обработчик получения фокуса, либо, запускает это событие.
.blur() Устанавливает обработчик потери фокуса, либо, запускает это событие.
.focusin() Устанавливает обработчик получения фокуса самим элементом или одним из его дочерних.
.focusout() Устанавливает обработчик потери фокуса самим элементом или одним из его дочерних.
.select() Устанавливает обработчик выделения текста, либо, запускает это событие.
.submit() Устанавливает обработчик отправки формы, либо, запускает это событие.
.change() Устанавливает обработчик изменения элемента формы, либо, запускает это событие.

События браузера

.error() Устанавливает обработчик ошибки при загрузке элементов (например отсутствие необходимой картинки на сервере).
.resize() Устанавливает обработчик изменения размеров окна браузера, либо, запускает это событие.
.scroll() Устанавливает обработчик «прокрутки» элементов документа, либо, запускает это событие.

События

Базовые

.on() Устанавливает обработчик события на выбранные элементы страницы. .bind() Устанавливает обработчик события на выбранные элементы страницы. .live() Устанавливает обработчик события на выбранные элементы страницы. Обработчик сработает и на элементах, появившихся после его установки. .delegate() Устанавливает обработчик события на выбранные элементы страницы. Элементы выбираются с помощью уточняющего селектора. Обработчик будет действовать и на элементах, появившихся после его установки. .one() Устанавливает обработчик события на выбранные элементы страницы, который сработает только по одному разу, на каждом из элементов. .unbind() Удаляет обработчик событий у выбранных элементов страницы. .off() Удаляет обработчик событий (установленные с помощью метода .on()) у выбранных элементов страницы. .die()

Удаляет обработчик событий, который был установлен с помощью live(). .undelegate() Удаляет обработчик событий, который был установлен с помощью delegate(). .trigger() Выполняет указанное событие и запускает его обработчик. .triggerHandler() Запускает обработчик указанного события, без выполнения самого события. jQuery.proxy() По заданной функции, создает другую, внутри которой переменная this будет равна заданному значению. event Объект, содержащий данные о текущем событии. Передается всем обработчикам событий.

Мышь

.click() Устанавливает обработчик «клика» мышью по элементу, либо, запускает это событие. .dblclick() Устанавливает обработчик двойного «клика» мышью по элементу, либо, запускает это событие. .hover() Устанавливает обработчик двух событий: появления/исчезновения курсора над элементом. .mousedown() Устанавливает обработчик нажатия кнопки мыши, либо, запускает это событие. .mouseup() Устанавливает обработчик поднятия кнопки мыши, либо, запускает это событие. .mouseenter() Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseover. .mouseleave() Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseout. .mousemove() Устанавливает обработчик движения курсора в области элемента, либо, запускает это событие. .mouseout() Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие. .mouseover() Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие. .toggle() Поочередно выполняет одну из двух или более заданных функций, в ответ на «клик» по элементу.


С этим читают