Как лучше учить jQuery?

[tini.kRyptoNite]

Выборку научился делать и некоторые методы знаю. Подскажите пожалуйста как и по чем можно учить jQuery. Может есть где сборник туториалов хороший? Или брать самому и пробовать что-то сделать?

[Great Rash]

Брать самому и пробовать что-то сделать. Галерею изображений для начала.

[tini.kRyptoNite]

Так тогда если можно что бы не создавать тему, буду тут свои вопросы оставлять по мере изучения jQuery. Извините если они уж слишком тупые, но разобраться не могу. Вот первый:

<ul>
 <li>
  <a href="#">
   <img src="images/some.jpg" width="65" height="36" alt="some" />
  </a>	
  <div class="pop-upBlock">
   <h3>Som text</h3>
  </div>
 </li>
</ul>

Вот есть такая структура, таких же li может быть несколько. Только с другой картинкой и текстом, но не в этом суть. Так вот блок с классом pop-upBlock скрыт пока. Нужно что бы при наведении он показывался, но проблема в том что если прописать так:

$('ul li a img').hover(function (){
		$('ul li .pop-upBlock').css('left', 0);
	}, function() {
		$('ul li .pop-upBlock').css('left', '-9999px');
});

То при наведении на любой из img будут всплывать все pop-upBlock, а мне нужно только с pop-upBlock с того пункта списка на картинку которого наводим. Есть такая вещь this, но что-то не могу понять как дополнить до нее нужную часть или если нельзя селектор this как то дополнять то другой вариант. Подскажите пожалуйста.

[lexxcode]

Когда вы делаете так $('ul li .pop-upBlock') , тем самым выполняете выборку ВСЕХ .pop-upBlock которые находятся на странице в контексте ul li.

Для выбора в вашем случае только .pop-upBlock текущего контекста, вам нужно ограничить область выборки, например с помощью $(this)

$('ul li a img').hover(function (){
        $(this).closest('li').find('.pop-upBlock').css('left', 0);
    }, function() {
        $(this).closest('li').find('.pop-upBlock').css('left', '-9999px');
});

$(this).closest('li') // обращается к ближайшему родителю селектор которого соответствует переданному в качестве аргумента методу closest, далее уже относительно текущего li ведется поиск с помощью метода find элемента .pop-upBlock и уже конкретно к нему применяются свойства css()

[tini.kRyptoNite]

Спасибо вам большое, теперь понял. Получилось. Единственное что только там нужно использовать parents вместо closet. Оказывается closet начинает поиск с текущего элемента, а parents с родителя.

[lexxcode]

Вот и не правильно. Как раз closest в данной ситуации нужен. Потому что parents вернет набор ВСЕХ совпавших родителей, то есть если вложенность типа ul>li>ul>li>a , то $('a').parents('li') вернет массив из всех совпавших родительских li, то есть два элемента! А $('a').closest('li') вернет только ближайшего родителя из контекста, то есть один li, этот ul>li>ul>li.

В вашем примере набор из всех родителей вам ни к чему, ибо это приведет к большему поиску, а так же может привести к ошибкам в зависимости от структуры.

UPD:

Зачем мне ваш архив?

[tini.kRyptoNite]

Ну там же всё видно что при .closet не работает, а при .parents работает причем не все блоки показывает, а всё как нужно.

[lexxcode]

Так не closet, а closest. внимательней И все там работает.

closet вообще нету такого метода в jquery

[tini.kRyptoNite]

Тьфу блин, извините. Да, всё работает с closest.

Edited June 29, 2012 by tini.kRyptoNite

[tini.kRyptoNite]

Следующий вопрос. Я сделал так что бы этот всплыв блок появлялся немного перекрывая ту картинку на которую нужно навестить что бы этот блок появился, и если поставить мышку в место где этот всплыв блок перекрывает картинку то блок начинает мигать(исчезать и появляться). Может кто подсказать как это устранить?

[lexxcode]

Ловить mouseenter на этом блоке и не давать ему исчезать, а на mouseleave отпускать его

[buddah]

Почему я все время вижу название этой темы как Под чем учить jQuery?

[psywalker]

Почему я все время вижу название этой темы как Под чем учить jQuery?

Исправил))

[tini.kRyptoNite]

Вот еще такой вопрос. Есть такой код

$('#tabsWrapp .tabNav li a').click(function() {
		tabsContainers.hide();
		tabsContainers.filter(this.hash).show();
		$('#tabsWrapp .tabNav li a').removeClass('selected');
		$(this).addClass('selected');
		return false;
	}).filter(':first').click();

В принципе всё понятно, но что в конце означает .filter(':first').click();?

Edited July 7, 2012 by tini.kRyptoNite

[lexxcode]

filter()

Отбрасывает все элементы, которые не соответствуют указанному выражению в аргументе, из набора совпавших элементов.

:first - это селектор указывающий на первый элемент в наборе.

Тем самым filter(':first') отбрасывает все кроме первых элементов в наборах.

Следующий за ним .click() искусственно вызывает событие клика по оставшемся элементам после фильтрации.

[tini.kRyptoNite]

filter()

Отбрасывает все элементы, которые не соответствуют указанному выражению в аргументе, из набора совпавших элементов.

:first - это селектор указывающий на первый элемент в наборе.

Тем самым filter(':first') отбрасывает все кроме первых элементов в наборах.

Следующий за ним .click() искусственно вызывает событие клика по оставшемся элементам после фильтрации.

Спасибо вам огромное. Чутка не правильно спросил, filter(':first') это знал, а вот это не понимал .click(). Теперь всё понятно.

[tini.kRyptoNite]

Сделал я слайдер. Но он получился статический, как его заставить меняться в цикле?

Вот исходный код слайдера:

	$('#small li a').click(function(event) {
		if ( $(this).attr('href') != $('#big img').attr('src') ) {
			$('#big img').hide().attr('src', $(this).attr('href'));	
			$('#big img').load(function() {
				$(this).fadeIn(1000);
			});
			$('#small li').removeClass('current');
		}
		$(this).closest('li').addClass('current');
		event.preventDefault();
	});