JQuery урок 1. Инициализация фрэймверка

Целью урока является разбор алгоритма подключения фрэймверка к странице html и рассмотрение возможностей применения эффектов к разным элементам

Инициализация фрэймверка

Расположить файл библиотеки jquery.js в папке с проектом.

Для подключения файла в html-документ вставляем тег script:

<head>
<script type="text/javascript" src="jquery.js">
</script>
</head>

Расположение скрипта

jquery расположение скрипта

Обращение к объекту DOM

Обращение к тегу (элементу)

jquery обращение к тегу

Рис. 1.1. Обращение к тегу в jquery

Пример: Задний фон всех параграфов выполнить в сером цвете

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
</head> 
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
 quis porttitor lectus. Sed facilisis fermentum odio, eget 
faucibus augue sollicitudin sed. Praesent gravida fringilla
 ipsum, vitae eleifend risus sagittis non. Nullam mollis dolor
 mi, in ornare turpis hendrerit vel. </p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus.
 Donec massa lorem, ultricies ut nunc quis, ornare pellentesque
 est. Suspendisse tempus elit ut purus aliquam rhoncus.</p>
<script>
1
$("p").css("background-color","#888");
1
2
3
</script>
</body>
</html>

Результат:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis porttitor lectus. Sed facilisis fermentum odio, eget faucibus augue sollicitudin sed. Praesent gravida fringilla ipsum, vitae eleifend risus sagittis non. Nullam mollis dolor mi, in ornare turpis hendrerit vel.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec massa lorem, ultricies ut nunc quis, ornare pellentesque est. Suspendisse tempus elit ut purus aliquam rhoncus.

Обращение к элементу с ID

Обращение к селектору с классом в jquery происходит следующим образом:

jquery Обращение к элементу с ID

Рис. 1.2. Пример обращения к элементу с ID


Пример: Добавить рамку к параграфу с id="with_border"

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
</head> 
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
 quis porttitor lectus. Sed facilisis fermentum odio, eget 
faucibus augue sollicitudin sed. Praesent gravida fringilla
 ipsum, vitae eleifend risus sagittis non. Nullam mollis dolor
 mi, in ornare turpis hendrerit vel. </p>
<p id="with_border">Interdum et malesuada fames ac ante ipsum
 primis in faucibus.
 Donec massa lorem, ultricies ut nunc quis, ornare pellentesque
 est. Suspendisse tempus elit ut purus aliquam rhoncus.</p>
<script>
1
$("#with_border").css("border","black solid 1px");
1
2
3
</script>
</body>
</html>

Результат:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis porttitor lectus. Sed facilisis fermentum odio, eget faucibus augue sollicitudin sed. Praesent gravida fringilla ipsum, vitae eleifend risus sagittis non. Nullam mollis dolor mi, in ornare turpis hendrerit vel.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec massa lorem, ultricies ut nunc quis, ornare pellentesque est. Suspendisse tempus elit ut purus aliquam rhoncus.

Обращение к классу

Если элемент снабжен классом, то обратиться к нему через jquery можно следующим образом:

Пример обращения к элементу с классом jquery

Рис. 1.3. Пример обращения к элементу с классом


Пример: Задать отступ красной строки для параграфов с классом indent

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
</head> 
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
 quis porttitor lectus. Sed facilisis fermentum odio, eget 
faucibus augue sollicitudin sed. Praesent gravida fringilla
 ipsum, vitae eleifend risus sagittis non. Nullam mollis dolor
 mi, in ornare turpis hendrerit vel. </p>
<p class="indent">Interdum et malesuada fames ac ante ipsum
 primis in faucibus.
 Donec massa lorem, ultricies ut nunc quis, ornare pellentesque
 est. Suspendisse tempus elit ut purus aliquam rhoncus.</p>
<script>
1
$(".indent").css("text-indent","25px");
1
2
3
</script>
</body>
</html>

Результат:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis porttitor lectus. Sed facilisis fermentum odio, eget faucibus augue sollicitudin sed. Praesent gravida fringilla ipsum, vitae eleifend risus sagittis non. Nullam mollis dolor mi, in ornare turpis hendrerit vel.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec massa lorem, ultricies ut nunc quis, ornare pellentesque est. Suspendisse tempus elit ut purus aliquam rhoncus.

Обращение к контекстному селектору

Поделитесь уроком с коллегами и друзьями:
2 комментария

    Dmitry

    Попытка перейти к уроку про Ajax неуспешна.
    Там какое-то циклическое зацикливание 🙂

    Вообще достойный проект, спасибо.
    Мне лично не хватает дат публикаций статей.
    Ваше дело — выводить их или нет, но мне удобно понимать, когда что публикуется.

      admin

      Спасибо:) скоро приступим к доработке ajax. Про даты — подумаем:)

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить