Jquery метод .prev()

Code blocks

If a variable is declared inside a code block , it’s only visible inside that block.


For example:

We can use this to isolate a piece of code that does its own task, with variables that only belong to it:

There’d be an error without blocks

Please note, without separate blocks there would be an error, if we use with the existing variable name:

For , , and so on, variables declared in are also only visible inside:

Here, after finishes, the below won’t see the , hence the error.

That’s great, as it allows us to create block-local variables, specific to an branch.

The similar thing holds true for and loops:

Visually, is outside of . But the construct is special here: the variable, declared inside it, is considered a part of the block.

Garbage collection

Usually, a Lexical Environment is removed from memory with all the variables after the function call finishes. That’s because there are no references to it. As any JavaScript object, it’s only kept in memory while it’s reachable.

…But if there’s a nested function that is still reachable after the end of a function, then it has property that references the lexical environment.

In that case the Lexical Environment is still reachable even after the completion of the function, so it stays alive.

For example:

Please note that if is called many times, and resulting functions are saved, then all corresponding Lexical Environment objects will also be retained in memory. All 3 of them in the code below:

A Lexical Environment object dies when it becomes unreachable (just like any other object). In other words, it exists only while there’s at least one nested function referencing it.

In the code below, after the nested function is removed, its enclosing Lexical Environment (and hence the ) is cleaned from memory:

As we’ve seen, in theory while a function is alive, all outer variables are also retained.

But in practice, JavaScript engines try to optimize that. They analyze variable usage and if it’s obvious from the code that an outer variable is not used – it is removed.

An important side effect in V8 (Chrome, Opera) is that such variable will become unavailable in debugging.

Try running the example below in Chrome with the Developer Tools open.

When it pauses, in the console type .

As you could see – there is no such variable! In theory, it should be accessible, but the engine optimized it out.

That may lead to funny (if not such time-consuming) debugging issues. One of them – we can see a same-named outer variable instead of the expected one:


This feature of V8 is good to know. If you are debugging with Chrome/Opera, sooner or later you will meet it.

That is not a bug in the debugger, but rather a special feature of V8. Perhaps it will be changed sometime. You always can check for it by running the examples on this page.

Promises

  • done, fail, always

    is called when promise is resolved, is called when promise is rejected, is called when promise is either resolved or rejected.

    // jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)

// Native
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)

  • when

    is used to handle multiple promises. It will resolve when all promises are resolved, and reject if either one is rejected.

    // jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {
});

// Native
Promise.all($promise1, $promise2).then(promise1Result, promise2Result => {});

  • Deferred

    Deferred is a way to create promises.

    // jQuery
function asyncFunc() {
  const defer = new $.Deferred();
  setTimeout(() => {
    if(true) {
      defer.resolve('some_value_computed_asynchronously');
    } else {
      defer.reject('failed');
    }
  }, 1000);

  return defer.promise();
}

// Native
function asyncFunc() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (true) {
        resolve('some_value_computed_asynchronously');
      } else {
        reject('failed');
      }
    }, 1000);
  });
}

// Deferred way
function defer() {
  const deferred = {};
  const promise = new Promise((resolve, reject) => {
    deferred.resolve = resolve;
    deferred.reject = reject;
  });

  deferred.promise = () => {
    return promise;
  };

  return deferred;
}

function asyncFunc() {
  const defer = defer();
  setTimeout(() => {
    if(true) {
      defer.resolve('some_value_computed_asynchronously');
    } else {
      defer.reject('failed');
    }
  }, 1000);

  return defer.promise();
}

Mетоды

close()

Закрывает WebSocket — подключение или заканчивает попытку подключения. Если подключение уже закрыто, этот метод не делает ничего.

void close(
  in optional unsigned short code,
  in optional DOMString reason
);
Параметры
Необязательный
Числовое значение, обозначающее статус-код, описывающий почему подключение будет закрыто. Если параметр не указан, значение по умолчанию равно 1000(обозначает «обмен завершен»). Смотрите  для , чтобы узнать разрешенные значения.
Необязательный
Читаемая человеком строка, объясняющая, почему подключение закрывается. Строка должна быть не длиннее, чем 123 байта UTF-8 текста (не символов). 
Возможные исключения
Указан неверный .
Строка  слишком длинные или содержит непарные суррогаты.
Заметки

В Gecko этот метод не поддерживает никакие параметры включительно до Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5).

send()

Передает данные на сервер через WebSocket — соединение.

void send(
  in DOMString data
);

void send(
  in ArrayBuffer data
);

void send(
  in Blob data
);
Параметры
Текстовая строка, которая будет отправлена на сервер.
Возможные исключения
Соединение еще не открыто.
Строка  содержит непарные суррогаты

Заметьте: Gecko — реализация метода  несколько отличается от специфицированной в Gecko 6.0; Gecko возвращает , обозначающий, открыто ли соединение до сих пор (и, в дополнение, были ли доставлены данные); это было исправлено в Gecko 8.0.

Начиная с Gecko 11.0, поддержка  была реализована, но не  типы данных.

Учебные материалы

Научитесь программировать на JavaScript вместе с нашим руководством.

Для абсолютных новичков

Загляните в наш Учебный План, если вам хочется изучить JavaScript, но у вас нет опыта в JavaScript или программировании.  Доступные разделы: 

Первые шаги в JavaScript Отвечаем на такие вопросы, как «что такое JavaScript?», «как он выглядит?», «и что он может делать?», а также обсуждаем основные возможности JavaScript, такие, как переменнные, строки, числа и массивы. Структурные элементы JavaScript Продолжаем наше изучение главных возможностей JavaScript, обращаем наше внимание на самые часто встречающиеся блоки кода, такие, как условные выражения, циклы, функции и события. Введение в объекты JavaScript Объектно-ориентированная природа JavaScript важна для понимания, если вы хотите углубить знание языка и писать более эффективный код

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

Руководство по JavaScript

Руководство по JavaScript
Более подробное руководство по языку программирования JavaScript, нацеленное на тех, кто уже имеет опыт программирования на JavaScript или на любом другом языке.

Средний уровень

Понимание JavaScript-фреймворков для фронтенда

JavaScript-фреймворки являются неотъемлемой частью современной веб-разработки,

предоставляя разработчикам проверенные и протестированные

инструменты для создания масштабируемых и интерактивных веб-приложений. Многие

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

Повторное введение в JavaScript
Обзор для тех, кто думает, что знает JavaScript.
Структуры данных JavaScript
Обзор существующих структур данных в JavaScript.
Операторы сравнения и тождественности
JavaScript предоставляет три различных оператора сравнения значений: строгое равенство , с приведением типов и метод .
Замыкания
Замыканния это сочетание функции и лексического окружения в котором она была определена.

CSS & Style

  • CSS

    • Get style

      // jQuery
$el.css('color');

// Native
// NOTE: Known bug, will return 'auto' if style value is 'auto'
const win = el.ownerDocument.defaultView;

// null means not to return pseudo styles
win.getComputedStyle(el, null).color;

    • Set style

      // jQuery
$el.css({ color: '#f01' });

// Native
el.style.color = '#f01';

    • Get/Set Styles

      Note that if you want to set multiple styles once, you could refer to method in oui-dom-utils package.

    • Add class

      // jQuery
$el.addClass(className);

// Native
el.classList.add(className);

    • Remove class

      // jQuery
$el.removeClass(className);

// Native
el.classList.remove(className);

    • has class

      // jQuery
$el.hasClass(className);

// Native
el.classList.contains(className);

    • Toggle class

      // jQuery
$el.toggleClass(className);

// Native
el.classList.toggle(className);

  • Width & Height

    Width and Height are theoretically identical, take Height as example:

    • Window height

      // window height
$(window).height();

// without scrollbar, behaves like jQuery
window.document.documentElement.clientHeight;

// with scrollbar
window.innerHeight;

    • Document height

      // jQuery
$(document).height();

// Native
const body = document.body;
const html = document.documentElement;
const height = Math.max(
  body.offsetHeight,
  body.scrollHeight,
  html.clientHeight,
  html.offsetHeight,
  html.scrollHeight
);

    • Element height

      // jQuery
$el.height();

// Native
function getHeight(el) {
  const styles = window.getComputedStyle(el);
  const height = el.offsetHeight;
  const borderTopWidth = parseFloat(styles.borderTopWidth);
  const borderBottomWidth = parseFloat(styles.borderBottomWidth);
  const paddingTop = parseFloat(styles.paddingTop);
  const paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}

// accurate to integer（when `border-box`, it's `height - border`; when `content-box`, it's `height + padding`）
el.clientHeight;

// accurate to decimal（when `border-box`, it's `height`; when `content-box`, it's `height + padding + border`）
el.getBoundingClientRect().height;

  • Position & Offset

    • Position

      Get the current coordinates of the element relative to the offset parent.

      // jQuery
$el.position();

// Native
{ left: el.offsetLeft, top: el.offsetTop }

    • Offset

      Get the current coordinates of the element relative to the document.

      // jQuery
$el.offset();

// Native
function getOffset (el) {
  const box = el.getBoundingClientRect();

  return {
    top: box.top + window.pageYOffset - document.documentElement.clientTop,
    left: box.left + window.pageXOffset - document.documentElement.clientLeft
  };
}

  • Scroll Top

    Get the current vertical position of the scroll bar for the element.

    // jQuery
$(window).scrollTop();

// Native
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

.closest( selector )Возвращает: jQuery

Описание: Для каждого элемента в наборе, получает первый элемент, который совпадает с селектором при движении вверху по DOM дереву элементов.

  • Строка содержащая выражение селектора для проверки совпадения элементов.

    • selector Тип:

      Строка содержащая выражение селектора для проверки совпадения элементов.

    • context Тип:

      DOM элемент в рамках которого соответствующий элемент может быть найден.

  • selection Тип: jQuery

    Объект jQuery для проверки совпадения элементов.

Учитывая, что объект jQuery представляет из себя набор DOM элементов, метод находит потомков и создает новый jQuery объект из найденных элементов. Методы и аналогичны, тем что делают обход элементов вверху по DOM дереву

Различия между ними весьма тонкие, но имеют важное значение:

Начинает обход с текущего элемента Начинает обход с родительского элемента
Делает обход вверх по DOM дереву, до тех пор пок не найдет совпадения для заданного селектора Делает обход вверх по DOM дереву, до самого верхнего элемента документа, добавляя каждый найденный элемент во временную коллекцию; затем результат фильтруется при помощи селектора если он указан
Результат выполнения — объект jQuery, содержащий ноль или один элемент для каждого элемента в изначальном наборе элементов object, в прямом порядке документа Результат выполнения — объект jQuery, содержащий ноль или больше элементов для каждого элемента в изначальном наборе элементов, в обратном порядке документа
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Предположим мы проводим поиск элементов начиная с элемента A:

1 2 3

Это изменит цвет элемента с классом level-2, так как он первым столкнется при движении вверх по DOM дереву.

Предположим мы ищем элемент :

1 2 3

Это изменит цвет элемента списка A. Метод наинает поиск с элемента для которого вызван перед процессом движения вверх по DOM дереву и останавливается когда элемент списка A соответствует селектору.

Мы можем передать DOM элемент как контекст при помощи которого будет искаться ближайший элемент.

1 2 3 4 5 6 7

Это изменит цвет элемента с классом level-2, потому как первый предок элемента списка и потомок элемента списка II. Это не изменит цвет элемента с классом level-1, поскольку он не является потомком элемента списка II.

Ппараметр flag

При создании объекта callbacks можно задать для него опции (настройки, флаги). Это делается в необязательном строковом параметре flag (чтобы указать сразу несколько настроек, нужно перечислить их через пробел) функции $.Callbacks(). Возможные настройки:

  • once — выполнение объекта callbacks будет возможно только один раз. Если эта опция не указана, то вызывать набор функций объекта callbacks можно будет любое количество раз.
  • memory — объект callbacks будет запоминать все совершенные вызовы. При добавлении в callbacks новых функций, они будут тотчас выполняться в контексте запомненных ранее вызовов
  • unique — одну и ту же функцию нельзя будет включать в один callbacks более одного раза.
  • stopOnFalse — если один из функций-участников callbacks вернет false, то оставшиеся функции вызваны не будут.

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

В примерах будут использованы функции fn1 и fn2 определенные выше.


Пример $.Callbacks(‘once’):

var callbacks = $.Callbacks( "once" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );

/*
В консоли появится только:
"foo"
*/

Пример $.Callbacks(‘memory’):

var callbacks = $.Callbacks( "memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );

/*
В консоли появится:
foo
fn2 says:foo
bar
fn2 says:bar
foobar
*/

Пример $.Callbacks(‘unique’):

var callbacks = $.Callbacks( "unique" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn1 ); // repeat addition
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );

/*
В консоли появится:
foo
bar
fn2 says:bar
foobar
*/

Пример $.Callbacks(‘stopOnFalse’):

function fn1( value ){
    console.log( value );
    return false;
}

function fn2( value ){
    fn1("fn2 says:" + value);
    return false;
}

var callbacks = $.Callbacks( "stopOnFalse");
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );

/*
В консоли появится:
foo
bar
foobar
*/

В $.Callbacks() можно указать сразу несколько опций. В этом случае, их возможности будут «пересекаться» — каждая из них будет возможна только если не противоречит остальным указанным опциям. Например, если указаны ‘unique memory’, то при добавлении уже существующей функции, предыдущие (запомненные) вызовы объекта callbacks не будут осуществлены, поскольку функция является дублем и не может быть добавлена.

$.Callbacks(‘unique memory’):

function fn1( value ){
    console.log( value );
    return false;
}

function fn2( value ){
    fn1("fn2 says:" + value);
    return false;
}

var callbacks = $.Callbacks( "unique memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn1 ); // repeat addition
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.add( fn2 );
callbacks.fire( "baz" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );

/*
В консоли появится:
foo
fn2 says:foo
bar
fn2 says:bar
baz
fn2 says:baz
foobar
*/

Комбинация опций ‘memory once’ используется jQuery при организации методов .done() и .fail() объекта deferred

Методы отдельного объекта callbacks можно присвоить переменным и полям сторонних объектов, для более удобного использования:

/*
Создадим объект Callbacks и присвоим его методы
отдельным переменным
*/
var myCallbacks = $.Callbacks(),
    add = myCallbacks.add,
    remove = myCallbacks.remove,
    fire = myCallbacks.fire;

add( fn1 ); // вызовет метод add экземпляра myCallbacks
fire( "hello world");
remove( fn1 );

jQuery not()

The method filters out all the elements which matches the specified selector from the matched set of elements.

Here is the general syntax for using not():

selector.not(element)

element could be a string containing the selector expression, a function, any DOM element or any existing jQuery object.

jQuery not() example

Following example demonstrates the jQuery not() usage

In this example, we have three div elements and two of them is defined with CSS style . This line of code filters out the div elements which does not have and changes the border color to red.

Now we can look in to jQuery filter(), another useful filtering method .

Consider this option

Notice a few things here.

In the above example, I am using the closure behavior of JavaScript. This behavior allows any function to have access to the scope in which it was created, indefinitely. To practically apply this, I immediately invoke a function that returns another function, and because the function I’m returning has access to the internal count variable (because of the closure behavior explained above) this results in a private scope for usage by the resulting function… Not so simple? Let’s dilute it down…

A simple one-line closure

All variables outside the returned function are available to the returned function, but they are not directly available to the returned function object…

Get it? So in our primary example, the count variable is contained within the closure and always available to the event handler, so it retains its state from click to click.

Also, this private variable state is fully accessible, for both readings and assigning to its private scoped variables.

There you go; you’re now fully encapsulating this behavior.


С этим читают