15 особенностей jQuery 1.4


jQuery и другое…

css, html, php, javascript, jQuery, ajax … – решения, примеры, рецепты

jQuery 1.4

Сегодня (по Москве почти в полночь) официально объявлено о выпуске jQuery версии 1.4. Выход новой версии, как и в прошлом году, приурочен к дню рождения библиотеки, которой исполнилось уже 4 года. Собственно, интересующиеся этой тематикой уже могли ознакомиться с релизами jQuery 1.4 Alpha 1 от 4 декабря 2009 года и jQuery 1.4 Alpha 2 от 18 декабря 2009 года. А 12 января появился релиз-кандидат jQuery 1.4rc1. Подробное знакомство с новшествами еще впереди, но я не мог не дать краткий обзор изменений и новых возможностей, которые появились в очередной версии. Начнем знакомство?

Метод .addClass(className) теперь может принимать в качестве аргумента не только имя класса (или классов), но и функцию .addClass(function), которая должна возвратить один или более имен классов, которые должны быть добавлены элементу. Если имен классов более одного, они должны быть разделены пробелами. На примере:

Аналогичные изменения претерпели методы .removeClass(className) и .toggleClass(className), которые также теперь могут принимать функцию в качестве аргумента.

Похожие изменения внесены в методы .after(content), .before(content), .append(content) и .prepend(content). Все эти методы начиная с версии 1.4 могут принимать в качестве аргумента функцию, которая должна возвращать строку html-кода.

Аналогичным образом дополнены методы .html(htmlString) и .text(textString). Если до версии 1.4 эти методы принимали аргументом соответственно строку html-кода и обычный текст, то теперь аргументом может быть также функция – .html(function) и .text(function). Функции должны возвращать соответственно html-код и текст.

Дополнен метод .val(). Теперь при установке нужного значения можно использовать не только собственно значение, но и функцию, которая должна возвращать требуемое значение.

Дополнен метод .css(). Если раньше для того, чтобы установить значение какого-либо css-свойства мы использовали .css(propertyName, value) или .css(map) для того, чтобы установить значения сразу нескольких css-свойств элемента, то теперь получили возможность использовать во втором аргументе функцию, возвращающую то значение, которое должно быть установлено этому css-свойству .css(propertyName, function).

Чтобы сохранить произвольные данные, связав их с выбранным элементом мы должны были передать методу .data(key, value) соответствующие пары ключ/значение. Теперь аргументом этого метода может быть и непосредственно объект .data(obj). Чтобы получить доступ к сохраненным данным требуется указать .data(key) имя под которым были сохранены эти данные. В дополнение к этому с версии 1.4 можно вызвать метод .data() без аргументов, и в этом случае данные будут возвращены в виде объекта.
Точно также теперь можно поступить и в том случае, если данные, связанные с элементом были сохранены в свойстве data объекта jQuery.

Начиная с версии 1.4 добавлены вспомогательные функции jQuery.isEmptyObject(object) – проверяет, является ли объект пустым (не содержащим свойств)

и jQuery.isObjectLiteral(object) – проверяет является ли он простым объектом (создан с помощью <> или new Object)

Добавлены методы .prevUntil([selector]), .nextUntil([selector]) и .parentsUntil([selector]). Первые два новых метода помогут выбрать все элементы соответственно перед и после, но при этом ДО элемента [selector] указанного в качестве аргумента метода. А метод .parentsUntil([selector]) поможет выбрать всех родителей, но также ДО элемента [selector] указанного в качестве аргумента.

Дополнены методы .wrap(wrappingElement), .wrapAll(wrappingElement) и .wrapInner(wrappingElement). Теперь в качестве аргумента этих методов можно использовать функцию, которая должна возвращать структуру в которую будет обернут каждый выбранный элемент (для wrap), все выбранные элементы (для wrapAll) или внутреннее содержимое выбранного элемента (для wrapInner). Также добавлен новый метод .unwrap(), название которого говорит само за себя – удаляет непосредственных родителей выбранных элементов, оставляя сами элементы без изменений.

Добавлен весьма полезный метод .delay(duration, [queueName]), которые позволяет установить таймер задержки выполнения следующего пункта очереди. На примере:

