jQuery для начинающих. Часть 4. Селекторы

Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в DOM’е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…


Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)

Селекторы в jQuery базируются на CSS селекторах, а так же поддерживают XPath. Дабы не закапываться в документацию буду приводить примеры, много примеров. Но начнем с самых азов…

Для начала нам понадобиться макет HTML странички (вполне типичный макет):

<div id="header">
    <h1><a href="/" title="homepage">Title</a></h1>
    <h2>Sub-title <span>small description</span></h2>
</div>
<div id="wrapper">
    <div id="content">
        <div class="post">
            <h3>Post Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
               Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
               vel varius augue tortor vel tortor.</p>
            <span>Image Title</span>
            <img src="/image1.jpg" alt="Image Alt Text"/>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
               Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
               vel varius augue tortor vel tortor.</p>
            <span class="inner-banner">Banner Text</span>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
               Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
               vel varius augue tortor vel tortor.</p>
        </div>
        <span id="banner"><img src="/banner1.jpg" alt="Big Banner"/></span>
        <div class="post">
            <h3>Post Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
               Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
               vel varius augue tortor vel tortor.</p>
            <span>Image Title</span>
            <img src="/image2.jpg" alt="Image Alt Text"/>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
               Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
               vel varius augue tortor vel tortor.</p>
            <span class="inner-banner">Banner Text</span>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
               Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
               vel varius augue tortor vel tortor.</p>
        </div>
    </div>
</div>
<div id="sidebar">
    <ul>
         <li><a href="/item0.html">Menu Item 0</a></li>
         <li><a href="/item1.html">Menu Item 1</a></li>
         <li><a href="/item2.html">Menu Item 2</a></li>
         <li><a href="/item3.html">Menu Item 3</a></li>
    </ul>
</div>
<div id="footer">
    Copyright &copy; 2008
</div>

А теперь приступим к выборкам:

Выбор элементов по Id либо ClassName аналогично используемому в CSS

$('#sidebar');    // выбор элемента с id = sidebar
$('.post');       // выбор элементов с class = post
$('div#sidebar'); // выбор элемента div с id = sidebar
$('div.post');    // выбор элементов div с class = post

Примечание: используйте валидные имена классов и id

Бродим по иерархии объектов в DOM’е

Простой выбор потомков:

$('div span');            // выбор всех span элементов в элементах div

Аналогичный результат так же можно получить используя следующую конструкцию:

$('div').find('span');    // выбор всех span элементов в элементах div

Выбор только непосредственных потомков

$('div > span');          // выбор всех span элементов в элементах div, где span является прямым потомком div'a

Как же лучше поступить, что работает быстрее? Надо бы протестировать…

Так же селекторы можно группировать:

$('div, span');          // выбор всех div и span элементов

Поиск по соседям:

$('span + img');         // выбор всех img элементов перед которыми идут span элементы
$('span ~ img');         // выбор всех img элементов после первого элемента span
$('#banner').prev();     // выбор предыдущего элемента от найденого
$('#banner').next();     // выбор следующего элемента от найденого

Выбор всех элементов, всех предков, всех потомков

$('*');                // выбор всех элементов
$('p > *');            // выбор всех потомков элементов p
$('p').children();     // --
$('p').parent();       // выбор всех прямых предков элементов p
$('* > p');            // выбор всех предков элементов p (скорей всего Вам не понадобится)
$('p').parents();      // --
$('p').parents('div'); // выбор всех предков элемента p которые есть div (parents принимает в качестве параметра селектор)

Фильтры

Фильтров в jQuery реализовано достаточно много, и пользоваться ими одно удовольствие:

