Jquery - урок 5

Спочатку розглянемо основні методи роботи з html. а потім вже методи для маніпуляції з цими елементами. Отже, основні методи:
  • html (val) - додає html-код в обрані елементи.
    приклад:

Дана інструкція додасть в усі div-и з класом sp, span-и з текстом "Привіт".

  • text () / val () - повертає текстове вміст елемента / значення елемента.
    приклад:

    Дана інструкція поверне текст з параграфа.

  • text (val) / val (val) - встановить текст для елемента / значення для елемента.
    приклад:

    Дана інструкція в параграфі напише слово "Привіт!".

    • Давайте для прикладу, зробимо так, щоб при натисканні на кнопку "Повторити", текст з першого абзацу дублювався в другій абзац.

    Текст першого абзацу!

    Текст першого абзацу!

    Фукция буде виглядати так:

    Тобто спочатку в змінну tp1 ми запишемо текстове вміст першого абзацу (перший рядок), а потім передамо його у другій абзац (другий рядок).

    Тепер давайте розглянемо методи, які дозволяють маніпулювати вставляються елементами.
    • append (content) - додає content всередину всіх обраних елементів ПІСЛЯ існуючого контенту.
      приклад:

    Дана інструкція додасть в кінець параграфа текст "Привіт" жирним шрифтом.

  • appendTo (content) - зворотна операція, додає В content всі вибрані елементи.
    приклад:

    Дана інструкція додасть параграф в кінець елемента з ідентифікатором "main".

    Іншими словами:
    $ (A) .append (B) - додасть В в кінець А.
    $ (A) .appendTo (B) - додасть А в кінець В.

  • prepend (content) - додає content всередину всіх обраних елементів ДО існуючого контенту.
    приклад:

    Дана інструкція вставить в початок параграфа текст "Привіт" жирним шрифтом.

  • prependTo (content) - зворотна операція, додає В content всі вибрані елементи.
    приклад:

    Дана інструкція вставить параграф в початок елемента з ідентифікатором "main".

    Іншими словами:
    $ (A) .prepend (B) - додасть В в початок А.
    $ (A) .prependTo (B) - додасть А в початок В.

  • after (content) - додає content ПІСЛЯ всіх обраних елементів (зауважте ПІСЛЯ елемента, а не в кінець елемента, як у випадку з append.
    приклад:

    Дана інструкція вставить після параграфа текст "Привіт" жирним шрифтом.

  • befor (content) - додає content ДО всіх обраних елементів (зауважте ДО елемента, а не в початок елемента, як у випадку з prepend.
    приклад:

    Дана інструкція вставить перед параграфом текст "Привіт" жирним шрифтом.

  • insertAfter (content) - вставляє всі вибрані елементи ПІСЛЯ content-а.
    приклад:

    Дана інструкція вставить параграф після елемента з ідентифікатором "main".

    Іншими словами:
    $ (A) .after (B) - вставить В після А.
    $ (A) .insertAfter (B) - вставить А після В.

  • insertBefore (content) - вставляє всі вибрані елементи ПЕРЕД content-му.
    приклад:

    Дана інструкція вставить параграф перед елементом з ідентифікатором "main".

    Іншими словами:
    $ (A) .before (B) - вставить В перед А.
    $ (A) .insertBefore (B) - вставить А перед В.

    • Розглянемо приклад. Давайте зробимо так, щоб при натисканні на кнопку "Додати" в червоному прямокутнику з'являлися жовті квадратики (один клік - один квадратик).

    Код html-сторінки складається з одного div-а і однієї кнопки:

    На сторінці style.css як завжди визначаємо стилі:

    Ну а код самої функції зовсім короткий:

    function addYellowSquare ()<$("#red_sk").prepend("

    Ось так все просто. Але продовжимо розглядати самі методи:
    • wrap (html) - обертає кожен елемент в елемент обгортку.
      приклад:

    Дана інструкція оберне кожен параграф span-му.

  • wrapAll (html) - обертає всі елементи в ОДИН елемент обгортку.
    приклад:

    Дана інструкція оберне все параграфи одним span-му.

    Дана інструкція виділить вміст кожного параграфа курсивом.

  • replaceWith (content) - заміщає одні елементи іншими.
    приклад:

    Дана інструкція замінить всі span-и div-ами.

  • replaceAll (selector) - зворотна операція, тобто все selector-и будуть поміняні на елементи.
    приклад:

    Дана інструкція замінить всі div-и span-ами.

  • empty () - видаляє з елемента всі вузли-нащадки, включаючи текст.
    приклад:

    Дана інструкція видалить весь вміст span-ів.

  • remove () - видаляє самі елементи.
    приклад:

    Дана інструкція видалить все span-и.

  • clone () - клонує елементи.
    приклад:

    Дана інструкція візьме елементи, виділені жирним і додасть їх в div.

    • В останньому прикладі, ми торкнулися ще одного аспекту jQuery, а саме підтримки цієї бібліотеки ланцюжка викликів. Тобто ви можете викликати кілька методів в одному рядку, відділяючи їх крапкою. Наскільки це зручно? Залежить від вас. Якщо це Вас не плутає, то використовуйте на здоров'я. Надалі ми часто будемо використовувати такий вид запису.

    Наостанок, давайте зробимо ще один приклад. Нехай у нас є певний список, і ми хочемо вирішити користувачам додавати в нього пункти:

    Наші міста:
    • Архангельськ
    • Москва
    • Іркутськ
    Доповніть список: jQuery html
  • Наші міста:
    • Архангельськ
    • Москва
    • Іркутськ
    Доповніть список:

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

    Якщо цей сайт виявився вам корисний, ви можете допомогти в його розвитку, поставивши одну з цих посилань на свій сайт.

    Схожі статті