Cелекторы в JQuery. Часть 1.

В данной заметке / статье повествование пойдет о том, как же использовать  селекторы в JQuery. Т.к. цитировать тома официальной документации смысла в общем-то нет, ниже я приведу несколько примеров программного кода на JavaScript, но для начала давайте набросаем несколько строчек разметки на HTML, чтобы нам с вами было где экспериментировать.

<div class="container" id="main">
  <div class="row">  
    <div class="span8 content">
      <p>Non ante egestas tortor ac.</p>      
      <h1>Селекторы в JQuery</h1>
      <p>Non ante <b>egestas</b> tortor ac.</p>
    </div><!-- /.span8.content -->
    <div class="span4 sidebar">
      <p>Mollis laoreet <a href="http://example.com">lacinia</a> 
      ut natoque. In porttitor faucibus at tortor congue. Semper 
      lacus congue at rutrum pede rirus
      <a href="http://example.com" rel="nofollow">Proin in</a> 
      enim gravida. Non ante egestas tortor ac.</p>  
    </div><!-- /.span4.sidebar -->
  </div><!-- /.row -->
</div><!-- /.container -->

1. Начну с самого простого, — будем выбирать дивы по идентификаторам и классам CSS. Для наглядности меняю background-color и иные цвета элементов:

/* .sidebar станет черным: */
$('.sidebar').css({'background-color': '#000'});
/* #main станет красным: */
$('#main').css({'background-color': 'red'});
/* Текст абзацев в #main покраснеет: */
$('#main p').css({'color': 'red'});

Последняя, 6-ая строчка, в сниппете показывает простейший пример хождения по иерархии DOM.

2. Теперь пора рассмотреть более интересный пример с выборкой всех гиперссылок внутри блочных элементов:

/* Отбираем все теги <a> внутри дивов: */
$('div').find('a').css({'color': 'green'});

3. Выискиваем у абзацев дива несколько прямых потомков в виде тегов <a>:

/* Отбираем все теги <a> внутри <p> у дивов: */
$('div p > a').css({'color': 'yellow'});
/* Обратите внимание на то, что это работать не будет: */
$('div > a').css({'color': 'yellow'});

4. Разглядываем ещё 1 example, — группируем селекторы:

/* Теги <a> и <b> позеленеют внутри .container: */
$('.container a, .container b').css({'color': 'green'});

Из показанного выше следует, что JQuery селекторы во многом схожи с селекторами CSS. Продолжение следует, в продолжение начатого…

Опубликовано 13-06-2013 в 12:28


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

Ваш 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 »

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