JQuery селекторы. Часть 3.

Третья часть небольшой серии заметок, рассказывающих в примерах об использовании селекторов в JQuery. Сегодня рассмотрим работу по выборке всевозможных атрибутов элементов веб-страницы.

JQuery селекторы - выборка по атрибутам

1. Для начала я покажу вам имеющуюся разметку:

<div class="evolution">
<p>Lorem ipsum dolor sit amet consectetuer.</p>
</div>
<div class="content">
<p>Laoreet vel <span id="field_first">Vivamus et</span> 
Pellentesque eu egestas <span id="test">metus</span>. 
Morbi Vivamus In vel porttitor Donec Maecenas convallis  
penatibus <span id="field_second">diam</span>. Congue 
<b id="field_third">libero eu malesuada id</b> 
cursus In senectus mollis semper ipsum magna semper
<a href="http://red-book-cms.ru" title="Сайт">Suspendisse</a>. 
</p>
</div>

<p><span id="tux">Semper</span> sit at urna wisi consectetuer 
sed feugiat. Euismod Vestibulum <i class="gray">risus</i> 
id velit eget rutrum ut <a href="#" rel="nofollow">quis</a> 
vel enim. Laoreet Curabitur porta adipiscing cursus 
sem risus dui libero convallis vitae fringilla. 
<b id="linux">Duis nec</b> tempor pede consectetuer.</p>

<div class="revolution">
<p>Gravida dis <b class="yandex se">est</b> hac felis 
<span class="google se">vitae</span>.</p>
</div>

2. А вот собственно и сами примеры:

// Выбираем элемент с именем 'test':
$("[name='test']").css({'color':'red'});

// Выбираем элементы, имена которых начинаются с 'field_':
$("[name^='field_']").css({'color':'orange'});

// Выбираем элементы, имена которых оканчиваются на 'ux':
$("[name*='ux']").css({'color':'cyan'}); 

// Выбираем элементы <b>, имена которых оканчиваются на 'ux':
$("b[name*='ux']").css({'color':'yellow'}); 

// Выбираем элементы классы, которых через пробел содержат 'se':
$("[class~='se']").css({'font-size':'10px'});

// Выбираем элементы <i>, имена которых оканчиваются на 'ux':
$("i[class='gray']").css({'color':'gray', 'font-size':'50px'});

// Выбираем дивы, классы которых содержат 'ti':
$("div[class*='ti']").css({'font-size':'25px'});

// Выбираем ссылки с атрибутом nofollow:
$("a[rel='nofollow']").css({'color':'green'});
Опубликовано 19-06-2013 в 11:35


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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты