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

10 хв. читання

Вирішили спробувати себе у 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. Але це тільки початок, далі ще більше корисного та цікавого!

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.8K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація