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

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

Материалы данной статьи включены в учебник «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'ы
[/code]
 
Так же есть фильтры по атрибутам:
[code lang="javascript"]
$("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 в списке значений разделенных пробелом

В результате его работы будут выбраны следующие теги:

<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”:

// 1. удалить все элементы списка mySelect
$('select[@name=mySelect] option').remove();
// 2. добавить в список новый элемент
$('select[@name=mySelect]').append('<option>Новый элемент списка</option>');
// 3. сделать выделенным первый пунки списка
$('select[@name=loadFileName] option:first').attr('selected', 'yes');
// 4. принудительно снять выделение с элемента списка
$('select[@name=loadFileName] option:first').removeAttr('selected');
// 5. получить значение выделенного пункта из списка
    // если вы используете атрибут <option value="some value">:
var file = $('select[@name=loadFileName] option:selected').val();
    // если вас интересует то, что заключено между <option>...</option>:
var file = $('select[@name=loadFileName] option:selected').text();
// 6. проверить, выбран ли какой-нибудь элемент списка
if( typeof $('select[@name=loadFileName] option:selected').text() === 'undefined' ){
       alert('Ни один элемент списка не выбран');
}
// 7. превратить список в "автомасштабируемый"
$('select[@name=loadFileName]').attr('size', $('select[@name=loadFileName] option').size());
// 8. сделать недоступны для выбора отдельный элемент
$('select[@name=loadFileName] option:contains('текст нужного элемента')').attr('disabled', 'disabled');
    // разрешить выделение всех ранее недоступных элементов можно так:
$('select[@name=loadFileName] option:disabled').removeAttr('disabled');

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

Слайды

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

jQuery: Select by Class or Id — Select by Class or Id

jQuery: Basic filters 2 — Basic filters 2

jQuery: Attribute filters — Attribute filters

jQuery: HTML and TXT methods — HTML and TXT methods

jQuery: Manipulation - prepend and append — Manipulation – prepend and append

jQuery: Manipulation - insert — Manipulation – insert

jQuery: Manipulation - wrap — Manipulation – wrap

jQuery: Manipulation - empty and remove — Manipulation – empty and remove

jQuery: Manipulation - replace — Manipulation – replace

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

Цикл статей

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

Pingback: jQuery для начинающих. Часть 3. AJAX
EvilFaeton says:

2009-01-28 at 08:40

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

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

Reply
Anton Shevchuk says:

2009-01-28 at 08:47

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

Reply
EvilFaeton says:

2009-01-28 at 08:49

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

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

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

Reply
omfg says:

2009-01-28 at 09:19

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

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

Reply
Octane says:

2009-01-28 at 14:57

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

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

1
2
3
4
5
rel="external" — да
rel="nofollow external" — да
rel="external nofollow" — да
rel="friend external follow" — да
rel="external-link" — нет

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

1
2
3
hreflang="en-us" — да
hreflang="en-en" — да
hreflang="us-en" — нет

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

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

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

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

1
$("#sidebar, .post")

Reply
1. Anton Shevchuk says:
  
  2009-01-28 at 16:06
  
  Спасибо – добавлю Ваши примеры…
  
  Reply
Guzel says:

2009-01-28 at 15:55

1
$("form :radio[name=some]:selected").val();// получение выбранного значения радиобатона с именем some

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

Reply
Денис says:

2009-01-29 at 05:52

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

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

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

Reply
1. Anton Shevchuk says:
  
  2009-01-30 at 11:44
  
  Таки да, исправил – спасибо…
  
  Reply
Sergio says:

2009-01-29 at 19:51

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

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

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

Reply
1. Anton Shevchuk says:
  
  2009-01-30 at 11:44
  
  Насчет получения размера изображение – $(‘img’).attr(“width”) …
  
  Слайды создавались с помощью фотошопа – минута на слайд – не так уж и много :) Слайдшоу сделано с помощью плагина (a) Slideshow
  
  Reply
  1. Sergio says:
    
    2009-01-31 at 19:20
    
    Для будущих посетителей допишу:
    
    Вот это где оказывается Обращение к атрибутам тэга
    
    Дополняю.
    
    Там можно обращаться к любым стандартным атрибутам тэгов.
yAnTar says:

2009-01-30 at 10:35

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

Reply
Sergio says:

2009-01-31 at 22:36

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

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

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

Reply
1. yAnTar says:
  
  2009-02-02 at 10:36
  
  Якщо в рисунка не заданий атрибут width – то jQuery нічого не поверне, бо вона не тягне ширину зображення з сервера, а тягне з атрибутів (а атрибут src завжди потрібно задавати, на відміну від ширини).
  
  Reply
Pingback: Linkdump #4 | CTAPbIu_MABP's BLOG
Pingback: jQuery для начинающих
Sergio says:

2009-02-02 at 21:22

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

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

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

1
$("#enlargedimage").css({width: cc, height: dd, opacity: "1.0"}); /* показать картинку на экране монитора в натуральную величину */

Reply
Sergio says:

2009-02-02 at 21:32

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

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

Reply
Anton Shevchuk says:

2009-02-03 at 12:18

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

Reply
Алик Кириллович says:

2009-02-05 at 22:23

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

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

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

Reply
KruGoZor says:

2009-02-26 at 14:38

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

Reply
Alexpts says:

2009-02-28 at 13:00

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

Reply
Pingback: jQuery для начинающих. Часть 2. JavaScript Меню.

Антон, ты наверняка работал с 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 
 $(&quot;a[rel]&quot;).overlay(function() { 
  
 // grab wrapper element inside content 
 var wrap = this.getContent().find(&quot;div.wrap&quot;); 
  
 // load only for the first time it is opened 
 if (wrap.is(&quot;:empty&quot;)) { 
 wrap.load(this.getTrigger().attr(&quot;href&quot;)); 
 } 
 }); 
});

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

$(function() {
 
    $(&quot;a[rel]&quot;).overlay({ 
  
        // custom expose settings 
        expose: { 
            color: '#BAD0DB', 
            opacity: 0.7 
        } 
    });
});   

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

Anton Shevchuk says:

2009-07-23 at 23:33

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

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

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

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

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

Reply

Здравствуйте, может не в ту тему пишу, но очень надеюсь на вашу помощь!
У меня такая проблемка, мне нужно узнать загружен ли 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 данные после сабмита или нет. Суть всего этого следующая, что если хоть одна из записей после сабмита вернула ошибку то я делаю один код, если нет, то другой …..

Anton Shevchuk says:

2009-10-08 at 09:14

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

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

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

Reply

Dmitry says:

2009-10-07 at 21:38

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

1
2
3
4
5
<div class="wrap">
  <div id="test">
   <img ..../>
  </div>
</div>

так верно?

1
2
3
...
this.getContent().find("div.wrap #test img[title]")
...

Reply
Eldar says:

2009-10-25 at 16:03

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

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

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

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

Reply

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

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

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

Anton Shevchuk says:

2010-01-01 at 18:25

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

1
2
3
$("#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
direqtor says:

2010-01-02 at 03:39

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

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

Reply

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

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

$(document).ready(function()
{
  $('#timeval').text = '';
 
   var refreshId = setInterval(function()
   {
        $('#timeval').load('/ajax/refresh/'+ Math.random());
 
   }, 4000);
 
});

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

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

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

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

Sergey says:

2010-01-04 at 20:22

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

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

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

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

Reply

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

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

Проблема: не все браузеры показывают реальные размеры изображения. 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).

Anton Shevchuk says:

2010-03-04 at 17:22

А вариант из следующей заметки вам не подходит? http://anton.shevchuk.name/javascript/ger-real-image-size-with-jquery/

Reply

Дядя Вова says:

2010-03-25 at 05:28

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

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

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

Reply
htorrent says:

2010-03-25 at 12:36

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

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

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

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

Reply
Дядя Вова says:

2010-03-25 at 18:20

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

Reply

Тэг [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.

Дядя Вова says:

2010-03-25 at 22:55

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

Reply

Здравствуйте!
Подскажите, будьте добры.
есть список – 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, а нужно, чтобы менялся только у того, по которому щелкнули.

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

Anton Shevchuk says:

2010-04-12 at 10:58

1
2
3
$('#page-listw li').click(function() {
$(this).toggleClass('noactive');
});

Reply
1. Ramir says:
  
  2010-04-12 at 21:13
  
  Антон, класс меняется у всех li в блоке #page-listw.
  А нужно только у текущей. Как-то неправильно работает this

Sergey says:

2010-04-12 at 14:59

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

1
2
3
4
5
6
7
<table>
<tr>
<td><input type="checkbox"></td>
<td>Text</td>
<td>Text</td>
</tr>
</table>

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

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

Reply
Pingback: Блоги, которые я читаю | Oduvan's Web Blog
Serg Pau says:

2010-06-04 at 12:32

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

Reply
Роман says:

2010-06-23 at 13:44

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

Reply
1. Anton Shevchuk says:
  
  2010-06-23 at 15:04
  
  Немного странная реализации “неактивности”, лучше просто отменять событие дефолтное:
  
  1
  2
  3
  $('a').click(function(){
  return false;
  });
  
  Если же таки надо заменить:
  
  1
  2
  3
  $('a').each(function(){
  $(this).attr('href', '#');
  });
  
  Reply
Роман says:

2010-06-27 at 18:50

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

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

??

Reply
Ксения says:

2010-08-29 at 09:20

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

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

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

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

Reply
Антон-н says:

2010-10-06 at 08:03

Статья хорошая, спасибо =)
Ксения, если не ошибаюсь, css свойство – фоновая картинка – правильно

записывается так:

1
background-image

поэтому:

1
2
3
$('.k a').each(function(){
$(this).find("img").css("background-image", "/images/photo.jpg");
});

(не проверял, но должно работать)
В отличие от стандартных функций Js названия свойств css в Jquery полностью

идентичны названиям в самом css, в том его и прелесть.

P.S.: по поводу “тэг [h2] сразу после [tr] – это конечно же нехорошо …” – это

не нехорошо, а недопустимо, поскольку для своей работы Jquery строит объектную

модель страницы, и если не соблюден правильный порядок вложенности тегов,

хорошего от скрипта не ждите. Здесь недопустимы даже (вроде бы безобидные)

перекрещения вида

1
<b><i> нечто очень важное </b></i>

, только так:

1
<b><i> нечто очень важное </i></b>

или так

1
<i><b> нечто очень важное </b></i>

Reply
Славянский город says:

2010-11-23 at 09:58

Стоит отметить, что методы брожения по ДОМу можно комбинировать, например так:

1
2
var mytable = $('#selector').parent('div').next('table');
mytable.fadeOut().fadeIn();

Это задействует таблицу, следующую за слоем-родителем элемента #selector.

Reply

после выполнения скрипта

<script type="text/javascript">
function ajaxFileUpload()
{
    $("#avatar")
    .ajaxComplete(function(){
         
         
    });
 
    $.ajaxFileUpload
    (
        {
            url:'upload_avatar.php',
            secureuri:false,
            fileElementId:'fileToUpload',
            dataType: 'json',
             
        }
    )
     
    return false;
 
}
</script>

у элемента avatar

<div id="avatar"><img  width="240" src="./foto.jpg" id="preview_photo" /></div>

меняеться картинка, точнее ее src, как мне обновить только картинку , какую функцию нужно в писать в ajaxComplete ??

Windexx says:

2011-01-03 at 06:42

Спасибо за вменяемую информацию :)

Reply
Pingback: Jquery select: примеры, получение option и многое другое « Клуб правильных веб-разработчиков
Pingback: Селекторы jQuery

Здравствуйте. Антон, если не сложно то помогите. Стоит JQuery 1.6.2.
Мне нужно выбрать текст PDF, то есть “Спецификация на мотоцикл “.

<ul id="my_links">
<li><a href="http://www.yamaha-motor.ru" target="_blank" id="superlink">Yamaha Motors Russia</a></li>
<li><a href="documents/yamaha_fz6.PDF">Спецификация на мотоцикл Yamaha FZ6</a></li>
</ul>

Пишу выборку сылки с окончанием пдф.

$(document).ready (function(){
     
var myLink = $('a [href$=".PDF"]');
myLink.hide().text('Ololo').show(2000);
 
    });

Ничего не происходит. Текст не меняется. В чем проблема? Спасибо.

Олег, вот это точно работает:

<body>
<script type="text/javascript" src="libs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
    $(document).ready (function(){
        var myLink = $('a[href$=".PDF"]');
        myLink.css({"color":"#b00"});
        myLink.hide().text('Ololo').show(2000);
    });
</script>
</head>
 
 
<body>
<ul id="my_links">
  <li><a href='http://www.site01.ua' rel='nofollow' target='_blank' id='superlink'>Megasite#01</a>
  </li>
  <li><a href="documents/file01.PDF">Megafile#01</a>
  </li>
</ul
</body></html>

H.T. says:

2011-08-06 at 08:51

Ой, сорри, немного с тегами BODY и HEAD накосячил. Но думаю разберетесь в моей маленькой ошибке.

Reply

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

Фильтры

Слайды

Цикл статей

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

Leave a Reply Cancel reply