jQuery. Основы


Содержание материала:

Библиотека jQuery

Если вкратце охарактеризовать то, что делает библиотека jQuery, то это прозвучит довольно обыденно: данная библиотека позволяет изменять содержимое HTML-документов путем манипулирования объектами модели, создаваемой браузерами в процессе обработки HTML-кода (так называемые DOM-манипуляции).

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

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

Средства jQuery необычайно выразительны. Эта библиотека позволяет добиться гораздо большего при намного меньшем объеме кода, чем в случае использования программных DOM-интерфейсов браузеров.

Методы jQuery применимы к целым группам элементов. Предлагаемый в DOM-модели стандартный подход, основанный на шаблонной цепочке действий «выбрать-повторить-изменить», больше не требуется. Следствием этого является уменьшение количества циклов for в коде, а значит, и снижение вероятности появления в нем ошибок.

Библиотека jQuery справляется с различиями в реализации DOM в различных браузерах (проблемы кросс-браузерности). Например, меня не должна беспокоить мысль об особенностях поддержки того или иного средства, чем печально славится браузер Internet Explorer (IE). Достаточно всего лишь сформулировать jQuery свои пожелания, и библиотека самостоятельно обеспечит совместимость с конкретным браузером.

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

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

Введение в jQuery

Материал из JQuery

jQuery — javascript библиотека, использование которой делает разработку javascript кода намного быстрее, проще и приятнее.

Содержание

Небольшая подсказка

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

Начнем

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

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

$(«div») вернет все div-элементы на странице.
$(«.someBlock») вернет все элементы с классом someBlock.
$(«#content») вернет элемент с идентификатором content.
$(«#content2 div.someBlock») вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2.
$(«div:odd») вернет div-элементы, находящиеся на странице под нечетными номерами.
$(«[value = 5]») вернет все элементы с атрибутом value, равным 5.

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

$(«#bigIt»).css(«height») возвратит значение высоты у элемента с идентификатором bigIt.
$(«div»).css(«width», «20px») установит новое значение ширины всем div-элемента на странице.
$(«#bigIt»).attr(«class») возвратит значение класса элемента с >
$(«#bigIt»).attr(«class», «box») установит новое значение атрибута >
$(«#bigIt»).html(

)

изменит все html-содержимое элемента с >
$(«#bigIt»).text() возвратит текст, находящийся внутри элемента с >
$(«.someBox»).empty() очистить от содержимого элементы с классом someBox.

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

Функция $()

Функция с лаконичным именем $() является, пожалуй самой главной во всей библиотеке. С ее помощью можно находить элементы на странице (в чем вы уже убедились), добавлять «на лету» новый html:

Кроме этого, $() позволяет привязать всю функциональность jQuery к уже существующим объектам DOM-элементов:

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

Начало работы скрипта

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

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

Цепочки методов

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

эти цепочки могут состоять из гораздо большего числа методов. Для удобочитаемости, цепочки часто пишут «в столбик»:

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

Работа с набором элементов

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

$(«div»).parent() вернет родительские элементы всех div-ов.
$(«div»).children() вернет дочерние элементы всех div-ов.
$(«#someId»).next() вернет элемент, лежащий сразу после someId.
$(«div»).prev() вернет элементы, лежащие перед div’ами.
$(«div»).eq(i) вернет div-элемент, с индексом i в наборе.
$(«div»).get(i) вернет DOM-объект div’а, с индексом i.
$(«div»).get() вернет массив DOM-объеков всех div-ов.
$(«div»).size() вернет размер набора (количествово div-ов).

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

Отметим различия методов get(i) и eq(i). Первый возвращает непосредственно DOM-объект элемента, идущего под номером i в наборе (кстати, нумерация начинается с 0). К такому элементу вы не сможете применить методы jQuery, зато сможете применить стандартные javascript методы. Метод eq(i) наоборот, возвращает i-й элемент в таком виде, что к нему можно применять методы jQuery. Вообще, для того, чтобы к элементам можно было применять методы библиотеки jQuery, они должны находиться в так называемом объекте jQuery, именно его возвращает функция $().

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

Анимационные эффекты

Умело изменяя свойства элементов, можно заставить их делать различные эффекты, такие как перетаскивание, сворачивание и разворачивание, плавное изменение прозрачности и.т.д. Функционал jQuery позволяет делать это максимально просто (список всех методов в разделе эффекты).

Ключевым методом, на которой базируются все остальные, является метод animate(), с помощью которого можно задавать плавное изменение различных CSS-свойств:

properties — список CSS-свойств, участвующих в анимации и их конечных значений. Задаются объектом, в формате , например:.
duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд). easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). Задается строковым значением: "linear" и "swing" (для равномерной анимации и анимации с ускорением). Другие варианты можно найти в плагинах. callback — функция, которая будет вызвана после завершения анимации.

Пример. Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим плавно скрыть этот элемент, заменить текст, и плавно сделать элемент видимым:

значения "hide", "show" означают исчезновение и появление элемента, за счет параметра, к которому они применены.

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

элемент с идентификатором my-div, в начале будет плавно исчезать с экрана, а затем начнет плавно появляться вновь. Однако, анимации, заданные на разных элементах, будут выполняться одновременно:

В jQuery реализована возможность выполнения запросов к серверу без перезагрузки страницы, так называемая технология ajax. Базовыми функциями для ее работы являются post() и get() (есть еще более низкоуровневая, ajax(), но мы ее не будем рассматривать):

url — url-адрес, по которому будет отправлен запрос. data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: . callback() — пользовательская функция, которая будет вызвана после ответа сервера. dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос (подробности тут).

Рассмотрим примеры с методом get, использование второго метода аналогично. Сделаем простейший ajax-запрос: отправим пустой запрос к серверу и не будем обрабатывать ответ. Это может быть использовано, например для подсчета количества наведений курсора на баннер (при каждом наведении серверу будет отправляться сигнал).

Теперь, отправим данные на сервер и обработаем их. Javascript будет выглядеть следующим образом:

На сервере, обработка Ajax запроса ничем не отличается от обработки обычного запроса (как когда вызывается главная страница сайта):

В результате этого запроса, на странице появится табличка с текстом "I get param1 = param1 and param2 = 2"

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

Запросив эту страницу методом get или post, полученные данные можно будет легко обработать:

Помимо рассмотренных методов, существует и методы с более узкой направленностью: load() запрашивает html-текст и автоматически вставляет его в выбранные элементы, $.getScript() делает запрос javascript-файла и автоматически его выполняет. Эти и другие функции можно найти в разде Ajax.

Разные плюшки

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

$.browser поможет узнать тип браузера. $.support поможет узнать конкретные особенности браузера. .offset() и .position() позволят узнать или изменить позицию выбранного элемента. .width() и .height() позволят узнать или изменить размеры выбранного элемента. .scrollTop() и .scrollLeft() позволят работать с прокруткой. Функции из раздела события позволят обрабатывать различные события, происходящие на странице.

В разделе «Рецепты» вы сможете найти удачные решения многих задач средствами jQuery.

Подключение jQuery к вашему сайту

Для того, чтобы функциональность библиотеки jQuery стала доступной на страницах вашего сайта, необходимо скачать файл с библиотекой на официальном сайте jquery (ссылка с текстом "Download the compressed, production jQuery", чтобы скачать библиотеку, необходимо кликнуть по ссылке правой клавишей мыши и выбрать "Сохранить ссылку как.."). Полученный файл нужно будет загрузить на сервер, где лежит ваш сайт, и подключить этот js-файл на страницы сайта:

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

Титры

Часть текста в данной статье позаимствована из статьи "Query – Javascript нового поколения" журнала RSDN. Это одна из первых статей по 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 - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода.

Девиз jQuery "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение.

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

Данная библиотека работает со всеми браузерами (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome). Это значит, что Вам больше не нужно будет беспокоиться о кроссбраузерной совместимости JavaScript кода.

Для jQuery написано огромное количество плагинов, которые позволяют расширить ее возможности еще больше.

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

Добавление jQuery на страницы

Для того, чтобы начать использовать jQuery необходимо:

  1. Скачать ее с официального сайта. Существуют две версии jQuery: для использования в готовых приложениях (production) и для разработки (development). Версия для разработки содержит комментарии и структурированный код. В сокращенной версии нет комментариев и код в ней не структурирован зато она занимает меньше места и поэтому страницы с ней будут загружаться быстрее. После того, как Вы выберите подходящую версию нажмите на кнопку "Download ( jQuery )"
  2. Добавить ее на страницу. Для этого следующий код должен быть добавлен на страницу в секцию head:

Для тех кто по каким-либо причинам не может (или не хочет) скачивать jQuery предусмотрен альтернативный способ удаленного использования библиотеки предоставленный компанией Google.

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


Сделайте сами

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

Основы jQuery

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

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

jQuery для начинающих // JavaScript

jQuery – это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение – лучше всего начинать с наглядных примеров, и они далее…

Материалы данной статьи включены в учебник «jQuery для начинающих». Учебник распространяется бесплатно, и сопровождается интерактивными примерами.

Как же все-таки работает jQuery?

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

А основные моменты Вам поможет понять следующая диаграмма:

Как получить элемент с помощью jQuery?

Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивается селектор jQuery:

    $(“#header”) – получение элемента с >Начнем с простенького примера – слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)

Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между “active” и “btn-sl >

Магические исчезновения

Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):

Когда мы кликаем по картинке , будет найден родительский элемент

Связанная анимация

Теперь пример посложнее, но он поможет Вам лучше понять jQuery. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. (см. пример):

Line 0: когда прогрузилась страница (DOM готов к манипуляциям)
Line 1: привязываемся к событию click для элемента
Line 2: манипулируем элементом

Гармошка #1

Пример реализации “гармошки”. (см. пример)

Теперь приступим к разбору полетов:
Первой строчкой мы добавляем класс “active” первому элементу

внутри

, для следующего в нём элемента

будет применен эффект slideToggle, затем для всех остальных элементов

будет применен эффект slideUp. Следующие действие изменяет класс заголовка на “active”, затем ищем все остальные заголовки

и убираем у них класс “active”

Гармошка #2

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

В CSS у нас указано для всех элементов

display:none. Теперь нам необходимо открыть третью панель. Для этого мы можем написать следующее $(“.accordion2 p”).eq(2).show(), где eq обозначает равенство. Помните, что индексирование начинается с нуля:

Анимация для события hover #1

Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это?), (см. пример):

Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента , и анимируется его прозрачность и расположение:

Анимация для события hover #2

Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см. пример)

Кликабельные блоки

Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. пример):

Создадим список

    с классом >

Складывающиеся панельки

Ну а теперь чуть-чуть скомбинируем предыдущие примеры и создадим ряд складывающихся панелек (наподобие как в Gmail организован inbox). (см. пример)

    скрываем все элементы

Имитация Backend’a WordPress’a

Я думаю многие из читателей сталкивались с админской частью wordpress’a, точнее с редактирование комментариев. Попробуем сделать что-то подобное. Для анимации фонового цвета нам понадобиться соответствующий плагин для jQuery. (см. пример)

    добавим класс “alt” к каждому чётному элементу

Галерея изображений

Простейший пример реализации галереи, без перезагрузки страницы. (см. пример)

Для начала добавим тэг в заголовки

По клику на изображения в

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

  • сохраняем значение атрибута “href” в переменной “largePath”
  • сохраняем значение атрибута “title” в переменной “largeAlt”
  • заменяем в элементе значение атрибута “scr” и “alt” значениями из переменных “largePath” и “largeAlt”
  • так же присваиваем элементу “h2 em” значение из “largeAlt”

Стилизируем ссылки

Большинство нормальных браузеров легко понимают когда мы хотим добиться от них стилизации ссылок для различного типа файлов, для это цели можно использовать следующее CSS правило: a[href $=’.pdf’] < … >. Но как обычно IE6 отличается умом и сообразительностью, по этой причине будем ставить ему костыли используя jQuery. (см. пример)

Для начала добавим класс для каждой ссылки, в соответствии с типом файла.
Затем выберем все элементы которые не содержат ссылки на “http://www.webdesignerwall.com” и не начинающиеся на “#” в “href”, затем добавим им класс “external” и устанавливаем target= “_blank”.

Так же Вы можете посмотреть все примеры или скачать jQuery tutorial for beginners.

Библиотека jQuery: где скачать, как подключить, основы работы

Неожиданно для себя обнаружил, что на блоге нет, фактически, ни одного упоминания о чумовой библиотеке для работы с JavaScript — jQuery.

Если считаете, что для удобной и быстрой разработки клиентского взаимодействия достаточно обычного JavaSciprt, которые вроде бы и не сложен, могу ответить одно: почти наверняка на вашем пути сложных проектов ещё не встречалось. Конечно, для простейшего взаимодействия со страницей — например, запросить содержимое элемента по его id — библиотеки не нужны. Но представьте, если нужный элемент располагается где-то в недрах кода, и для доступа к нему потребуется пройтись по дереву вышележащих элементов и классов. В этом случае придётся писать свою реализацию для поиска. Однако, сюрпризы только начинаются — код, прекрасно работающий в Firefox, может напрочь отказаться работать в IE или Chrome. Соответственно, придётся либо искать универсальный метод, который бы работал везде, либо использовать «костыли», что довольно долго, т. к. подразумевает дополнение кода проверками работы того или иного метода.

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

Что же позволяет этот «зверь»? В самом ли деле нужно изучать основы работы и новый синтаксис ещё одной библиотеки? Если попробуете, то сможете легко получить доступ к элементам страницы с помощью модели построения селекторов в CSS, манипулировать элементами, классами и атрибутами и ещё много чего полезного. Но на самом деле — решать вам. Только учтите, что поработав с jQuery будет сложно заставить себя программировать по старинке, на чистом JavaScript. Ну, я предупредил.

Прежде, чем перейти к основным темам статьи, позволю себе объяснения, которые в дальнейшем пригодятся. Так повелось, что язык гипертекстовой разметки — HTML — постоянно развивался и продолжает это делать сейчас. Начиная с 4-ой версии от него отпочковался XHTML, который предусматривает несколько другую обработку документов — весь код должен быть абсолютно валидным и не содержать ошибок (в противном случае, браузерам разрешается прекращить дальнейшую обработку), в то время, как HTML допускает любые вольности, и все обозреватели обязаны хоть как-то, но отобразить страницу. Чтобы узнать, какую спецификацию поддерживает сайт, достаточно заглянуть в начало кода страницы и найти тег DOCTYPE.

Следующие документы следуют спецификации XHTML:

Спецификация HTML5 имеет упрощённое определение:

В остальных случаях браузеры будут считать, что документ следует рассматривать как HTML 4.01.

Основное значимое отличие — XHTML требует, чтобы все теги были закрытыми. В случае отсутствия у элемента закрывающего тега на конце необходимо использовать слеш /. Кроме того, названия нужно задавать в нижнем регистре. Несколько примеров помогут понять, о чём речь:

HTML XHTML
link link
или

Выборка одного элемента в JavaScript производилась с помощью метода document.getElementById(‘id-элемента’), нескольких — documents.getElementsByTagName(‘тег нужного элемента’), после чего по списку требовалось пробежаться в цикле и выполнить необходимое дейстие. В jQuery это выполняется гораздо проще, а нужное действие можно применить сразу же ко всем элементам. Для выборки служит такая конструкция:

jQuery('selector').func()
где selector — правило, определяющее часть страницы (тег, класс, идентификатор),
func — метод, который будет применён ко всем полученным элементам.

Основные селекторы jQuery

Функциональность очень сходна с аналогичной в CSS, поэтому, если вы верстали документы, будет гораздо проще. Можно выделить следующие:

  • * — универсальный селектор, выбирающий абсолютно все элементы;
  • tag — селектор элементов, представляющий просто название любого тега (например: p, div, span, a); выбираются все запрашиваемые теги на странице;
  • . >

);
elem1 > elem2 — комбинатор «детей» — элеметны elem2, непосредственно вложенные внутрь elem1 (p > b →

), в отличие от предыдущей конструкции, p > i не найдёт ни одного элемента, т. к. i не является прямым потомком p (вложен в b);

  • elem1 + elem2 — комбинатор «следующий брат» — elem2, расположенный (не вложенный!) сразу же после elem1, по сути — следующий элемент (b + i → bi);
  • elem1

    elem2 — комбинатор «нижеследующие братья» — elem2, расположенные (не вложенные!) после elem1, в отличие от предыдущего пункта, ищутся элементы, не обязательно непосредственно следующие за elem1 (b

    i → b span i);

  • elem:first — выбор только первого элемента из всех elem;
  • elem:last — выбор только последнего элемента;
  • elem:eq(n) — выбор только n-ного элемента; нумерация начинается с нуля, запись :eq(n) эквивалентна :first;
  • elem:lt(n) — выбор всех элементов до n-ного;
  • elem:gt(n) — выбор всех элементов после n-ного;
  • elem:even — все чётные элементы (важно знать, что нумерация начинается с нуля, поэтому нулевой эменнт является чётным, хотя в потоке следует первым);
  • elem:odd — все нечётные элементы;
  • elem:visible — видимые элементы;
  • elem:hidden — невидимые элементы.
  • Этого списка должно хватить для получения различных множеств элементов. Как и в CSS, селекторы можно комбинировать для того, чтобы «достучаться» даже до самого глубокого тега:

    table — найти внутри div таблицу, следующую после подзаголовка h2;

  • form.reg input[type=»text»] — все теги , расположенные внутри формы с установлленым классом reg;
  • div > table td — ячейки таблицы, непосредственно вложенной в тег div.
  • jQuery: метод css против свойства style

    На самом деле, нет ничего сложного. Если в обычном JS для манипулирования существовал элемент style, то здесь всё гораздо проще:

    jQuery('selector').css('property', ['value'])
    где property — CSS-свойство,
    value — значение свойства.

    В случае, года значение не задано, будет возвращено текущее значение свойства. Свойства используются в «чистом виде», т. е. так же, как они записаны в стилях. Для JS пришлось бы писать, например, что-то вроде:

    document.getElementBy ;
    В jQuery код сократится до:


    jQuery('#id').css('background-color', '#f0f');
    Но не забываем, что здесь в качестве селектора можно задать сложное правило — библиотека возьмёт на себя поиск элемента. В чистом JS пришлось бы с этим повозиться.

    Атрибуты элемента: получить, удалить, добавить, изменить

    Получение, добавление или изменение атрибута выполняется аналогично, как и в случае с css, только нужно использвоать другой метод — attr:
    jQuery('selector').attr('name', ['value'])
    где name — название атрибута,
    value — значение атрибута (если не задано, будет возвращено текущее значение).

    Для удаления атрибута существует специальный метод:
    jQuery('selector').removeAttr('property')

    Классы элемента: удалить, добавить, изменить

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

    Добавить класс:
    jQuery('selector').addClass('class_name')
    где class_name — новый класс.

    Удалить класс:
    jQuery('selector').removeClass('class_name')
    Помимо этого есть весьма полезная возможность «переключения» класса. Принцип работы состоит в том, что если элементу уже назначен класс class_name, он (класс) удаляется, если нет — добавляется:
    jQuery('selector').removeClass('class_name')
    И осталась ещё одна функциональность, которой не коснулись — проверка, назначен ли элементу заданный класс (true, если да):
    jQuery('selector').hasClass('class_name')

    Содержимое контейнера — аналог innerHTML

    В JavaScript свойство innerHTML служит для получения или установки всего HTML-содержимого элемента. Для jQuery код упрощается до такого:
    jQuery('selector').html(['code'])
    где code — HTML-код, который будет присвоен найденным элементам. Если параметр не задать, будет возвращено содержимое (HTML).

    Как удалить элемент в jQuery?

    В отличие от чистого JavaScript, операция вырождается в одну строку кода:
    jQuery('selector').remove()

    Как вставить текст?

    Для JS существует свойство innerText которое, однако, поддерживают не все браузеры. Но мы же не ищем сложных путей, верно?
    jQuery('selector').text(['str'])
    где str — текст, который будет вставлен. Если параметр не задать, вернётся текущее текстовое содержимое.

    Как узнать количество элементов?

    Элементарно! Нужно прочитать содержимое свойства length:
    var cnt = jQuery('selector').length

    Как скрыть или показать элемент?

    Для этого существует два метода:
    jQuery('selector').hide(); // скрыть
    jQuery('selector').show(); // показать

    Что ещё может jQuery?

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

    Если вы решили непременно изучить jQuery, посмотрите официальные маны, там есть много чего полезного. Сразу предупреждаю, что там информация представлена на английском, но пусть это не страшит — по примерам почти всегда становится ясно, что делает тот или иной метод.

    В случае появления вопросов — жду их в комментариях.

    #0 — Введение в jQuery.

    Знание есть сокровище, но хранитель его — разум. Пенн Вильям

    Рады приветствовать вас на курсе по основам jQuery. Очевидно, если вы пришли на этот курс, вам не надо объяснять, что это за библиотека.

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

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

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

    Приятного всем просмотра! Учитесь с удовольствием!

    ОСНОВЫ jQuery

    Предисловие

    Данный 4-ёх страничный сайт - один из многих учебных веб-разделов, какие всегда делаю для себя во время самообучения.

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

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

    Разумеется, на них представлены только самые основные, постоянно используемые, базовые методы, основы jQuery.

    Относительно путей до папок.
    Прописаны мои. Это и понятно. Себе же делал. Абсолютно то же самое можно сказать и про многочисленные пометки, примечания. Делал себе. Как шпаргалку.

    В конце последнего раздела добавил ссылки на очень полезные ресурс и книгу, взятую с сайта, углублённо изучающего jQuery .
    Честно говоря, мне (для 90% задач) вполне хватает собственного справочного сайта, но, чтоб получился полноценный справочник - "полная картина маслом", добавил.
    Теперь, как говорится, "ближе к телу".

    ВВЕДЕНИЕ в jQuery

    Стандартный (простой) JavaScript НЕ СОВЕРШЕНЕН!

    Его недостатки:
    1. "Хромает" кроссбраузерность.
    2. Очень много кода. Очень.
    3. Имеет всего лишь 2 метода отбора элементов: по id и по .

    JavaScript сделал "скачок" в его повсеместном использовании только после появления в своём арсенале библиотек jQuery . Все крупнейшие ресурсы используют её.

    jQuery - это тоже JavaScript!

    Только УНИФИЦИРОВАННЫЙ! Это его библиотека.
    Постоянно дорабатывается и обновляется. Появляются новые возможности (методы).

    Основана на CSS-правилах - НЕ НУЖНО(!) учить новый синтаксис.

    Логика написания, синтаксис и работа скриптов очень похожа на PHP, только в отличие от него - это клиентский скрипт, а не серверный.

    Зная основы PHP, легко изучать основы JavaScript и jQuery, а кроме того - НЕ НУЖЕН(!) ЛОКАЛЬНЫЙ СЕРВЕР - всё можно разрабатывать в обычном "блокноте".

    ПОДГОТОВКА

    Скачать jQuery

    Библиотека БЕСПЛАТНА . Скачал jquery-1.10.1.min по адресу: http://jqurey.com Это минимизированная версия, но полнофункциональная!

    **Дополнительно скачал ещё файл map для неё, но пока НЕ ПОДКЛЮЧАЛ! Может быть он и не будет нужен?!

    **P.S. Мне он так и не понадобился!

    Сохранить jQuery

    Сохранил файлы (имеют расширение .js ) в папке js тестового сайта.
    Полный путь: QJSsite -> jquery -> testsite -> js -> jquery.js
    **Кроме неё, в этой же папке разместил ещё 2 файла: map.js и myscripts.js

    **Для учебно-справочных страниц держу свой файл-копию myscripts.js в корне ГЛАВНОЙ папки (закомментирован) .

    Подключить jQuery

    Вообще-то, библиотека подключается в области тэга , НО!
    Пока НЕ используется УНИВЕРСАЛЬНАЯ конструкция: "Ожидание создания DOM-дерева", с которым и работает JavaScript, возможно придётся подключать в разные места страницы тэга (Об этой конструкции ниже).

    Внутри тэга
    подключается УНИВЕРСАЛЬНЫМ тэгом подключения скрипта:
    *если в корне

    *если в папке
    Между тэгами НИЧЕГО не вставляется!
    Особое внимание правильному (т.е. просто, либо ../../) адресу!

    Внутри тэга
    *если в теле страницы
    Особое внимание С И Н Т А К С И С У ! (т.е. ; . , ] > ) ' " : пробелы и т.д.)

    Теперь можно библиотеку jQuery использовать!
    (Всегда проверять СОВМЕСТИМОСТЬ версий плагинов с используемой версией jQuery!)

    После подключения к стандартному JavaScript его библиотеки jQuery, в нём появилась ШИКАРНАЯ возможность использовать УНИВЕРСАЛЬНУЮ функцию jquery(' ');

    Краткое написание: $(' '); = jquery(' ');

    Кавычки внутри ОДИНАРНЫЕ!

    Оба написания идентичны, но нужно учитывать, что символ $ очень часто используется другими языками программирования. Полное - уберегает от конфликта с ними.
    Правда, редко кто будет пытаться использовать 2 разные библиотеки на одной странице.

    УНИВЕРСАЛЬНАЯ функция может:

    1. Отбирать объекты (элементы) (называется jquery-набор).
    3. Совершать с ними различные действия.
    2. Прописывать объектам события.

    **Всегда держать в голове схему: Объект - Событие - Действие

    Функция ожидания формирования DOM-дерева

    Пока DOM-дерево НЕ ПОСТРОЕНО, НЕ ДОЛЖНЫ ПЫТАТЬСЯ использовать скрипт. (Убирал строчку скрипта в конец страницы.)

    Теперь этого делать не нужно. У jQuery есть конструкция "ожидания" (специальный метод ready), в которой прописано: "Дождаться построения DOM-дерева, а затем исполнять ВСЕ скрипты."

    Есть сокращённая запись.

    **P.S. Лучше не забывать в конце конструкции ставить комментарий //конец ready На странице (в файле скриптов) может быть НЕ ОДИН модуль с такой конструкцией.

    КОММЕНТАРИИ: /* . . . */ - многострочные // . . - однострочные.

    **Всегда(!) держать в голове схему: Объект - Событие - Действие

    Не все версии плагинов подходят к, пусть даже самой свежей, версии jQuery!

    П Р О В Е Р Е Н О . И всегда проверять СОВМЕСТИМОСТЬ!

    И ещё раз - С И Н Т А К С И С ! (т.е. ; . , : ] > ) ' " пробелы и т.д.)

    * И последнее. Всегда помнить! *

    jQuery - клиентский скрипт! Работает только в браузере пользователя. Никакие её скриптовые "ухищрения" HTML-код НЕ МЕНЯЮТ!

    ПОДГОТОВКА закончена, перехожу к ВЫБОРКЕ:

    Нижняя синяя стрелка вернёт на главную страницу раздела "Просто jQuery".

    Все права защищены. Copyright © 2009 - Коротеев Владимир.

    Примеры jQuery для начинающих

    Главная → JavaScript → Примеры jQuery для начинающих

    jQuery — javascript библиотека, состоящая из кроссбраузерных функций — оплеток для манипулирования элементами DOM (Document Object Model — Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера. К примеру, получение элемента html документа по ID, в разных браузерах происходит по разному. До появления jquery, я использовал такую функцию:

    Чтобы это же действие совершить в jquery, достаточно сделать так:

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

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

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

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

    jQuery и CSS

    В качестве первого примера рассмотрим работу jquery и CSS. Существует два основных способа манипулирования CSS с помощью jquery: изменение одного атрибута или сразу нескольких. Выполняются они через функцию css(). Выглядит в теории это примерно так:

    Пример изменения одного атрибута CSS

    Пример изменения одного атрибута удался!

    Пример изменения нескольких атрибутов CSS

    Пример изменения нескольких атрибутов!

    Изменение текста и html

    Для изменения текста или html кода существуют функции text() и html().

    Причем, если попытаетесь с помощью функции text() вставить html код, то получите его в исходном виде. Функция text() все экранирует.

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

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

    Управление атрибутами с помощью jQuery

    Функция attr() манипулирует любыми атрибутами элемента. С ее помощью можно добавить или изменить title, href, value, src и так далее.

    Топ-пост этого месяца:  Тонкое управление свойством text-decoration
    Добавить комментарий