adminschool.net wiki

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
===== 이벤트사용 예 =====

  * show() & hide()함수 사용 예 
http://wldyd83.adminschool.net/jquery/hideshow.html \\
**결과 : 클릭시 나타나고 클릭시 사라진다.**
<code css 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>
</code>

  * fadein()&out()함수 사용 예
http://wldyd83.adminschool.net/jquery/fadeinout.html

<code css 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>
</code>

  * append()함수 사용 예
http://wldyd83.adminschool.net/jquery/append.html
<code css 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>
</code>
adminschool.net wiki

사용자 도구

사이트 도구

문서 도구
