Азы jquery

Начало работы с jQuery

Итак, начинаем работу. Первым делом необходимо получить новейшую версию библиотеки jquery с официального сайта проекта http://jquery.com/ или скачать jquery здесь. В архиве и на официальном сайте лежат две версии: сжатая и девелоперская. На сайте лучше использовать сжатую, а если захочется поэкспериментировать воспользуйтесь второй. Первым делом подключаем библиотеку jquery в тело страницы:

После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $(«#objID»)
. Где objID — ID объекта.

Each и every, разница в употреблении

Рассмотрим пример:Each side of a square is the same length. (Каждая сторона квадрата одинаковой длины)

Мы употребляем each, когда рассматриваем объекты по-отдельности, каждый индивидуально.

Each используется, как правило, для небольшого количества объектов.

В отличие от every, each можно использовать для двух предметов.

In basketball, each team has five players. (В каждой команде в баскетболе по пять игроков). Неверно — ~~In basketball, every team has five players.~~

Для двух вещей мы также используем местоимения both, either, neither. Подробнее об этом читайте в теме Both, either, neither — правило употребления.

Примеры

At the beginning of texas hold’em each player has two cards. (В начале игры в Техасский холдем у каждого игрока по две карты);
Our apartment has three rooms. Each room has a window. (В нашей квартире три комнаты. В каждой комнате есть окно);
She had rings on each finger. (На каждом пальце у неё были кольца).

Рассмотрим пример:She’s read every book in the school library. (Она прочитала каждую книгу в школьной библиотеке.)

Мы используем every в собирательном значении. Когда мы не рассматриваем объекты по-отдельности, а говорим о них, как о единой группе.

Every употребляется для большого количества объектов.

Примеры

Every seat in the cinema was taken. (Всё места в кинотеатре были заняты);
Our team has been playing great this season. We’ve won every game. (Наша команда отлично играла в этом сезоне. Мы выиграли все матчи);
Every parent worries about their children. (Каждый родитель беспокоится о своих детях).

Мы используем every, чтобы показать, как часто что-то случается.

I jog every day. (Я бегаю каждый день). Неверно — ~~I jog each day~~;
There’s a train to London every half an hour. (До Лондона ходит поезд каждые пол часа). Неверно — ~~Each half an hour~~.

Authors (Авторы)

Авторами статьи являются лица, внесшие существенный вклад в планирование и проведение исследования, а также лица, выполнившие иную роль в подготовке статьи. Технические специалисты и другие помощники обычно упоминаются в разделе статьи «Благодарности».

Авторы перечисляются в логическом порядке важности их вклада в работу. Лицо, указанное первым, считается старшим автором (если не указано иное); другие могут быть перечислены в соответствии с важностью вклада в общее дело

Перечисление авторов в алфавитном порядке – старая практика, которой журналы больше не придерживаются.

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

Лицо, которому могут быть адресованы вопросы по статье (Corresponding Author), помечается звездочкой или другим обозначением.

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

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

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

Работа с выборкой

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

Проверка выборки

Мы можем определить, соответствует ли выборка определённому критерию, с помощью метода .is(). Этот метод наиболее часто используется, чтобы предоставить селектор в качестве единственного аргумента. Он возвращает true или false в зависимости от того, соответствует ли выборка селектору:

Вы также можете передать в метод .is() объект jQuery, исходный элемент DOM или даже функцию, если вам нужна комплексная проверка. Смотрите документацию для получения подробной информации.

Получение, установка и неявный перебор

Есть много методов, которые вы можете вызвать после создания выборки. Эти методы, как правило, делятся на две категории: метод чтения (геттер) и устанавливающий метод (сеттер). Методы чтения извлекают фрагмент информации из выборки, а методы установки в некотором роде изменяют выборку. Практически во всех случаях методы чтения оперируют только первым элементом в выборке (.text() является известным исключением); методы установки же работают для всех элементов в выборке используя то, что известно как неявный перебор.

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

Предположим, что вы хотите изменить HTML у всех пунктов списка на странице. Чтобы сделать это мы должны использовать метод .html(), который изменит HTML у всех выбранных пунктов списка.

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

Явный перебор

Иногда задача, которую вы пытаетесь решить, не вписываются ни в один из существующих методов jQuery и тогда вы должны сделать явный перебор выборки с помощью метода .each(). В следующем коде в начало пункта списка мы добавляем тег <b> содержащий индекс элемента списка.

Заметьте, что внутри функции, которую мы передаём в .each(), у нас есть два способа доступа к текущему исходному элементу DOM: через this и через elem. Как обсуждалось в разделе «Основы JavaScript», this — специальное ключевое слово в JavaScript, указатель на объект, который является текущим контекстом функции. В jQuery this почти всегда относится к исходному элементу DOM, с которым функция в данный момент работает. Так, в случае .each(), this относится к текущему элементу в наборе элементов которые мы перебираем.

Цепочки

Одной из самых выгодных частей jQuery является способность «сцеплять» методы вместе. Это означает, что мы можем вызвать набор методов для выборки без её повторения или сохранения выборки в переменной. Мы даже можем сделать новые выборки на основе предыдущих и всё без разрыва цепочки.

Цепочки возможны, потому что каждый устанавливающий метод в jQuery возвращает выборку, с которой он был вызван. Это чрезвычайно мощная особенность и многие библиотеки взяли её на вооружение

Тем не менее, она должна применяться с осторожностью. Большие цепочки могут сделать код чрезвычайно трудным для чтения, изменения и отладки

Нет жёстких правил, насколько длинной должна быть цепочка, но даже для простой цепочки выше, вероятно, следует провести рефакторинг для удобства чтения.

jQuery.each() Syntax

Let’s see the different modes in action.

The following example selects every element on a web page and outputs the index and the ID of each of them:

A possible output would be:

This version uses jQuery’s function, as opposed to the utility function.

The next example shows the use of the utility function. In this case the object to loop over is given as the first argument. In this example, we’ll show how to loop over an array:

In the last example, we want to demonstrate how to iterate over the properties of an object:

This all boils down to providing a proper callback. The callback’s context, , will be equal to its second argument, which is the current value. However, since the context will always be an object, primitive values have to be wrapped:

This means that there’s no strict equality between the value and the context.

The first argument is the current index, which is either a number (for arrays) or string (for objects).

Классический модульный паттерн в JavaScript

Теперь, когда вы отточили навыки работы с IIFE, давайте посмотрим на пример модульного паттерна, который раскрывают всю мощь совместного применения замыканий и IIFE функций.

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

Мы разделим код на два шага, чтобы постепенно понять то, что происходит под капотом.

В этом примере, наша IIFE отдаёт объект. Смотрите строки 7 и 8.

Также тут есть локальная переменная под названием .

Отдаваемое IIFE значение, которое является объектом и назначается на переменную .

А теперь давайте усложним код, добавив несколько функций в отдаваемый нами объект.

В этом примере мы добавили две функции нашему отдаваемому объекту.

Строки 8–10 хранят функцию , которая отдаёт значение из переменной .

Строки 12–15 добавляют функцию , которая увеличивает значение на 1 и затем отдаёт его значение.

Так как переменная является приватной в IIFE, то никто кроме функций, имеющих доступ к IIFE через замыкание, не имеет к ней доступа.

Теперь вы узнали реально мощный паттерн JavaScript. Он включает в себя мощь использования IIFE и замыканий вместе.

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

Использование jQuery

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta name="keywords" content="HTML,CSS,XML,JavaScript" />
        <meta name="author" content="darkfire" />
        <meta charset="UTF-8" />
        <title>jQuery</title>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <div>
            <h1>Использование jQuery</h1>
        </div>
        <div>
            <!-- Появляется скрытый div. Применяется визуальный эффект slideDown.           -->
            <script type="text/javascript">
                $(document).ready(function(){
                    $("#button").click(function(){
                        $("#panel").slideDown("slow");
                    });
                    <!-- Добавляет каждому абзацу событие mouseover-->
                    $("p").mouseover(function () { 
                        $(this).css("color","red"); 
                    }); 

                });
            </script>
        </div>
        <a href="#" id="button">Отобразить панель</a>
    </div>
    <div id="panel" style="display:none; width:1500px; height:100px; background:pink;">
        Привет! Hello!
    </div>
    <p>Просто абзац.</p>
    <p>Just roll the mouse over me.</p> 
    <p>Or me to see a color change.</p>
</body>
</html>

Пример 5

Используем данные JSON. Входные параметры можно использовать в качестве атрибутов получаемого объекта.

$.ajax({
dataType: «json»,
url: «response.php?action=sample5»,
success: function(jsondata){
$(«.results»).html(«Name = » + jsondata.name + «, Nickname = » + jsondata.nickname);
}
});

Сервер должен возвращать данные в формате JSON:

$aRes = array(«name» => «Andrew», «nickname» => «Aramis»);
require_once(«Services_JSON.php»);
$oJson = new Services_JSON();
echo $oJson->encode($aRes);

JQuery это великолепная библиотека. Она помогала отлично обойти все подводные камни IE6. В прошлые времена кроссбраузерность была большим вопросом, который стоял перед разработчиками. Jquery отлично справлялся со всеми расхождениями отображения верстки в различных браузерах.

На сегодня, браузеры имеют отличные унифицированные решения. Мы можем комфортно использовать все привилегии ES5, также в нашем распоряжении HTML5 API с которым гораздо легче обрабатывать DOM элементы. Разработчики стоят на грани забвения и ухода в сторону от jQuery для некоторых проектов. Особенно, в случае с микросервисами и не сложными программами.

Не поймите не правильно — Jquery все еще остается чудесной библиотекой, и конечно же, в 70% случаев вам придется использовать ее. Хотя для маленьких страничек с ограниченным JS, вы можете использовать VanillaJS или другой фреймворк. Таковы подойдут для мобильных приложений.

Что же, вот вам 10 примеров рабочего кода, с которым можно обойтись без jquery.

Использование правил неявного приведения типов

Приведение типов может быть забавным, оно позволяет писать работающий код, не беспокоясь о типе данных, с которыми вы имеете дело. Это, может быть, забавно, только если вы действительно знаете правила приведения типов в JavaScript наизусть.

Приведение типов, если вы не знаете об этом, — это механизм, которым JS пытаться принудительно использовать для разных типов переменных, когда вы используете несколько типов вместе, а они не особенно совместимы.

Например, легко использовать оператор + между двумя числами, не так ли? Два числа складываются, две строки объединяются, но что произойдет, если одно из них будет числом, а другое — строкой? Существуют правила которые точно определяют, что происходит с каждым типом при использовании с другим.

Это правила приведения типов, и как только вы их узнаете, вы сможете ими воспользоваться. Вопрос в том, а должны ли вы?

Потому что не все полностью осознают, что 2 + ‘2’ не будет 4. И что тип [] + 1 не является ни числом, ни массивом.

У JavaScript есть удивительная особенность, позволяющая нам игнорировать типы при присвоении значений переменным, но это не означает, что мы должны полностью игнорировать типы. Иногда проверка типов или соблюдение определенного стандарта именования может помочь другим избежать случайного выполнения некоторых действительно странных операций. В противном случае синтаксический анализатор позволит вам сделать это, а движок сделает все возможное, чтобы обеспечить какой-то результат.

Другой очень распространенный оператор, на который очень сильно влияет приведение типов, — это оператор ==. Мы часто используем его, но мы должны помнить, что с двумя знаками равенства JS-движок будет пытаться привести типы к одному типу. Например, число 1 равно строке «1», а пустой массив равен пустой строке. Однако я уверен, что когда вы писали это выражение равенства, вы не надеялись, что эти результаты окажутся не верными, не так ли? И если ответ — «мне все равно», посмотрите на этот глупый пример:

let a = //?

if (a == 1) {
  console.log("Adding 10 to ", a)
  a += 10;
  console.log("a: ", a);
}

if (a > 2) {
  console.log("Forcing a to be 1 in a strange way", a)
  a = a - (a - 1)
  console.log("a: ", a);
}

Как вы думаете, что произойдет, если мы выполним приведенный выше код с числом, строкой или логическим значением?

The same logic with a number, a string, and a boolean

На первом изображении я присвоил a номер 1, затем присвоил строку «1» и, в результате, значение true. Не было ни синтаксической ошибки, ни ошибки выполнения. Движок сделал все, что мог

Обратите внимание, что + имеет тенденцию превращать числа в строки при совместном использовании, а оператор — наоборот. Дело в том, что true концептуально отличается от 1, а true == 1 не должно быть верным

Поэтому, чтобы избежать такой путаницы, рекомендуется как можно чаще использовать оператор строгого равенства: ===

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

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

Взгляните на следующие примеры:

//given
let a = 100;

//Instead of turning it a string by doing
let stringA = ''+a

//you should do
let stringA = a.toString()

//and if you want to go back to a number this is not ideal
let numberA = +stringA

//instead you should do
let numberA = Number(a)

Вы также можете превратить любое другое значение в строку, вызвав метод toString. Да, он есть у всех объектов. Даже ваши настраиваемые объекты неявно получат этот метод (который вы можете перезаписать BTW, чтобы обеспечить более точное строковое представление ваших объектов). К сожалению, нет метода «to » для каждого типа, но в случае сомнений используйте конструктор типа, который я показал для Number, это будет хорошей подсказкой для тех, кто читает ваш код, который вы приводите.

Помните, что любой код не только должен бесперебойно работать на компьютере, но он также должен быть прочитан и понят людьми!