<html>
<body>
<ul class="ul01">
<li id="li01" class="text01">LI id="li01" class="text01"</li>
<li id="li02" class="text01">LI id="li02" class="text01"</li>
<li id="li03" class="text02">LI id="li03" class="text02"</li>
<li id="li04" class="text02">LI id="li04" class="text02"</li>
<li id="li05" class="text02">LI id="li05" class="text02"</li>
</ul>
<div class="div01">
<div id="div11" class="text01">DIV id="div11" class="text01"</div>
<div id="div12" class="text01">DIV id="div12" class="text01"</div>
<div id="div13" class="text02">DIV id="div13" class="text02"</div>
<div id="div14" class="text02">DIV id="div14" class="text02"</div>
<div id="div15" class="text02">DIV id="div15" class="text02"</div>
</div>
<!-- ############################################################################# -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$("body").append("<hr>");
var act01 = "li tag에 style border 적용";
$("body").append("<input type='button' id='act01' value='"+act01+"'/>");
$("#act01").click( function(){ $("li").css("border","1px solid black"); } );
$("body").append("--->> <b>$(\"li\").css(\"border\",\"1px solid black\")</b><br>");
var act02 = "ul tag에 style border 적용";
$("body").append("<input type='button' id='act02' value='"+act02+"'/>");
$("#act02").click( function(){ $("ul").css("border","1px solid red"); } );
$("body").append("--->> <b>$(\"ul\").css(\"border\",\"1px solid red\")</b><br>");
//#############################################################################
$("body").append("<hr>");
var act03 = "div tag에 style border 적용";
$("body").append("<input type='button' id='act03' value='"+act03+"'/>");
$("#act03").click( function(){ $("div").css("border","1px solid blue"); } );
$("body").append("--->> <b>$(\"div\").css(\"border\",\"1px solid blue\")</b><br>");
var act04 = "class=text02 에 style 적용";
$("body").append("<input type='button' id='act04' value='"+act04+"'/>");
$("#act04").click( function(){ $(".text02").css("background-color","#DDFFDD"); } );
$("body").append("--->> <b>$(\".text02\").css(\"background-color\",\"#DDFFDD\")</b><br>");
//#############################################################################
$("body").append("<hr>");
var act05 = "li tag중 class=text01에 style적용";
$("body").append("<input type='button' id='act05' value='"+act05+"'/>");
$("#act05").click( function(){ $("li.text01").css("background-color","#FFFF99"); } );
$("body").append("--->> <b>$(\"li.text01\").css(\"background-color\",\"#FFFF99\")</b><br>");
$("body").append("<hr>");
var act06 = "DIV tag중 class=text01에 style적용";
$("body").append("<input type='button' id='act06' value='"+act06+"'/>");
$("#act06").click( function(){ $("div.text01").css("background-color","#CC66FF"); } );
$("body").append("--->> <b>$(\"div.text01\").css(\"background-color\",\"#CC66FF\")</b><br>");
</script>
</body>
</html>
- write by 꼬마갱이 2012.10.30 -
'SCRIPT야' 카테고리의 다른 글
| jQuery 따라하기 - 10 (기초) (0) | 2012.10.30 |
|---|---|
| jQuery 따라하기 - 8 (0) | 2012.10.30 |
| jQuery 따라하기 - 7 (0) | 2012.10.30 |
| jQuery 따라하기 - 6 (0) | 2012.10.30 |
| jQuery 따라하기 - 5 (0) | 2012.10.30 |