Теоретическая часть. Методы и средства программирования для Интернет

ИНСТИТУТ ИНЖЕНЕРНЫХ ТЕХНОЛОГИЙ И ЕСТЕСТВЕННЫХ НАУК

КАФЕДРА МАТЕМАТИЧЕСКОГО И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИНФОРМАЦИОННЫХ СИСТЕМ

Методы и средства программирования для Интернет

Отчет по лабораторной работе №15

студента 2 курса группы 07001402

Черноморец Дарьи Андреевны

URL для запуска сайта на выполнение:

Проверили:

Михелев Владимир Михайлович

Кузнецов Константин Владимирович

Белгород 2015

Предметная область: Мониторинг малых рек Белгородской области.

Тема работы: JQUERY.

Задание

Вариант 17

Создать сайт по теме курсовой работы.

Выполненная работа должна содержать:

- JQuery селекторы;

- Селекторы форм;

- JQuery фильтры;

- Фильтры контента;

- Фильтры форм;

- Методы для работы с CSS-стилями;

- Методы по обработке событий;

- jQuery. Визуальные эффекты;

- jQuery. Карусель.

Теоретическая часть

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.

Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.

Точно также, как css определяет визуализацию от структуры HTML, jQuery определяет поведение от структуры HTML. Например, вместо прямого указания на обработчик события нажатия кнопки управление передаётся jQuery, которая идентифицирует кнопки и затем преобразует его в обработчик события клика. Такое разделение поведения и структуры также называется принципом ненавязчивого JavaScript.

Библиотека jQuery содержит функциональность, полезную для максимально широкого круга задач. Реализована архитектура компактного универсального ядра библиотеки и плагинов. Это позволяет собрать для ресурса именно ту JavaScript- функциональность, которая на нём была бы востребована.

В данной работе выполнены все пункты, которые должны присутствовать.

1. Во-первых, использовались jQuery селекторы.

Селектор – элемент или элементы, с которыми мы будем что-либо делать.

function addStyle1(){

$("#st1").css("background", "#4FDB5F");

}

Данный оператор выберет элемент с id=st1 и изменит его фон.

function addStyle2(){

$("p.withBorder").css("border", "5px dotted #0A02A0");

}

Данный оператор выберет тот тег Р, у которого есть класс withBorder, и начертит вокруг надписи рамку.

function addStyle3(){

$("#st1, #st3").css("fontWeight", "bold");

}

Данный оператор выберет элементы с id=st1и st3 и сделает надпись жирным.

Также использовались иерархические селекторы.

JavaScript поддерживает иерархию объектов, у элементов могут быть предки (parent) и потомки (child).

function addStyle4(){

$("#theory > *").css("border","3px double #62117A");

}

Данный оператор добавит рамку всем элементам (div,span,p), которые находятся в div-е с id= theory.

function addStyle5(){

$("form input").css("border","1px inset red");

}

Данная инструкция обведёт в красную рамку все input-ы, которые являются потомками элемента form.

2. Селекторы форм.

function addColor1(){

$(":text,:password,:file").css("background", "#E6C9F8");

}

У всех элементов input типа text, password, file изменится фон на розоватый.

function addStyle6(){

$(":image").css("border", "4px ridge #A00A62");

}

У всех элементов input типа image появится рамка.

function addColor3(){

$(":button").css("background", "#F18603");

}

У всех элементов input типа button фон станет оранжевым.

JQuery фильтры.

function addColor2(){

$("tr:even").css("background-color", "#AEE1FA");//у чётных строк фон станет голубым.

$("tr:odd").css("background-color", "#D0F8CE");//у нечётных строк фон станет зелёным.

$("td:gt(2)").css("color", "blue");//цвет текста станет синим, начиная со второй ячейки td.

$("tr:first").css("font-style", "italic");//у первой строки текст напишется курсивом.

}

Фильтры контента.

function addStyle7(){

$("p:contains('вод')").css("text-decoration", "underline");

}

Подчеркнёт все теги р, где есть подстрока «вод».

5. Фильтры форм.

function addStyle8(){

$("input:enabled").css("color", "green");

}

Цвет текста станет зелёным только у активных input-ов.

Не нашли, что искали? Воспользуйтесь поиском: