87 lines
No EOL
2.8 KiB
HTML
87 lines
No EOL
2.8 KiB
HTML
<!DOCTYPE HTML>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<input type="checkbox">
|
||
<input type="checkbox" checked>
|
||
<input type="text" id="message">
|
||
|
||
<h3 id="widget-title">Сообщения:</h3>
|
||
<ul id="messages">
|
||
<li id="message-1">Сообщение 1</li>
|
||
<li id="message-2">Сообщение 2</li>
|
||
<li id="message-3" data-action="delete">Сообщение 3</li>
|
||
<li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
|
||
<li id="message-5" data-action="edit delete">Сообщение 5</li>
|
||
<li><a href="#">...</a></li>
|
||
</ul>
|
||
|
||
|
||
<a href="http://site.com/list.zip">Ссылка на архив</a>
|
||
<a href="http://site.com/list.pdf">..И на PDF</a>
|
||
|
||
|
||
<script>
|
||
/**
|
||
* Функция test(selector, count) находит элементы по селектору
|
||
* и сравнивает их число с count.
|
||
*
|
||
* Иными словами, вызовы ниже проверяют,
|
||
* что число элементов по селектору - правильное
|
||
**/
|
||
test('input', 3); // далее вместо '...' вставьте правильные селекторы
|
||
|
||
// Выбрать input типа checkbox
|
||
test('...', 1);
|
||
|
||
// Выбрать input типа checkbox, НЕ отмеченный
|
||
test('...', 1);
|
||
|
||
// Найти все элементы с id=message или message-*
|
||
test('...', 6);
|
||
|
||
// Найти все элементы с id=message-*
|
||
test('...', 5);
|
||
|
||
// Найти все ссылки с расширением href="...zip"
|
||
test('...', 1);
|
||
|
||
// Найти все элементы с data-action, содержащим delete в списке (через пробел)
|
||
test('...', 2);
|
||
|
||
// Найти все элементы, у которых ЕСТЬ атрибут data-action,
|
||
// но он НЕ содержит delete в списке (через пробел)
|
||
test('...', 1);
|
||
|
||
// Выбрать все чётные элементы списка #messages
|
||
test('...', 3);
|
||
|
||
// Выбрать один элемент сразу за заголовком h3#widget-title
|
||
// на том же уровне вложенности
|
||
test('...', 1);
|
||
|
||
// Выбрать все ссылки, следующие за заголовком h3#widget-title
|
||
// на том же уровне вложенности
|
||
test('...', 2);
|
||
|
||
// Выбрать ссылку внутри последнего элемента списка #messages
|
||
test('...', 1);
|
||
|
||
|
||
function test(selector, count) {
|
||
if (selector === '...') return;
|
||
|
||
var elems = document.querySelectorAll(selector);
|
||
var ok = (elems.length == count);
|
||
|
||
if (!ok) alert(selector + ": " + elems.length + " != " + count);
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |