아직은 기초를 배우고 있지만 포인트는 $( )구문을 이용해서 내가 적용하고자하는 객체를 찾아 갈수 있다.
<?xml version="1.0" encoding="EUC-KR" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<title>Insert title here</title>
<!-- css 셋팅 -->
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
function color(){
$('.list').css("backgroundColor",'yellow');
}
function odd(){
$(".list>li:odd").css("background-color" , "#bbbbff" ).css("border" ," thick pink dotted " );
}
function even(){
$(".list>li:not(:odd)").css("background-color" , "#bbbbff" ).css("border" ," thick pink dotted " );
}
function bokyoung(){
$(".list>li:gt(2)").hide(2000);
}
function ja(){
for(var i =0 ; i <100 ; i++){
$(".jasik>ol").css("background-color" , "#bbbbff" ).fadeIn(2000);
$(".jasik>ol").css("background-color" , "#bbbbff" ).fadeOut(1000);
}
}
function ground(){
$('.list > li ').animate({"background-color":"white","width":500},5000).hide(5000);
}
/*
앞에다가 $(document).ready를 함수앞에다가 안써도 상관은 없지만
나중에 많아지면 중첩에 문제가 생길수 있기때문에 꼭 쓰는것을 추천한다!!
$(document).ready(function() { 내용 }) ;
: first(첫번째것) :last (마지막것)
: contains(문자열)(문자열을 포함하는것),
: empty(내용이 없는것), :has(선택자)(선택자를 가진것),
: parent(부모)
: hidden(숨겨진 것), :visible(보이는 것),
: not(선택자)(선택자가 아닌것)
: gt(index)(보다큰것) :lt(index)(보다작은것)
*/
</script>
</head>
<body>
<ol class="list" >
<input type="button" value="배경노랑색으로!!" onclick = "color()" />
<input type="button" value="없어져라 야삐!!" onclick = "ground()" />
<input type="button" value="짝수만!!!" onclick = "even()" />
<input type="button" value="홀수만사라져라!!" onclick = "odd()" />
<input type="button" value="복영밑으로사라져!" onclick = "bokyoung()" />
<input type="button" value="자식디져라!!!" onclick = "ja()" />
<li class="jasik">최강채광0
<ol>
<li>야호</li>
<li>야호~!!</li>
</ol>
</li>
<li>쓰담지연1</li>
<li>꽐라준영2</li>
<li>어깨복영3</li>
<li>봉긋형석4</li>
<li>야하!!쿄5</li>
</ol>
</body>
</html>
이 글은 스프링노트에서 작성되었습니다.
'J-Query' 카테고리의 다른 글
| 16일차 우편번호검색(json) (0) | 2012.05.08 |
|---|---|
| 16일차 select(DBMS:JSON:) (0) | 2012.05.08 |
| 15일차 DB->JSON(포멧 하기) (0) | 2012.05.08 |
| 11일차 Ajax2 (0) | 2012.05.08 |
| J-쿼리 (0) | 2012.05.08 |
