adminschool.net wiki

이벤트사용 예

show() & hide()함수 사용 예

http://wldyd83.adminschool.net/jquery/hideshow.html
결과 : 클릭시 나타나고 클릭시 사라진다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	.whenAHover
	{
		color:Red;
		background-color:Orange;
	}
	</style>
	<script type="text/ecmascript" src=jquery-1.6.2.min.js></script>
	<script type="text/ecmascript">
		var isShow = true;
		$(document).ready(function(){
		$("a").hover(aHoverIn, aHoverOut);
		$("h1").click(h1Click);
		});
 
		function h1Click(){
			if(isShow == true){
				$("ul").hide("slow");
				isShow = false;
			}else{
				$("ul").show("slow");
				isShow = true;		
			}
		}
 
		function aHoverIn(){
			$(this).removeClass("whenAHover");
		}
		function aHoverOut(){
			$(this).removeClass("whenAHover");
		}
	</script>
</head>
<body>
	<h1><a href="#">Click It!</a></h1>
	<ul>
		<li><a href="#">MENU1</a></li>
		<li><a href="#">MENU2</a></li>
		<li><a href="#">MENU3</a></li>
		<li><a href="#">MENU4</a></li>
	</ul>
</body>
</html>

fadein()&out()함수 사용 예

http://wldyd83.adminschool.net/jquery/fadeinout.html

html

<!DOCTYPE html>
<html>
<head>
	<title>padein&padeout</title>
 
 
  <script type="text/ecmascript" src=jquery-1.6.2.min.js></script>
	<script type="text/ecmascript">
		$(document).ready(function(){
        $("h1").toggle(first, second);
		});
 
		function first(){
		    $("section").fadeOut("slow");
		}
 
		function second(){
        $("section").fadeIn("slow");		
		}
	</script>	
</head>
<body>
  <h1>Click</h1>
    <section>
    fadeIn fadeOut Test!!
    </section>
</body>
</html>

append()함수 사용 예

http://wldyd83.adminschool.net/jquery/append.html

html

<!DOCTYPE html>
<html>
  <head>
    <title>append() & prepend()</title>
    <script type="text/ecmascript" src=jquery-1.6.2.min.js></script>
    <script type="text/ecmascript">
      $(document).ready(function(){
        $("h1").click(whenClick);
      });
      function whenClick(){
        $(this).append("+");
      }
    </script>
  </head>
  <body>
  append()
    <h1>test1</h1>
    <h1>test2</h1>
    <h1>test3</h1>
    <h1>test4</h1>
    <h1>test5</h1>
  </body>
</html>