$('div:first');     // выбираем первый div в доме
$('div:last');      // выбираем последний div в доме
$('div:not(.red)'); // выбираем div'ы у которых нету класса red
$('div:even');      // выбираем четные div'ы
$('div:odd');       // выбираем нечетные div'ы
$('div:eq(N)');     // выбираем div идущим под номером N в DOMe
$('div:gt(N)');     // выбираем div'ы, индекс которых больше чем N в DOMe
$('div:lt(N)');     // выбираем div'ы, индекс которых меньше чем N в DOMe
$(':header');       // выбо заголовоков h1, h2, h3 и т.д.
$('div:animated');  // выбор элементов с активной анимацией

Фильтры по контенту и видимости:

$('div:contains(text)'); // выбираем div'ы содержащие текст
$('div:empty');          // выбираем пустые div'ы
$('div:has(p)');         // выбираем div'ы которые содержат p
$('div.red').filter('.bold') // выбираем div'ы которые содержат класс red и класс bold
$('div:hidden');         // выбираем скрытые div'ы
$('div:visible');        // выбираем видимые div'ы

Так же есть фильтры по атрибутам:

$("div[id]");           // выбор всех div с атрибутом id
$("div[title='my']");   // выбор всех div с атрибутом title=my
$("div[title!='my']");  // выбор всех div с атрибутом title не равного my
$("div[title^='my']");  // выбор всех div с атрибутом title начинающихся с my
                        // <div title="myCat">,<div title="myCoffee">, <div title="my...">
$("div[title$='my']");  // выбор всех div с атрибутом title заканчивающихся на my
                        // <div title="itsmy">,<div title="somy">, <div title="...my">
$("div[title*='my']");  // выбор всех div с атрибутом title содержащим my
                        // <div title="itsmy">,<div title="myCat">, <div title="its my cat">,<div title="...my...">

так же стоит отдельно отметить следующий фильтр:

$("a[rel~='external']"); // выбор всех A с атрибутом rel содержащим external в списке значений разделенных пробелом
</code>
В результате его работы будут выбраны следующие теги:
<code lang="HTML4strict">
<a href="" rel="external">link</a> — да
<a href="" rel="nofollow external">link</a> — да
<a href="" rel="external nofollow">link</a> — да
<a href="" rel="friend external follow">link</a> — да
<a href="" rel="external-link">link</a> — нет

Для работы с элементами форм есть ряд селекторов позволяющий выбирать по типу элемента и фильтров – enabled/disabled/selected/checked :

$(":text");            // выбор всех input элементов с типом =text
$(":radio");           // выбор всех input элементов с типом =radio
                       // и так далее
$("input:enabled");    // выбор всех включенных элементов input
$("input:checked");    // выбор всех отмеченных чекбоксов

Фильтры так же можно группировать:

$("div[name=city]:visible:has(p)"); // выбор видимого div'a с именем city, который содержит тег p

Приведу так же ряд полезных селекторов для работы с элементами форм:

$("form select[name=city] option:selected").val(); // получение выбранного(-ых) элементов в селекте city
$("form :radio[name=some]:checked").val(); // получение выбранного значения радиобатона с именем some
$("form :checkbox:checked"); // выбор всех выбранных чекбоксов

Еще советую почитать статью jQuery: 8 полезных советов при работе с элементом SELECT

Если Вам хочеться опробывать как это все работает – то для этого можете воспользоваться тестовой страничкой

Слайды

Как-то слишком много текста получилось, пожалуй пора показывать слайды ;)



jQuery: Simple HTML structure
jQuery: Select by Class or Id
jQuery: Hierarchy
jQuery: Hierarchy
jQuery: Basic filters
jQuery: Basic filters 2
jQuery: Attribute filters
jQuery: Traversing
jQuery: HTML and TXT methods
jQuery: Manipulation - prepend and append
jQuery: Manipulation - insert
jQuery: Manipulation - wrap
jQuery: Manipulation - empty and remove
jQuery: Manipulation - replace

Данная статья написана с использованием следующих ресурсов:

Цикл статей

  1. jQuery для начинающих
  2. jQuery для начинающих. Часть 2. JavaScript Меню
  3. jQuery для начинающих. Часть 3. AJAX
  4. jQuery для начинающих. Часть 4. Селекторы
  5. jQuery для начинающих. Часть 5. Эффекты
  6. jQuery для начинающих. Часть 6. События
January 28, 2009 | JavaScript | Tags:

Другие посты на эту тему

53 Responses to “jQuery для начинающих. Часть 4. Селекторы”

  1. jQuery для начинающих. Часть 3. AJAX says:
    January 28, 2009 at 08:36

    [...] jQuery для начинающих. Часть 4. Селекторы Tags: AJAX, jQuery | October 8th, 2008 | 13,281 views [...]

    Reply
  2. EvilFaeton says:
    January 28, 2009 at 08:40

    А с выходом jQuery 1.3 изменилась поддержка селекторов? Это же вроде основная часть где есть изменения между 1.2 и 1.3.

    PS: К слову о селекторах: http://blog.jquery.com/2008/10/28/jquery-pumpkin/ =)

    Reply
  3. Anton Shevchuk says:
    January 28, 2009 at 08:47

    @EvilFaeton:
    Принцип работы селекторов не изенился, ибо он основывается на CSS3 – были оптимизирована их работа – это да, да еще был добавлен event live – который отслеживает изменения в DOM’е и вешает соответствующие обработчики на новые элементы…
    Более подробно можно почитать на домашней страничке проекта Release: jQuery 1.3

    Reply
  4. EvilFaeton says:
    January 28, 2009 at 08:49

    Нет,я про это:

    Селекторы в jQuery базируются на CSS селекторах, а так же поддерживают XPath.

    Насколько я помню бета версия 1.3 с селекторами xPath не дружила, в финальной версии, он xPath поддерживает?

    Reply
  5. omfg says:
    January 28, 2009 at 09:19

    Давно читаю ваш блог и посты про jquery всегда в закладках валялись, так как плотно с ним сталкиваться не приходилось. И вот буквально на днях пришлось реализовывать сложное меню, прочитал два первых урока и все получилось, спасибо!

    За эту статью тоже большое спасибо, но тут, слава богу знаний о селекторах достаточно) Очень хотелось бы увидеть статью про события, надеюсь она у вас в задумках ;)

    Reply
  6. Octane says:
    January 28, 2009 at 14:57

    Есть еще 2 вида селекторов атрибутов:

    $("a[rel~='external']"); // выбор всех A с атрибутом title содержащим my в списке значений разделенных пробелом
    rel="external" — да
rel="nofollow external" — да
rel="external nofollow" — да
rel="friend external follow" — да
rel="external-link" — нет

    $("a[hreflang|='en']"); // выбор всех A с атрибутом hreflang начинающемся на en в списке значений разделенных дефисом
    hreflang="en-us" — да
hreflang="en-en" — да
hreflang="us-en" — нет

    Первый способ нормально работает в jQuery, а вот второй в версии 1.3.1 вроде не правильно, но код, обрабатывающий селектор такого вида точно есть :)

    А еще в статье нет упоминания о том, что можно группировать селекторы атрибутов:

    $("a[hreflang|='en'][rel~='external']")

    и использовать составные селекторы:

    $("#sidebar, .post")
    Reply
  7. Guzel says:
    January 28, 2009 at 15:55 
        $("form :radio[name=some]:selected").val();// получение выбранного значения радиобатона с именем some

    Здесь небольшая ошибка. Вместо selected должно быть checked.

    Reply
  8. Денис says:
    January 29, 2009 at 05:52 
    $("a[rel~='external']"); // выбор всех A с атрибутом title содержащим my в списке значений разделенных пробелом

    Наверное все таки A с атрибутом rel

    Спасибо за хорошую подборку в одном месте и за удобные слайды, можно было бы их еще скачать в шпаргалку ;)

    Reply
  9. Sergio says:
    January 29, 2009 at 19:51

    Антон, после фичи СЛАЙДЫ я окончательно стал Вашим поклонником =)
    Очень редко в интернете встретишь людей, которые на доступном языке и с применением хороших методов обучения (слайды,примеры,практика,дискуссия) умеют объяснять суть. Спасибо за Ваше желание создавать кладези грамотной инфы, не перенасыщенные лишним контентом.

    Антон, у меня как раз есть вопрос на счет обращения к элементу. Мне необходимо узнать реальную ширину и длину изображения.jpg Пробовал пользоваться функциями Height.. , но они показывают данные о размерах, заданных в CSS.

    P.S. Подскажите, пожалуйста, какой программой Вы создаете эти слайды? Мне она очень поможет, я обладаю похожими с Вами качествами объяснять людям и делаю это постоянно, но вот средств не хватает, программных средств.

    Reply
    • Anton Shevchuk says:
      January 30, 2009 at 11:44

      Насчет получения размера изображение – $(‘img’).attr(“width”) …

      Слайды создавались с помощью фотошопа – минута на слайд – не так уж и много :) Слайдшоу сделано с помощью плагина (a) Slideshow

      Reply
  10. yAnTar says:
    January 30, 2009 at 10:35

    Дякую, за статтю, хоча біля 90% було мені відомо, все одно цікаво почитати.
    А слайди – то взагалі бомба.

    Reply
  11. Sergio says:
    January 31, 2009 at 22:36

    хм, почему то у меня $(’#id’).attr(”width”) … выдает значение 0. Как только не провобыл извлечь размер изображения, результат всё тот же: вместо реальных значений ширины и высоты (разрешения изображения) выдаются значения ширины и высоты, заданные в для самого элемента страницы (например, в коде css).

    В чем может быть дело?

    P.S.
    А вот $(’#id’).attr(”src”)… действительно выдает имя файла с изображением, здесь всё правильно срабатывает.

    Reply
    • yAnTar says:
      February 2, 2009 at 10:36

      Якщо в рисунка не заданий атрибут width – то jQuery нічого не поверне, бо вона не тягне ширину зображення з сервера, а тягне з атрибутів (а атрибут src завжди потрібно задавати, на відміну від ширини).

      Reply
  12. Linkdump #4 | CTAPbIu_MABP's BLOG says:
    February 2, 2009 at 10:36

    [...] Антон Шевчук пишет мануал по jQuery, если ман не был настолько дотошным я бы даже не обратил на него внимания jQuery для начинающих. Часть 4. Селекторы [...]

    Reply
  13. jQuery для начинающих says:
    February 2, 2009 at 16:11

    [...] jQuery для начинающих. Часть 4. Селекторы March 3rd, 2008 | 100,802 views | Tags: JavaScript, jQuery [...]

    Reply
  14. Sergio says:
    February 2, 2009 at 21:22

    Отвечаю сам.
    Выход я нашел только один, т.к. в языке судя по всему не предусмотрены такие тривиальные вещи, …
    Итак,

    var hugeimage=new Image();
hugeimage.src=currentsrc+".jpg";
cc=hugeimage.width;
dd=hugeimage.height;

    Переменные cc и dd теперь можно использовать при задании размеров изображения:

    $("#enlargedimage").css({width: cc, height: dd, opacity: "1.0"}); /* показать картинку на экране монитора в натуральную величину */
    Reply
  15. Sergio says:
    February 2, 2009 at 21:32

    Если у вас код достаточно простой, то возможно он позволит поступить ещё проще:

    Просто не задавайте нигде размеров увеличенного изображения (того, что будет показываться при клике на маленькое изображение) – ни в тэге img (в моем случае он имеет id=enlargedimage), ни в css, ни функциями Height(здесь размер в пикселях) и Width(здесь размер в пикселях).
    Тогда при загрузке увеличенного изображения браузер сам определит необходимые ширину и высоту для этого изображения,и они будут равняться реальным ширине и высоте изображения (его разрешению).

    Reply
  16. Anton Shevchuk says:
    February 3, 2009 at 12:18

    @Sergio:
    $(“#id”).attr(“width”) действительно работает только в том случае если размер не задан ни через CSS, ни через атрибуты…

    Reply
  17. Алик Кириллович says:
    February 5, 2009 at 22:23

    Толковая, подробная статья, спасибо.

    Только конструкции типа div:first и div:last, наверное, правильнее все-таки, называть не фильтрами, а псевдоклассами.

    CSS-фильтрами обычно называют:
    CSS-спецэффекты от Микрософт, такие как тень, отражение и пр.
    Или CSS-хаки — селекторы, срабатывающие только в определенных бразуерах, например * html для IE.

    Reply
  18. KruGoZor says:
    February 26, 2009 at 14:38

    Антон скажи пожалуйсто что такое .siblings попроще и поподробней, совсем непойму что-то..

    Reply
  19. Alexpts says:
    February 28, 2009 at 13:00

    Книжку достал jQuery in Action, интересно достаточно.

    Reply
  20. jQuery для начинающих. Часть 2. JavaScript Меню. says:
    May 18, 2009 at 21:09

    [...] jQuery для начинающих. Часть 4. Селекторы August 6th, 2008 | 30,148 views | Tags: jQuery [...]

    Reply
  21. Илья says:
    July 23, 2009 at 19:13

    Антон, ты наверняка работал с jQuery tools. Я только новичок, и мне необходима помощь толковых программистов.
    Вот здесь (http://flowplayer.org/tools/demos/overlay/external.html) описана функция:

    $(function() { 

 // if the function argument is given to overlay, it is assumed to be the onBeforeLoad event listener
 $("a[rel]").overlay(function() { 

 // grab wrapper element inside content
 var wrap = this.getContent().find("div.wrap"); 

 // load only for the first time it is opened
 if (wrap.is(":empty")) {
 wrap.load(this.getTrigger().attr("href"));
 }
 });
});

    При этом для селектора можно задать параметры:

    $(function() {

    $("a[rel]").overlay({ 

        // custom expose settings
        expose: {
            color: '#BAD0DB',
            opacity: 0.7
        }
    });
});

    А можно ли их объединить? То есть чтобы в работе первой функции учитывались параметры второй?

    Reply
  22. Anton Shevchuk says:
    July 23, 2009 at 23:33

    Насколько я помню:

    $("a[rel]").overlay(function() {
  // ...
});

    Аналогично записи:

    $("a[rel]").overlay({onBeforeLoad:function() {
  // ...
}});

    Т.е. callback функцию передавайте в качестве параметра onBeforeLoad…

    Reply
  23. Aderba says:
    August 19, 2009 at 13:02

    Здравствуйте, может не в ту тему пишу, но очень надеюсь на вашу помощь!
    У меня такая проблемка, мне нужно узнать загружен ли iframe или нет, т.е. сработало у него событие onLoad …..
    Для чего мне это надо …..
    У меня есть строки в таблице, которые я могу редактировать посредством ajax ….. А вот сохранение происходит через iframe, чтобы не перегружать страницу. Допустим я несколько записей открыла для редактирования и хочу их всех сразу сохранить. Нажимаю на кнопку сохранить все и вызываю функцию saveAll(form) в которой делаю следующее: перебираю все ссылки, начинающиеся с слова save_ и вызываю обработчик на onclick

    $('a[@id^=save_]').each(function()
{
    $(this).click();
});

    Сам обработчик навешивается на событие в другом участке кода так

    /* save icon click handler */
$('a[@id=save_'+id+']').click(function()
{
	inlineObject.submitInputContent(id, key, "edit");
	UnblockRecordInline(inlineObject.edit_link,key,id);
});

    Получается что для каждой записи вызывается функция submitInputContent, которая делает сабмит формы в iframе, а потом этот iframe удаляется.
    И вот мне нужно как то узнать загружены ли в iframe данные после сабмита или нет. Суть всего этого следующая, что если хоть одна из записей после сабмита вернула ошибку то я делаю один код, если нет, то другой …..

    Reply
    • Anton Shevchuk says:
      October 8, 2009 at 09:14

      К сожалению, я не совсем понял решаемую задачу, но насчет загрузки iframe – это отслеживается следующим образом:

      $('iframe').ready(function() {
  $('body', $('iframe').contents()).html('Hello World!');
});

      Но у меня сложилось впечатление, что использование фреймов в данном случае неверно – лучше уж использовать AJAX

      Reply
  24. Dmitry says:
    October 7, 2009 at 21:38

    Скажите, а как выбрать в div другой div с id=test, а в нём изображение?

    <div class="wrap">
  <div id="test">
   <img ..../>
  </div>
</div>

    так верно?

    ...
this.getContent().find("div.wrap #test img[title]")
...
    Reply
  25. Eldar says:
    October 25, 2009 at 16:03

    Есть таблица, в ней кнопки и спэны:

    <td><button id="btn1">Click Me</button></td>
<td><span>Нужный текс</span></td>

    Как при обработке нажатия на кнопку получить доступ к тексту спэна?

    Я уже запутался с parent, child и sibling Ж(

    Reply
  26. direqtor says:
    January 1, 2010 at 18:14

    Надо изменить ссылку на XML-файл при загрузке документа

    <link
 id="os"
 rel="search"
 type="application/opensearchdescription+xml"
 href="http://transcriptor.ru/transcription/pinyin-russian/plugins/os-ie.xml" />
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$("#os").attr({href,"http://transcriptor.ru/transcription/pinyin-russian/plugins/os.xml"});
//--><!]]>
</script>

    Подскажите, почему не работает?

    Reply
  27. Anton Shevchuk says:
    January 1, 2010 at 18:25

    Небольшая ошибка в синтаксисе, должно быть:

    $("#os").attr("href", "http://transcriptor.ru/transcription/pinyin-russian/plugins/os.xml");
// либо
$("#os").attr({href:"http://transcriptor.ru/transcription/pinyin-russian/plugins/os.xml"});
    Reply
  28. direqtor says:
    January 2, 2010 at 03:39

    Хм, почти та же ошибка, что и у NASA, когда они потеряли спутник.

    Спасибо, вроде все заработало. Правда, вылез другой баг уже связанный с браузером. :(((

    Reply
  29. Sergey says:
    January 4, 2010 at 15:21

    Здравствуйте! Хочу попросить вашей помощи в одном вопросе.

    У меня есть код:

    $(document).ready(function()
{
  $('#timeval').text = '';

   var refreshId = setInterval(function()
   {
        $('#timeval').load('/ajax/refresh/'+ Math.random());

   }, 4000);

});

    Он подгружает каждые 4 секунды вывод php-странички.
    Все прекрасно, только вот никак не смог отыскать в интернете, как сделать так, чтобы при получении текста , начинающегося с
    “done” , обновление страницы бы прекращалось.

    ( в интернете нашел, что обновление странички останавливается с помощью clearInterval(refreshId); )

    Интересует сама возможность определить регулярным выражением, что пришедший текст начинается с “done”.

    Подскажите решение, если не трудно

    Reply
    • Sergey says:
      January 4, 2010 at 20:22

      Все спасибо, разобрался.

      сделано конечно по извращенному, но тут сроки поджимают.
      Может кому пригодится

      var txt = $(‘#timeval’).attr(‘innerHTML’);

      далее , preg_match’ем по txt ищем строку.

      Reply
  30. htorrent says:
    March 4, 2010 at 16:46

    Статья суперская! Поэтому подумал, может тут кто-нибудь поможет с моей проблемкой.

    Еще раз поднимаю тему-вопрос о картинках.

    Проблема: не все браузеры показывают реальные размеры изображения. IE – показывает, GoogleChrome – нет.

    
$(document).ready(function(){

   //Создаем строку (две картинки).
   var stroka = "";
   stroka += "<img id='pics1' src='pics/101-02-01.jpg'>";
   stroka += "<img id='pics2' src='pics/101-02-02.jpg'>";

   //Вставляем строку в <div id='forlink5'></div> .
   $('#forlink5').html(stroka);

   //Перечисляем всех деток ('img') у элемента 'forlink5'
   //и смотрим какие у них размеры ('w' и 'h').
   $('#forlink5').find('img').each(function(i){
      var w = $(this).width();
      var h = $(this).height();
      var src = $(this).attr("src");
      alert("W="+w+", H="+h+", SRC="+src);
   });

});

    Читал на других форумах, что мол картинка може уже находится в кеше и т.д. и т.п. Говорю сразу… это я уже проходил.

    Нужен вариант, чтобы определения размера картинки не зависело от наличия кеша и/или картинки в нем.

    Вариант получения размера при помощи PHP тоже не подходит.

    Решение должно быть в рамках JavaScript (и jQuery).

    Reply
  31. Дядя Вова says:
    March 25, 2010 at 05:28

    Возникла проблема.
    В начале одного из моих скриптов стоит такой код

    $(document).ready(function(){
   $("#report tr:has(h2)").addClass("od");
   $("#repor tr:has(li)").addClass("od2");
});

    Делал я его в Опере, все работало. Когда начал проверять в других браузерах, то работать не хочет. Причем не назначаются именно классы. С этими классами связаны как CSS так и обработчики событий (кликов) по именам этих классов.
    Если изменить селектор например на
    $(“#report tr:odd”).addClass(“od”);
    то сразу же появляется и должный стиль класса и на клик реагирует.
    Отсюда вопрос. Есть ли разница в обработке селектора has() для разных браузеров и если есть, то как с этим боротся.

    Reply
  32. htorrent says:
    March 25, 2010 at 12:36

    Дядя Вова,
    ответственно заявляю, что строчка

    $("#report tr:odd").addClass("od");

    работает в MozillaFirefox, GoogleChrome, IE, Opera.

    Сам специально сейчас по-быстренькому накидал код и посмотрел. Все работает. Поэтому рекомендирую просмотреть свой код на наличие очепяток.

    Reply
  33. Дядя Вова says:
    March 25, 2010 at 18:20

    Вы не поняли. Я как раз и говорил, что
    $(“#report tr:odd”).addClass(“od”);
    работает. Не работает
    $(“#report tr:has(h2)”).addClass(“od”);
    Но этот вопрос уже решен. Идентификатор класса h2 у меня стоял в таблице сразу после tr. Когда я перенес его в ячейку все начало работать. Опера видела его на прежнем месте, а остальные не видели.
    Извините еще один вопрос. Этот скрипт по кликам скрывает и показывает строки таблицы. Но в IE только скрывает строки, а показывать не хочет (не срабатывает toggle()). Как мне объясняли это особенность и ограничение IE. Можно ли это как то обойти.

    Reply
  34. htorrent says:
    March 25, 2010 at 20:23

    Тэг [h2] сразу после [tr] – это конечно же нехорошо. Зачем так пугать браузеры? Они и так все пуганые… Чтобы сделать рабочий скрипт под все браузеры и без того столько сил уходит.

    Что касается toggle… то я сам использую hide() и show().
    Вот примерчик:

    <script language="javascript">
$(document).ready(function(){
  $("#knopka1").click(function(){
     state = $('#shtukovina').css("display");
     if (state == "none") {
        $('#shtukovina').show();
     } else {
        $('#shtukovina').hide();
     }
  });
});
</script>

    и вот html-код к этому скрипту:

    <a id='knopka1'> [KNOPKA] </a>
<div id='shtukovina'> SHTUKOVINA </div>

    Работает в IE6.0, Firefox, Chrome, Opera, Iron.

    Reply
  35. Дядя Вова says:
    March 25, 2010 at 22:55

    Спасибо. Как в Опере, так и в IE работает.

    Reply
  36. Ramir says:
    April 11, 2010 at 00:32

    Здравствуйте!
    Подскажите, будьте добры.
    есть список – 3-х уровневое меню

    <div id="page-listw">
<ul><li>Пункт 1
 <ul><li>Пункт 1-1
  <ul><li>Пункт 1-1-1
  </li></ul>
 </li></ul>
</li></ul>
</div>

    И такой код. 

    <script type="text/javascript">
$(document).ready(function() {
$('#page-listw').click(function() {
 if($(this).hasClass("noactive")) {
  $(this).removeClass("noactive");
 } else {
  $(this).addClass("noactive");
}
});
});
</script>

    При щелчке по пункту меню класс меняется у всех #page-list ul li, а нужно, чтобы менялся только у того, по которому щелкнули.

    Будьте добры, подскажите.

    Reply
    • Anton Shevchuk says:
      April 12, 2010 at 10:58 
      $('#page-listw li').click(function() {
    $(this).toggleClass('noactive');
});
      Reply
      • Ramir says:
        April 12, 2010 at 21:13

        Антон, класс меняется у всех li в блоке #page-listw.
        А нужно только у текущей. Как-то неправильно работает this

  37. Sergey says:
    April 12, 2010 at 14:59

    Добрый день, Антон.
    Подскажите, пожалуйста, как быть.
    Имеется таблица.

    <table>
<tr>
<td><input type="checkbox"></td>
<td>Text</td>
<td>Text</td>
</tr>
</table>

    Необходимо что бы при клике на строке чекбокс активировался/деактивировался. Как можно обратиться к чекбоксу текущей строки?

    Заранее благодарен.

    Reply
  38. Блоги, которые я читаю | Oduvan's Web Blog says:
    April 18, 2010 at 09:45

    [...] Блог Веб-разработчика – Антона Шевчука. Дизайн, программирование php, javascriupt и jquery. Кстате, о jquery у него есть отличная серия статей “jQuery для начинающих”, в четырех частях (1,2,3 и 4) [...]

    Reply
  39. Serg Pau says:
    June 4, 2010 at 12:32

    Неплохо бы в раздел “Бродим по иерархии” добавить “siblings” для полноты описания

    Reply
  40. Роман says:
    June 23, 2010 at 13:44

    Скажите пожалуйста, а как написать, чтобы ссылка стала неактивной, тоесть присвоить ее href значению # ?

    Reply
    • Anton Shevchuk says:
      June 23, 2010 at 15:04

      Немного странная реализации “неактивности”, лучше просто отменять событие дефолтное:

      $('a').click(function(){
    return false;
});

      Если же таки надо заменить:

      $('a').each(function(){
    $(this).attr('href', '#');
});
      Reply
  41. Роман says:
    June 27, 2010 at 18:50

    Спасибо за ответ, я просто не знал. Вообще то слабо ориентируюсь в джаваскрипте, вот и разбираюсь в джквери. А как кстати сделать активной потом? Так – 

    $('a').click(function(){
    return true;
});

    ??

    Reply
  42. Ксения says:
    August 29, 2010 at 09:20

    Подскажите плиз как из jquery обратиться к свойству background
    так работает

      $('.k a').each(function(){
    $(this).find("img").attr("src", "/images/photo.jpg");
  });

    так не работает

      $('.k a').each(function(){
    $(this).find("img").css("backgroundImage", "/images/photo.jpg");
  });
    Reply

Leave a Reply

Copyright © 2007-2010, Anton Shevchuk. Powered by WordPress