Вывод текста элемента через jQuery
Метод .html() можно использовать не только для изменения текста элементов, но и для вывода его на экран. Например, давайте получим элемент и выведем алертом его текст:
<p id="test">Абзац.</p>
alert($('#text').html());
Если попытаться получить текст не с одного элемента, а многих, получите только содержимое первого элемента.
Работа с CSS через jQuery
Для работы с CSS предусмотрен метод .css(). Первым параметром он принимает имя CSS свойства, вторым – его новое значение. Выше рассматривался пример с изменением цвета. Можно использовать свойства, которые пишутся через дефис:
$('.www').css('font-size', '20px');
Если хотите задать несколько свойств CSS, то для этого можно передать параметром в метод .css() объект, ключами которого будут CSS свойства, а значениями объекта – значения CSS свойств:
$('.www').css({color: 'red', font: '12px Arial'});
Внимание! Свойства, которые пишутся через дефис, в этом случае изменяются по принципу fontSize.
Селекторы jQuery
jQuery поддерживает все стандартные селекторы CSS. В дополнение к ним идут и нестандартные селекторы, которые позволят расширить селекторы CSS.
Например, псевдокласс :first позволяет выбрать первый элемент в наборе jQuery: $('li:first');// выбран первый пункт списка
Псевдокласс :last находит последний элемент набора.
С помощью :eq можно выбрать элемент с любым номером в наборе, допустим третий элемент - :eq(3).
С помощью :even и :odd можно выбирать четные и нечетные элементы в наборе.
|
|
|
Псевдокласс :header выбирает одновременно все заголовки от h1 до h6.
Псевдокласс :has выбирает элементы по их содержимому. Например, можно выбрать все абзацы, внутри которых есть теги b: $('p:has(b)');
Псевдокласс :contains выбирает элементы по наличию определенного текста в них: $('p:contains("текст")');
Псевдоклассы :empty и :parent позволяют выбирать все пустые элементы (в которых нет текста), и наоборот, все непустые элементы.
Существует еще и метод . parent (), который позволяет выбрать родителя элемента.
Метод each
Метод .each() позволяет применить какую – либо функцию для всех элементов набора jQuery. При этом внутри функции можно разделить элементы и поступить по – разному с каждым из них.
По сути .each() является циклом, с помощью которого можно перебрать все найденные элементы. Ссылка на тот элемент, по которому сейчас проходит цикл будет лежать в this.
Пример: получим все элементы с классом .www и выведем на экран их содержимое.
Разбор кода: с помощью $('.www')получаем нужные нам элементы, затем с помощью .each() к каждому полученному элементу применяем функцию. Сначала она применится к первому абзацу, потом ко второму и т.д. Внутри функции this будет указывать на тот элемент, к которому применяется функция.
|
|
|
<p class="www">Текст абзаца 1.</p>
<p class="www">Текст абзаца 2.</p>
<p class="www">Текст абзаца 3.</p>
<p>Абзац.</p>
$('.www').each(function() {
alert($(this).html());
});
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №14
НАИМЕНОВАНИЕ: Разработка браузерной игры средствами JavaScript
3. ЦЕЛЬ: Создание браузерной игры средствами JavaScript, формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6
2. ПОДГОТОВКА К ЗАНЯТИЮ: по предложенной литературе повторить весь пройденный материал по курсу JavaScript
3. ЛИТЕРАТУРА:
3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.
4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Текстовый редактор
5. ЗАДАНИЕ:
5.1 На основании всего изученного материала по JavaScript разработать небольшую браузерную игру. Тематику игры можно выбрать самостоятельно, можно взять материал на основе заданий по WSR
6. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
6.2 Выполнить задание практического занятия
6.3 Дать ответы на контрольные вопросы.
7. СОДЕРЖАНИЕ ОТЧЕТА:
|
|
|
7.1 Наименование и цель работы
7.2 Выполненное задание
7.3 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе
8. КОНТРОЛЬНЫЕ ВОПРОСЫ:
8.1 Дать краткое описание игры, его логику. Представить основных героев, если таковые имеются.
ПРИЛОЖЕНИЕ:
Дата добавления: 2021-02-10; просмотров: 74; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!