Учим jQuery — Часть 5

Меняем HTML и текст селектора.
Прочитать материалы из предыдущего урока можно по этой ссылке: jQuery. Урок 4

5.1 Как изменить HTML внутри элемента

Мы уже познакомились с изменением CSS стилей, используя .css(..), и теперь рассмотрим как добавить HTML код. Наш HTML элемент выглядит так:

<div class="js-main main"></main>

Как мы видим, он в данный момент пуст. Добавим в него ссылку при помощи .html():

$('.js-main').html('<a href="#">Click</a>');

Обратите внимание, добавляем через одинарные кавычки, т.к. HTML в большинстве случаев использует двойные (для атрибутов), и при такой записи конфликтов и ошибок быть не должно.

5.2 Как изменить текст на jQuery

Используем .html():

$('.js-main').html('Button text');

Но, лучше использовать .text() :

$('.js-main').text('New text');

Оба примера полностью удаляют всё содержимое блока, и меняют на ту строку, что вы передали в одинарных кавычках. Это нужно учитывать правильно подобрав CSS селектор.

Следите за кавычками в тексте, чтобы они не создавали ошибок в коде.

5.3 Как получить текст элемента на jQuery

Чтобы получить текст выбранного селектора, необходимо вызвать .text() без параметров, следующим образом (результат выведем в консоль браузера):

console.log($('#tag_lessons').text());

Как вы понимаете, с получением html элемента история точно такая же 🙂 . Но используется гораздо реже чем text():

console.log($('#tag_lessons').html());

5.4 Консоль браузера

console.log() — вывод в консоль вашего браузера. Используется для разных целей и вообще это незаменимая штука 🙂

Поможет вывести значения переменных, отловить баги, «удивится прекрасной математике» javascript`а, посмотреть содержание массива (объекта) и многое другое. Вызвать можно в браузере, например, при помощи клавиши F12 либо Ctrl+Shift+I.
Читать далее Часть 6.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *