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

Авторadmin / Опубликовано2 комментария

Целью урока является разбор алгоритма подключения фрэймверка к странице 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 комментария для “JQuery урок 1. Инициализация фрэймверка”

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

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

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

Обсуждение закрыто.