- отобрать все элементы span, которые являются потомками блока с классом wrap и обвести их черной однопиксельной рамкой.
Показать решение$(function () { $('div.wrap span').css('border', '1px solid #000000'); });
Для решения задачи с помощью селектора $('div.wrap span') обращаемся ко всем элементам span, расположенным в блоке с классом wrap и с помощью метода css(); добавляем им черную однопиксельную рамку.
При загрузке страницы, к которой подключен скрипт, ко всем элементам span, расположенным в блоке с классом wrap добавится черная однопиксельная рамка.
- выбрать все элементы span, которые являются потомками элементов div и p - обвести их черной однопиксельной рамкой. Элементам span, потомкам элементов p изменить фоновый цвет на #aeafae
Показать решение$(function () { $('div span, p span').css('border','1px solid #000000'); $('p span').css('background','#aeafae'); });
Для решения задачи с помощью селектора $('div span, p span') сначала обратимся к элементам span, потомкам div и p - с помощью метода jQuery .css(); добавим им черную однопиксельную рамку. Затем с помощью селектора $('p span') и метода jQuery .css(); изменим фоновый цвет для элементов span, потомков элементов p
При загрузке страницы, всем элементам span, потомкам элементов div и p будет добавлена однопиксельная черная рамка, а у элементов span, потомков элементов p поменяется фоновый цвет.
- выбрать все элементы li и обвести их черной однопиксельной рамкой. Элементам li элемента ul с классом pr присвоить фоновый цвет #aeafae
Показать решение$(function () { $('li', 'ul').css('border','1px solid #000000'); $( "li", "ul.pr" ).css('background','#aeafae'); });
Для решения задачи использован альтернативный вариант записи, дающий такие же результаты, что и предыдущий пример. Правда в этом случае неполучится обратится сразу к нескольким элементам. С помощью селектора $('li', 'ul') обращаемся ко всем элементам li, потомкам элеметов ul и обводим их черной однопиксельной рамкой. Обратите внимание, что сначала указывается элемент-потомок, а затем элемент-родитель. Оба элемента берутся в кавычки и разделяются запятой. Затем с помощью селектора $( "li", "ul.pr" ) меняем фоновый цвет у элементов li, которые являются потомками элемента ul с классом pr.
При загрузке страницы, все элементы li будут обведены черной однопиксельной рамкой, а элементам li, принадлежащим элементу ul с классом pr будет добавлен фоновый цвет.