#jquery — Нужна помощь в написании jQuery


Содержание

Примеры jQuery

В статье приведены примеры использования jQuery, которые использовались в предыдущих статьях — все в одном месте!

Селекторы jQuery

$(«p»).hide()
Демонстрирует jQuery метод hide(), скрывающий все

$(«#test»).hide()
Демонстрирует jQuery метод h .

$(«.test»).hide()
Демонстрирует jQuery метод h .

$(this).hide()
Демонстрирует jQuery метод hide(), скрывающий текущий элемент HTML.

События jQuery

jQuery click()
Демонстрирует jQuery событие click().

jQuery dblclick()
Демонстрирует jQuery событие dblclick().

jQuery mouseenter()
Демонстрирует jQuery событие mouseenter().

jQuery mouseleave()
Демонстрирует jQuery событие mouseleave().

jQuery mousedown()
Демонстрирует jQuery событие mousedown().

jQuery mouseup()
Демонстрирует jQuery событие mouseup().

jQuery hover()
Демонстрирует jQuery событие hover().

jQuery focus() и blur()
Демонстрирует jQuery события focus() и blur().

jQuery Скрыть/Показать

jQuery hide()
Демонстрирует jQuery метод hide().

jQuery hide() и show()
Демонстрирует jQuery методы hide() и show().

jQuery toggle()
jQuery toggle() переключает между hide() и show().

jQuery hide()
Другая демонстрация hide(). Как скрыть части текста.

jQuery Исчезновение

jQuery fadeToggle()
Демонстрирует jQuery метод fadeToggle().

jQuery fadeTo()
Демонстрирует jQuery метод fadeTo().

Скольжение jQuery

jQuery slideDown()
Демонстрирует jQuery метод slideDown().

jQuery slideUp()
Демонстрирует jQuery метод slideUp().

jQuery slideToggle()
Демонстрирует jQuery метод slideToggle().

Анимация jQuery

jQuery animate()
Демонстрирует простое использование jQuery метода animate().

jQuery animate() — управление несколькими свойствами CSS
Демонстрирует, как можно управлять несколькими свойствами CSS с jQuery методом animate().

jQuery animate() — использующий относительные значения
Демонстрирует, что можно использовать относительные значения в jQuery animate().

Анимация jQuery — использование предопределенных значений
Демонстрирует, что можно использовать предопределенные значения «hide», «show», «toggle» в jQuery методе animate().

jQuery animate()
Демонстрирует использование jQuery метода (несколько вызовов animate() друг за другом).

jQuery animate()
Еще одна демонстрация использования jQuery метода animate() (несколько вызовов animate() друг после друга).

Остановка Анимации jQuery

HTML jQuery Получение Содержимого и Атрибутов

jQuery text() и html() — Получение контента
Получение контента с jQuery методами text() и html().

jQuery val() — Получение контента
Получите значение поля формы с jQuery методом val().

jQuery attr() — Получение значения атрибута
Получите значение атрибута с jQuery методом attr().

HTML jQuery Установка Контента и Атрибутов


jQuery text() и html() — Установка контента с функцией обратного вызова
Установка контента + использование функции обратного вызова в text() и html().

jQuery attr() — Установка значения атрибута
Установка значения атрибута с jQuery методом attr().

jQuery attr() — Установка нескольких значений атрибутов
Установите многократные значения атрибутов с jQuery методом attr().

jQuery attr() — Установка значения атрибута с функцией обратного вызова
Установка значения атрибута + использование функции обратного вызова внутри attr().

HTML jQuery Добавление Элементов/Содержимого

jQuery append()
Вставка контента в конец выбранных элементов HTML.

jQuery prepend()
Вставка контента в начало выбранных элементов HTML.

jQuery append() — Вставка несколько новых элементов
Создайте новые элементы с текстом/HTML, jQuery и JavaScript/DOM. Затем добавьте новые элементы к тексту.

jQuery after() и before()
Вставка контента после и перед выбранными элементами HTML.

jQuery after() — Вставка несколько новых элементов
Создайте новые элементы с текстом/HTML, jQuery и JavaScript/DOM. Затем вставьте новые элементы после выбранного элемента.

HTML jQuery Удаление Элементов/Содержимого

jQuery empty()
Удалите все дочерние элементы выбранного элемента(ов).

jQuery remove() — с параметром
Фильтруйте элементы, которые будут удалены

jQuery Получение и Установка Классов CSS

jQuery addClass()
Добавьте атрибуты классов различным элементам.

jQuery addClass() — Несколько классов
Укажите несколько классов в методе addClass().

jQuery removeClass()
Удалите определенный атрибут класса из различных элементов.

jQuery toggleClass()
Переключайтесь между добавлением/удалением классов для выбранных элементов.

jQuery Метод css()

jQuery css() — возвращает свойство CSS
Возвратите значение указанного свойства CSS из ПЕРВОГО сопоставленного элемента.

jQuery css() — установите свойство CSS
Установите указанное свойство CSS для ВСЕХ сопоставленных элементов.

jQuery css() — установка CSS свойств
Установите несколько свойств CSS для ВСЕХ сопоставленных элементов.

Измерения jQuery

jQuery — получение ширины и высоты
Возвратите ширину и высоту указанного элемента.

jQuery — Методы innerWidth()/innerHeight
Получение внутренней ширины и высоты указанного элемента.

jQuery — методы outerWidth() и outerHeight()
Возвратите внешнюю ширину и высоту указанного элемента.

jQuery — методы outerWidth(true) и outerHeight(true)
Возвратите внешнюю ширину и высоту указанного элемента (включая поля).

jQuery — получение ширины и высоты документа и окна
Возвратите ширину и высоту документа (HTML) и окна (области просмотра браузера).

jQuery — методы width() и height()
Устанавливают ширину и высоту указанного элемента.

jQuery Обход Предков

jQuery parent()
Демонстрирует jQuery метод parent().

jQuery parents()
Демонстрирует jQuery метод parents().

jQuery parentsUntil()
Демонстрирует jQuery метод parentsUntil().

jQuery Обход Потомков

jQuery children()
Демонстрирует jQuery метод children().

jQuery find()
Демонстрирует jQuery метод find().

jQuery Обход Одноуровневых Элементов

jQuery siblings()
Демонстрирует jQuery метод siblings().

jQuery затем()
Демонстрирует jQuery метод next().

jQuery nextAll()
Демонстрирует jQuery метод nextAll().

jQuery nextUntil()
Демонстрирует jQuery метод nextUntil().


jQuery AJAX Метод load()

jQuery load()
Загрузите содержимое файла в элемент

jQuery()
Загрузите содержимое определенного элемента в файле в элемент

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

jQuery AJAX Методы get() и post()

jQuery get()
Используйте метод $.get(), чтобы извлечь данные из файла на сервере.

jQuery post()
Используйте метод $.post(), чтобы послать некоторые данные наряду с запросом.

Учебник jQuery для новичков от Трепачёва Дмитрия

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

Разное

Работа с канвасом

Практика

  • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
    Работа с
    AJAX в JavaScript
    Работа с
    AJAX + PHP

Контекст

Drag-and-Drop

  • Урок №
    Введение
    в ООП в стиле ES6
  • Урок №
    Основы
    работы с ООП
  • Урок №
    Наследование
    классов в JavaScript
    Продвинутая работа
    с классами на JavaScript
  • Урок №
    Применение
    ООП при работе с DOM
  • Урок №
    Практика
    по ООП в JavaScript
  • Тут скоро будут еще уроки
    по функциональному и прототипному
    стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

В данном уроке мы с вами начнем изучать библиотеку jQuery. Для работы с ней вы должны владеть хотя бы минимальными навыками JavaScript.

Если вы не изучали предыдущие уроки (но умеете что-то делать на JavaScript) — можете их пока не смотреть, дальше по тексту будут раскиданы ссылки на те темы, которые нужно будет знать к конкретному уроку.


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

Что такое jQuery?

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

Сравните два кода, которые делают одно и тоже — первый на чистом JavaScript, а второй — на jQuery:

Код jQuery выглядит намного компактнее и проще для написания.

Сравните еще два кода: в первом мы получаем все элементы с классом .www и ставим им красный цвет текста с помощью чистого JavaScript, а во втором — на jQuery:

Здесь уже ощущается огромная разница — в чистом JavaScript пришлось делать цикл, а код jQuery особо и не поменялся по сравнению с первым примером.

Подключение jQuery

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

После подключения можно начинать писать код с использованием этой библиотеки.

Видео для тех, кто ничего не понял

Если вам все равно не понятно, что, как и куда подключать — смотрите следующее видео:

Здесь скоро появится видео по подключению jQuery.

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

Работа с библиотекой jQuery осуществляется с помощью универсальной функции $, которая для краткости состоит всего лишь из одного символа.

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

Чаще всего с помощью доллара $ получают группу HTML элементов по CSS селектору.

Давайте получим все элементы с классом .www:

А теперь получим только абзацы с классом p.www:

А теперь получим элемент с id, равным www:

Как вы видите, используются обычные CSS селекторы, подобно методу querySelectorAll. Только querySelectorAll появился гораздо позже, чем jQuery, и обладает меньшими возможностями (зато работает быстрее).

Наборы jQuery

Обратите внимание на переменную elems:

В нее запишется группа выбранных элементов, так называемый набор элементов jQuery.

Вы можете одновременно менять все элементы набора jQuery (в отличие от querySelectorAll никаких циклов не требуется).

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

К примеру, вот так мы получим все элементы с классом .www и поставим им красный цвет:

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

Давайте получим все элементы с классом .www, поставим им красный цвет, и сменим их текст на ‘новый текст’:

jQuery — Функция jQuery() или $()

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

Функция jQuery() или $()

Функция jQuery() в зависимости от значения аргумента(ов) может выполнять различные действия:

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

оборачивает DOM-элементы, указанные в качестве аргумента, в объект jQuery.

создаёт DOM-элементы в памяти (на «лету») посредством HTML-строки, переданной в качестве аргумента данной функции.

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

оборачивает простой JavaScript объект, содержащий ноль или более пар «ключ-значение», в объект jQuery.

клонирует объект jQuery (создаёт копию), если его передать в качестве аргумента данной функции.

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

jQuery(селектор[,контекст])


Функция jQuery(селектор[,контекст]) предназначена для выполнения поиска элементов в DOM-дереве на основании селектора, указанного в качестве 1 аргумента. По умолчанию поиск элементов функция jQuery начинает с корня DOM-дерева (если 2 аргумент не указан). Если же Вам необходимо выполнить поиск элементов внутри определённого контекста, то его необходимо указать во 2 аргументе. В качестве результата данная функция возвращает объект jQuery, содержащий найденные DOM-элементы.

Этот вариант функции jQuery() имеет 2 аргумента:

  • селектор (обязательный, тип: Selector) — строка содержащая выражение для выбора элементов из DOM-дерева;
  • контекст (необязательный, тип: Element или jQuery) — DOM-элемент, документ или объект jQuery, который выступает в качестве контекста.

Например, выберем элементы div с в документе:

Найти все элементы input с type=»radio» , расположенные внутри первой формы документа:

jQuery(элемент)

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

Этот вариант функции jQuery() имеет 1 аргумент:

  • элемент (обязательный, тип: Element) — DOM-элемент, который необходимо обернуть в объект jQuery.

jQuery(массив_элементов)

Функция jQuery(мaccив_элементов) предназначена для того, чтобы обернуть массив, содержащий набор DOM-элементов, в объект jQuery. Это используют для того, чтобы к набору DOM-элементов можно было применять различные методы jQuery.

Этот вариант функции jQuery() имеет 1 аргумент:

  • массив_элементов (обязательный, тип: Array) — массив, содержащий набор DOM-элементов, которые необходимо обернуть в объект jQuery.

Например, изменить цвет текста у всех элементов p в документе на красный:

jQuery(объект)

Функция jQuery(oбъeкт) предназначена для того, чтобы обернуть простой объект JavaScript (PlainObject), содержащий ноль или более пар «ключ-значение», в объект jQuery.

Цукерберг рекомендует:  Вакансии Playneta

Этот вариант функции jQuery() имеет 1 аргумент:

  • объект (обязательный, тип: PlainObject) — простой объект JavaScript, содержащий ноль или более пар «ключ-значение» .

В jQuery для простых объектов JavaScript (PlainObject) можно использовать следующие операции: .data() , .prop() , .on() , .off() , .trigger() и .triggerHandler() . При использовании метода jQuery .data() (или любого другого метода, использующего .data() ) на простой объект (PlainObject) Вы получите результат в виде нового свойства объекта, которое будет иметь вид jQuery

jQuery(html[,ownerDocument])

Функция jQuery(html[,ownerDocument]) создаёт DOM-узлы в памяти (на «лету») на основе HTML-строки, переданной ей в качестве аргумента. В качестве результата функция jQuery() или её псевдоним $() возвращает объект jQuery, содержащий эти созданные DOM-узлы.

Этот вариант функции jQuery() имеет 2 аргумента:

  • html (обязательный, тип: htmlString) — строка, содержащая HTML-код.
  • ownerDocument (необязательный, тип: document) — документ, в котором новые элементы должны быть созданы.

Работа функции jQuery всегда начинается с анализа значения аргумента. Если он выглядит как код HTML (т.е. она начинается с » «), то функция jQuery попытается его разобрать с помощью метода $.parseHTML() . После разбора HTML строки начинается процесс создания DOM-узлов. В большинстве случаев для этого используется браузерный механизм .innerHTML . В конечном итоге функция jQuery(html[,ownerDocument]) вернёт объект jQuery, который будет содержать созданные DOM-узлы.

jQuery(html,attributes)

Функция jQuery(html,attributes) предназначена для создания DOM-элемента с атрибутами. Элемент, который необходимо создать, указывается в первом аргументе посредством HTML-строки (например: «

Этот вариант функции jQuery() имеет 2 аргумента:

  • html (обязательный, тип: htmlString) — строка, содержащая DOM-элемент.
  • attributes (необязательный, тип: PlainObject) — объект, содержащий атрибуты, события и методы, которые необходимо добавить к создаваемому элементу.

Например, создадим элемент

jQuery(callback)

Функция jQuery(callback) выполняет функцию (анонимную или именованную), указанную в качестве аргумента после того, как загрузка DOM-дерева будет завершена браузером.

Этот вариант функции jQuery() имеет 1 аргумент:

  • callback (тип: Function()) — функция, которая выполнится, когда загрузка DOM-дерева будет завершена браузером.

Например, выполнить функцию после того, как DOM-дерево станет доступно для использования:


Например, для безопасного выполнения jQuery кода Вы можете использовать следующую конструкцию:

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

Пишем свою jQuery

Доброго времени суток друзья. Сегодня, специально для любителей попилить на нативном javascript я написал эту небольшую статью как мини туториал по написанию своей собственной jquery (на примере реализации нескольких функций). Давайте же приступим к практике. Поехали.

Требования при чтение данной статьи:
— знания основ ООП
— знание this (контекста вызова)
— collback

С чего начать?

Начну я с истории того для чего же была вообще создана jquery. На заре программирования на js нужно было постоянно работать с наборами объектов в DOM и приходилось постоянно использовать циклы через которые мы проходились по массиву объектов нашего «дерева» DOM
навешивая на него нужно событие. Это было очень не удобно и специально для этого была разработана первая версия jquery Джоном Резигом который решил эту «боль» для тысяч веб разработчиков. Наконец то не нужно было получать массив объектов, а потом в цикле начинать с ними работать. Теперь все стало гораздо проще. Мы просто ссылались на нужную группу объектов и могли с помощью методов быстро начать с ней работать. Не правда ли удобно? Сейчас конечно в современном js уже реализована нативно большая часть методов которые в то время были только в jquery и вряд ли у вас могут возникнуть такие проблема. Но тогда зачем мы будем писать свою jquey спросите вы у меня? Я искренне считаю что если вы хотите быть лучшим программистом чем другие и разбираться в работе библиотек и фремворков то нужно самому писать свои подобия что бы пройти все возможные этапы проблем при их реализации. Как результат такой разработки вы начнете более лучше понимать работу js и вам будет легче работать с такими популярными на сегодняшний день библиотеками и фремворками как React.js, Redux, Backbone.js, Vue.js, AngularJS и т.к.

Метод .on

Давайте начнем с того что напишем свой универсальный метод работы с любым событием для группы объектов. Что бы написать нашу мини «библиотечку» мы будем использовать ООП.

Создадим новый класс MyJquery. У класса будет свойство которое будет принимать наш массив объектов.

Давайте напишем метод .on

В этом методе мы передаем два параметра. eventname, f.

eventname — название нашего события
f — наш колбэк через который мы будем привязывать само событие

Далее в цикле мы получаем нужный нам массив и «навешиваем» на него события через метод addEventListener и в конце мы просто возвращяем наш массив.

Что бы протестировать наш работу нашего метода нужно будет добавить в html небольшой кусок верстки в виде враппера с классом .wrapper и инутов в виде кнопки.

Теперь мы можем выбрать нашь набор элементов и применить на нем метод .on

В результате при клике на элемент дерева у нас будет происходить вызов консоли со значением «click». Что бы еще более сделать нашу библиотеку похожа на на jquery мы напишем свою функцию обертку для красивой инициализации объектов с помощью $ которая скроете на конструктор.

И сможем написать теперь так.

Метод .addClass

Один метод готов. Давайте напишем еще один что бы наша картина была более полной. Принцип написания метода останется прежнем.

Мы добавили метод addClass в нашем классе который будет проходится по массиву объектов и с помощью метода classList.add() добавлять нужный нам класс на элементы дом приходящего массива.

Заключение

В этой статье я постарался дать вам основу того как пишутся такие библиотеки как jquery. Конечно то что было написано имеет упрощенную форму оригинальной библиотеки, но общая логика остается такой же. Удачно вам покодить!)

Введение в 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 для начинающих


Главная → 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 и так далее.

Основы jQuery

HTML, CSS и JavaScript – три основных языка в Интернете. Сайты структурируются в HTML, в CSS разрабатываются стили, а JavaScript позволяет добавить интерактивные функции. Большая часть анимации и любые действия, которые происходят в результате кликов или прокрутки, также созданы в JavaScript.

jQuery – это библиотека JavaScript, основанная на принципе «пиши меньше, делай больше». Это не язык программирования, а инструмент, который упрощает написание общих задач JavaScript. Кроме того, jQuery обладает кроссбраузерной совместимостью, а значит, вы можете быть уверены в том, что любой современный браузер корректно отобразит вывод программы.

Сравните код простого приложения «Hello, World» в JavaScript и jQuery:

#JavaScript
document.getElementBy ;
#jQuery
$("#demo").html("Hello, World!");

Как видите, jQuery позволяет достичь того же результата гораздо быстрее.

Данное руководство охватывает основы работы с jQuery, а именно такие темы:

  • Установка jQuery в веб-проект;
  • Определения важных понятий веб-разработки (API, DOM и CDN).
  • Общие селекторы, события и эффекты jQuery.
  • Примеры использования jQuery.

Требования

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

Установка и настройка jQuery

jQuery – это файл JavaScript, на который можно сослаться в HTML-файле. Добавить jQuery в проект можно двумя способами:

  • загрузить локальную копию;
  • сослаться на файл через сеть доставки контента.

Примечание: Сеть доставки контента (Content Delivery Network, CDN) – это система серверов, которая обслуживает веб-контент на основе географического положения пользователя. Файл jQuery по CDN будет обслуживаться быстрее и эффективнее, чем файл, размещённый на сервере вместе с остальными компонентами приложения.

Ниже показано, как сослаться на jQuery в CDN. Найти последнюю версию jQuery можно здесь. Если же вы все же хотите загрузить jQuery на сервер, скопируйте пакет с официального сайта.


#jquery - Нужна помощь в написании jQuery

Чем может быть полезна библиотека?

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

Что же такое Jquery? Это сторонняя библиотека для JS, помогающая уменьшить количество необходимого кода, параллельно увеличив функционал языка. Библиотека кроссбраузерная, поэтому код будет корректно отображаться в любом современном браузере.

Чтобы увидеть, насколько Jquery сокращает количество необходимого кода, посмотрите на такой простой пример:

Разница получается существенная. В этой статье мы расскажем вам, как поставить Jquery в проект, а также покажем примеры использования библиотеки. Кроме того, вы узнаете о селекторах, событиях, эффектах. Мы научим вас работать с API, DOM, CDN.

Что вам потребуется для воплощения наших советов в жизнь? Во-первых, нужно иметь базовые знания HTML, CSS, понимать принцип работы селекторов. Во-вторых, пригодятся базовые навыки программирования. С Jquery можно работать, даже не зная хорошо Javascript. Однако, нужно понимать, что такое переменные, типы данных. Да и логическое мышление будет не лишним вместе со знаниями основ математики.

Как установить и настроить JQuery?

По своему принципу библиотека является JS файлом. Его нужно подключить с помощью тега
ввашей HTML-странички. Это можно сделать двумя способами:

  • Скачать скрипт с официального сайта и добавить в папку проекта;
  • Использовать ссылку на файл из CDN. Такое подключение скрипта будет работать быстрее локального.

Для начала нам нужно создать папку для проекта. Внутри мы размещаем файл HTML-разметки index.html. Также нам понадобится каталог css для стилевого файла style.css, а также js – для script.js. Структура папки проекта будет такой:

HTML-страничку нужно разметить. Самый простой каркас для сайта выглядит вот так:

Год без JQuery

Дата публикации: 2020-04-06

От автора: отказ от «рабочей лошадки» во front-end разработке еще в 2014 году привел к появлению более быстрой и компактной платформы.

Я присоединился к сайту We Are Colony летом 2014 года. Спустя полгода работы мы подошли к той точке в разработке, когда нам потребовалось добавить несколько больших функций и переосмыслить основные части дизайна нашей платформы.
У меня было два варианта: или переписать весь мой свежий код, или начать все заново. Я выбрал последнее, что позволило внести несколько крупных изменений в front-end стек и его зависимости – одной из зависимостей, от которой я отказался, был JQuery. Я выбросил его в 2014 году.

На тот момент у меня уже было несколько маленьких завершенных проектов на чистом JS, но этот стал первым крупномасштабным приложением с мощным UI и без JQuery. Как новичок с JQuery и автор большого количества плагинов для этой вездесущей библиотеки, сейчас я подошел к определенной точке и чувствую себя виновным, вспоминая все случаи, когда я вызывал легендарную функцию $() (как и множество других разработчиков, с кем я разговаривал). Я и раньше постоянно старался использовать чистый JS везде, где это будет безопасно для всех браузеров. И сейчас я чувствую, что пора лично от себя и от всего сообщества front-end разработчиков сказать прощай нашему старому другу.

За 18 месяцев полученные мной уроки в процессе создания UI без JQuery оказались крайне ценны, и я хочу поделиться с вами некоторыми из них в этой статье. Но на самом деле написать эту статью меня побудил доклад «Как не использовать JQuery» с недавней встречи front-end London, где был и я. Встреча была довольно информативной, и особое внимание на ней уделили одной неправильной концепции, о которой я услышал от нескольких людей незадолго до встречи – что ES6 спасет нас от JQuery (сразу после излечения рака и победы над мировой бедностью). Я сразу же вспомнил, как недавно я разговаривал с другом разработчиком, который говорил мне, что его команда ждет не дождется избавиться от JQuery «как только ES6 станет более распространенным».

«особое внимание на ней уделили одной неправильной концепции… что ES6 спасет нас от JQuery»

Я до конца не понимаю, откуда вообще появилась эта идея, и хорошо, что она не особо популярно, но данную проблему стоит разобрать в любом случае. По моему мнению, ES6, по большей части столь необходимое синтаксическое улучшение языка JavaScript и JQuery, это библиотека манипуляции DOM с красивым API. У ES6 и JQuery, на самом деле, общего совсем немного, и в первую очередь я хотел написать эту статью, чтобы доказать, что вы можете спокойно отказаться от JQuery, и для этого вам не понадобиться переходить на ES6 или Babel.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Вы можете спросить, а зачем вообще отказываться от JQuery? Во-первых, это перегрузка приложения и время загрузки (особенно на слабых устройствах и медленных соединениях); во-вторых, производительность UI и адаптивность (опять же на слабых устройствах); и последнее, избавление от ненужной абстракции, что позволит вам лучше понять принцип DOM, браузер и его API.

Если и была хоть одна причина оставить JQuery, то, возможно, это поддержка IE8, однако я надеюсь все согласятся, что эти времена благополучно прошли (а если это для вас не такая и причина, то вы мне уже нравитесь). В IE8 не было браузерного DOM API, которое теперь и помогло нам избавиться от JQuery; вещи типа Element.querySelectorAll(), Element.matches(), Element.nextElementSibling и Element.addEventListener() теперь есть во всех браузерах.

В IE9 и выше все еще остаются проблемы, однако данные браузеры более-менее предсказуемы в вопросе «основного» DOM API, как я его называю, которое нужно для написания приложений с тяжелым UI без использования JQuery и без подключения несчетного количества полифилов и библиотек (к сожалению с одним исключением — Element.classList в IE9).

Тем не менее, никто не будет отрицать, что вместе с JQuery идет целый набор полезных функций, а также инструментов для таких вещей, как Ajax и анимация. И в этот момент становится интересно, что включить в свой front-end набор, а что нет.

Хелпер функции

Я понял, что, отказавшись от JQuery, мне выпала прекрасная возможность самому написать парочку хелпер функций и немного больше изучить браузеры и DOM. Это был самый ценный урок для меня. Статический класс хелпер методов (я называю его «h») охватывает такие базовые вещи, как запрос дочерних или родительских элементов, расширение объектов и даже Ajax, а также множество других вещей, не относящихся к DOM.

Может показаться, что это попытка переписать JQuery, однако цель была совершенно другая. Эта небольшая коллекция удобных хелпер методов является лишь крошечной частью всего функционала JQuery без возможности оборачивать элементы в контейнеры или лишней абстрактности. На самом деле нативные браузерные API позволяют нам взаимодействовать с DOM без подключения JQuery, а эти функции заполняют те небольшие пропуски, которые были, когда я только приступил к проекту.
Ниже представлены несколько из тех хелпер функций. Те, которые я посчитал нужными и интересными для обучения. Я не стал их записывать в таком формате, чтобы любой читающий смог их скопировать к себе в проект – они вам, скорее всего даже не нужны. Я показал данные функции, чтобы проиллюстрировать, насколько легко можно решить проблему обхода DOM с помощью вышеупомянутых API.

Работа с DOM-объектами

Функция $() библиотеки jQuery

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

Библиотека jQuery — не единственная библиотека JavaScript, в которой используется переменная $, что может привести к конфликтам имен, если в одном документе используется одновременно несколько библиотек. Чтобы не допустить возникновения проблем такого рода, можно передать контроль над переменной $ другим библиотекам, вызвав метод jQuery.noConflict(), как показано ниже (пример из предыдущей статьи):

Вы даже можете сами определить псевдоним для функции jQuery(). Это делается путем присваивания выбранной вами переменной результата вызова метода noConflict():

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

Варианты вызова основной функции jQuery()

Вариант вызова Описание
$(функция) Позволяет указать функцию, которая должна быть выполнена по завершении построения DOM
$(селектор)
$(селектор, контекст)
Осуществляет выбор группы элементов в документе с помощью селектора
$(HTMLElement)
$(HTMLElement[])
Создает объект jQuery из объекта или массива объектов HTMLElement
$() Создает пустой набор элементов
$(HTML-код) Создает новые элементы из фрагмента HTML-кода

Ожидание готовности DOM-модели

Библиотека jQuery предлагает свой способ регистрации события загрузки страницы. Соответствующий код представлен в примере ниже:

В этом сценарии мы передаем переменную document функции $() в качестве аргумента и вызываем метод ready(), передавая ему функцию, которую хотим выполнить после окончания загрузки и готовности DOM к работе. Можете поместить этот элемент script в любое место документа, будучи уверенным в том, что jQuery не допустит преждевременного выполнения функции.


Функция function(), передаваемая методу ready(), будет вызвана лишь после загрузки документа, но не раньше, чем завершится построение DOM.

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

Здесь метод ready() вызывается дважды: первый раз — с использованием ключевого слова function, а второй — с передачей обычной инструкции JavaScript в качестве аргумента. В обоих случаях вызывается функция countImgElements(), возвращающая общее количество элементов img в DOM. Загрузив документ, вы получите в окне консоли следующий результат:

Как видите, выполнение инструкции без ключевого слова function происходит при загрузке документа еще до того, как браузер обнаружит в нем элементы img и создаст соответствующие DOM-объекты.

Использование альтернативной нотации

При желании можете передать свою функцию в качестве параметра непосредственно $-функции jQuery. При таком способе записи вызова результат будет тем же, что и в случае вызова $(document).ready(). Описанный подход используется в примере ниже:

Задержка срабатывания события ready

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

Первой инструкцией в этом сценарии является вызов метода holdReady(). В качестве аргумента ему передается значение true, указывающее на необходимость задержки срабатывания события ready. Далее мы определяем функцию, которая должна быть выполнена при срабатывании события ready (она содержит тот же набор инструкций, который использовался в предыдущей статье для изменения непрозрачности изображений, но оформленный в виде функции).

Наконец, мы используем метод setTimeout() для вызова функции по истечении 5 секунд. Эта функция содержит вызов метода holdReady() с аргументом false, указывающим jQuery на необходимость освобождения события ready для его последующей обработки. Конечный результат состоит в том, что событие ready срабатывает с задержкой в 5 секунд. В сценарий включены также отладочные инструкции, которые после загрузки документа в браузер выводят на консоль следующую информацию:

Метод holdReady() можно вызывать многократно, но количество вызовов с аргументом true должно совпадать с количеством вызовов с аргументом false, прежде чем будет запущено событие ready.

Выбор элементов

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

Чтобы выбрать элементы, вы просто передаете селектор функции $(). Библиотека jQuery поддерживает все множество CSS-селекторов, а также некоторые дополнительные селекторы, которые обеспечивают удобные возможности детализированного управления процессом выбора элементов. В данном примере используется псевдоселектор :odd, который выбирает нечетные элементы, соответствующие основной части селектора (в данном случае это селектор img, который выбирает все элементы ).

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

Расширенные селекторы jQuery

Селектор Описание
:animated Выбирает все анимируемые в данный момент элементы
:contains(текст) Выбирает все элементы, содержащие указанный текст
:eq(n) Выбирает элемент с индексом n (индексы отсчитываются от нуля)
:even Выбирает все четные элементы (индексы отсчитываются от единицы)
:first Выбирает первый из подходящих элементов
:gt(n) Выбирает все элементы, индекс которых превышает n (индексы отсчитываются от нуля)
:has(селектор) Выбирает элементы, которые содержат хотя бы один элемент, соответствующий указанному селектору
:last Выбирает последний из подходящих элементов
:lt(n) Выбирает все элементы, индекс которых меньше n (индексы отсчитываются от нуля)
:odd Выбирает все нечетные элементы (индексы отсчитываются от единицы)
:text Выбирает все текстовые элементы

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

В jQuery определены также селекторы, позволяющие выбирать элементы в соответствии с их типом:

Расширенные селекторы типов, определенные в jQuery

и т.д.

Селектор Описание Соответствующий элемент html
:button Выбирает все элементы типа button
:checkbox Выбирает все элементы типа checkbox
:file Выбирает все элементы типа file
:header Выбирает все элементы заголовков
:hidden Выбирает все скрытые элементы
:image Выбирает все элементы input для изображений
:input Выбирает все элементы input
:parent Выбирает все элементы, являющиеся родительскими по отношению к другим элементам
:password Выбирает все элементы, являющиеся паролями
:radio Выбирает все элементы типа radio
:reset Выбирает все элементы типа reset
:selected Соответствует всем выбранным элементам
:submit Выбирает все элементы типа submit
:visible Выбирает все видимые элементы

Сужение области поиска с помощью контекста

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

В этом примере одно множество элементов, выбранных селектором jQuery, используется в качестве контекста для выбора другого множества. Сначала определяется контекст, которому соответствуют все элементы, имеющие класс drow. После этого набор выбранных элементов передается селектору img:odd в качестве контекста.

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

Конечный результат состоит в том, что эффект изменения непрозрачности применяется к нечетным элементам img в каждом элементе div, принадлежащем классу drow. Этим условиям соответствуют изображения нарцисса и примулы. Если опустить контекст, то эффект будет применен к изображениям нарцисса, пиона и подснежника.

Выбранный набор элементов

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

Важные методы и свойства объекта jQuery показаны в таблице ниже:

Базовые свойства и методы объекта jQuery

Свойство/метод Описание Тип возвращаемого значения
context Возвращает набор элементов, используемых в качестве контекста поиска HTMLElement
each(функция) Выполняет указанную функцию для каждого из выбранных элементов jQuery
get(индекс) Получает объект HTMLElement с указанным индексом HTMLElement
index(HTMLElement) Производит поиск указанного объекта HTMLElement среди набора выбранных элементов и возвращает его индекс, если находит его number
index(jQuery) Аналогичен предыдущему методу, но возвращает индекс первого из элементов, содержащихся в указанном объекте jQuery number
index(селектор) Возвращает индекс первого найденного элемента в объекте jQuery, вычисляемый относительно элементов соответствующих селектору number
length Возвращает число элементов в объекте jQuery number
selector Возвращает селектор string
size() Возвращает количество элементов, содержащихся в объекте jQuery number
toArray() Возвращает объекты HTMLElement, содержащиеся HTMLElement в объекте jQuery, в виде массива

Определение селектора

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

Определение контекста

Свойство context предоставляет подробную информацию о контексте, который использовался при создании объекта jQuery. Если в качестве контекста использовался единственный объект HTMLElement, то он и будет возвращен свойством context. Если же в качестве контекста использовалось несколько элементов (как в приведенном ранее примере) или он вообще отсутствовал, то свойство context возвратит значение undefined. Пример использования этого свойства представлен ниже:

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

Работа с DOM-объектами

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

Создание объектов jQuery из DOM-объектов

Объекты jQuery можно создавать, передавая объект или массив объектов HTMLElement функции $() в качестве аргумента. Такой способ удобен при работе с JavaScript-кодом, не ориентированным на jQuery, или в ситуациях, когда jQuery открывает доступ к базовым DOM-объектам, например при обработке событий. Соответствующий пример приведен ниже:

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

В данном сценарии попутно демонстрируется создание объекта jQuery из одиночного объекта HTMLElement:

При обработке событий средствами jQuery переменная this ссылается на элемент HTMLElement, обрабатывающий событие.

Работа с объектами jQuery как с массивами

Объект jQuery может рассматриваться и как массив объектов HTMLElement. Это означает, что наряду с развитыми средствами, предлагаемыми библиотекой jQuery, по-прежнему можно использовать объекты DOM. Можете использовать свойство length или метод size() для определения числа элементов, которые входят в набор выбранных элементов, содержащийся в объекте jQuery, и получать доступ к отдельным DOM-объектам, используя индексную нотацию массивов (скобки [ и ]).

Для извлечения объектов HTMLElement из объекта jQuery, рассматриваемого как массив, можно использовать метод toArray(). Лично я стараюсь работать только с объектами jQuery, но иногда, например в случае унаследованного кода, в котором возможности jQuery не используются, удобнее работать непосредственно с DOM-объектами.

Пример перечисления содержимого объекта jQuery с целью доступа к содержащимся в нем элементам HTMLElement приведен ниже:

В этом примере функция $() используется для выбора нечетных элементов img и их просмотра в цикле с последующим выводом значений свойств tagName и src на консоль. Результат работы сценария выглядит следующим образом:

Метод each() позволяет определить функцию, которая будет выполнена для каждого из DOM-объектов, содержащихся в объекте jQuery. Соответствующий пример приведен ниже:

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

Определение индекса элемента

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

В этом примере сначала выполняется поиск элемента div по значению атрибута id. Для этого используется метод DOM getElementById(), который возвращает объект HTMLElement. Затем для нахождения индекса объекта, представляющего элемент div, вызывается метод index() объекта jQuery. Далее этот процесс повторяется с использованием объекта jQuery, получаемого посредством функции $(), и оба результата выводятся на консоль, как показано ниже:

Метод get() дополняет метод index() в том смысле, что позволяет получить объект HTMLElement, который занимает в наборе элементов, содержащихся в объекте jQuery, позицию, определяемую указанным индексом. Результат получается тем же, что и при использовании индексной нотации массивов, описанной ранее. Соответствующий пример приведен ниже:

В этом сценарии сначала выбираются нечетные элементы img, затем с помощью метода get() запрашивается объект HTMLElement с индексом 1, и, наконец, на консоль выводятся значения свойств tagName и src.

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