Ильдар Сарибжанов | 03.07.2012

Полезные куски кода для JavaScript

Поскольку моя основная «специализация» все же верстальщик, то я в основном имею дело с html и javasript. Как было кем-то сказано: «На javascript сначала начинают писать, и только потом начинают его изучать». С этим нельзя не согласиться, по крайней мере на своем примере я это проверил.

Я достаточно ленив и не люблю сложные решения. Поэтому во всех наших проектах используется jquery, да и в стандартном комплекте wordpress, который используется в наших проектах этот фрэймворк идет в комплекте, поэтому я вообще не беспокоюсь о лишних килобайтах.

В прошлый раз я выкладывал коды для WP, теперьм Мне хочется поделиться некоторыми полезными кусочками кода, которые я периодически использую при написании скриптов. И так поехали:

1. Обращение к элементу по его порядковому номеру, отсчет начинается с единицы, нумерация идет слева-направо, сверху- вниз:

$('.carusel_itm:nth-child(' +number_itm + ')').css('opacity','1');

2. Вырезать цифры из строки «stroka»:

$('.carusel_itm:nth-child(' +number_itm + ')').css('opacity','1');

Ну вроде бы тут все понятно, особенно для тех, кто шарит в регулярных выраениях.

3. Получение элемента в наборе, нумерация начинается с нулевого, поэтому добавляем единицу

var index = $(this).index()+1;

4. Поиск подстроки в строке:

str.indexOf('подстрока') + 1

Я использую данное выражение для проверки наличия подстроки в строке. Поясню немного зачем добавляю единицу. Данное выражение по идее предназначено для поиска первого вхождения подстроки в строку, поэтому оно возвращает не булево значение, а номер символа с которого начинается искомая подстрока. Самое интересное, что нумерация символов начинается с нуля, что вполне логично, но не в этом соль, а прикол в том если строка не найдена возвращается -1. В javasript, значение 0 = false, а любое отличное от нуля это true, отсюда и родилась +1. Во-первых подстока может быть в начале и тогда сама функция вернет 0, и.. Ну в общем, все понятно))

Едем далее.

5. Подсчет количества элементов по классу

$('.class').size();

Этот код я достаточно часто использую в галереях, когда необходимо просчитать ширину контейнера, в котором лежат все слайды. Конечно, в большинстве реализация, которые я видел тупо задают ширину 10000em и не парятся, но мне это кажется не особо эстетичным.

6. Проход по всем элементам набора:

$('.class').each(function (i) {
});

Если нужно у что-то сделать не со всеми элементами набора, а лишь с несколькими, выборочно, то я пользуюсь именно этим набором.

7. Данный код выведет текущий url страницы. Можно запихать в переменную и обрабатывать.

alert(document.location.href);

8. Достать первый из дочерних элементов и дальше можно делать все что душе угодно:

$(this).children(':first').any_method()

На этом я хочу пока закончить. Переодически буду добавлять еще что-нибудь, память у меня с прошлого раза лучше не стала)) Поэтому пусть здесь все это лежит. Может и еще кому пригодится. В комментах можете добавлять свои часто используемые коды.