Здесь метод fadeIn начнет выполняться только через 800 миллисекунд после того, как отработает метод slideUp.

Добавлен метод .detach([selector]), который похож на метод .remove() тем, что также удаляет выбранные элементы из DOM, но, в отличие от .remove() новый метод сохраняет данные, связанные с удаленными элементами, что можно использовать при возврате удаленных элементы обратно в DOM.

Добавлен метод .toArray(), который возвращает в виде массива все DOM-элементы, включенные в набор jQuery. Выполнив


увидим что-то вроде

Дополнен метод .replaceWith(newContent) и теперь в качестве аргумента может использоваться функция, которая должна возвращать строку html-кода, которым должен быть заменен выбранный элемент.

Дополнен метод .add(), с помощью которого можно добавлять в существующий набор дополнительные элементы. Если до версии 1.4 в качестве аргумента можно было указать jQuery-селектор, элемент(или элементы) и фрагмент html-кода, то теперь появилась возможность после селектора указать второй аргумент – контекст, в котором будет производится поиск нужного элемента(ов).

Добавлены новые методы .focusin(handler(eventObject)) и .focusout(handler(eventObject)). Методы вызывают обработчики соответственно при получении и потере фокуса выбранным элементом. В качестве аргумента обработчик принимает объект события.

Добавлен метод .has(selector), с помощью которого можно проверить наличие элемента внутри другого элемента. Для разметки

Такой код добавит в список элемент li с текстом Yes.

Дополнен метод .index(element) с помощью которого можно было узнать индекс DOM-элемента в наборе. Теперь может принимать в качестве аргумента селектор jQuery, а также может быть вызван без передачи аргумента. Довольно интересно, чтобы смотреть на примерах.

В качестве аргумента DOM-элемент:

В качестве аргумента объект jQuery:

И без передачи аргумента:

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

Дополнен метод .closest(selector), теперь вторым параметром можно передать контекст.

Добавлен новый метод .clearQueue([queueName]), который удаляет из очереди все функции, которые еще не были выполнены. Похож на .stop(true), однако есть отличия.

Дополнен метод .offset(), который позволяет получить координаты выбранного элемента относительно документа. Теперь координаты можно будет устанавливать с помощью передачи этому методу аргумента – .offset(coordinates). Здесь coordinates – объект, содержащий свойства top и left, значениями которых являются числовые значения новых координат. Также в качестве аргумента может выступать функция .offset(coordinates(index,coords)), которая в свою очередь принимает в качестве первого аргумента индекс элемента в наборе, а качестве второго – его новые координаты.

Изменения коснулись и функция jQuery(). Теперь при ее вызове без аргументов будет возвращен пустой набор.

Изменения во вспомогательной функции jQuery.param(obj), которая упорядочивает предоставленный объект или массив, представляя его в форме, пригодной для передачи в URL или Ajax-запросе. Начиная с версии 1.4 можно передавать второй параметр jQuery.param(obj, traditional), где traditional – логическое значение, которое устанавливается в true, если необходимо эмулировать поведение этой функции как в версиях ниже 1.4.

Новая вспомогательная функция jQuery.contains(container, contained), позволяющая проверить существование элемента DOM внутри другого элемента DOM. Здесь container – элемент DOM, который может содержать другой элемент DOM, а contained – элемент DOM, который может находится внутри. На примере:

Добавлена jQuery.noop() – функция, которая ничего не делает.


Новый метод jQuery.proxy(). Принимает пару аргументов, например так jQuery.proxy(function, scope), где function – функция, область видимости которой будет изменена, а scope – объект в который должна быть установлена область видимости функции. Грандиозно! Еще вариант – jQuery.proxy(scope, name), где scope – то же, а name – имя функции, область видимости которой будет изменена (должно быть свойством объекта ’scope’). На примере:

Обзор конечно получился краткий, несколько поспешный и насколько я уже понимаю с некоторыми неточностями (не по моей вине ), но для тех, кто хочет сам покопаться и разобраться повнимательнее – новый сайт API jQuery.

Основы jquery

В этой статье я постараюсь привести основы jQuery. Статья, надеюсь, будет расширяться

Значения функции $()

1. $() данная функция вернет специальный объект Javascript, содержащий массив элементов, отобранных по переданному селектору. Иначе говоря, вернет «обертку».

1.1 Ограничиваем отбор элементов (например, p ) одним блоком (например, с id kukaracha ).

Цукерберг рекомендует:  Знания - Работав коллективе

Не путать с конструкцией $(‘span,h1’) отберет и span и заголовок.

2 Этим мы создали элемент.

3 $ (псевдоним jQuery) может выступать префиксом для ВСПОМОГАТЕЛЬНЫХ функций. Данныя функции не работают с элементами объектной модели документа (DOM) — этим занимаются методы.
Чтобы исключить появление ошибок при взаимодействии с другими библиотеками (например, если $ уже занят другой библиотекой) необходимо заключить вспомогательную функцию в следующую конструкцию:

Готовность дерева DOM

Создаем плагин

расширяем обертку $ методом doit . Или, иначе говоря, расширяем объект $.fn . В плагине ключевой слово this — это тот самый jQuery объект, из которого был вызван плагин. Другими словами, контекст ( this ) ссылается на обернутый набор, то есть this уже идентичен $(this) .

Подключили внешнюю библиотеку jQuery

Селектор выбора прямого потомка

отберет только прямых потомков (потомков вложенных куда-то еще не отберет)

Контест в jQuery

В javascript this (контекст функции) — это объект, свойства которого содержат ссылку для вызова функции. ( this это ссылка на текущий экземпляр объекта).Например:

В качестве контекста (в конструкторе) будет выступать экземпляр объекта tuk . Или: вместо this подставляется название той сущности, которая вызвала данную функцию. В атрибуте (например, onclick ) this — это ссылка на тот HTML-элемент, который запустил событие onclick .


Основные фильтры jQuery

4.1 Например, необходимо отыскать 7-ю по счету ячеку таблицы.

4.2 Например, необходимо отыскать все абзацы, которые следуют после 7-го по счету абзаца.

4.3 Например, отбираем все абзацы перед 7-м абзацем.

4.4 Например, отбираем все абзацы кроме 7-го.

4.5 Например, отбираем абзацы, который в данный момент анимируется .

Внешняя таблица стилей и код jquery

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

Частые ошибки новичков при работе с jQuery

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

Консоль должна быть открыта. Закрытая консоль, конечно же, не ошибка в коде, однако, ошибочный подход во время отладки сценария. Именно консоль поможет быстро сориентироваться в том, где и какая допущена ошибка, а также следить за ходом выполнения сценария. Во всех современных браузерах — этот инструмент присутствует по умолчанию. Например, в FireFox консоль можно вызвать с помощью сочетания клавиш Ctrl + Shift + K или «Меню» > «Разработка» > «Веб-консоль«. В Chrome вызывается сочетанием клавиш Ctrl + Shift + J или «Меню» > «Дополнительные инструменты» > «Консоль JavaScript«. В Opera — сочетание клавиш аналогичны Chrome, вызов из меню — «Инструменты разработчика» > «Веб-инспектор» («Инструменты разработчика» предварительно включить в пункте «Другие инструменты»). Кроме того, существуют инструменты/аддоны, как, например, замечательный FireBug под FireFox или Web Developer для Chrome и этот же инструмент для FireFox

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

  1. Оставляем одну новую библиотеку и сразу после неё подключаем плагин jQuery Migrate, который, в большинстве случаев, помогает решить вопрос совместимости.
  2. Без каких-либо дополнений, сами заменяем в плагине удаленные методы на их современные аналоги. Обычно, это такие устаревшие или удаленные методы, как live(), $.browser и т.д.
  3. И конечно же, можно найти современный аналог плагина, который вам понравился. Не зацикливайтесь на одном.

Ну, и примерный порядок подключения:

Код не обернут в конструкцию DOM-Ready. Одна из наиболее популярных ошибок. Если ваш скрипт расположен/подключен в теге , то его нужно обязательно заключить в такой код:

Это так называемый «обработчик готовности дерева DOM«. Попробую «на пальца» и простым языком объяснить, что это и зачем нужно. Браузер загружает страницу, начиная с первого на ней элемента и движется вниз. Всё, что подключено в теге : CSS, JS и т.д., загрузится и начнёт выполняться раньше, чем дело дойдёт до элементов, которые находятся в . Поэтому, при обращении к элементу из JS-кода, его еще попросту нет на странице. А обёртка, которую я показал выше, откладывает выполнение сценария до тех пор, пока вся структура страницы не будет загружена браузером полностью. Как вариант, который совсем не лишён логики и даже рекомендуется тем же Google, весь свой код можно расположить в конце страницы, перед закрывающим тегом

Is there a version of jquery UI that works with jQuery 1.4.2?


They all met problem when using jquery ui with jQuery 1.4,is there a release of jquery UI that’s compatible with jquery 1.4 now?

1 Answer 1

Yes, jQuery UI 1.8+ (as of this question: 1.8.6) you can download it from the main site.

Not the answer you’re looking for? Browse other questions tagged jquery jquery-ui or ask your own question.

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2020 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0 with attribution required. rev 2020.11.14.35452

jQuery и другое…

css, html, php, javascript, jQuery, ajax … – решения, примеры, рецепты

jQuery 1.4

Сегодня (по Москве почти в полночь) официально объявлено о выпуске jQuery версии 1.4. Выход новой версии, как и в прошлом году, приурочен к дню рождения библиотеки, которой исполнилось уже 4 года. Собственно, интересующиеся этой тематикой уже могли ознакомиться с релизами jQuery 1.4 Alpha 1 от 4 декабря 2009 года и jQuery 1.4 Alpha 2 от 18 декабря 2009 года. А 12 января появился релиз-кандидат jQuery 1.4rc1. Подробное знакомство с новшествами еще впереди, но я не мог не дать краткий обзор изменений и новых возможностей, которые появились в очередной версии. Начнем знакомство?

Метод .addClass(className) теперь может принимать в качестве аргумента не только имя класса (или классов), но и функцию .addClass(function), которая должна возвратить один или более имен классов, которые должны быть добавлены элементу. Если имен классов более одного, они должны быть разделены пробелами. На примере:

Аналогичные изменения претерпели методы .removeClass(className) и .toggleClass(className), которые также теперь могут принимать функцию в качестве аргумента.

Похожие изменения внесены в методы .after(content), .before(content), .append(content) и .prepend(content). Все эти методы начиная с версии 1.4 могут принимать в качестве аргумента функцию, которая должна возвращать строку html-кода.

Аналогичным образом дополнены методы .html(htmlString) и .text(textString). Если до версии 1.4 эти методы принимали аргументом соответственно строку html-кода и обычный текст, то теперь аргументом может быть также функция – .html(function) и .text(function). Функции должны возвращать соответственно html-код и текст.

Дополнен метод .val(). Теперь при установке нужного значения можно использовать не только собственно значение, но и функцию, которая должна возвращать требуемое значение.

Дополнен метод .css(). Если раньше для того, чтобы установить значение какого-либо css-свойства мы использовали .css(propertyName, value) или .css(map) для того, чтобы установить значения сразу нескольких css-свойств элемента, то теперь получили возможность использовать во втором аргументе функцию, возвращающую то значение, которое должно быть установлено этому css-свойству .css(propertyName, function).


Чтобы сохранить произвольные данные, связав их с выбранным элементом мы должны были передать методу .data(key, value) соответствующие пары ключ/значение. Теперь аргументом этого метода может быть и непосредственно объект .data(obj). Чтобы получить доступ к сохраненным данным требуется указать .data(key) имя под которым были сохранены эти данные. В дополнение к этому с версии 1.4 можно вызвать метод .data() без аргументов, и в этом случае данные будут возвращены в виде объекта.
Точно также теперь можно поступить и в том случае, если данные, связанные с элементом были сохранены в свойстве data объекта jQuery.

Начиная с версии 1.4 добавлены вспомогательные функции jQuery.isEmptyObject(object) – проверяет, является ли объект пустым (не содержащим свойств)

и jQuery.isObjectLiteral(object) – проверяет является ли он простым объектом (создан с помощью <> или new Object)

Цукерберг рекомендует:  Красивый эффект для кнопки

Добавлены методы .prevUntil([selector]), .nextUntil([selector]) и .parentsUntil([selector]). Первые два новых метода помогут выбрать все элементы соответственно перед и после, но при этом ДО элемента [selector] указанного в качестве аргумента метода. А метод .parentsUntil([selector]) поможет выбрать всех родителей, но также ДО элемента [selector] указанного в качестве аргумента.

Дополнены методы .wrap(wrappingElement), .wrapAll(wrappingElement) и .wrapInner(wrappingElement). Теперь в качестве аргумента этих методов можно использовать функцию, которая должна возвращать структуру в которую будет обернут каждый выбранный элемент (для wrap), все выбранные элементы (для wrapAll) или внутреннее содержимое выбранного элемента (для wrapInner). Также добавлен новый метод .unwrap(), название которого говорит само за себя – удаляет непосредственных родителей выбранных элементов, оставляя сами элементы без изменений.

Добавлен весьма полезный метод .delay(duration, [queueName]), которые позволяет установить таймер задержки выполнения следующего пункта очереди. На примере:

Здесь метод fadeIn начнет выполняться только через 800 миллисекунд после того, как отработает метод slideUp.

Добавлен метод .detach([selector]), который похож на метод .remove() тем, что также удаляет выбранные элементы из DOM, но, в отличие от .remove() новый метод сохраняет данные, связанные с удаленными элементами, что можно использовать при возврате удаленных элементы обратно в DOM.

Добавлен метод .toArray(), который возвращает в виде массива все DOM-элементы, включенные в набор jQuery. Выполнив

увидим что-то вроде

Дополнен метод .replaceWith(newContent) и теперь в качестве аргумента может использоваться функция, которая должна возвращать строку html-кода, которым должен быть заменен выбранный элемент.

Дополнен метод .add(), с помощью которого можно добавлять в существующий набор дополнительные элементы. Если до версии 1.4 в качестве аргумента можно было указать jQuery-селектор, элемент(или элементы) и фрагмент html-кода, то теперь появилась возможность после селектора указать второй аргумент – контекст, в котором будет производится поиск нужного элемента(ов).

Добавлены новые методы .focusin(handler(eventObject)) и .focusout(handler(eventObject)). Методы вызывают обработчики соответственно при получении и потере фокуса выбранным элементом. В качестве аргумента обработчик принимает объект события.

Добавлен метод .has(selector), с помощью которого можно проверить наличие элемента внутри другого элемента. Для разметки

Такой код добавит в список элемент li с текстом Yes.

Дополнен метод .index(element) с помощью которого можно было узнать индекс DOM-элемента в наборе. Теперь может принимать в качестве аргумента селектор jQuery, а также может быть вызван без передачи аргумента. Довольно интересно, чтобы смотреть на примерах.

В качестве аргумента DOM-элемент:

В качестве аргумента объект jQuery:


И без передачи аргумента:

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

Дополнен метод .closest(selector), теперь вторым параметром можно передать контекст.

Добавлен новый метод .clearQueue([queueName]), который удаляет из очереди все функции, которые еще не были выполнены. Похож на .stop(true), однако есть отличия.

Дополнен метод .offset(), который позволяет получить координаты выбранного элемента относительно документа. Теперь координаты можно будет устанавливать с помощью передачи этому методу аргумента – .offset(coordinates). Здесь coordinates – объект, содержащий свойства top и left, значениями которых являются числовые значения новых координат. Также в качестве аргумента может выступать функция .offset(coordinates(index,coords)), которая в свою очередь принимает в качестве первого аргумента индекс элемента в наборе, а качестве второго – его новые координаты.

Изменения коснулись и функция jQuery(). Теперь при ее вызове без аргументов будет возвращен пустой набор.

Изменения во вспомогательной функции jQuery.param(obj), которая упорядочивает предоставленный объект или массив, представляя его в форме, пригодной для передачи в URL или Ajax-запросе. Начиная с версии 1.4 можно передавать второй параметр jQuery.param(obj, traditional), где traditional – логическое значение, которое устанавливается в true, если необходимо эмулировать поведение этой функции как в версиях ниже 1.4.

Новая вспомогательная функция jQuery.contains(container, contained), позволяющая проверить существование элемента DOM внутри другого элемента DOM. Здесь container – элемент DOM, который может содержать другой элемент DOM, а contained – элемент DOM, который может находится внутри. На примере:

Добавлена jQuery.noop() – функция, которая ничего не делает.

Новый метод jQuery.proxy(). Принимает пару аргументов, например так jQuery.proxy(function, scope), где function – функция, область видимости которой будет изменена, а scope – объект в который должна быть установлена область видимости функции. Грандиозно! Еще вариант – jQuery.proxy(scope, name), где scope – то же, а name – имя функции, область видимости которой будет изменена (должно быть свойством объекта ’scope’). На примере:

Обзор конечно получился краткий, несколько поспешный и насколько я уже понимаю с некоторыми неточностями (не по моей вине ), но для тех, кто хочет сам покопаться и разобраться повнимательнее – новый сайт API jQuery.

jQuery для начинающих.ч.1. Начинаем с нуля

Как веб-дизайнеру, мне давно стал интересна такая вещь, как библиотека Javascript jQuery. Не владея ей, я не могу считать себя достаточно профессиональным. В этой серии уроков мы с вами разберёмся в азах jQuery. После этого цикла в блоге появятся более серьёзные и продвинутые статьи по этой библиотеке.

Что такое jQuery и почему он?

Почему jQuery? Потому что во-первых нам отныне не придётся прописывать кучу кода Javascript, и мы научимся выполнять то же самое, прописав всего лишь одну- две строки. И потому что jQuery, подобно WordPress, имеет кучу улучшений и дополнений.

Если брать из Википедии,
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.

Работа в jQuery. Первые команды

Для начала подключим jQuery:


Убедитесь, что используете Minifest — версию.

Второй, и более верный способ — подключать через Google’s Content Delivery Network (CDN). Это гарантирует самую последнюю версию.

Перед тем, как чтото туда писать, научимся выбирать нужные элементы. Это довольно просто — используется знак $.
Т.е. $(‘выбранные элементы’). Для того, чтобы выбрать все div’ы на этой странице, придеться прописать $(‘div’).

Комбинировать можно как угодно.

Создадим новый Div на нашей странице.

Пропишем ему стили:

получится что-то в этом духе:

Заставим его двигаться.

Финальной частью нашего первого урока будет движение этого блока на странице. Для начала выделим его:

Можно конечно использовать и $(‘div’), но лучше всё максимально конкретизировать.
Чтобы заставить объект двигаться, используем функцию animate():

Вообще есть у этой функции три опции, но одна необязательна.

Если более детально взглянуть на «что поменять», видим:

То есть в итоге мы задаём отступ сверху 300, слева 400, и скорость 1000. 1000=1сек. ‘возврат’ выполняется после совершения движения, но сейчас мы обойдёмся без него.

Частые ошибки новичков при работе с jQuery

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

Консоль должна быть открыта. Закрытая консоль, конечно же, не ошибка в коде, однако, ошибочный подход во время отладки сценария. Именно консоль поможет быстро сориентироваться в том, где и какая допущена ошибка, а также следить за ходом выполнения сценария. Во всех современных браузерах — этот инструмент присутствует по умолчанию. Например, в FireFox консоль можно вызвать с помощью сочетания клавиш Ctrl + Shift + K или «Меню» > «Разработка» > «Веб-консоль«. В Chrome вызывается сочетанием клавиш Ctrl + Shift + J или «Меню» > «Дополнительные инструменты» > «Консоль JavaScript«. В Opera — сочетание клавиш аналогичны Chrome, вызов из меню — «Инструменты разработчика» > «Веб-инспектор» («Инструменты разработчика» предварительно включить в пункте «Другие инструменты»). Кроме того, существуют инструменты/аддоны, как, например, замечательный FireBug под FireFox или Web Developer для Chrome и этот же инструмент для FireFox

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

  1. Оставляем одну новую библиотеку и сразу после неё подключаем плагин jQuery Migrate, который, в большинстве случаев, помогает решить вопрос совместимости.
  2. Без каких-либо дополнений, сами заменяем в плагине удаленные методы на их современные аналоги. Обычно, это такие устаревшие или удаленные методы, как live(), $.browser и т.д.
  3. И конечно же, можно найти современный аналог плагина, который вам понравился. Не зацикливайтесь на одном.
Цукерберг рекомендует:  Pascal - О проекте, или как работает данный сайт


Ну, и примерный порядок подключения:

Код не обернут в конструкцию DOM-Ready. Одна из наиболее популярных ошибок. Если ваш скрипт расположен/подключен в теге , то его нужно обязательно заключить в такой код:

Это так называемый «обработчик готовности дерева DOM«. Попробую «на пальца» и простым языком объяснить, что это и зачем нужно. Браузер загружает страницу, начиная с первого на ней элемента и движется вниз. Всё, что подключено в теге : CSS, JS и т.д., загрузится и начнёт выполняться раньше, чем дело дойдёт до элементов, которые находятся в . Поэтому, при обращении к элементу из JS-кода, его еще попросту нет на странице. А обёртка, которую я показал выше, откладывает выполнение сценария до тех пор, пока вся структура страницы не будет загружена браузером полностью. Как вариант, который совсем не лишён логики и даже рекомендуется тем же Google, весь свой код можно расположить в конце страницы, перед закрывающим тегом

Релиз jQuery 2.0

18 апреля 2013 года вышел релиз популярнейшей jаvascript библиотеки — jQuery 2.0. Версия jQuery 2.0 по числу нововведений, функциональности и API полностью аналогична выпуску 1.9. Отличие заключается в прекращении поддержки браузеров Internet Explorer 6, 7 и 8, а также сопутствующими оптимизациями и упрощением кодовой базы.

Поддержка устаревших версий Internet Explorer вынуждала разработчиков использовать множество обходных путей и «хаков», которые в итоге отрицательно влияли на производительность. Удаление устаревшего кода позволило обеспечить более быструю реализацию некоторых функций и примерно на 12% сократить размер библиотеки. В обозримом будущем разработчики намерены поддерживать обе ветки jQuery, поэтому выбор версии 1.0 или 2.0 зависит от того готовы ли разработчики web-приложений отказаться от поддержки устаревших версий Internet Explorer. В качестве оптимального варианта предлагается по умолчанию загружать версию jQuery 2.0, но если запрос поступил от пользователя IE выдавать jQuery 1.9.

Примечательно, что браузер Internet Explorer 8 ещё поддерживается производителем и находится в обиходе (IE 8 занимает приблизительно 10% рынка браузеров, для сравнения IE9 доля составляет 15%). Тем не мене разработчики jQuery приняли решение по отказу от его поддержки. В качестве причины упоминается то, что несмотря на существенный прогресс в обработке CSS, реализация DOM API в IE8 оставляет желать лучшего и мало чем отличается от IE6 и IE7, поэтому имеет смысл или прекратить поддержку всех трёх версий или продолжать мучиться с поддержкой устаревшего кода.

Кроме оптимизации кодовой базы в jQuery 2.0 также представлены расширенные средства для создания минималистичных сборок библиотеки, содержащих только необходимый набор функций. Разработчики теперь могут на своё усмотрение формировать состав библиотеки на основе комбинации 12 модулей. Минимальный движок селекторов и обвязка querySelectorAll API могут быть упакованы в файл, размером менее 10 Кб. Так же отмечается, что jQuery 2.0 рассматривается в качестве основой ветки для поддержки окружений, выходящих за рамки сайтов, например, при использовании jQuery для разработки браузерных дополнений, для создания приложений для Firefox OS, Windows Metro, BlackBerry, PhoneGap/Cordova и Chrome OS, для серверных скриптов, выполняемых под управлением Node.js.

Большая часть остальных изменений, которые справедливы, как для jQuery 2.0, так и для ветки 1.9, связана с проведением чистки кодовой базы и удалением устаревших возможностей. Для обеспечения работы кода, написанного для старых версий jQuery, представлен специальный плагин jQuery Migrate. В дальнейшем API jQuery будет развиваться синхронно для веток 1.x и 2.0, т.е. параллельно с версиями 2.1, 2.2 и т.п. будут подготовлены версии 1.11, 1.12 и т.п., включающие те же изменения в API. Выпуск jQuery 1.10 будет нацелен на сведение к минимуму отличий API от jQuery 2.0 и исправлению ошибок.

Из особенностей API jQuery 1.9 и 2.0 можно отметить:

  • Значительная модернизацияAPI и прекращение поддержки устаревших функций, таких как .toggle(function, function, . ), .browser(), .live(), .die() и .sub;
  • Новый опциональный синтаксис метода .css() для формирования на основе произвольного набора имён CSS-свойств готового CSS-объекта с указанием значений данных свойств. Например,
    var dims = $(«#box»).css([ «width», «height», «backgroundColor» ]);
    вернёт

Основы jQuery

В этой главе мы создадим наш первый jQuery скрипт. Этот скрипт простой, но в нем наглядно представлены большинство из наиболее важных характеристик jQuery, включая то, как выбираются элементы в документе, как такая выборка выглядит, а также характер отношений между jQuery и встроенным DOM API, который является частью спецификации HTML. В таблице 5-1 представлено краткое содержание этой главы.

Таблица 5-1: Краткое содержание главы

jQuery — Введение

В этой статье мы познакомимся с библиотекой jQuery, рассмотрим её назначение и основную причину её популярности. После этого обозначим основные способы подключения данной библиотеки к веб-странице и основные принципы работы с ней.

Что такое jQuery?


jQuery — это библиотека, написанная на языке JavaScript, которая предназначена для кроссплатформенного манипулирования HTML страницей после того как она отобразится в браузере. Кроме этого, jQuery содержит инструменты помогающие перехватывать и обрабатывать события, создавать анимацию на веб-странице и методы, которые позволяют взаимодействовать с сервером без перезагрузки страницы (AJAX).

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

Единственным недостатком данной библиотеки, если это можно считать недостатком, является её вес (размер), который занимает около 100 Кбайт.

Подключение библиотеки jQuery к веб-странице

Для того, чтобы использовать функции библиотеки jQuery, её необходимо подключить к своей веб-странице одним из следующих способов:

    Скачать данную библиотеку с официального сайта и подключить её с помощью элемента script : Обычно данную строчку располагают в конце HTML документа до закрывающего тега body , но перед другими библиотеками, которые её используют.

  • Используя Google CDN или другие CDN сервера: Данный способ имеет следующие преимущества:
    • при посещении сайтов, на которых URL-ссылка для загрузки библиотеки jQuery имеет один и тот же вид, библиотека jQuery будет загружаться уже не с сервера, а с кэша браузера пользователя.
    • сокращает Ваш сетевой трафик, т.к. загрузка происходит не с вашего сервера, а с сервера сети Google.
  • Какой формат библиотеки jQuery выбрать для загрузки?

    На сайте http://jquery.com для загрузки доступны 2 варианта библиотеки jQuery: сжатый и обычный.

    Первый отличается от второго тем, что в нём исходный код библиотеки находится в сжатом виде, т.е. из него удалены пробелы, разрывы строк и др. Следовательно, сжатый файл исходного кода библиотеки jQuery более предпочтительно использовать на рабочем сайте, т.к. это сократит загрузку и повысит производительность выполнения запросов на странице.

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

    Как использовать библиотеку jQuery?

    После подключения библиотеки jQuery к HTML документу её можно использовать с помощью функции jQuery ( window.jQuery() ). Данную функцию можно использовать не только по имени jQuery , но и по более короткому и красивому псевдониму — знаку $ . Не забываем, что в JavaScript функции являются тоже объектами, следовательно, $ — является объектом.

    Работа с jQuery всегда начинается с функции jQuery() или её псевдонима $() . Данная функция может принимать один или два аргумента. В зависимости от переданных ей значений аргументов функция jQuery() выполняет то или иное действие. В большинстве случаев данную функцию используют для выбора элементов, создания элементов или вызова анонимной функции. Если, например Вы будете использовать функцию jQuery для выбора элементов, то получите объект jQuery, состоящий из выбранных элементов. Следующий этап при работе с библиотекой jQuery обычно сводится к вызовам различных методов jQuery.

    Рассмотрим работу с jQuery на следующем примере:

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих