lab5

Министерство науки и высшего образования Российской Федерации
Федеральное государственное бюджетное образовательное
учреждение высшего образования
ТОМСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
СИСТЕМ УПРАВЛЕНИЯ И РАДИОЭЛЕКТРОНИКИ (ТУСУР)
Кафедра компьютерных систем в управлении и проектировании (КСУП)
ОТЧЕТ
К лабораторной работе 5 (Основы jQuery) по дисциплине "Научно-учебная
работа"
Студент гр. 589-1
Р. Г. Павлов
20.04.2021
Принял:
Доцент каф. КСУП
Н. Ю. Хабибулина
Томск 2021 г
2
Содержание
1
Введение............................................................................................................3
2
Задания………………...…………...…………………………………………4
Задание 1-4..……..…………...…………………………………………4
2.1-2.4
2.5
Индивидуальное задание 1..…….…………………………………………4
2.1-2.4
Задание 1-4..……..…………...…………………………………………4
2.6-2.7
Задание 5-6..……..…………...…………………………………………4
2.8-2.11 Задание 7-10..……....………...…………………………………………5
2.10
Индивидуальное задание 2....…….………………………………………5
2.13-2.14
2.15
Задание 11-12...….………...…………………………………………5
Индивидуальное задание 3....…….………………………………………6
2.16-2.19
Задание 13-16...….………...…………………………………………6
2.20-2.23
Задание 17-20...….………...…………………………………………7
2.20
3
Индивидуальное задание 4....…….………………………………………7
Заключение........................................................................................................ 8
Приложение А Листинги программ…………...…………………………………9
Приложение Б Изображение страниц……………...…………………………...22
3
1 Введение
Цель работы:
 Научиться использовать библиотеку jQuerry.
4
2 Задания
2.1 Задание 1
При нажатии на кнопку выполняется поиск на странице всех
элементов, обозначенных тегом <p>, и все эти элементы скрываются на
странице. Элементы скрываются при помощи метода hide().
2.2 Задание 2
При нажатии на кнопку выполняется поиск на странице всех элементов
с идентификатором test, и все эти элементы скрываются на странице.
2.3 Задание 3
При нажатии на кнопку с идентификатором but1 выполняется поиск на
странице всех элементов с идентификатором test, и все эти элементы
скрываются на странице.
При нажатии на кнопку с идентификатором but2 выполняется поиск на
странице всех элементов с идентификатором test, и все эти элементы
отображаются на странице. Для этого используется метод show().
2.4 Задание 4
При нажатии на кнопку все элементы с классом=”test” скрываются на
странице.
2.5 Индивидуальное задание 1
Вариант 4. При нажатии на кнопку с идентификатором but1 все
элементы, которые соответствует атрибуту align со значением center
скрываются.
При нажатии на кнопку с идентификатором but2 все элементы, которые
соответствует атрибуту align со значением center отображаются.
2.6 Задание 5
При нажатии на элемент с тегом <p> активируется событие click(),
которое скрывает текущий элемент с тегом <p>.
2.7 Задание 6
При двойном нажатии на элемент с тегом <p> активируется событие
5
click(), которое скрывает текущий элемент с тегом <p>.
2.8 Задание 7
При наведении указателя мыши на элемент с идентификатором p1
высвечивается сообщение «You entered p1!».
2.9 Задание 8
Меняет цвет поля ввода на «#cccccc», когда оно в фокусе. И в случае,
когда поле ввода теряет фокус, то меняет цвет на «#ffffff»
2.10 Задание 9
Скрывает элементы с тегом <p> при нажатии на кнопку, но
дополнительно определен параметр скорости скрытия в 1000 миллисекунд.
2.11 Задание 10
Вместо методов hide() и show() используется новый метод toggle().
Благодаря нему можно переключать методы hide() и show(). При нажатии на
кнопку, элементы с тегом <p> скрываются и отображаются.
2.12 Индивидуальное задание 2
Вариант 4. Введены дополнительные переменные min,max,r,g,b,color. В
min и max вводятся 0 и 255 соответственно. В r,g,b случайным образом
вводятся данные между промежутком min и max. В color заносятся
переменные r,g,b как “rgb(r+g+b)”. И при нажатии на клавишу случайным
образом меняется цвет в поле ввода.
2.13 Задание 11
С помощью метода fadeIn(), при нажатии на кнопку с разной скоростью
проявляются скрытые элементы <div>, которые были скрыты при помощи
свойства «display:none».
2.14 Задание 12
В данном случае отсутствует свойство «display:none». При нажатии на
кнопку активируется метода fadeOut(), который с разной скоростью скрывает
элементы с тегом <div>.
6
2.15 Индивидуальное задание 3
Вариант 2. Вводятся переменные min и max со значениям 1 и 5
соответственно. Также вводятся переменные divId и id. В divId случайным
образом записываются значения между промежутком min и max. В id
записывается “#id”+divId". При нажатии на кнопку с идентификатором but1
проявляется случайная область div(от 1 до 5) со скоростью 3000. При
нажатии на кнопку с идентификатором but2 все элементы с тегом <div>
скрываются.
2.16 Задание 13
Вводится
новый
метод
slideDown(),
который используется
для
скольжения элемента вниз. Все элементы с id=”panel” при нажатии на кнопку
с id=”flip” скользят вниз со скоростью “slow”.
2.17 Задание 14
Вводится новый метод Animate(), который используется для создания
пользовательской анимации. При нажатии на кнопку все элементы с тегом
<div> сдвигаются налево на 250 пискелей.
2.18 Задание 15
При помощи jQuerry в переменную links выбираются все элементы по
селектору li> a. Далее данные элементы перебираются как в массиве с
помощью цикла for и выводится сообщение с выбранной в данный момент
ссылкой.
2.19 Задание 16
В данном случае контекст поиска содержит несколько элементов. Поиск
осуществляется по запросу (‘a’, ‘li’) в многоуровневом списке. Так как
контекст
поиска
содержит
несколько
элементов,
то
поиск
будет
производиться в каждом из них. Также в данном случае скрипты описаны в
теле документа без привязки к событию. Из-за этого скрипт запускается
раньше, чем загрузится сам документ.
7
2.20 Задание 17
Вводится новый метод each. Его синтаксис похож на forEach: .each(
function(index, item) ). Используя его появляется новая возможность: возврат
false из функции, что прерывает перебор. Все тоже самое, что и в задании 15,
но вместо for используем each, где благодаря новой функции возврата false
перебор прекращается на элементе с индексом 1.
2.21 Задание 18
Используются новые методы text() и html(). При нажатии на кнопку с
id=”btn1”, метод text() возвращает текстовое содержимое элемента с id=”test”
и выводит сообщение с содержимым. При нажатии на кнопку с id=”btn2”,
метод
html()
возвращает
содержание
отдельных
элементов
с
id=”test”(включая HTML markup) и выводит сообщение с содержимым.
2.22 Задание 19
Используется новый метод val(), который возвращает значение поля
формы. При нажатии на кнопку возвращает содержимое поля формы и
id=”test” и выводит сообщение с содержимым.
2.23 Задание 20
Используется метод attr(), который возвращает значение выбранного
элемента. При нажатии на кнопку выводится сообщение содержимого
элемента с id=”w3s”, где метод attr() возвращает значение элемента с
атрибутом “href”.
2.24 Индивидуальное задание 4
Вариант 2. Добавляются 6 картинок в теги <div>. При нажатии кнопки
сворачиваются все нечетные теги <div>. Нечетные из-за того, что их
нумерация начинается с нуля. Получается так, что сворачивая нечетные теги,
сворачиваются четные.
8
3 Заключение
В рамках данной лабораторной работы был изучена библиотека jQuerry.
9
ПРИЛОЖЕНИЕ А
Листинги программ
Листинг программы 1.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<BODY>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</BODY>
</html>
Листинг программы 2.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<BODY>
<h2>This is a heading 2</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</BODY>
</html>
10
Листинг программы 3.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#but1").click(function(){
$("#test").hide();
});
$("#but2").click(function(){
$("#test").show();
});
});
</script>
</head>
<BODY>
<h2>This is a heading 2</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button id="but1">Click me</button>
<button id="but2">Click me for show</button>
</BODY>
</html>
Листинг программы 4.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<BODY>
<h2 class="test">This is a heading 2</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</BODY>
</html>
11
Листинг программы 5.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<BODY>
<p>If you click on me, i will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</BODY>
</html>
Листинг программы 6.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<BODY>
<p>If you double-click on me, i will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</BODY>
</html>
Листинг программы 7.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
12
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<BODY>
<p id="p1">Enter this paragraph.</p>
</BODY>
</html>
Листинг программы 8.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<BODY>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</BODY>
</html>
Листинг программы 9.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<BODY>
<button>Hide</button>
13
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</BODY>
</html>
Листинг программы 10.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<BODY>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</BODY>
</html>
Листинг программы 11.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<BODY>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;backgroundcolor:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;backgroundcolor:green;"></div><br>
14
<div id="div3" style="width:80px;height:80px;display:none;backgroundcolor:blue;"></div>
</BODY>
</html>
Листинг программы 12.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<BODY>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;backgroundcolor:red;"></div><br>
<div id="div2" style="width:80px;height:80px;backgroundcolor:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</BODY>
</html>
Листинг программы 13.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
15
text-align:center;
background-color:e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<BODY>
<<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</BODY>
</html>
Листинг программы 14.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<BODY>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved.
to
manipulate the position, remember to first set the CSS position property of the
element
to relative, fixed, or absolute!</p>
<div
style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</BODY>
</html>
Листинг программы 15.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
16
$(document).ready(function(){
$("button").click(function(){
var links = $('li>a');
for (var i=0;i<links.length;i++){
alert(links[i].href);
}
});
});
</script>
</head>
<BODY>
<ul>
<li><a href="http://jquery.com">jQuery</a></li>
<li><a href="http://jqueryui.com">jQuery UI</a></li>
<li><a href="http://blog.jquery.com">jQuery Blog</a></li>
</ul>
<button>Start query</button>
</BODY>
</html>
Листинг программы 16.html
<html>
<head>
<title>LAB5</title>
</head>
<BODY>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<ul>
<li>
<a href="http://jquery.com">jQuery</a>
<ul>
<li><a href="http://blog.jquery.com">jQuery Blog</a></li>
</ul>
</li>
<li><a href="http://sizzlejs.com">Sizzle</a></li>
</ul>
<script>
var links = $('a', 'li');
for (var i = 0; i < links.length; i++) {
alert(i + ": " + links[i].href);
}
</script
</BODY>
</html>
Листинг программы 17.html
<html>
<head>
17
<title>LAB5</title>
</head>
<BODY>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<a href="http://wikipedia.ru">Википедия</a>
<ul>
<li><a href="http://jquery.com">jQuery</a></li>
<li><a href="http://sizzlejs.com">Sizzle</a></li>
<li><a href="http://blog.jquery.com">jQuery Blog</li>
</ul>
<script>
var links = $('li a');
links.each(function (i, a) {
alert(i + ': ' + a.innerHTML);
if (i == 1) return false;
});
</script>
</BODY>
</html>
Листинг программы 18.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<BODY>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Show text</button>
<button id="btn2">Show HTML</button>
</BODY>
</html>
Листинг программы 19.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
18
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<BODY>
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
<button>Show value</button>
</BODY>
</html>
Листинг программы 20.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<BODY>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Show href value</button>
</BODY>
</html>
Листинг программы Experiments.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#but1").click(function(){
$('[align="center"]').hide();
});
$("#but2").click(function(){
$('[align="center"]').show();
});
});
</script>
19
</head>
<BODY>
<h2>Индивидуальное задание 1</h2>
<h3 align="left">Вариант 4</h3>
<p align="center">This is a paragraph.</p>
<p align="center">This is another paragraph.</p>
<button id="but1">Нажать для того, чтобы скрыть элементы</button>
<button id="but2">Нажать для отображения скрытых элементов</button>
</BODY>
</html>
Листинг программы Experiments2.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("input").keypress(function () {
var min = 0;
var max = 255;
var r= Math.floor(Math.random() * (max - min + 1))
+ min;
var g= Math.floor(Math.random() * (max - min + 1))
+ min;
var b= Math.floor(Math.random() * (max - min + 1))
+ min;
var color = "rgb("+ r + "," + g + "," + b +")";
$("input").css("background-color", color);
})
});
</script>
</head>
<BODY>
<h2>Индивидуальное задание 2</h2>
<h3>Вариант 4</h3>
Поле ввода: <input type="text" name="fullname"><br>
</BODY>
</html>
Листинг программы Individual_3.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var min=1;
20
var max=5;
$("#but1").click(function(){
var divId= Math.floor(Math.random() * (max - min
+ 1)) + min;
var id="#div"+divId;
$(id).fadeIn(3000);
});
$("#but2").click(function(){
$("div").fadeOut();
id=0;
});
});
</script>
</head>
<BODY>
<h2>Индивидуальное задание 3</h2>
<h3>Вариант 2</h3>
<button id="but1">Показать случайный элемент</button>
<button id="but2">Скрыть все</button>
<br><br>
<div id="div1" style="display:none;">First</div><br>
<div id="div2" style="display:none;">Second</div><br>
<div id="div3" style="display:none;">Third</div><br>
<div id="div4" style="display:none;">Fourth</div><br>
<div id="div5" style="display:none;">Fifth</div><br>
</BODY>
</html>
Листинг программы Individual_4.html
<html>
<head>
<title>LAB5</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$('div:odd').slideToggle('slow');
})
})
</script>
</head>
<BODY>
<h2>Индивидуальное задание 4</h2>
<h3>Вариант 2</h3>
<button>Кнопка</button><br><br>
<div><img src="img/1.jpg" height="100px" width="100px"/></div><br>
<div><img src="img/2.jpg" height="100px" width="100px"></div><br>
<div><img src="img/3.jpg" height="100px" width="100px"></div><br>
<div><img src="img/4.jpg" height="100px" width="100px"></div><br>
<div><img src="img/5.jpg" height="100px" width="100px"></div><br>
21
<div><img src="img/6.jpg" height="100px" width="100px"></div><br>
</BODY>
</html>
22
ПРИЛОЖЕНИЕ Б
Изображение страниц
Рисунок Б.1 – 1.html, 2.html, 4.html
Рисунок Б.2 – 3.html
Рисунок Б.3 – 5.html, 6.html
23
Рисунок Б.4 – 7.html
Рисунок Б.5 – 8.html
Рисунок Б.6 – 9.html, 10.html
Рисунок Б.7 – 11.html
24
Рисунок Б.8 – 12.html
Рисунок Б.9 – 13.html
Рисунок Б.10 – 14.html
Рисунок Б.11 – 15.html
25
Рисунок Б.12 – 16.html
Рисунок Б.13 – 17.html
Рисунок Б.14 – 18.html
Рисунок Б.15 – 19.html
Рисунок Б.16 – 20.html
Рисунок Б.17 – Experiments.html
Рисунок Б.18 – Experiments2.html
Рисунок Б.19 – Individual_3.html
26
Рисунок Б.20 – Individual_4.html