jQuery для чайников | Введение
jQuery для чайников — это цикл статей для начинающих вебмастеров, которые просто хотят использовать библиотеку jQuery на своих сайтах.
Все вы наверняка видели на современных сайтах различные всплывающие или наоборот прячущиеся панели, сайдбары – гармошки, картинки плавно затухающие или скользящие, классные фото-галереи и т.п. Красиво, черт!
В шаблонах WordPress а ля «премиум» уже просто не обходится без слайдера с картинками. Смотрится красиво и стильно. Хочется ведь и в своем шаблоне что-то подобное прикрутить.
Самое простое, конечно же, это взять готовый буржуйский шаблон и банально заменить в нем дизайн на свои каляки-маляки, оставив функционал как есть. Но кто даст гарантию, что шаблон после этого не поплывет? Мало ли где что-нибудь напутали.
Поэтому хотя бы на уровне грамотного пользователя jQuery (не разработчика!) изучить данный предмет стоит. Вот этим и займемся.
Еще раз, для прояснения: в данном цикле статей будет в самой простой и доступной форме показан ряд примеров практического применения библиотеки jQuery, без глубокого вникания в суть происходящих процессов. Кому интересно более детальное изучение предмета — читайте профильные форумы и блоги. Вот несколько ссылок:
1. Статья из Wiki
2. Документация на jQuery-Docs.Ru
3. Сайт разработчиков jQuery
Так как сегодняшний пост озаглавлен словом Введение, то с jQuery мы познакомимся пока что лишь в общих чертах. Чтобы сложилось достаточно простое и внятное понимание, о чем вообще идет речь.
Любой начинающий вебмастер, который уже немного разбирается в верстке и знает про HTML и CSS, также знает или хотя бы слышал про JavaScript.
Говоря упрощенно, это программная часть кода веб-сайта, которая позволяет реализовать те или иные эффекты, недоступные или мало-доступные обычным стилевым фишкам на CSS.
Читайте также: JavaScript для начинающих | Введение
Самый простой пример — отображение текущей даты на сайте или обыкновенных часов. Понятно, что одной лишь версткой тут не справиться. Для этого в страницу сайта внедрялись специальные программые куски кода, или иначе — JavaScript.
Выглядело это достаточно просто. В код веб-страницы вставлялась ссылка на внешний файл скрипта:
<script type="text/javascript" src="clock.js"></script>
Практически точно также мы пристегиваем к странице файл стилей CSS. Это просто.
Другой вариант — непосредственная вставка кода самого скрипта прямо в веб-страницу. Для этого в нужном месте страницы, где предполагалось показывать некую фишку (текущую дату, например), добавлялась следующая конструкция:
<script type="text/javascript">
программный код самого скрипта
</script>
Скриптов этих существует тысячи, на любой вкус и цвет. Поэтому умные люди прикинули, что можно собрать кучно самые эффектные и наиболее используемые плюшки и сложить их в одном месте.
Так появилась специальная библиотека сборник по имени jQuery. Теперь достаточно положить в корневую папку нашего сайта один единственный файл jquery.js и затем выдергивать из него необходимые эффекты в нужных местах страницы. Удобно? Безусловно!
Библиотека эта постоянно совершенствуется и пополняется. Ее свежую версию всегда можно скачать с официального сайта разработчиков jquery.com. На данный момент времени (27.01.2010) свежая версия имеет номер 1.4.1
Сразу же возникает закономерный вопрос: а каким конкретно образом можно указать этой самой библиотеке, где мы хотим прилепить то-то и то-то? Ведь сама она не станет показывать фокусы и раздавать леденцы.
Вот как раз для этого дела вначале нужно более или менее изучить основы CSS, ибо посредством стилей и происходит привязка эффектов из библиотеки к деталям страницы. Но об этом (с живым и шевелящимся примером) в следующем посте.
Enjoy!
jQuery для чайников | Введение
jQuery для чайников | Начальные сведения | Простой слайдер
jQuery для чайников | Эффект линзы | плагин JQzoom
jQuery для чайников | Всплывающая подсказка | Плагин Tooltip
Автор: Игорь Квентор
www.
websovet.com
Перебор коллекции с помощью метода jQuery each | Кевин Чизхолм
jQuery упрощает получение ссылки на набор элементов DOM. Метод jquery.each позволяет выполнять функцию для каждого из элементов коллекции.
Решение проблем — одно из лучших качеств jQuery, и прелесть метода jQuery.each в том, что он решает очень распространенную проблему: как выполнить итерацию набора элементов DOM . Теперь, чтобы выполнить эту задачу, можно настроить цикл for. Этот подход вовсе не является неправильным; на самом деле, на некоторых уровнях это имеет смысл. Дело в том, что при таком подходе вы столкнетесь с несколькими проблемами, которых можно избежать. Во-первых, много шаблонного кода. Другими словами, для настройки цикла for вам понадобится переменная-счетчик, которую мы назовем «9».0006 и ». А поскольку мы можем захотеть повторить набор элементов DOM более одного раза, нам нужно будет сделать переменную « i » приватной, что означает использование функции для создания приватной или « локальной » области видимости.
Кроме того, 80% нашего цикла for будет повторяющимся кодом. Итак, вы поняли… наши проблемы нарастают, и их, безусловно, можно избежать. Итак, вот где в игру вступает красота метода jQuery.each: он обеспечивает абстракцию для создания цикла for. Это означает, что нам нужно только предоставить коллекцию и метод обратного вызова, которые мы хотели выполнять для каждой итерации цикла.
Метод jQuery.each является незаменимым инструментом, когда вам нужно перебрать набор элементов DOM. Допустим, у вас есть куча элементов на странице. Может быть, это « каждый тег » или « каждый jQuery вернет коллекцию с одним или несколькими элементами. Но как перебрать эту коллекцию и «сделать что-то» с каждой? Вы можете добиться этого, привязав метод . В приведенном выше примере вы видите «селектор», представляющий CSS-подобный запрос, такой как « p » или « #some-id p img » и т. д. ., что бы вы перешли на jQuery. Теперь вы можете видеть, что мы передали функцию обратного вызова методу each() . И внутри этого обратного вызова мы позаботимся о любых задачах, которые относятся к элементам, над которыми мы сейчас работаем. Итак, например, мы создадим обработчик события клика для каждого Имея в виду эту разметку, рассмотрим следующий код: Обратите внимание, что в примере № 1 мы используем $(this) . На всякий случай, если вы не знакомы с этим шаблоном, $(this) равно « текущий элемент », и в нашем коде это встречается дважды. С точки зрения псевдокода, вот что мы сделали: 1- Для каждого В примере № 2 мы немного изменим логику, чтобы только Вот ссылка JsFiddle для этого примера: http://jsfiddle.net/WHkkA/ . Метод jQuery .each() используется для перебора элементов коллекции jQuery. С помощью этого метода можно сделать гораздо больше забавных вещей, но это всего лишь очень общий обзор того, что делает этот метод и как его использовать. Важное примечание: Не путайте это с методом jQuery.each(). Это аналогичная концепция, но в большей степени это метод итерации общего назначения, который представляет собой вызов статического метода для объекта jQuery, а не метод коллекции jQuery. 0 голосов Я использую Jquery PrettyPhoto, чтобы иметь … ПОДРОБНЕЕ 29 июня 2022 г. в веб-разработке к
гаурав • 22 970 баллов • 345 просмотров Метод jQuery fadeIn() используется для . ответил 29 июня 2022 г. в веб-разработке к
раджата • 7 480 баллов • 508 просмотров Используйте метод jQuery attr()
Вы можете просто … ПОДРОБНЕЕ ответил 30 июня 2022 г. в веб-разработке к
раджата • 7 480 баллов • 308 просмотров здесь я пытаюсь получить значения … ПОДРОБНЕЕ 1 июля 2022 г. в веб-разработке к
гаурав • 22 970 баллов • 3254 просмотра Как я могу перебрать все … ПОДРОБНЕЕ 8 февраля 2022 г. на Яве к
Рахул • 9 670 баллов • 95 просмотров Как я могу использовать JavaScript для создания цикла. 21 сент. 2022 г. на Яве к
Николай • 7760 баллов • 146 просмотров Как я могу использовать JavaScript для создания цикла… ПОДРОБНЕЕ 9 декабря 2022 г. на Яве к
Николай • 7760 баллов • 239 просмотров $(документ).готовый(функция() {
$ («а»). Нажмите (функция () {
… ПОДРОБНЕЕ 6 июня 2022 г. в JQuery к
Эдурека • 13 630 баллов • 170 просмотров Чтобы получить подстроку строки в … ПОДРОБНЕЕ ответил
27 июня 2022 г.
в веб-разработке
к
раджата
• 7 480 баллов
•
489Просмотры <голова> <скрипт> $(документ). ответил
27 июня 2022 г.
в веб-разработке
к
раджата
• 7 480 баллов
•
506 просмотров с классом sales
Вот как можно создать ссылку на каждую из этих коллекций.
each() к возвращаемому значению и, конечно же, передав обратный вызов этому методу. Метод jQuery.each — базовый синтаксис
. Вот разметка, с которой мы будем работать:
Пример № 1
Первый экземпляр $(this) в строке № 2 относится к элементу, по которому в данный момент выполняется итерация (т. е. к текущему « UL LI »). Второй $(это) в строке № 3 представляет элемент, по которому только что щелкнули. Это потому, что мы хотим изменить цвет элемента, который только что был нажат, на красный.
, добавьте обработчик события клика
2 – В обработчике события клика мы скажите «Если вы нажмете на меня, сделайте мой текст красным» Пример № 2
Просто удалите класс .workday из селектора CSS, чтобы увидеть, как работает Пример №1. Сводка
Как перебрать массив в jQuery
1 ответ на этот вопрос.
Связанные вопросы в веб-разработке
.. ПОДРОБНЕЕ 
.. ПОДРОБНЕЕ 
готов(функция(){
$(«кнопка»). нажмите (функция () {
$(«р»). text(«Добро пожаловать в … Подпишитесь на нашу рассылку новостей и получайте персональные рекомендации.
