Часто путают биты JQuery | bot.kz

Взрыв библиотек JavaScript и структур, таких как jQuery на передний конец развитию сцена открылась сила JavaScript в гораздо более широкой аудитории, чем когда-либо прежде.
Она родилась из необходимости — выраженное крещендо кричать на интерфейсном разработчиков, которые были быстро кончаются волосы вытащить — улучшить JavaScript’ с несколько примитивными API, чтобы компенсировать отсутствие единых реализации в разных браузерах ичтобы сделать его более компактным в своем syntax.

Все это означает, что, если у вас есть нечетные обиду JQuery, те времена прошли — вы можете получить вещи сделано сейчас.Сценарий, чтобы найти все ссылки определенного класса CSS в документ и связать событие с ними теперь требует одной строки кода, а не 10.Для питания этого, JQuery приводит к партии своего API, показывая множество функций, методов и синтаксические особенности.Некоторые путают или появляются похожие друг на друга, но на самом деле отличаются в некотором роде. Эта статья проясняет некоторые из этих confusions.

1…. Родителем () против родителей () против ближайших ()

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

Родителей (Селектор)

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

$('span#mySpan').parent().css('background', '#f90');
$('p').parent('div.large').css('background', '#f90');

Первая строка дает родителю #mySpan.Второй делает то же самое для всех родителей <p> теги, при условии, что родитель div и имеет класс large.

Совет: возможность ограничить охват методов, как один во второй линии является общей чертой JQuery.Большинство методов DOM манипуляции позволяют указать селектор таким образом, чтобы it’ S не только в parent().

Родителей (Селектор)

Это действует во многом так же, как и parent(), за исключением того, что оно не ограничено только на один уровень выше совпавший элемент (ы).То есть, он может вернуться нескольких ancestors.Так, например:

$('li.nav').parents('li'); //for each LI that has the class nav, go find all its parents/ancestors that are also LIs

Это говорит о том, что для каждого <li>, который имеет класс nav, вернуть всех родителей / предков, которые также являются <li> с.Это может быть полезно в многоуровневом дереве навигации, вроде следующего:

<ul id='nav'>
	<li>Link 1
		<ul>
			<li>Sub link 1.1</li>
			<li>Sub link 1.2</li>
			<li>Sub link 1.3</li>
		</ul>
	<li>Link 2
		<ul>
			<li>Sub link 2.1

			<li>Sub link 2.2

		</ul>
	</li>
</ul>

Представьте, что мы хотели, чтобы цвет каждого третьего поколения <li> в том, что дерево оранжевого цвета.Простой:

$('#nav li').each(function() {
	if ($(this).parents('#nav li').length == 2)
		$(this).css('color', '#f90');
});

Это переводится так: для каждого <li> находится в #nav (отсюда наше each() петля), то ли it’ SA прямым потомком или нет, посмотрим, сколько <li> родителей / предков над ней в течение #nav.Если число равно двум, то это <li> должны быть на третьем уровне, в этом случае color.

Ближайшая (селектор)

Это немногохорошо держится в секрете, но очень полезно.Он работает как parents(), кроме того, что она возвращает только один parent/ancestor.По моему опыту, you’ будете обычно хотят, чтобы проверить наличие одного конкретного элемента в element’ родословную с, не целый букет из них, поэтому я предпочитаю использовать эту более чем на parents().Скажем, мы хотели бы знать, является ли элемент был потомком другого, однако глубоко в семейном дереве:

if ($('#element1').closest('#element2').length == 1)
	alert("yes - #element1 is a descendent of #element2!");
else
	alert("No - #element1 is not a descendent of #element2");

Совет: Вы можете моделировать closest() с помощью parents() и ограничивая его одним вернулся element.

$($('#element1').parents('#element2').get(0)).css('background', '#f90');

Один причуда около closest() является то, что начинается с обхода элемент (ы) сопровождается селектор, а не от своих родителей.Это означает, что если селектор, которые прошли в closest() соответствующий элемент (ы) он работает, то он вернет себе.Например:

$('div#div2').closest('div').css('background', '#f90');

Это станет #div2 сама оранжевая, потому что closest() ищет <div>, а ближайший <div> до #div2 является itself.

2.. Положение () против смещения ()

Эти два обеих заинтересованных с чтением положение элемента, а именно — первый элемент возвращаемого селектором.Обе они возвращают объект, содержащий два свойства, слева и сверху, но они отличаются по что вернулся позицию относительно to.

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

offset(), напротив, всегда вычисляет положение относительно документа, независимо от position атрибут element’ родителей с и ancestors.

Рассмотрим следующие два <div> S:

Здравствуйте – I’ м outerDiv.У меня есть позиция: относительная и слева: 100px

Привет – I’ м # innerDiv.У меня есть абсолютная позиция, слева: 50px и сверху: 80px.

Запросы (не каламбур) offset() и position() ~ из 74 | будет возвращать разные results.

var position = $('#innerDiv').position();
var offset = $('#innerDiv').offset();
alert("Position: left = "+position.left+", top = "+position.top+"\n"+
      "Offset: left = "+offset.left+" and top = "+offset.top
)

Попробуйте сами, чтобы увидеть результаты. мыши here

3.. CSS (‘ width’) и CSS. (‘ Height’). Против ширину () и высоты ()

Эти три, вы won’ т быть шокированы, узнав, касаются расчета размеров элемента в пикселях.Обе они возвращают смещение размеров, которые являются подлинными размеры элемента независимо от того, как растянул его по своей внутренней content.

Они различаются по типам данных, они return: css('width') и css('height') Размеры возвращения, какстрок, с px добавляются в конец, а width() и height() возвращение размеры, как integers.

There’ на самом деле другая малоизвестная разницей, что касается IE (Quelle сюрприз!), И it’ почему вы должны избегать css('width') и css('height') маршруту.Это связано с тем, что IE, когда его спросили, следующим образом: “компьютерная” (т.е. не неявно) размеры, unhelpfully возвращает auto.В JQuery ядро, width() и height() основанные на .offsetWidth и .offsetHeight Свойства проживающий в каждом элементе, который IE does прочитано correctly.

Но если you’ работаем на элементы с размерами неявно установлен, вы don’ т нужно беспокоиться об этом.Итак, если вы хотели прочитать ширину одного элемента и установить ее на другой элемент, you’ D выбирают css('width'), поскольку значение возвращается поставляется готовым добавляется ‘ px’.

Но если вы хотели прочитать element’ S width() с целью проведения расчетов по нему, you’ D быть заинтересованы только в фигуре, поэтому width() является better.

Обратите внимание, что каждый из них может имитировать other С помощью дополнительной линии JavaScript, вот так:

var width = $('#someElement').width(); //returns integer
width = width+'px'; //now it's a string like css('width') returns
var width = $('#someElement').css('width'); //returns string
width = parseInt(width); //now it's an integer like width() returns

Наконец, width() и height() самом деле есть еще один трюк в рукаве: они могут вернуться размеры окна и document.Если вы попробуете это с помощью css() метод, you’ получу error.

4…. Нажмите кнопку () (и т.д.) против привязки () против жить () против delegate

Все эти связанные с обязательным событий элементов.Различия заключаются в том, что элементы, которые они связывают и, насколько мы можем влиять на обработчик события (или “обратного вызова”).Если это звучит странно, но don’ волнуйтесь.I’ VL explain.

Click () (и т.д.)

It’ Важно понимать, что bind() есть папа jQuery’ ы обработки событий API.Большинство учебников дело с событиями с простыми на вид методы, такие как click() и mouseover(), но за кулисами это только лейтенанты, доложить bind().

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

$('#table td ').click(function() {
	alert("The TD you clicked contains '"+$(this).text()+"'");
});

Это просто говорит, что всякий раз, когда <div> внутри #table нажата, предупредить его текст content.

Bind ()

Мы можем сделать то же самое с bind, вот так:

$('#table td ').bind('click', function() {
	alert("The TD you clicked contains '"+$(this).text()+"'");
});

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

Очень часто вы wouldn’ T.Но bind() дает вам больший контроль над тем, что происходит в обработчик событий.Она также позволяет связывать более чем одного события одновременно, пространственно-разделяя их в качестве первого аргумента, например, так:

$('#table td').bind('click contextmenu', function() {
	alert("The TD you clicked contains '"+$(this).text()+"'");
});

Сейчас на нашем пожаров событие ли we’ ве нажал на <td> с левой или правой кнопки.Я также упомянул, что bind() дает вам больший контроль надобработчик событий.Как это работает?Она делает это путем передачи трех аргументов, а не два, с аргументом два из которых объект данных, содержащий свойства читается обратного вызова, например, так:

$('#table td').bind('click contextmenu', {message: 'hello!'}, function(e) {
	alert(e.data.message);
});

Как вы можете видеть, we’ повторно проходящих в нашей обратного набора переменных для того, чтобы иметь доступ, в нашем случае переменная message.

Вы можете спросить, почему мы это делаем.Почему бы просто не указать любые переменные, мы хотим за пределами обратного вызова и у нас есть обратный читать эти?Ответ на этот вопрос связан с объем и closures.Когда просили прочитать переменную, JavaScript начинается в непосредственной сферы и работает наружу (это принципиально разное поведение в таких языках, как PHP).Рассмотрим следующий пример:

var message = 'you left clicked a TD';
$('#table td').bind('click', function(e) {
	alert(message);
});
var message = 'you right clicked a TD';
$('#table td').bind('contextmenu', function(e) {
	alert(message);
});

Независимо от того, будем ли мы нажмите <td> с левой или правой кнопки мыши, мы будем сказали, что это был правильный.Это потому, что переменная message читает alert() во время событий стрельбы, а не в момент события был bound.

Если мы дадим каждому событию свое own “версии” message во время связывания событий, мы решаем эту problem.

$('#table td').bind('click', {message: 'You left clicked a TD'}, function(e) {
	alert(e.data.message);
});
$('#table td').bind('contextmenu', {message: 'You right clicked a TD'}, function(e) {
	alert(e.data.message);
});

События связанные с bind() и с псевдонимом методами (.mouseover(), и т.д.) несвязанного с unbind() method.

Живая ()

Это работает почти точно так же, как и bind(), но с одним важным отличием: события связаны как для нынешних и будущих элементов — то есть, любые элементы, которые в настоящее время не существуют, но которые могут быть DOM-сценариев после загрузки документа.

Примечание стороны: DOM-сценариев предполагает создания и манипулирования элементами в JavaScript.Замечали ли вы в вашем профиле Facebook, что, когда вы “добавить еще один работодатель” поле волшебно появляется?That’ с DOM-сценариев, и пока я won’ T попасть сюда, она выглядит широкой вроде этого:

var newDiv = document.createElement('div');
newDiv.appendChild(document.createTextNode('hello, world!'));
$(newDiv).css({width: 100, height: 100, background: '#f90'});
document.body.appendChild(newDiv);

Делегата ()

Дефицит live() является то, что, в отличие от подавляющего большинства Jquery методы, он не может быть использован в chaining.То есть, она должна быть использована непосредственно на селекторе, например, так:

$('#myDiv a').live('mouseover', function() {
	alert('hello');
});

Но нет …

$('#myDiv').children('a').live('mouseover', function() {
	alert('hello');
});

… Которая потерпит неудачу, как это будет, если вы проходите прямых элементов DOM, например, $(document.body).

delegate(), которая была разработана как часть JQuery 1.4.2, идет некоторый путь к решению этой проблемы, приняв в качестве первого аргумента контекст, в рамках селектора.Например:

$('#myDiv').delegate('a', 'mouseover', function() {
	alert('hello');
});

Мне нравится live() delegate() связывает события как для нынешних и будущих элементов.Обработчики несвязанных через undelegate() method.

Real-Life Example

Для реальный пример, я хочу, чтобы придерживаться DOM-сценариев, потому что это важная часть любого RIA (Rich Internet Application) построен в JavaScript.

Let’ Представим полета бронирования приложений.Пользователю будет предложено предоставить имена всех пассажиров.Вступил пассажиров появляются как новые строки в таблице, #passengersTable, с двумя колонками: “Name” (содержащий текстовое поле для пассажира) и “Delete” (содержащий кнопку, чтобы удалить passenger’ Sстрока)

Для добавления нового пассажира (т. …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 04.08.2010 by Newsbot