• Страница 2 из 8
  • «
  • 1
  • 2
  • 3
  • 4
  • 7
  • 8
  • »
Форум » Ленточный вариант форума
Новые сообщения
16
Форум: Базовые основы CSS | Тема: Дочерние селекторы
Дочерние псевдоклассы

:first-of-type - работает аналогично :first-child, применяется к первому дочернему элементу, но определённого типа.
Например, в блоке div с классом .sidebar есть несколько абзацев с текстом:

Код
<div class = 'sidebar'>
  <p>Здесь какой-то произвольный текст</p>
  <p>Здесь какой-то произвольный текст</p>
  <p>Здесь какой-то произвольный текст</p>
</div>


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

Код
.sidebar p:first-of-type {
  color: red;
}


:last-of-type - работает аналогично :last-child, применимо к последнему дочернему элементу, но определённого типа

:nth-of-type - работает аналогично :nth-child(), но применяется к чередующимся дочерним элементам определённого типа.
Где применимо? Например, в тексте, где содержится много изображений, можно чередовать их вывод слева и справа:

Код
img:nth-of-type(odd) {
  float: left;
}
img:nth-of-type(even) {
  float: right;
}


можно также использовать формулы (типа 2n + 1), как и для :nth-child()

для форматирования чередующихся строк таблицы этот способ также подойдёт:

Код
tr:nth-of-type(odd) {
  background-color: #D9F0FF;
}
tr:nth-of-type(even) {
  background-color: #FFFFFF;
}

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

17
Форум: Базовые основы CSS | Тема: Дочерние селекторы
Для множителя n можно использовать также отрицательные значения, в этом случае будет произведён выбор всех предшествующих дочерних элементов в обратном порядке.
Например, запись:

Код
tr:nth-child(-n + 3) {
  background-color: #81B2F2;
  color: #ffffff;
}


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

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

18
Форум: Базовые основы CSS | Тема: Дочерние селекторы
Комплексный селектор :nth-child

С его помощью можно выбирать определённые дочерние элементы. С помощью ключевых слов можно также выбирать либо нечётные, либо чётные дочерние элементы:



Цитата
Код
tr:nth-child(odd) {
  background-color: #D9F0FF;
}

выберет все нечётные дочерние элементы




Цитата
Код
tr:nth-child(even) {
  background-color: #D9F0FF;
}

выберет все чётные дочерние элементы.


Если нужно выбрать конкретный дочерний элемент, используется его номер. Например, чтобы выбрать пятый элемент в таблице:



Код
tr:nth-child(5)


а если вы хотите, к примеру, выбрать каждый третий элемент списка, то используйте еще и множитель n:

Код
tr:nth-child(3n)


читается: выбрать каждый третий дочерний элемент, начиная с третьей строки. Наглядный пример работы:



Код
tr:nth-child(3n) {
  background-color: #81B2F2;
  color: #ffffff;
}


выбирается каждая третья строка, начиная с третьей.

Если нужно выделить каждую третью строку, но, к примеру, начиная со второй, то запись делается так:

Код
tr:nth-child(3n + 2) {
  background-color: #81B2F2;
  color: #ffffff;
}


в итоге получаем:

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

19
Форум: Базовые основы CSS | Тема: Дочерние селекторы
Псевдоэлемент :last-child - выбирает последний дочерний элемент.

Псевдоэлемент :only-child - выбирает элемент, который является единственным дочерним элементом для родительского.
Пример:

Код
p:only-child {
  color: red;
}


Например, если в родительском блоке div будет три абзаца, либо абзац и еще, к примеру, элемент ul, то текст абзаца не будет красного цвета, поскольку он не единственный дочерний элемент у блока div

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

20
Форум: Базовые основы CSS | Тема: Дочерние селекторы
Псевдоклассы для выбора дочерних элементов

Дочерний элемент - это элемент, непосредственно заключённый в другой элемент.

Псевдоэлемент :first-child - позволяет выбрать и форматировать только первый дочерний элемент, независимо от того, сколько их будет в родительском элементе.
Например, в коде:

Код
<h1>Заголовок первого уровня</h1>
<h1>Заголовок первого уровня</h1>


выберем первый заголовок h1:

Код
h1:first-child {
  color: grey;
}


Но! Внимание! Рассмотрим такой код:

Код
<body>
  <h1>Заголовок 1-го уровня</h1>
    <div>
      <h1>Заголовок 1-го уровня</h1>
    </div>
</body>


Здесь два элемента h1, но один является дочерним для body, тогда как другой - дочерним для div.
Поэтому, если мы решим выбрать первый дочерний элемент у родительского, как мы это делали выше:

Код
h1:first-child {
  color: grey;
}


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

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

21
Форум: Базовые основы CSS | Тема: Дочерние селекторы
В общем виде, вложенные элементы можно форматировать, используя дочерний селектор

Цитата
Код
body > h1

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


Дочерний селектор, в отличие от селектора потомков, позволяет определить конкретные родительский и дочерний элементы.

Чтобы понять разницу, рассмотрим код:

Код
<body>
<h1>Заголовок 1-го уровня</h1>
  <div>
    <h1>Заголовок 1-го уровня</h1>
  </div>
</body>


Если мы используем селектор потомков:

Код
body h1


то таким образом мы выберем оба заголовка h1, поскольку они оба вложены внутрь body.

но если мы используем дочерний селектор:

Код
body > h1


то выберем только первый заголовок, поскольку только он является дочерним к body, а второй заголовок h1 является дочерним для div

Таким образом, если нам нужно выбрать только второй заголовок h1, мы можем написать так:

Код
div > h1

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

22
Форум: Базовые основы CSS | Тема: Селекторы атрибутов
Цитата
Код
a[href^ = "http://"]

выбираем все ссылки, URL которых начинается с http://


Цитата
Код
a[href$ = ".pdf"] {
  background: url(icon.png) no-repeat;
  padding-left: 15px;
}

выбираем все ссылки, URL которых заканчивается на .pdf


Цитата
Код
img[src* = "photo"]

выбираем все изображения, атрибут src которых содержит слово photo

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

23
Форум: Базовые основы CSS | Тема: Селекторы атрибутов
Примеры и пояснения

Цитата
Код
img[title]

выбираем все элементы img, имеющие атрибут title


Цитата
Код
.photo[title]

выбираем все элементы класса .photo, имеющие атрибут title


Цитата
Код
a[href = "http://www.ps-studio.info"] {
  color: blue;
  font-weight: 700;
}

выбираем ссылки с определённым URL-адресом и форматируем их внешний вид.


Цитата
Код
input[type = "text"]

выбираем только текстовые поля на странице

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

24
Форум: Начало работы с 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>


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

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

25
Форум: Начало работы с 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) относится к элементу, которому вы присваиваете событие

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

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

26
Форум: Начало работы с 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>


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

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

27
Форум: Начало работы с 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>


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

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

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

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

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

Код
$('#menu')


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

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


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

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

});


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

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

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

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

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

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

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

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

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


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

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

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

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


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

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


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

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

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

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

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

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

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

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