① JQuery 소스
<?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>JQuery 1</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
function execute() {
// Jquery에서는 메소드이름이 $
// $("#target").toggle(3000); // id가 target선택 ,hide() 숨기기, toggle() = hide()+show()
// $("img.ttt").toggle(1000); // img태그중 class가 ttt인 것 선택
// $("img:first").fadeOut(1000); // img태그중 첫번째 것
// $("img:last").fadeOut(1000); // img태그중 마지막 것, 이펙트와 관련된 것들은 동시실행
// $("img:even").toggle(1000); // img중 홀수번째를 toggle : index가 0부터 시작(0은 짝수)
// $("div img").attr("src","teayeon.jpg"); // div의 img태그에 있는 사진 바꾸기, 속성세팅
// document.getElementById("horse").src="teayeon.jpg";
// alert($("div img").attr("src")); // 속성값 가져오기
// class가 ttt가 아닌것 선택
// $("img:not(.ttt)").slideToggle(1000);
}
</script>
</head>
<body>
<input type="button" value="쇼!!!" onclick="execute();" />
<div id="target" style="border-style: solid;">
<img src="teayeon2.jpg" alt="태연" width="200" />
<img src="teayeon2.jpg" alt="태연" width="200" />
</div>
<img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>
<img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>
<img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>
<img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>
<img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>
<img src="teayeon2.jpg" alt="태연" width="80" class="ttt"/>
<img src="teayeon2.jpg" alt="태연" width="80" />
<img src="teayeon2.jpg" alt="태연" width="80" />
<img src="teayeon2.jpg" alt="태연" width="80" />
</body>
</html>
② 실행화면
'WEB > JQuery' 카테고리의 다른 글
| WEB 5일차 두번째) JQuery UI : tab, accordion, datepicker. dialog (0) | 2012.09.14 |
|---|---|
| WEB 5일차 첫번째) JQuery복습 (0) | 2012.09.14 |
| WEB 4일차 세번쨰) JQuery : 동적 생성과 Traversing (0) | 2012.09.13 |
| WEB 4일차 두번쨰) JQuery : 체크박스 전체 선택 및 해제 (0) | 2012.09.13 |
모데스티