Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
YouTube 150 Подписчики
Telegram 241 Подписчики
VK 0 Подписчиков
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • JQuery

Первое знакомство с jQuery: часть первая.

  • 26.09.2010

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

Почему речь пойдет именно о jQuery?

Одна из его особенностей – отсутствие необходимости прописывать множество кодов Javascript, так как jQuery позволяет сделать все то же самое с помощью пары строчек. Кроме того, jQuery, как и привычный нам WordPress, отличается массой произведенных улучшений и дополнений.

Итак, jQuery — это библиотека JavaScript, в основу которой положено взаимодействие JavaScript и HTML. Она позволяет легко получить доступ к любому элементу DOM, с ее помощью обращаются к атрибутам и содержимому элементов DOM, а также производят с ними различные манипуляции. Кроме этого, библиотека jQuery для работы с Ajax предоставляет удобный API.

Итак, начинаем работу в jQuery.

Сначала нужно подключить jQuery:

[sourcecode language=’jscript’]

[/sourcecode]

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

Лучше всего осуществлять подключение, используя Google’s Content Delivery Network (CDN). Здесь вы получите именно последнюю версию.

[sourcecode language=’jscript’][/sourcecode]

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

Если необходимо выбрать все div’ы на странице, пишут: $(‘div’).

[sourcecode language='jscript']$('div p') //выбираем все параграфы, содержащиеся внутри div'ов.
$('.something') //выбираем элементы с class'ом 'something'
$('#something') //выбираем элемент с id 'something'[/sourcecode]

Возможны любые комбинации.

[sourcecode language='jscript']$('div p#something a') //выбирает все ссылки из параграфа с родителем div и с id 'something'.[/sourcecode]

Давайте попробуем создать на странице новый Div

[sourcecode language='jscript']

this is some text

[/sourcecode]

Ему нужно прописать стили:

[sourcecode language='css']#something {
width: 200px;
height: 200px;
background-color: red;
color: white;
border: 4px solid black;
margin: 100px 0 0 80px;
}[/sourcecode]

Вот что у нас получилось:

Теперь обеспечим движение данного блока на странице. Выделяем объект.

[sourcecode language='jscript']$('#something')[/sourcecode]

В данном случае можно применить $(‘div’), но желательно указать более конкретно.
Чтобы объект смог двигаться, применим функцию animate():

[sourcecode language='jscript']$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000);[/sourcecode]

Эта функция может содержать 3 опции, но, в принципе, одна из них не всегда применяется.

[sourcecode language='jscript'].animate(что поменять, скорость, возврат);[/sourcecode]

Рассмотрим подробнее, что применить:

[sourcecode language='jscript'].animate({'параметр': 'величина', 'параметр2': 'величина'}, скорость, возврат)[/sourcecode]

Итак, мы задали отступы: вверху - 300, слева - 400, выбрали скорость - 1000 (эквивалент 1 сек). После совершения движения выполняется ‘возврат’, но о нем позже.

[sourcecode language='jscript']$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},1000);[/sourcecode]

Вот что мы получили в результате:

Увидеть все это в демонстрационной версии можно здесь.

Источник

tamo

Предыдущий материал
  • JQuery

Продолжаем изучать jQuery: часть вторая. Учимся выделять элементы.

  • 26.09.2010
  • tamo
Read More
Следующий материал
  • Примеры рекламы

Развлечение на дороге от SONY

  • 27.09.2010
  • jokar
Read More
Вас также может заинтересовать
Read More
  • JQuery

Хитрости JQuery

  • jokar
  • 23.05.2012
Read More
  • JQuery

Закруглить углы изображения при помощи JQuery

  • jokar
  • 21.05.2012
Read More
  • JQuery

Знакомьтесь: Nivo Slider от jQuery

  • tamo
  • 28.09.2010
Read More
  • JQuery

Продолжаем изучать jQuery: часть вторая. Учимся выделять элементы.

  • tamo
  • 26.09.2010
Read More
  • JQuery

Продолжаем изучать jQuery: работа с анимацией. Часть третья.

  • tamo
  • 26.09.2010
Read More
  • JQuery

Плагин AeroWindow для jQuery

  • jokar
  • 13.09.2010
Read More
  • JQuery

Симпатична скользящая форма на jQuery

  • jokar
  • 12.09.2010
Read More
  • JQuery

Inset Border Effect – jQuery бордер вокруг изображения

  • jokar
  • 12.09.2010

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

Свежие посты
  • Дайджест постов Сергея Людкевича
    • 12.09.24
  • Как юристы тормозят бизнес
    • 30.08.24
  • Продвижение оптовых кампаний в Яндекс Директ
    • 06.03.24
  • Cарафанное радио
    • 13.01.24
  • 5-55: История компании
    • 01.03.23
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter