DANFA
Поиск блогов...

Анимированное появление и исчезновение HTML элементов на JavaScript | jQuery

Библиотека JS
Для появлении и исчезновении элементов, будем использовать библиотеку jQuery (Как подключить библиотеку jQuery).

И без лишних слов, сразу к делу. Я написал вот такой код:
Выделить
<button id="button">Показать</button>
<div style="display: none;">Скрытый текст</div>
<script>
$('#button').click(function() {
    $('div').show(1000);

    setTimeout(function() {
        $('div').hide(1000);
    }, 2000);
}); 
</script>

Данный код, после нажатия кнопки "Показать" разворачивает в течении одной секунды строчку "Скрытый текст", и ровно через две секунды (с момента нажатия кнопки) сворачивает текст обратно. Сворачивается строчка, так же одну секунду. Из-за того, что на появление и исчезновение заданно время, появление текста стало анимированным.

Постараюсь подробно объяснить, что происходит в нашем примере, так сказать, разберу код по отдельности. Первые две строчки:
Выделить
<button id="button">Показать</button>
<div style="display: none;">Скрытый текст</div>

Это кнопка, с...

Как установить задержку выполнения функции на JS

Недавно задавали вопрос, как придержать выполнение функции на определенное время, используя JavaScript, как это сделать, расскажу в этой теме. Для этого будем использовать функцию setTimeout, данная функция однократно выполняет помещенный в нее код по истечению заданного времени (в миллисекундах). Пример работы:
Выделить
setTimeout(function() {
    alert('Привет Мир!');
}, 2000);

Код из примера выведет сообщение "Привет Мир!" по истечении двух секунд (2000). Кстати, это же код можно написать так:
Выделить
function hi() {
    alert('Привет Мир!');
};

setTimeout(hi, 2000);

Или так:
Выделить
function hi() {
    setTimeout(function() {
        alert('Привет Мир!');
    }, 2000);
};

hi();

Как я уже сказал функция setTimeout выполнит код один раз после загрузки страницы или, какого то условия, в зависимости от поставленной задачи. Если необходимо выполнять код постоянно, через определенное время, то для решения этого вопроса подходит функция setInterval, эта функция выполняет код...

Удалить пробелы в начале и в конце строки на jQuery

JavaScript Библиотека JS
Порой появляется необходимость удалить пробелы в начале и в конце строки, например, когда надо проверить поле формы на пустоту. Удаляются пробелы при помощи функции trim, предназначение этой функции, как раз для удаления пустого место с начала и конца строки. Делается это так:
Выделить
row = $.trim(row);

Чтобы убедиться, что функция действительно работает, могу предложить попробовать выполнить код ниже:
Выделить
var row = ' Библиотека jQuery      ';
alert('\'' + row + '\'');
row = $.trim(row);
alert('\'' + row + '\'');

Тут мы создаем переменную с пробелами в начале и в конце фразы "Библиотека jQuery". Функция alert, строчкой ниже, выведет окошко с сообщением:
' Библиотека jQuery '

Видно, что между фразой и кавычками имеются пробелы.
Дальше по коду, функция trim удаляет пробелы и отдает новое значение той же переменной.
Кстати писать функцию необходимо со знаком доллара, либо со словом jQuery (так: $.trim или так: jQuery.trim), в противном случаи, функция работать не будет и...

Массивы (JavaScript: Array)

JavaScript
Массив - это одна из разновидность объекта, чье предназначение - хранить различные значения.

Пустой массив:
Выделить
var a = [];

Или:
Выделить
var a = new Array();

Массив с четырьмя значениями:
Выделить
var family = [
    'Алексей',
    'Виктория',
    'Юлия',
    'Никита'
];

Или:
Выделить
var family = new Array(
    'Алексей',
    'Виктория',
    'Юлия',
    'Никита'
);

"Вытащить" значение из массива можно так family[0] (первое значение (Алексей)), family[1] (второе значение (Виктория)) и так далее.
Пример:
Выделить
var family = [
    'Алексей',
    'Виктория',
    'Юлия',
    'Никита'
];
alert(family[1]);

На экране появится окошко с именем "Виктория"....

Событие при потере фокуса: (JavaScript: onBlur)

JavaScript
Событие при потере фокуса onBlur используется, например, для проверки введенных данных в форму.
Выделить
function job() {
    // Код функции выполняемый при потере фокуса
};

Вызов функции job:
Выделить
<input type="text" id="input" onBlur="job();">

Для примера поставлю задачу - получить строку введенную в input, удалив пробелы в начале и в конце, посчитать количество введенных символов, если символов менее трех, то вывести сообщение об нехватки символов в строке. Если символов три или более ни чего не выводить.
Решение:
Выделить
function job() {
    var text = document.getElementById('input').value;
    text = text.replace(/(^\s*)|(\s*)$/g, '');
    if (text.length < 3) {
        alert('Символов должно быть не менее трех.');
    };
};

Как только фокус будет потерян в input, функция начнет выполнятся....