JQuery И CSS

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

. CSS ()

Вы можете изменить стиль вашего сайта dynamically с JQuery в . CSS () функции.Либо изменение стилей, которые уже заявили встроенного или в CSS файлов (например, font-size color, background-color и т.д.) или создать новые стили для elements.

Демо: Изменение цвета текста и фона color

Blue текста с оранжевыми background

Демо: Добавить стиль sheet

.. AddClass () и toggleClass ()

В дополнение к .css() функции,Вы можете применяются в настоящее время определяется CSS classes с помощью . AddClass () функции.Его коллега функции, .removeClass(), меняет action.

Демо: Добавить класс CSS для element

Нажмите кнопку “Run демо”, чтобы добавить стиль к кнопке.Нажмите кнопку “Reset”, чтобы удалить styles.

Anchor Button ! Нажмите

. ToggleClass () функция огромный временной saver для переключения состояния и выключать с помощью CSS.Следующий пример устанавливает обработчики событий для mouseenter (которая применяется класс CSS img-hover в изображении) и mouseleave. (Которая удаляет его)

Demo: Переключить классов CSS на element

JQuery анимации и Effects

Мы можем использовать JQuery для создания некоторых очень гладкой анимаций и эффектов с минимальными усилиями.Анимация и эффекты всегда лучше продемонстрированы примеры, так что погружение давайте право in.

. Живой ()

. Анимации () функция может быть использована для анимации движения и / или внешний вид элементов на веб-странице.Давайте посмотрим на другое.Вы можете определить настройки параметров с определенного промежутка времени (в миллисекундах), или любым из слов slow, normal или fast.Обратного вызова, которая является функцией, которая запускается после того, как анимация закончена, это optional.

Demo: Анимация text

Demo: Анимация size

Легко изменить размер div.

Demo: Анимация movement

.animate() функция асинхронного, так нескольких анимаций может работать в то же time.Вы также можете использовать .stop() функции, чтобы остановить анимацию.Если нажать кнопку “Запустить демо” и “Reset” в течение анимации, он будет демонстрировать .stop() function.

Много чистых наличие functions часто используется в анимации, таких как setInterval() clearInterval() setTimeout() и clearTimeout().Еще раз, эти функции включены в список, потому что понимание того, что они могут сделать, это важно поддержкой анимации JQuery в functions.

SetInterval () и clearInterval ()

Вы можете автоматизировать задачина основе time использованием JavaScript setInterval() функции, которые могут быть использованы, чтобы указать основное время на основе trigger.

Демо: Простой время counter

Нажмите кнопку “Выполнить демо” для запуска таймера, и нажмите кнопку “Reset”, чтобы остановить it.

 секунд, прошедших

Демо: Digital время display

SetTimeout () и clearTimeout ()

Вы также можете задержать задачу на основе time использованием JavaScript setTimeout() функция, которая может быть установлена ​​ждать в течение заданного интервала времени перед запуском code.

Demo: Сделайте что-нибудь после определенного периода time.

Нажмите кнопку “Запустить демо”, чтобы установить тайм-аут и нажмите кнопку “Reset”, чтобы очистить it.

Этот текст будет исчезать после трех секунд.

.. SlideToggle () и fadeToggle ()

JQuery предоставляет различные переключения функций, которые экономят нам кучу времени, когда мы хотим привязку событий, связанных с тем же element.Например, . SlideToggle () связывает оба . SlideUp () и . SlideDown () к элементу, а также управляет таком состоянии us.

Demo: Презентация элемент в и из view.

Нажмите кнопку “Запустить демо”, чтобы показать пункт, а затем нажмите еще раз, чтобы hide.

Curabitur placerat Commodo augue Eget congue.Aliquam ID анте Лев.DUIs на либеро Magna, в dignissim Одио.Aliquam aliquet suscipit тоШз.Pellentesque tortor либеро, Elementum ID Маттис Вель, Маттис Eget Метус.Нам convallis interdum imperdiet.Fusce в Magna Tellus.Sed миль ставки, aliquam на accumsan переменного тока, tristique сидеть Амет дуй.Aliquam eleifend molestie язычком.Vivamus eleifend, диаметр ID tincidunt posuere, Ipsum дуй Elementum Sapien, posuere pulvinar пзиз neque ID turpis.Nullam volutpat Cursus либеро, сидеть Амет euismod Хусто eleifend резюме.

.fadeToggle() функция похожа на .slideToggle(), но с выцветания effect который использует .fadeIn() и .fadeOut() methods.

Demo: Fade элемент в и из view.

Нажмите кнопку “Запустить демо”, чтобы показать пункт, а затем нажмите опять, чтобы скрыть it.

Curabitur placerat Commodo augue Eget congue.Aliquam ID анте Лев.DUIs на либеро Magna, в dignissim Одио.Aliquam aliquet suscipit тоШз.Pellentesque tortor либеро, Elementum ID Маттис Вель, Маттис Eget Метус.Нам convallis interdum imperdiet.Fusce в Magna Tellus.Sed миль ставки, aliquam на accumsan переменного тока, tristique сидеть Амет дуй.Aliquam eleifend molestie язычком.Vivamus eleifend, диаметр ID tincidunt posuere, Ipsum дуй Elementum Sapien, posuere pulvinar пзиз neque ID turpis.Nullam volutpat Cursus либеро, сидеть Амет euismod Хусто eleifend резюме.

. Задержки ()

В этом примере мы в основном используем удивительные функции-цепочки способность JQuery, запустив .fadeOut() .fadeIn() и .delay() функции вместе на одном элементе.Это очень похоже на setTimeout() функция, которую мы видели раньше, но не позволяя нам легко прервать delay.

Демо: Используйте .delay() создать задержкоймежду функцией calls.

JQuery и DOM Manipulation

DOM (Document Object Model) является все HTML-содержимое, которое вы видите на веб-сайте (тексты, изображения, элементы-контейнеры и т.д.).Мы можем использовать JQuery для творить чудеса с DOM когда все элементы страницы были загружены.Событие, которое захватывает, когда DOM готов называется .ready() , и есть Несколько ways для его вызова.В этом разделе демо-версии JQuery функции, которые изменяют DOM в некоторых way.

. Клон ()

JQuery .clone() функция очень проста в использовании, она в основном просто копирует элемент, который вы укажете в новом element.

Демо: Clone element.

. HTML (), текст () и пустой ()

Использование .html() является наиболее распространенным способом получить или установить содержание element использованием jQuery.Если вы хотите просто текст, а не HTML тегов, вы можете использовать .text() , которая вернет строку, содержащую сводный текст всех совпавших элементов.Эти функции браузера-зависимых (т.е. .html() ~ использует браузера 35 | собственности), так что результаты возвращаются (включая пробелы и разрывы строк) всегда будет зависеть от браузера вы using.

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

Demo: Получить содержимое element.

… Append (), добавляем (), после () и до ()

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

Демо-ролик: Вставить содержимое на веб-page.

TXT = ‘ Это содержание мы хотим insert. ‘

innerDiv. append (TXT) | innerDiv. prepend (TXT) | innerDiv. after (TXT) | innerDiv.before (TXT)

OuterDiv

InnerDiv

JQuery И AJAX

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

. $ AJAX ()

$.ajax() функция является, пожалуй, наиболее часто используемые функции JQuery.Это дает нам средства динамической загрузки контента, скрипты и data и использования их на живой веб-страницы.Другие распространенные виды использования представляете форму с помощью AJAX и отправки данных в серверных сценариев для хранения в database.

$.ajax() функция имеет большое количество настроек, и вид на JQuery команда предоставила многим сокращенный AJAX методы, которые уже содержат параметры мы require.Некоторые разработчики хотели выписать полной настройки AJAX, главным образом, потому что они требуют больше возможностей, чем многие методы сокращения предоставить (например, beforeSubmit()).Кроме того, обратите внимание, что вы можете использовать Firebug NET.panel на анализировать HTTP requests для тестирования, мониторинга и отладки AJAX calls.

Демо: Используйте $.ajax() загрузить содержимое без перезагрузки всей page.

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

Содержимое появится здесь.

Загрузка содержимого 1 Загрузка содержимого 2 Загрузка содержимого 3

Мы можем также использовать функции, такие как $.parseJSON() и JSON.parse() от ECMAScript5, что упрощает разбор JSON.Если вы заинтересованы в JSON разбора и дерево рекурсии, в разделе « Сейчас на сайте JSON просмотра деревьев Tool“.

. Нагрузке ()

.load() функции AJAX сокращенный метод для вставки HTML прямо в соответствие элементу на веб-page.

Демо: Используйте .load() чтобы захватить HTML содержимое с другого веб-page.

JSONP

AJAX запросов зависит от же происхождение policy, что означает, что Вы можете только посылать запросы на том же домене.К счастью, $.ajax() имеет свойство JSONP (например, JSON с прокладкой), которая позволяет страницу запрашивать данные с сервера на другой домен.Она работает путем заключения целевых данных в функции обратного вызова JavaScript.Обратите внимание, что ответ не разбирается как JSON и может быть любым JavaScript expression.

Демо: Использование AJAX и JSONP для загрузки данных из внешних source.

Эта демонстрация будет загружать самые последние фотографии с тегом “Jquery” от общественного feed.__0 Flickr автора |

Сокращенный AJAX функции $.getJSON __ и 2 | $.getScript и подробнее AJAX examples можно найти на моем blog.

JQuery И Events

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

.. Bind () и развязывать ()

.bind() функция очень полезна для добавить триггеры событий и обработчиков в вашем DOM elements.В случае, если вы не знаете, вы можете связать DOM элементов в целом список events, например, submit change, mouseenter и mouseleave.

Вы можете также видели .click() используется в JQuery код.Существует никакой функциональной разницы между .click() и .bind('click'), но с последним у нас есть преимущества, которое позволяет задать пользовательские события и добавление данных параметров.Существует также .unbind() функция для удаления любых событий, которые уже были связаны.По состоянию на JQuery 1,7. Bind () функция является псевдонимом. На () функцию.При вводе в консоли: “ jQuery.fn.bind.toString () ” он вернется: “ функции (а, б, в) {возвращение this.on (а, нулевое, б, в);} “

.

Demo: вызвать событие, когда пользователь нажимает на или парит над div.

Demo: Запуск события при наведении указателя мыши или двойной щелчок div.

Пресс “Запустить демо” несколько раз подряд для некоторых хороших effects.Кроме того, дважды щелкнув на коробках будет заставить их исчезнуть

Demo: вызвать событие, когда пользователь нажимает key.

Нажмите любую клавишу показано в коробках below.

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

. Жить (), на () и выключения ()

.live() функции, по существу, такой же, как .bind(), но он может
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров