Место для вас

Основы jQuery: стили, события и анимация

Библиотека jQuery помогает облегчить и так не легкий путь фронт-енд разработчика. Она обладает огромным функционалом, который заложен в ней изначально. Владея лишь основами, можно творить поистине классные вещи не прибегая к хардкодингу. Добавить на сайт интерактивности теперь не составит никакого труда. Это может сделать любой. jQuery очень интуитивно понятный.

Стили


$('#someTag').css('border', '3px solid red');// добавление css стиля
$('#someTag').css({'background-color': '#0F0', 'border': '3px solid red'});  // задает несколько css стилей
alert(elem.css('border'));// выводит все css стили элемента

// перебор каждого элемента #someTag
$('#someTag').each(function()
{
   alert(this.innerHTML);
});

$('#someTag').addClass('class1');// добавление класса class1
if($('#someTag').hasClass('class1')) alert("Has class!");// проверка если у элемента есть класс class1
$('#someTag').removeClass('class1'); // удаление класса class1
$('#someTag').toggleClass('class1'); // создает класс class1 если его нет, и удаляет если есть

$('#someTag').attr('class');                        // вывод атрибута class у элемента
$('#someTag').attr('class', 'class1');              // добавление атрибута class со значением class1
$('#someTag').removeAttr('class');                  // удаление атрибута class

$('#someTag').html("Новый текст");           // создает содержимое
alert($('#someTag').html());                 // выводит содержимое
alert($('input').val());                     // выводит значение input

$('#someTag').after("<div style='border:3px solid green'>НОВЫЙ ТЕКСТ!</div>");    // после элемента #someTag добавить код
$('#someTag').before("<div>НОВЫЙ ТЕКСТ!</div>");                                  // перед элементом #someTag добавить код
$('#someTag').append("<div style='border:3px solid green'>НОВЫЙ ТЕКСТ!</div>");   // добавить код в конец #someTag
$('#someTag').prepend("<div>НОВЫЙ ТЕКСТ!</div>");                                 // добавить код в начало #someTag
$('#someTag').empty();                                                            // очистить содержимое
$('#someTag').html("");                                                           // очистить содержимое
$('#someTag').remove();                                                           // удалить элемент
$('#someTag').wrap("<div style='border: 3px solid green'>");                      // добавить родителя к элементу #someTag

События


$(document).ready(function(){

change — измение значения элемента (значение, при потери фокуса, элемента отличается от изначального, при получении фокуса)
click — клик по элементу (порядок событий — mousedown, mouseup, click)
dblclick — двойной клик по элементу
resize — изменение размеров элементов
scroll – скроллинг элемента
select — выбор текста (актуален только для input[type=text] и textarea)
submit — отправка формы
focus — фокус на элементе – актуально для input[type=text], но в современных браузерах работает и с другими элементами
blur — фокус ушел с элемента – актуально для input[type=text] — срабатывает при клике по другому элементу на странице или по событию клавиатуры (к примеру переключение по tab’у)
focusin — фокус на элементе, данное событие срабатывает на предке элемента, для которого произошло событие focus
focusout — фокус ушел с элемента, данное событие срабатывает на предке элемента, для которого произошло событие blur
keydown — нажатие клавиши на клавиатуре
keypress — нажатие клавиши на клавиатуре (порядок событий — keydown, keypress, keyup)
keyup — отжатие клавиши на клавиатуре
load — загрузка элемента (img)
unload — выгрузка элемента (window)
mousedown — нажатие клавиши мыши
mouseup — отжатие клавиши мыши
mousemove — движение курсора
mouseenter — наведение курсора на элемент, не срабатывает при переходе фокуса на дочерние элементы
mouseleave — вывод курсора из элемента, не срабатывает при переходе фокуса на дочерние элементы
mouseover — наведение курсора на элемент
mouseout — вывод курсора из элемента

$("#button").click(function(elem)
{
    $("form select option:selected").each(function(ind, elem)
    {
        //alert(this.innerHTML);
        //alert($(this).text() + " " + ind /*+ " " + $(oelem).text() /*+ oelem.innerHTML*/);
        //alert($(this).css("width"));
    });
});

// при изменении состояния значения поля типа text выведет это значение
$(":text").change(function(event){
    alert($(this).val());
});

// при при скроллинге в select будет выходить сообщение
$("select").scroll(function(event){
   alert("scroll!");
});

$("*").mouseenter(function(event)
{
   $("*").live('mouseenter', function(event)
   {
      if($(this).css('border') != '1px solid red')
      $(this).css('border', '1px solid red');
      else
      $(this).css('border', '');
   });

   $("#buttonAppend").click(function(elem)
   {
       $("body").append("<div>New div!</div>");
   });

});

Анимация


$(document).ready(function(){

show() – отображает выбранные элементы
hide() – скрывает выбранные элементы
toggle() – переключатель между show/hide
slideDown(speed, callback) – выдвигает объект(ы) вниз – увеличивает высоту от 0 до 100%
slideUp(speed, callback) – задвигает объект(ы) вверх – уменьшает высоту от 100% до 0
slideToggle( speed, callback) – переключатель между slideDown/slideUp
fadeIn(speed, callback) – отображает выбранные элементы – изменяет прозрачность элементов
fadeOut(speed, callback) – скрывает выбранные элементы – изменяет прозрачность элементов
fadeTo(speed, opacity, callback)- изменяет прозрачность элементов до указанного значения

//animate( properties, [ duration ], [ easing ], [ callback ] )
$("#buttonAppend").click(function(){
   //$("li").hide();
   //$("li").toggle();
   //$("li").animate({opacity: 0.5, height: '+=50'}, 3000);
   //$("li").animate({opacity: 0.5}, 1000).animate({height: '+=50'}, 1000);
});

$("#buttonSlideDown").click(function(elem){
   $("select").slideDown(5000);
   $("li").fadeIn(5000);
});

});

Место для вас

Добавить коментарий

кликните на картинку,
чтоб обновить код

Что за сайт

Этот сайт представляет унифицированную базу, где инфа собрана в единое целое, а не разбросанна по многочисленным сайтам, записям на листах бумаги или головам людей; а так же доступна круглосуточно не зависимо от кого-либо или чего-либо.

Будь в курсе

Интересненько

Вверх