Введение в jQuery

А. Шевчук






Введение в jQuery














            ^ИНТУИТ


  НАЦИОНАЛЬНЫЙ ОТКРЫТЫЙ УНИВЕРСИТЕТ

                С.ИНТУ ИТ





    У НАЦИОНАЛЬНЫЙ ОТКРЫТЫЙ УНИВЕРСИТЕТ


Введение в jQuery 2-е издание, исправленное Шевчук А.


Национальный Открытый Университет “ИНТУИТ”
2016


2

Введение в jQuery/ А. Шевчук - М.: Национальный Открытый Университет “ИНТУИТ”, 2016
В курсе даны самые начальные знания о JQuery - библиотеке JavaScript.
Курс опубликован с любезного разрешения автора. Ссылка на оригинал: http://anton.shevchuk.name/jquery-book/
(c) ООО “ИНТУИТ.РУ”, 2016-2016
(c) Шевчук А., 2016-2016

3

        О HTML, CSS и JavaScript

Начнём знакомство с jQuery с повторения (или изучения) основ правильного употребления связки HTML и CSS с небольшой примесью JavaScript.
Если не хотите упасть в грязь лицом перед коллегами — то не пропускайте данную главу “мимо ушей”.
HTML — о нём стоит помнить две вещи - семантический и правильный.

        Семантическая вёрстка

Семантическая вёрстка HTML документа подразумевает использование тегов по прямому назначению, т.е. если вам необходим заголовок - то вот тег <h1> и собратья, необходима табличное представление данных - используйте тег <table> и только его.
Иногда, избавляясь от табличной верстки, доходит до абсурда, и тег <table> становится изгоем, и его перестают использовать даже для табличного представления данных, не стоит повторять эту ошибку.
Забегая чуть-чуть вперёд, стоит упомянуть теги из спецификации HTML5:
<article>, <aside>, <header>, <footer>, <menu>, <section> и т.д. — используйте их, не бойтесь.
Не бояться — это правильно, но использовать тоже надо с умом, рекомендую ресурс ссылка: http://htmlbook.ru/html5 — очень хорошо и подробно расписано о нововведениях спецификации HTML5.
И еще парочка интересных ресурсов в нагрузку:

  • ссылка: http://htmlbook.ru/html5 — неплохо, и на русском
  • ссылка: http://www.html5rocks.com/en/ — тут целое сообщество

Старайтесь избегать избыточных элементов на странице, большинство HTML страниц грешат лишними блочными элементами:
 <div id="header">
 <div id="logo">
 <h1><a Ь^="/">Мой блог</а><Ы>
 </div>
 <div id="description">
 <И2>Тут я делюсь своими мыслями<^2> </div>
 </div>
Данную конструкцию можно легко упростить, и при этом код станет более читаемым, изменения в CSS будут минимальными (или даже не потребуются):

4

 <header>
 <h1>
 <a Ь^="/">Мой блог</а>
 </h1>
 <h2>Tym я делюсь своими мыслями<^2>
 </header>

В английском языке есть термин “divits” - сим термином награждают HTML- разметку с чрезмерным использованием div’ов без потребности, я же обзываю такие творения “дивными”. Обычно таким грешат новички, которые для применения стилей CSS оборачивают элементы в div’bi, что и приводит к их размножению без нужды.


Ещё одним обязательным пунктом для создания “правильного” HTML является использование названий классов и идентификаторов, которые однозначно говорят нам о содержимом элемента, а не о каких либо нюансах оформления, приведу пример:

                                      Плохо                                         
red, green и т.д. в какой-то момент захотите перекрасить, и элемент с классом “red”
                  будет синего цвета                                               
wide, small и     сегодня широкий, а завтра?                                       
т.д.                                                                               
h90w490           наверное, это элемент с высотой 90px и шириной 490px, или я      
                  ошибаюсь?                                                        
b_1, ax_9         эти название тоже ни о чем не говорят                            
colorl, color2 и  иногда встречается для “скинованных” сайтов, но создают такие    
т.д.              классы из лени                                                   
element!.. .20    такое тоже встречается, и ничем хорошим не пахнет                

Ну и примеры правильного именования:

                    Хорошо
logo, content логотип, основной контент
menu, submenu меню и подменю
even, odd чётный и нечётный элементы списка
paginator    постраничная навигация
copyright    копирайт


Есть ещё один момент - это форматирование HTML и CSS кода, я не буду заострять на нём внимание, но весь код в книге будет отформатирован отступами, и, возможно, это даст свои плоды в ваших творениях.

        Валидный HTML

Зеленый маркер W3C validator’а - это правильно, и к этому надо стремится, так что не забывайте закрывать теги, да прописывать обязательные параметры, приведу пример HTML кода, в котором допущено 6 ошибок (согласно спецификации HTML5), найдите


5

их:


 <h2>Lorem ipsum
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc urna metus, ultricies eu, c <a href="/index.php?mod=default&act=image"><img src="/img001.jpg"></a>

        CSS-правила и селекторы

Теперь приступим к CSS, и начнём, пожалуй, с расшифровки аббревиатуры CSS это Cascading Style Sheets, дословно “каскадная таблица стилей”, но:

— Почему же она называется каскадной? — этот вопрос я часто задаю на собеседованиях претендентам. Ответом же будет аналогия, ибо она незыблема как перпендикулярная лягушка: представьте себе каскад водопада, вот вы стоите на одной из ступенек каскада с чернильницей в руках, и выливаете ее содержимое в воду — вся вода ниже по каскаду будет окрашиваться в цвет чернил. Применив эту аналогию на HTML — создавая правило для элемента, вы автоматически применяете его на все дочерние элементы (конечно, не все правила так работают, но о них позже) — это наследование стилей. Теперь, если таких умников с чернильницей больше чем один, и цвета разные, то в результате получим смешение цветов, но это в жизни, а в CSS работают правила приоритетов, если кратко:

  • самый низкий приоритет имеют стили браузера по умолчанию — в разных браузерах они могут отличаться, поэтому придумали CSS Reset (гуглится и юзается), и все будут на равных
  • чуть важнее — стили заданные пользователем в недрах настроек браузера, встречается редко
  • самые важные — стили автора странички, но и там всё идёт по порядку
  • самый низкий приоритет у тех, что лежат во внешнем подключённом файле
  • затем те, что встроили внутрь HTML с помощью тега <style>
  • потом те, что захардкодили плохие люди (не вы, вы так делать не будете) в атрибуте “style”
  • самый высокий приоритет у правил с меткой “important”
  • при равенстве приоритетов, тапки у того, кто объявлен последним

Если голова ещё не бо-бо, то я также упомяну, что при расчёте, чьи же правила главней, ещё анализируется специфичность селекторов, и тут считается следующим образом:

за каждый идентификатор получаем [1:0:0] (#id)

за каждый класс, либо псевдо класс — [0:1:0] (.my :pseudo)

за каждый тег — [0:0:1] (div a)

При этом [1:0:0] > [0:x:y] > [0:0:x].

Пример селекторов, выстроенных по приоритету (первые важнее):


6

 #  my p#id — [2:0:1]
 #  my #id — [2:0:0]
 #  my p — [1:0:1]
 #  id — [1:0:0]
 .wrapper .content p — [0:2:1]
 .content div p — [0:1:2]
 .content p — [0:1:1]
 p — [0:0:1]

Пример HTML-кода:

 <!DOCTYPE html>
 <html dir="ltr" lang="en-US">
 <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>npuopumem CSS селекторов<ЛШе>
    <link rel="profile" href="http://gmpg.org/xfn/11"/>
    <link rel="shortcut icon" href="http://anton.shevchuk.name/favicon.ico"/>
    <link rel="stylesheet" href="css/styles.css"/>
      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript" src="js/code.js"></script>
    <script>
      function appendStyle(rule) {
        $('head').append('<style>'+rule+'</style>');
      }
    </script>
 </head>
 <body>
 <div class="wrapper">
    <menu>
      <a href="css.float.html" title="go prev" class="button alignleft" rel="prev"> «- Prev </a
      <a href="index.html" title="back to Index" class="button alignleft" rel="index">Index §
      <a href="css.selectors.html" title="go next" class="button alignright" rel="next">Next
      <hr/>
           ^3>Шпаргалка<^3>
 <pre><code><em>// weight</em>
 #id = [1,0,0]
 .class = [0,1,0]
 tag = [0,0,1]
 <em>// compare</em>
 [1,0,0] > [0,1,0] > [0,0,1]
 [1,0,0] > [0,100,100]
 [0,1,0] > [0,0,100]
 </code></pre>
      <hr/>
      <pre><code contenteditable="true">appendStyle(<span>'p { color:orange }'</span>)</
      <button type="button" class="code">Run Code</button>

7

     <pre><code>appendStyle(<span>'.content p { color:green }'</span>)</code></pre> <button type="button" class="code">Run Code</button>
     <pre><code>appendStyle(<span>'article.content p { color:blue }'</span>)</code></pre <button type="button" class="code">Run Code</button>
     <pre><code>appendStyle(<span>'.wrapper .content p { color:red }'</span>)</code></p <button type="button" class="code">Run Code</button>
     <pre><code>appendStyle(<span>'#id { color:darkblue }'</span>)</code></pre> <button type="button" class="code">Run Code</button>
     <pre><code>appendStyle(<span>'#my p { color:darkcyan }'</span>)</code></pre> <button type="button" class="code">Run Code</button>
    <pre><code>appendStyle(<span>'#my #id { color:darkgreen }'</span>)</code></pre>
    <button type="button" class="code">Run Code</button>
    <pre><code>appendStyle(<span>'#my p#id { color:black }'</span>)</code></pre>
    <button type="button" class="code">Run Code</button>
  </menu>
  <header>
    <h1>npuopumem CSS селекторов</И>
    <h2>CoxpaHume страницу и попробуйте изменить CSS стили</'И2>
  </header>
  <article id="my" class="content">
    <h2>Article Title</h2>
     <p id="id">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum, lectus eu varius consectetur, libero velit hendrerit augue, ut posuere enim neque in libero. Donec eget sagittis nibh. Suspendisse sed tincidunt urna. Cras quis euismod neque. Maecenas auctor ultricies posuere. Pellentesque luctus pulvinar dui eget semper. Donec sodales odio eu sapien varius luctus. Donec dictum feugiat diam at malesuada. Sed nec massa in augue condimentum faucibus quis ut diam. Quisque nisl sem, semper nec vulputate vel, mattis sit amet justo. Aliquam purus felis, tempor at scelerisque quis, tincidunt in neque. Etiam ut risus diam. Pellentesque fermentum risus id elit feugiat cursus. Ut fringilla dictum diam, sed iaculis lorem pulvinar ut. Cras vel elit id velit commodo viverra sit amet vel orci.</p> </article>
  <footer>
     ©copyright 2014 Anton Shevchuk — <a href="http://anton.shevchuk.name/jquery-book </footer>
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-1669896-2']);
    _gaq.push(['_trackPageview']);
    (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-a var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s })();
  </script>
</div>
</body>

8

 </html>


 <div class="wrapper">
 <div id="my" class="content">
 <p id="id">
 Lorem ipsum dolor sit amet, consectetuer...
 </p>
 </div>
 </div>

При равенстве счета — последний главный.

Говорят, что правило с 255 классами будет выше по приоритету, нежели правило с одним “id”, но я надеюсь, такого кода в реальности не существует

Вот такое краткое вступительное слово, но пора вернуться к jQuery. Так вот, работая с jQuery, вы должны “на отлично” читать правила CSS, а также уметь составлять CSS-селекторы для поиска необходимых элементов на странице. Но давайте обо всем по порядку, возьмём следующий простенький пример вполне семантического HTML:

 <!DOCTYPE html>
 <html dir="ltr" lang="en-US">
 <head>
 <meta charset="UTF-8"/>
 <title>Page Title</title>
 <link rel="profile" href="http://gmpg.org/xfn/11"/>
 <style type="text/css">
 body {
 font: 62.5%/1.6 Verdana, Tahoma, sans-serif; color: #333333;
 }
 h1, h2 {
 color: #ff6600;
 }
 header, main, footer { margin: 30px auto; width: 600px;
 }
 #content { padding: 8px;
 }
 .box {
 border:1px solid #ccc; border-radius:4px; box-shadow:0 0 2px #ccc;
 }
 </style>
 </head>
 <body>
 <header>
 <h1>Page Title</h1>
 <p>Page Description</p>
 </header>
 <main id="content" class="wrapper box"> <article>

9

 <h2>Article Title</h2> <p>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc urna metus, ultricies eu, cong
 </p>
 </article>
 <article>
 <h2>Article Title</h2> <p>
 Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia mas
 </p>
 </article>
 </main>
 <footer>©copyright 2014</footer>
 </body>
 </html>

Это пример простого и правильного HTML5 с небольшим добавлением CSS3. Давайте разберём селекторы в приведённом CSS-коде (я предумышленно не выносил CSS в отдельный файл, ибо так наглядней):

body - данные правила будут применены к тегу <body> и всем его потомкам

h1,h2 - мы выбираем теги <h1> и <h2>, и устанавливаем цвет шрифта #content -выбираем элемент с “id=“content”” и применяем правила

.box - выбираем элементы с “class=“box””


Теперь подробнее и с усложнёнными примерами:

hl            ищем элементы по имени тега                                              
#container    ищем элемент по идентификатору “id=container” (идентификатор             
              уникален, значит, на странице он должен быть только один)                
div#container ищем <div> c идентификатором container, но предыдущий селектор           
              работает быстрее, но этот важнее                                         
.news         выбираем элементы по имени класса “class=“news””                         
div.news      все элементы <div> c классом news (так работает быстрее в IE8, т.к. в нём
              не реализован метод “getElementsByClassName()”)                          
#wrap .post   ищем все элементы с классом post внутри элемента с “id = wrap”           
.cls1.cls2    выбираем элементы с двумя классами “class=“cls1 cls2””                   
h1,h2,.posts  перечисление селекторов, выберем всё перечисленное                       
.post > h2    выбираем элементы <h2>, которые являются непосредственными               
              потомками элемента с классом “post”                                      
a + span      будут выбраны все элементы <span> следующие сразу за элементом <a>       
a[hrefA=http] будут выбраны все элементы <a> у которых атрибут “href” начинается с     
              ^^предположительно, все внешние ссылки)                                  

Это отнюдь не весь список, описание же всех CSS3 селекторов можно найти на соответствующей страничке W3C: ссылка: http://www.w3.org/TR/css3-selectors/


10