Библиотека JS » Web Мастерская

Блог

Web Мастерская

jQuery: проверка наличие элемента в массиве

Для проверки элемента в массиве в библиотеку jQuery добавлена функция jQuery.inArray():

if (jQuery.inArray('js', ['js', 'jQuery']) > -1) {
    // Элемент существует в массиве
};

Вместо: jQuery.inArray можно писать: $.inArray....

Жалоба

Как удалить класс у элемента на чистом JS и jQuery

JavaScript Библиотека JS

Чтобы удалить один из классов элемента на чистом JS, делаем так:

document.getElementById('elName').classList.remove('className');

Если необходимо удалить сразу все классы, то так (Атрибут class останется пустым):

document.getElementById('elName').className = '';

Либо так (Удалит полностью атрибут class, со всеми его значениями):

document.getElementById('elName').removeAttribute('class');

Если требуется удалить один из классов на jQuery, делаем так:

$("#elName").removeClass('className');

При необходимости удалить все классы разом (Атрибут class останется пустым):

$("#elName").removeClass();

Если есть необходимость полностью удаление атрибут class, со всем его содержимым:

$("#elName").removeAttr('class');

elName - Название элемента, где необходимо удалить класс.
className - Название класса, который необходимо удалить.

...

Жалоба

Какие задачи необходимо уметь выполнять на JavaScript начинающему

JavaScript Библиотека JS Мнение

Разумеется, что все мы когда-то ни чего не знали и не умели. Приходит время познавать что-то новое, изучать и учиться какому-либо ремеслу. Сайтостроение - это тоже ремесло, в которое входит много деталей, таких, как дизайн, навигация, функционал и тд. За дизайн отвечают теги и CSS, за навигацию может отвечать программная часть движка, может и чистый HTML, за функционал могут отвечать многие мелочи сайта, а также вся программная часть сайта, как на сервере, так и на загруженной странице в браузере. И если Вы начинающий ВебМастер, и на данный момент Вас интересует JavaScript, то Вы по адресу! Сегодня мы поговорим о том, с какими задачами необходимо уметь справляться начинающему изучение языка JavaScript.

На первое место я бы поставил, что должен знать и уметь новичок, это Область видимости переменных. Чтобы не заблудиться в трех соснах, почему переменная определена, но методы ее не могут распознать. А все очень просто, переменная вне зоны видимости. Чтобы не наступать на такие грабли,...

Жалоба

1 комментарий

Индикатор выполнения AJAX запроса (jQuery)

Библиотека JS

Как говорится "Краткость - сестра таланта", я конечно не брат краткости и вообще, ее родственником не являюсь, но буду краток! Сразу к делу.

Допустим, у нас есть код обработки формы (форма #form), в которую вводим, какие то данные, жмем кнопку и через ajax выводим результат на экран (блок #display):

    $.ajax({ 
        url: 'ajax.php',
        type: 'POST',
        data: $('#form').serialize(),  
        success: function(data) {
            $('#display').html(data);        
        }
    });

Стоит задача - имитировать процесс выполнения обработки данных. В качестве индикатора можно использовать картинку анимацию (формат .gif). Анимированная картинка должна появится сразу после нажатия кнопки и исчезнуть перед тем, как будет выведен результат.

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

.processing {
    width: 25px;
    height: 10px;
    background: url("loading.gif");
}

Теперь в ajax запрос добавляем две функции: addClass() и remove...

Жалоба

Анимированное появление и исчезновение 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>

Это кнопка, с идентификатором button, после...

Жалоба