• Страница 1 из 7
  • 1
  • 2
  • 3
  • 6
  • 7
  • »
Форум » Ленточный вариант форума
Новые сообщения
1
Форум: Начало работы с jQuery | Тема: Практикум по событиям
Задача 4 : при клике на поле формы (либо переходе на него клавишей Tab) должен измениться цвет фона поля на красный.

разместим в теле страницы форму:

Код
<form action="#" method="get">
<fieldset><legend>Форма</legend>
<p><input name="textfield" id="textfield" type="text"></p>
<p><input name="button" type="button" id="button" value="Нажми меня"></p>
</fieldset>
</form>


как всегда, берём заготовку из первого поста:

Код
<script>
$(document).ready(function() {
/* здесь будет программный код */
});
</script>


выбираем текстовое поле и присваиваем ему событие focus():

Код
<script>
$(document).ready(function() {
  $('#textfield').focus();
}); /* Конец ready */
</script>


функции focus() передаём анонимную функцию в качестве аргумента:

Код
<script>
$(document).ready(function() {
  $('#textfield').focus(function() {

}); /* Конец focus */
}); /* Конец ready */
</script>


прописываем действие для события:

Код
<script>
$(document).ready(function() {
  $('#textfield').focus(function() {
  $(this).css('background-color','#FF0000');
}); /* Конец focus */
}); /* Конец ready */
</script>


В данном случае $(this) относится к элементу, которому вы присваиваете событие, как и в предыдущем примере.

ну и, наверное, чтобы вернуть первоначальный цвет фона полю формы, когда оно вне фокуса, пропишем и это, используя событие blur() и принцип связывания функций:

Код
<script>
$(document).ready(function() {
  $('#textfield').focus(function() {
  $(this).css('background-color','#FF0000');
}).blur(function() {
  $(this).css('background-color','#FFFFFF');
});
}); /* Конец ready */
</script>


Можете протестировать как все работает.

Изменить / Удалить

2
Форум: Начало работы с jQuery | Тема: Практикум по событиям
Задача 3 : на странице сайта есть кнопка, по клику на которой должен поменяться текст кнопки.

Опять же, берём заготовку из первого поста темы:

Код
<script>
$(document).ready(function() {
/* здесь будет программный код */
});
</script>


в теле страницы разместим кнопку:

Код
<input name="button" type="button" id="button" value="Нажми меня">


теперь выбираем кнопку и задаём ей событие клика:

Код
<script>
$(document).ready(function() {
  $('#button').click();
});
</script>


функции click() в качестве аргумента передаём анонимную функцию:

Код
<script>
$(document).ready(function() {
  $('#button').click(function() {

}); /* конец click */
}); /* конец ready */
</script>


а теперь прописываем действие, смену текста выбранной кнопки:

Код
<script>
$(document).ready(function() {
  $('#button').click(function() {
  $(this).val("Спасибо!");
}); /* конец click */
}); /* конец ready */
</script>


В данном случае $(this) относится к элементу, которому вы присваиваете событие

Смотрим что получилось.

Изменить / Удалить

3
Форум: Начало работы с jQuery | Тема: Практикум по событиям
Задача 2 : при наведении курсора мыши на ссылку на странице сайта появляется сообщение "Вы навели указатель мыши на ссылку".

Берём заготовку из предыдущего поста:

Код
<script>
$(document).ready(function() {
/* здесь будет программный код */
});
</script>


В теле страницы нам нужен блок с идентификатором, чтобы каждый раз в конце этого элемента выводить сообщения "Вы навели указатель мыши на ссылку".

Код
<div id = "container">Если вы наводите курсор мыши на ссылку, в конце этого блока будет выводиться сообщение.</div>


создаём новую переменную message, в которой сохраняем строку с сообщением, а затем, с помощью функции append() присоединяем сообщение к выбранному элементу с идентификатором #container

Код
<script>
$(document).ready(function() {
$('a').mouseover(function() {
var message = "<p>Вы навели указатель мыши на ссылку</p>";
$('#container').append(message);
});
});
</script>


Тестируем полученный результат.

Изменить / Удалить

4
Форум: Начало работы с jQuery | Тема: Практикум по событиям
Подготовительный этап

В шапку страницы подключаем библиотеку jQuery (я подключил с помощью CDN )

Код
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>


и сразу после неё вторую пару тегов script с функцией $(document).ready(), которой в качестве аргумента передана анонимная функция:

Код
<script>
$(document).ready(function() {
/* здесь будет программный код */
});
</script>


На этом подготовительный этап завершён. Переходим к выполнению заданий.

Задача 1 : при двойном клике в любом месте страницы, должно появиться оповещающее окно с текстом 'Ой!'

Выбираем в качестве элемента всю страницу, присваиваем событие двойного щелчка мыши:

Код
<script>
$(document).ready(function() {
  $('html').dblclick();
});
</script>


передаём событию анонимную функцию в качестве аргумента:

Код
<script>
$(document).ready(function() {
  $('html').dblclick(function() {

  }); /* конец dblclick */
}); /* конец ready */
</script>


внутри анонимной функции пишем действие, которое должно произойти при наступлении события:

Код
<script>
$(document).ready(function() {
  $('html').dblclick(function() {
    alert('Ой!');
  }); /* конец dblclick */
}); /* конец ready */
</script>


Тестируем полученный результат.

Изменить / Удалить

5
Форум: Начало работы с jQuery | Тема: Использование событий
Рассмотрим на простом примере как назначается событие и что происходит дальше. Допустим, на странице сайта есть ссылка с каким-то идентификатором menu.
Наша задача: при наведении на эту ссылку курсора мыши должно отобразиться всплывающее меню.

Условно решение задачи можно разбить на несколько шагов:

1. выбрать ссылку

Код
$('#menu')


2. назначить ей событие

Код
$('#menu').mouseover();


3. добавляем событию анонимную функцию

Код
$('#menu').mouseover(function() {

});


4. добавляем в анонимную функцию код, отвечающий за показ всплывающего меню

Код
$('#menu').mouseover(function() {
  $('#submenu').show();
});

Изменить / Удалить

6
Форум: Начало работы с jQuery | Тема: Использование событий
Так как события - это неотъемлемая часть среды программирования на JavaScript, то jQuery-программирование стоит воспринимать как процесс, состоящий из трёх шагов:

1. Выбор одного или более элементов

2. Назначение события.

Чтобы назначить событие элементу, вы ставите точку, имя события и круглые скобки:

Код
$('a').mouseover();

$('#menu').click();


3. Передача функции событию

Чтобы в момент запуска события что-то происходило, нужно передать событию функцию, в которой будут команды, выполняющиеся при запуске события.

Имя функции можно передать так:

Код
$('#menu').click(startSlideShow);


Но самый распространённый способ присвоения функции событию - это передача анонимной функции.
Например:

Код
$('a').mouseover(function() {
/* Здесь ваш код */
});


Подробнее узнать о работе с событиями можно здесь.

Изменить / Удалить

7
Форум: Начало работы с jQuery | Тема: События: что это такое
События клавиатуры

keypress - событие запускается при нажатии клавиши клавиатуры и запускается снова и снова, пока клавиша удерживается нажатой

keydown - как и keypress, запускается при нажатии клавиши клавиатуры, непосредственно перед запуском события keypress.

keyup - запускается, когда вы отпускаете клавишу клавиатуры

Изменить / Удалить

8
Форум: Начало работы с jQuery | Тема: События: что это такое
События форм

submit - запускается либо при щелчке по кнопке Submit, либо по нажатию клавиши Enter при активном текстовом поле.

reset - возвращает страницу к тому состоянию, в котором она была при загрузке.

change - данное событие может запускаться элементами веб-форм при изменении их статуса (выбран пункт меню, нажат переключатель и т.д.)

focus - запускается при переходе к элементу формы с помощью щелчка мыши или клавиши Tab

blur - запускается, когда элемент формы выводится из фокуса клавишей Tab, либо щелчком мыши за пределами элемента.

Цитата
События focus и blur также применимы к ссылкам на странице. Их можно выбирать щелчком мыши и клавишей Tab (focus), либо сойти со ссылки с помощью клавиши Tab или щелчка мышью вне ссылки (blur)

Изменить / Удалить

9
Форум: Начало работы с jQuery | Тема: События: что это такое
События документа/окна

load - запускается после окончания загрузки браузером всех файлов веб-страницы, включая сам html-файл, файлы изображений, внешние файлы стилей, скриптов.

resize - запускается при изменении размера окна браузера

scroll - запускается при использовании полосы прокрутки или клавиатуры(клавиши PageUp, PageDown, Home, End и т.д.), при прокрутке страницы колесом мыши.

unload - запускается при переходе на другую страницу по ссылке, при закрытии окна в браузере или вкладки.

Изменить / Удалить

10
Форум: Начало работы с jQuery | Тема: События: что это такое
События - это все действия посетителя, на которые реагирует страница сайта. Событие представляет собой точный момент, в который что-то происходит. Момент, в который произошло событие, называется запуском события.


События мыши

click - это событие запускается, когда вы нажимаете и отпускаете кнопку мыши (действует также, если вы выбрали ссылку с помощью клавиши Tab клавиатуры и нажали Enter)

dblclick - запускается, когда вы дважды нажимаете и отпускаете кнопку мыши

mousedown - первая часть щелчка, когда вы нажали кнопку мыши, но не отпустили её (удобно для перетаскивания элементов по странице)

mouseup - вторая часть щелчка, когда вы отпускаете кнопку мыши (удобно, когда вы "бросаете" элемент, который перетаскиваете на другое место)

mouseover - запускается, когда вы проводите указателем мыши по элементу страницы

mouseout - запускается, когда вы убираете указатель мыши с элемента страницы

mousemove - запускается, когда вы передвигаете курсор (происходит постоянно)

События наведения и смещения указателя мыши

Весьма полезная функция hover(), принимающая в качестве аргумента две функции, первая выполняется при наведении курсора на элемент, вторая - при смещении курсора с элемента.

Структура функции hover():

Код
('#селектор').hover(функция1, функция2);


Например, есть меню, нужно чтобы при наведении на ссылку меню с идентификатором menu появлялось подменю:

Код
('#menu').hover(
function() {
  $('#submenu').show();
}, /* Окончание события mouseover */
function() {
  $('#submenu').hide();
} /* Окончание события mouseout */
); /* Окончание события hover */


То есть здесь функция hover() в качестве аргумента принимает две анонимные функции.

Изменить / Удалить

11
Форум: Начало работы с jQuery | Тема: Делаем автоматические "броские цитаты" в тексте
Нам нужно добавить в CSS-стили класс .pullQuote, отвечающий за оформление "броских цитат":

Код
.pullQuote {
    float: right;
    clear: right;
    width: 200px;
    padding: 10px;
    font-size: 16px;
    background-color: rgba(255, 211, 224, 0.5);
    border-radius: 5px;
    margin: 20px 0 10px 10px;
    font-style: italic;
}


Ну а теперь, в тексте нужно с помощью тегов span с классом catchyQuotes выделить участки кода, из которых вы хотите сделать "броские цитаты".

Смотрим что у нас получилось в итоге нашей работы.

Изменить / Удалить

12
Форум: Начало работы с jQuery | Тема: Делаем автоматические "броские цитаты" в тексте
Для начала в шапке страницы, сразу после подключенной библиотеки jQuery, добавим еще одну пару тегов script:

Код
<script>
$(document).ready(function() {

}); // конец ready
</script>


Это всего лишь подготовительные действия к написанию программы. Как вы видите, здесь мы передаём функции document.ready() в качестве аргумента анонимную функцию.

делаем выборку, чтобы найти все элементы span с классом catchyQuotes:

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes')
}); // конец ready
</script>


Выборку получили, теперь, чтобы обработать каждый элемент выборки в отдельности, берём функцию each() и передаём ей в качестве аргумента также анонимную функцию:

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes').each(function() {

}); // конец each
}); // конец ready
</script>


Создаём копию элемента span с помощью функции clone(), результат сохраняем в переменную quote:

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes').each(function() {
  var quote = $(this).clone();
}); // конец each
}); // конец ready
</script>


jQuery функция clone() дублирует элемент, включая весь html-код внутри него и присвоенные атрибуты.
Получается, что у нашего клона элемента span также присутствует класс catchyQuotes, он нам теперь не нужен, поэтому мы его удаляем, а добавляем класс pullQuote, отвечающий за оформление "броских цитат"

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes').each(function() {
  var quote = $(this).clone();
  quote.removeClass('catchyQuotes');
  quote.addClass('pullQuote');
}); // конец each
}); // конец ready
</script>


И теперь добавляем элемент span на страницу:

Код
<script>
$(document).ready(function() {
  $('span.catchyQuotes').each(function() {
  var quote = $(this).clone();
  quote.removeClass('catchyQuotes');
  quote.addClass('pullQuote');
  $(this).before(quote);
}); // конец each
}); // конец ready
</script>


Код программы готов. Остались некоторые штрихи.

Изменить / Удалить

13
Форум: Начало работы с jQuery | Тема: Делаем автоматические "броские цитаты" в тексте
Наверняка вы не раз видели в периодических журналах такой приём, когда среди общего основного потока текста выделяется наиболее интересный фрагмент.
Обычно, его шрифт отличается от основного, либо сам текст помещается в красивую рамку, чтобы привлечь внимание.

Подобное мы попытаемся реализовать в этом уроке.

Во-первых, для автоматической обработки предварительно договоримся, что "броские цитаты" будут формироваться из фрагментов текста, которые будут заключены в теги span с классом catchyQuotes.

В тексте статьи это будет выглядеть так:

Код
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <span class="catchyQuotes">Lorem Ipsum has been the industry's standard dummy text</span> ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


Соответственно, наша программа должна будет найти все элементы span с классом catchyQuotes

Далее, все найденные элементы span необходимо будет продублировать.

Затем программа должна для каждого элемента span удалить класс catchyQuotes и добавить новый, pullQuotes.

И, наконец, нужно добавить на страницу все продублированные элементы span ("броские цитаты")

Изменить / Удалить

14
Форум: Начало работы с jQuery | Тема: Работа с каждым из элементов выборки
Ключевые слова this и $(this)

Слово this относится к элементу DOM, и позволяет получить доступ к элементу, прорабатываемому в настоящий момент в цикле.
This относится к элементу, вызывающему анонимную функцию. При первом проходе цикла слово this относится к первому элементу выборки, при втором - ко второму и так далее.

Эквивалентом его в jQuery является ключевое слово $(this).

Чтобы разобраться, как использовать ключевое слово $(this), рассмотрим задачу:

1. найти на странице сайта все внешние ссылки

2. получить атрибут href каждой ссылки

3. добавить эти ссылки в список ссылок, используемых на странице

Первым делом определим на странице элемент, в котором мы будем размещать все найденные нами внешние ссылки. Пусть это будет блок div с идентификатором listLinks:

Код
<div id = "listLinks"></div>


Внутри добавим какой-нибудь заголовок для ясности:

Код
<div id = "listLinks">

<h2>Ссылки, используемые на странице:</h2>

</div>


Ну и, конечно же, ссылки лучше хранить списком:

Код
<div id = "listLinks">

<h2>Ссылки, используемые на странице:</h2>

<ul id = "bibliografia"></ul>

</div>


Первым делом, нам нужно получить выборку всех ссылок, ведущих за пределы нашего сайта. Как мы знаем, сделать это можно, используя селектор атрибута:

Код
$('a[href^="http://"]')


теперь используем функцию each(), запускающую автоматический цикл для каждой ссылки:

Код
$('a[href^="http://"]').each()


добавляем в качестве аргумента для функции each() анонимную функцию:

Код
$('a[href^="http://"]').each(function() {

});


Теперь нам нужно понять, какие действия будет выполнять анонимная функция?

Первым делом, нам нужно вернуть url-адрес каждой ссылки, но так как он у каждой ссылки свой, тут нам и пригодится ключевое слово $(this).
Возвращённый url-адрес будем сохранять в переменную webAdress:

Код
$('a[href^="http://"]').each(function() {

  var webAdress = $(this).attr('href');

});


при каждом проходе цикла в переменной webAdress будет сохраняться новое значение, а $(this) будет относиться к иной ссылке на странице.

Теперь нам остаётся лишь присоединить новый элемент к списку ul в его конец с помощью функции append():

Код
$('a[href^="http://"]').each(function() {

  var webAdress = $(this).attr('href');

  $('bibliografia').append('<li>' + webAdress + '</li>');

});


Что у нас получилось в итоге, можете посмотреть сами.

Изменить / Удалить

15
Форум: Начало работы с jQuery | Тема: Работа с каждым из элементов выборки
Как мы уже знаем, большинство функций jQuery автоматически прорабатывают в цикле каждый элемент выборки.

К примеру, одной строкой кода можно скрыть все элементы img на странице:

Код
$('img').fadeOut();


А что если нужно для каждого в отдельности элемента выборки выполнить определённое действие?

Для этой цели библиотека jQuery предлагает воспользоваться функцией each().
Размещается она после выборки элементов:

Код
$('селектор').each();


Чтобы использовать функцию each(), нужно передать ей в качестве аргумента анонимную функцию, то есть функцию, которой не присваивается имя и её невозможно вызвать.

Анонимная функция будет содержать набор действий, который вы хотите произвести над каждым из элементов выборки.

Базовая структура анонимной функции такова:

Код
function() {
  /* здесь размещается код */
}


далее просто помещаем её в функцию each():

Код
$('селектор').each(function() {
  /* здесь размещается код */
});


Функция each() действует как цикл, поэтому всё что содержится в анонимной функции будет применяться к каждому элементу выборки.

Допустим, на странице сайта размещены 10 изображений. Сделаем выборку и для каждого изображения определим действие - всплывающее окно с текстом: "Найдено изображение!"

Код
$('img').each(function() {
  alert('Найдено изображение!');
});


в результате на странице сайта появится 10 диалоговых окон с сообщением о найденном изображении.

Функция document.ready() также может принимать в качестве аргумента анонимную функцию:

Код
$(document).ready(function() {
  /* здесь код анонимной функции */
});

Изменить / Удалить

  • Страница 1 из 7
  • 1
  • 2
  • 3
  • 6
  • 7
  • »
Поиск: