Блог по программированию

Простые примеры jquery

Написано

admin

в

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
function callback()
{
alert(123);
} 
$(document).ready(
function()
    {
      $("#test").click(function(){$(this).hide();});
      $("#mydiv").click(function(){$("#test").hide();});
      $("#mydiv1").click(function(){$("#test").show();});
      $("#mydiv2").click(function(){$("#test").toggle(1000,callback);});
      
      $(".mydiv3").click(function(){$("#test").fadeOut();});
      $(".mydiv4").click(function(){$("#test").fadeIn();});
      $(".mydiv5").click(function(){$("#test").fadeToggle(1000);});
            
      $(".mydiv6").click(function(){$("#test").slideUp();});
      $(".mydiv7").click(function(){$("#test").slideDown();});
      $(".mydiv8").click(function(){$("#test").slideToggle(1000);});
      $(".mydiv9").click(function()
        {
        $("#test").animate({left: '250px'});
        $("#test").animate({top: '250px'});
        $("#test").animate({left: '0px'});
        $("#test").animate({top: '0px'});
        }
        );
      $(".mydiv10").click(function()
        {
        $("#test").slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100);
        
        }
        );
      $(".mydiv11").click(function()
        {
        $("#test").animate({color: '#ff0000'});
        
        }
        );
      
      $(".mydiv12").click(function()
        {
        $(".mydiv12").html("Текст изменен");
        $("input").val("Значение изменено");
        alert($("input").val());
        }
        );

    }
  
);
</script>
</head>
<body>
<h1>Продемонстрировать show эффект</h1>
<button id='mydiv'>Скрыть все</button>
<button id='mydiv1'>Показать</button>
<button id='mydiv2'>Переключить</button>
<hr>
<h1>Продемонстрировать fade эффект</h1>
<button class='mydiv3'>Затуманить все</button>
<button class='mydiv4'>Показать</button>
<button class='mydiv5'>Переключить</button>
<hr>
<h1>Продемонстрировать slide эффект</h1>
<button class='mydiv6'>Свернуть все</button>
<button class='mydiv7'>Показать</button>
<button class='mydiv8'>Переключить</button>
<hr>
<h1>Продемонстрировать animate эффект</h1>
<button class='mydiv9'>Анимация</button>
<hr>
<h1>Продемонстрировать chaining эффект</h1>
<button class='mydiv10'>Цепная реакция</button>
<hr>
<h1>Продемонстрировать анимацию цвета</h1>
<button class='mydiv11'>Анимируем цвет</button>
<hr>
<h1>Изменить HTML</h1>
<button class='mydiv12'>Изменить</button>

<div  id='test' style='background:gray;position:relative;width:500px;'>
<p>Щелкни по мне и я исчезну</p>
<p>Кликни и я пропаду тоже!</p>
<p>И по мне!</p>
<input>

</div>
</body>
</html>

 

Больше записей