Javascript та Jquery селектори

Завдання, яке дуже часто постає перед розробниками-початківцями javascript це вибір елемента на веб-сторінці за його атрибутом id.

Припустимо, що ми маємо код на сторінці.

Як вибрати елемент з >

Тут є кілька варіантів вирішення проблеми. Давайте їх зараз розглянемо.

Варіант 1. Скористатися методом Javascript getElementById.

Є спосіб, як можна звернутися до елемента за його id використовуючи «чистий» JavaScript, без використання якихось сторонніх бібліотек. Цей спосіб полягає у використанні методу ggetElementById(«id_елемента»). Таким чином ми звертаємося до потрібного нам елементу за його ID.

Погляньмо, як це працює на простому прикладі.

Додалося лише кілька рядків коду.

Зверніть увагу, що ці рядки коду (скрипт) знаходяться нижче самого елемента. Це обов'язкова умова цього скрипту, т.к. код Javascript виконується при завантаженні сторінки. Якщо розмістити код вище, ми будемо звертатися до елементу на сторінці, який ще підвантажився, тобто. його в коді, на момент виконання скрипту, ще не буде. Є способи, як цього можна уникнути, але це виходить за межі цієї статті.

У результаті, якщо все правильно працює, ми отримаємо спливаюче вікно. У цьому вікні буде виводитись текст, який знаходиться всередині блоку div.

його

Давайте тепер подивимося, як можна вирішити це завдання іншим способом.

Варіант 2. За допомогою бібліотеки Jquery.

Другий варіант вибору елемента за його ID, полягає у використанні бібліотеки Jquery. На практиці, у сучасних скриптах, найчастіше користуються саме цим способом. Він набагато зручніший ілегше запам'ятовується.

Для того, щоб звернутися до елемента з його id потрібно скористатися конструкцією:

Тут elem – ім'я, що міститься в атрибуті id.

Т.к. ми будемо використовувати сторонню бібліотеку Javascript, яка називається Jquery, то цю бібліотеку потрібно спочатку підключити.

Додається вона в розділі , одним із способів, як це можна зробити, потрібно додати наступний рядок коду:

Щоб бібліотека могла підвантажитися, має бути з'єднання з Інтернет.

Сам скрипт, як і в попередньому прикладі, повинен знаходитися нижче за кодом елемента, з яким ви хочете взаємодіяти.

Таким чином, ми з вами розібрали два способи, як можна вибрати елемент на веб-сторінці за його атрибутом id та взаємодіяти з ним. Вибирайте той спосіб, який вам підходить, та використовуйте його на практиці.