jQuery для чайників ч.1 - типи даних та селектори

Вирішили спробувати себе у front-end розробці?

Подобається Вам це чи ні, але знання JavaScript або jQuery \- основа для кожного фронтендера.

Настав час дізнатися, як це працює і почати створювати інтерактивні веб-сайти.

Цей пост розповість Вам про всі речі, які Ви повинні знати, щоб почати використовувати jQuery плагіни та бібліотеки.

Про що Ви сьогодні дізнаєтеся:

• Як включити jQuery у проект;

• Як вибирати елементи на сторінці;

• Як створювати змінні і функції;

А тепер зануримося в навчальний процес.

Чому jQuery?

• jQuery \- найпопулярніша бібліотека JavaScript, яка дозволяє Вам легко обирати будь-які елементи на сторінці;

• jQuery гасло " писати менше, робити більше " \- саме через цю властивість вона і є такою популярною;

• Ви можете використовувати чистий JavaScript, але перевага використання jQuery полягає в тому, що Вам не доведеться турбуватися про крос-браузерну сумісність;

• jQuery 2.x підтримує Internet Explorer 9+. Якщо Вам потрібна підтримка старих браузерів, потрібно використовувати jQuery версії 1.x.

Додаємо jQuery

Щоб включити jQuery у проект, завантажте бібліотеку і додайте наступний фрагмент коду у свій документ прямо перед закриваючим тегом body:

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\\/script>')</script>
     
        <script src="js/greensock/TweenMax.min.js"></script>
     
        <script src="js/_main.js"></script>

З допомогою цього коду ми спочатку спробуємо завантажити jQuery з googleapis.com і, якщо він не може знайти її, то вона буде завантажуватися з локального файлу jQuery.

Порядок завантаження файлів є дуже важливим.

1. Спочатку jQuery,
2. потім всі плагіни,
3. тоді свій скрипт.

**_main.js** \- це порожній файл, який викликається після jQuery і jQuery плагінів. Це файл, в якому Ви будете записувати ваш користувальницький код.

Початок

Весь користувальницький jQuery код тримається всередині зовнішнього файлу. Все зберігається в окремому файлі, подібно таблиці стилів CSS.

    $(document).ready(function() {
        //починайте писати свій javascript тут
    });

Написання всього коду всередині функції $(document).ready буде запорукою того, що код виконується після того, як сторінка повністю завантажена Ви також будете захищені від конфліктів з іншим javascript всередині інших тегів **script**.

Типи даних JavaScript

Щоб створити інтерактивний сайт, Вам необхідно розуміти що таке типи даних JavaScript.

Існує досить багато типів, але найбільш часто використовувані це: простий текст, число, логічне значення (true або false), фрагмент html.

    $(document).ready(function() {
     
        // Як створити змінну
        var something = 1;
        var something = 1;
     
        // або так
     
        var something = 1,
            something = 1;
     
    });

Визначення змінних у верхній частині сторінки - хороша ідея. Надалі, це дозволить з легкістю повторно використовувати їх у вашій функції.

Детальніше про кожен тип даних.

    var pageWidth = 500,                         // Число
        message = 'this is our new message',     // Рядок
        html = '<strong>content</strong>',       // htmlРядок
        animating = true,                        // Логічний тип - true чи false
        object = {},                             // Об'єкт
        array = [1,2,3];                         // Масив

**Number** \- це значення, яке, наприклад, можна використовувати при визначенні швидкості або тривалості;

**String** \- це просто шматок тексту, наприклад повідомлення, яке відображається після відправки форми;

**htmlString** \- подібно **string** , але також містить html-теги;

**boolean** визначає, чи є щось істинним або хибним.

**object** та **array** працюють практично однаково - зберігають набір значень, проте масив зберігає конкретні значення, а об'єкти - ключі асоціативного масива .

Існує ще кілька типів, але вищенаведені типи використовуються в абсолютній більшості випадків.

jQuery селектори

jQuery пропонує всі селектори, які ви вже знаєте з CSS, але також включає в себе додаткові розширені селектори, які допоможуть Вам обрати будь-який елемент(и) на сторінці.

    <div>
        <h1>jQuery селектори для початківців</h1>
        <p><strong>Перший параграф</strong> простого демо, яке пояснює jQuery селектори. Вибір потрібних елементів - перша зупинка на шляху до вивченя jQuery.</p>
     
        <h2>Header Level 2</h2>
        <ol>
            <li>Lorem <a href="">ipsum</a> dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ol>
        <ul class="clearfix" id="gallery">
            <li class="galleryItem">
                <img src=""></li>
            <li class="galleryItem">
                <img src=""></li>
            <li class="galleryItem">
                <img src=""></li>
        </ul>
        <h3>Header Level 3</h3>
        <ul>
            <li>Lorem <span class="highlight">ipsum dolor</span> sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam <a href="">tincidunt</a> mauris eu risus.</li>
        </ul>
        <h3>Header Level 3</h3>
        <p>Ми будемо <span class="highlight">вибирати певні елементи</span> на цій сторінці. Ми виберемо певний html елемент з допомогою id чи класу.</p>
    </div>

Припустимо, що ми маємо сторінку, що містить вищенаведений html-код, нижче значення селекторів, які допоможуть вам обрати потрібні елементи.

Ви обгортаєте селектор у **$ ( " )**, наприклад, так:

CSS селектори

    $('h1') // Вибираємо всі h1 елементи
    $('#intro') // Вибираємо наш вступний параграф
    $('#page-content') // Вибираємо обгортку контенту
    $('#gallery li') // Вибираємо li елементи з галереї
    $('.galleryItem') // Також вибираємо кожен елемент списку в галереї

Детальніше про CSS селектори.

В останніх двох прикладах ви можете бачити, що є кілька способів вибору одного елемента.

Ось кілька базових селекторів jQuery.

jQuery селектори

    //вибирає перший елемент списку в галереї
    $("#gallery li").eq(0)
     
    //вибирає другий елемент списку в галереї
    $("#gallery li").eq(1)
     
    //вибирає останній елемент списку в галереї
    $("#gallery li").eq(-1)
     
    //вибирає елемент списку, що містить слово 'codeguida'
    $("li:contains('codeguida')")
     
    // вибирає всі посилання на https://codeguida.com
    $("a[href='https://web.archive.org/web/20230610005223/https://codeguida.com']")
     
    // вибирає посиланн, якщо href починається з https://codeguida.com
    $("a[href^='https://web.archive.org/web/20230610005223/https://codeguida.com']")
     
    // вибирає всі посилання всередині будь-якого ol на сторінці
    $("#page-content ol").find("a")
     
    // це дозволить вибрати li і p-елементи
    $(".highlight").parent()
     
    // це дозволить вибрати ul, який є батьківським span з класом highlight
    $(".highlight").parents("ul")

**.eq()** використовує нульову індексацію, це означає, що .eq(0) вибере перший елемент, а .eq('1') \- другий;

**:contains()** вибирає елемент, який буде містити зазначений текст;

**element[attribute='value']** вибирає кожен елемент, атрибут якого ( id, href і т.д.) починається з вказаного значення;

**.find()** \- пошук конкретного елемента всередині елемента;

**.parent()** вибирає прямого предка елемента, на один рівень вгору по дереву DOM.

**.parents()**, аналогічно .parent(), але буде вибрано всі елементи DOM дерева на шляху до html-елемента.

Подібним чином Ви можете використовувати **.siblings()**, **.child()**, .``**next()**, **.nextAll()** та багато інших.

Детальніше про jQuery селектори.

Сьогодні Ви зробили перший крок на шляху вивчення jQuery. Але це тільки початок, далі ще більше корисного та цікавого!