You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.8 KiB
103 lines
2.8 KiB
<%-- |
|
하하하 |
|
|
|
--%> |
|
|
|
<%@page contentType="text/html" pageEncoding="UTF-8"%> |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|
|
|
<html> |
|
<head> |
|
<title>JSP Page</title> |
|
<style type="text/css"> |
|
.horizontal |
|
{ |
|
float:left; |
|
width:300px; |
|
height:30px; |
|
border:1px solid black; |
|
margin:10px; |
|
} |
|
|
|
.noListStyle |
|
{ |
|
list-style-type:none; |
|
} |
|
|
|
.whenHover |
|
{ |
|
color:Red; |
|
background-color:Orange; |
|
} |
|
|
|
li |
|
{ |
|
position:relative; |
|
} |
|
</style> |
|
|
|
<script type="text/javascript" src="/test/jquery-1.6.4.js"></script> |
|
<script> |
|
$(document).ready(function() { |
|
$("h1").css("color","Red"); |
|
$("#test1").css("background-color","Orange"); |
|
$(".test1").css("background-color","Yellow"); |
|
alert("---------------------------"); |
|
var h1=$("h1"); |
|
h1.css("color","Black"); |
|
|
|
var li=$("li"); |
|
li.addClass("noListStyle").addClass("horizontal"); |
|
alert("---------------------------"); |
|
li.removeClass("noListStyle").removeClass("horizontal"); |
|
|
|
//$("a").hover(hoverIn,hoverOut); |
|
$("a").hover(hoverIn,hoverIn); |
|
$("h1").click(h1Click); |
|
alert("---------------------------"); |
|
$(".test3").toggle(first,second); |
|
|
|
}); |
|
|
|
function hoverIn() |
|
{ |
|
//$(this).addClass("whenHover"); |
|
$(this).toggleClass("whenHover") |
|
} |
|
|
|
function hoverOut() |
|
{ |
|
$(this).removeClass("whenHover") |
|
} |
|
|
|
var isShow=true; |
|
function h1Click() |
|
{ |
|
if(isShow==true) { $("UL").hide("slow",null); isShow=false; } |
|
else { $("UL").show("slow",null); isShow=true; } |
|
} |
|
|
|
function first() |
|
{ |
|
$("li").animate({left:300}, "slow"); |
|
} |
|
|
|
function second() |
|
{ |
|
$("li").animate({left:0}, "slow"); |
|
} |
|
</script> |
|
</head> |
|
<body> |
|
<h1>JQuery</h1> |
|
<h1 id="test1">JQuery</h1> |
|
<h1 class="test1">JQuery</h1> |
|
<ul> |
|
<li><a href="#">다음</a></li> |
|
<li><a href="#">네이버</a></li> |
|
<li><a href="#">구글</a></li> |
|
<li><a href="#">구글</a></li> |
|
</ul> |
|
<h1 class="test3">Click It!</h1> |
|
</body> |
|
</html>
|
|
|