jquery 특효 모음집

// 
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
</script>
</head>

<body>
<p> ， </p>
</body>

// , P 
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
         $("p").hide();
    });
});
</script>


<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>

// ，class test 
$(document).ready(function()
{
  $("button").click(function()
  {
  $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>

</body>

// ，id=test 
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>

// id=test ， 

$(document).ready(function(){
  $("#test").click(function(){
  $(this).fadeOut();
  });
});
</script>
</head>

<body>
<div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div>
<p> ， 。</p>
</body>

// 

$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css"> 
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
 
<body>

<h3>Island Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Helen Bennett<br /> 
Garden House Crowther Way<br />
London</p>
</div>

<h3>Paris Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Marie Bertrand<br /> 
265, Boulevard Charonne<br />
Paris</p>
</div>

// 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School -   Web  </p>
<p>  W3School， 。</p>
</div>
 
<p class="flip"> </p>

// 
$(document).ready(function(){
  $("#start").click(function(){
  $("#box").animate({height:300},"slow");
  $("#box").animate({width:300},"slow");
  $("#box").animate({height:100},"slow");
  $("#box").animate({width:100},"slow");
  });
});
</script> 
</head>
 
<body>

<p><a href="#" id="start">Start Animation</a></p>

<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>

$("p").html("W3School"); // 
$("p").append(" <b>W3School</b>."); // 
$("p").after(" W3School.");  // 

$("p").css("background-color","red"); // css 
$("p").css({"background-color":"red","font-size":"200%"}); // css 
$("#result").html($(this).css("background-color"));// 
 $('#myDiv').load('/jquery/test1.txt'); //

htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);  // ajax

jquery 특효 모음집

좋은 웹페이지 즐겨찾기