refactor 3-more into separate books

2015-02-27 13:21:58 +03:00 · 2015-02-27 13:21:58 +03:00 · 87639b2740
commit 87639b2740
parent bd1d5e4305
423 changed files with 9 additions and 9 deletions
--- a/12-css-for-js/15-css-selectors/1-select-elements-selector/source.view/index.html
+++ b/12-css-for-js/15-css-selectors/1-select-elements-selector/source.view/index.html
@ -0,0 +1,84 @@
+<!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>