Запросы и результаты запросов — КиберПедия 

Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...

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

Запросы и результаты запросов

2019-08-07 83
Запросы и результаты запросов 0.00 из 5.00 0 оценок
Заказать работу

Послание № 14

Библиотека jQuery

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

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

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

Прелести jQuery в том, что она упрощает поиск элементов документа и облегчает манипулирование ими: добавление содержимого, изменение HTML-атрибутов и CSS-свойств, определение обработчиков событий и воспроизведение анимационных эффектов. Она также имеет вспомогательные функции поддержки архитектуры Ajax, позволяющие выполнять динамические HTTP-запросы, и функции общего назначения для работы с объектами и массивами.

Основы jQuery

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

Ниже приводится пример инструкции, которая отыскивает, выделяет цветом и быстро отображает все скрытые элементы, имеющие класс «details»:

$("p.details").css("background-color", "yellow").show("fast");

Метод css() оперирует объектом jQuery, возвращаемым функцией $(), и возвращает этот же объект, благодаря чему метод show() может быть вызван в этой же компактной «цепочке вызовов методов». Этот прием составления цепочек является весьма характерным при использовании библиотеки jQuery. В качестве другого примера ниже демонстрируется инструкция, выполняющая поиск всех элементов, имеющих CSS-класс «clicktohide», и регистрирующая обработчик события в каждом из них. Этот обработчик вызывается, когда пользователь щелкает на элементе и заставляет элемент медленно «выезжать» за границы окна вверх и скрываться:

$(".clicktohide").click(function() { $(this).slideUp("slow"); });

Внимание!

Если вы определяете собственное имя $ в своих сценариях или используете другую библиотеку, такую как Prototype, тоже использующую имя $, вы можете вызвать метод jQuery.noConflict(), чтобы восстановить оригинальное значение имени $.

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

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

Получив библиотеку, вы сможете подключать ее к своим веб-страницам с помощью тега <script>, как показано ниже:    

<script src="jquery-1.4.2.min.js"></script>

Слово «min» в имени файла выше указывает, что используется минимизированная версия библиотеки, из которой были удалены комментарии и лишние пробелы, а внутренние идентификаторы были заменены более короткими именами.

Функция jQuery()

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

1. Первый и наиболее типичный способ вызова $() предусматривает передачу ей CSS-селектора (строки). При вызове таким способом она возвращает множество элементов из текущего документа, соответствующих селектору. Библиотека в значительной степени поддерживает синтаксис селекторов CSS3 плюс некоторые собственные расширения.

2. При втором способе вызова функции $() передается объект Element, Document или Window. Подобный вызов просто обертывает элемент, документ или окно объектом jQuery и возвращает его. Это дает возможность манипулировать элементом с помощью методов объекта jQuery вместо низкоуровневых методов модели DOM. Например, в программах, использующих библиотеку jQuery, часто можно встретить вызов $(document) или $(this).

3. При третьем способе вызова функции $() передается строка с разметкой HTML. В этом случае библиотека jQuery создаст HTML-элемент или элементы, определяемые этой разметкой, и вернет представляющий их объект jQuery.

Библиотека jQuery не вставляет вновь созданные элементы в документ, но методы объекта jQuery, позволяют легко вставить их в любое место.

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

 

Чтение и запись CSS-классов

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

Методы addClass() и remo­veClass() добавляют и удаляют классы в выбранных элементах.

Метод togg­le­Class() добавляет классы в элемент, если они отсутствуют в нем, и удаляет их, если они присутствуют.

Метод hasClass() проверяет присутствие указанного класса.

Ниже приводятся несколько примеров использования этих методов:

$("h1").addClass("hilite"); // До­ба­вить класс во все эле­мен­ты

$("h1+p").addClass("hilite first"); // До­ба­вить 2 клас­са

$("p").removeClass("hilite"); // Уда­лить класс hilite из всех эле­мен­тов

$("p").removeClass("hilite first"); // До­пус­ти­мо уда­лять не­сколь­ко клас­сов

$("tr:odd").toggleClass("oddrow"); // До­ба­вить класс, ес­ли от­сут­ст­ву­ет, // или уда­лить в про­тив­ном слу­чае

$("h1").toggleClass("big bold"); // Пе­ре­клю­чить сра­зу два клас­са

$("p").hasClass("first") // Име­ет ли этот класс?

Обратите внимание, что метод hasClass() не такой гибкий, как методы addClass(), removeClass() и toggleClass(). Метод hasClass() может работать только с одним именем класса и не поддерживает возможность передачи ему функции. Он возвращает true, если хотя бы один из выбранных элементов содержит указанный класс, и false – в противном случае.

Эти методы объекта jQuery подобны методам свойства classList javaScript, но методы объекта jQuery работают во всех броузерах, а не только в тех, которые поддерживают свойство classList, определяемое стандартом HTML5. И, конечно же, методы объекта jQuery работают с множеством элементов и могут добавляться в цепочки вызовов методов.

Послание № 14

Библиотека jQuery

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

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

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

Прелести jQuery в том, что она упрощает поиск элементов документа и облегчает манипулирование ими: добавление содержимого, изменение HTML-атрибутов и CSS-свойств, определение обработчиков событий и воспроизведение анимационных эффектов. Она также имеет вспомогательные функции поддержки архитектуры Ajax, позволяющие выполнять динамические HTTP-запросы, и функции общего назначения для работы с объектами и массивами.

Основы jQuery

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

Ниже приводится пример инструкции, которая отыскивает, выделяет цветом и быстро отображает все скрытые элементы, имеющие класс «details»:

$("p.details").css("background-color", "yellow").show("fast");

Метод css() оперирует объектом jQuery, возвращаемым функцией $(), и возвращает этот же объект, благодаря чему метод show() может быть вызван в этой же компактной «цепочке вызовов методов». Этот прием составления цепочек является весьма характерным при использовании библиотеки jQuery. В качестве другого примера ниже демонстрируется инструкция, выполняющая поиск всех элементов, имеющих CSS-класс «clicktohide», и регистрирующая обработчик события в каждом из них. Этот обработчик вызывается, когда пользователь щелкает на элементе и заставляет элемент медленно «выезжать» за границы окна вверх и скрываться:

$(".clicktohide").click(function() { $(this).slideUp("slow"); });

Внимание!

Если вы определяете собственное имя $ в своих сценариях или используете другую библиотеку, такую как Prototype, тоже использующую имя $, вы можете вызвать метод jQuery.noConflict(), чтобы восстановить оригинальное значение имени $.

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

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

Получив библиотеку, вы сможете подключать ее к своим веб-страницам с помощью тега <script>, как показано ниже:    

<script src="jquery-1.4.2.min.js"></script>

Слово «min» в имени файла выше указывает, что используется минимизированная версия библиотеки, из которой были удалены комментарии и лишние пробелы, а внутренние идентификаторы были заменены более короткими именами.

Функция jQuery()

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

1. Первый и наиболее типичный способ вызова $() предусматривает передачу ей CSS-селектора (строки). При вызове таким способом она возвращает множество элементов из текущего документа, соответствующих селектору. Библиотека в значительной степени поддерживает синтаксис селекторов CSS3 плюс некоторые собственные расширения.

2. При втором способе вызова функции $() передается объект Element, Document или Window. Подобный вызов просто обертывает элемент, документ или окно объектом jQuery и возвращает его. Это дает возможность манипулировать элементом с помощью методов объекта jQuery вместо низкоуровневых методов модели DOM. Например, в программах, использующих библиотеку jQuery, часто можно встретить вызов $(document) или $(this).

3. При третьем способе вызова функции $() передается строка с разметкой HTML. В этом случае библиотека jQuery создаст HTML-элемент или элементы, определяемые этой разметкой, и вернет представляющий их объект jQuery.

Библиотека jQuery не вставляет вновь созданные элементы в документ, но методы объекта jQuery, позволяют легко вставить их в любое место.

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

 

Запросы и результаты запросов

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

Возвращаемым значением функции $() является объект jQuery.

Объекты jQuery – это объекты, подобные массивам: они имеют свойство length и свойства с числовыми именами, начиная с 0 до length-1. Это означает, что к содержимому объекта jQuery можно обращаться, используя стандартный синтаксис обращения к элементам массива с квадратными скобками:

$("body").length // => 1: до­ку­мент име­ет един­ст­вен­ный эле­мент body

$("body")[0] // То же са­мое, что document.body

Если потребуется преобразовать объект jQuery в настоящий массив, можно вызвать метод toArray().


Поделиться с друзьями:

Историки об Елизавете Петровне: Елизавета попала между двумя встречными культурными течениями, воспитывалась среди новых европейских веяний и преданий...

Автоматическое растормаживание колес: Тормозные устройства колес предназначены для уменьше­ния длины пробега и улучшения маневрирования ВС при...

Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰)...

Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...



© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!

0.037 с.