| 실행 소스 |
|
<?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의 셀렉터</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() { // $('#target').toggle(500); // hide()와 show() -> toggle() 인자값은 밀리세컨드 // $('img.ttt').toggle(1000); // img태그 중 class가 ttt 선택 // $('img.ttt').width(200); // // $('img:first').fadeOut(1000); // img태그중 첫번째것 // $('img:last').fadeOut(1000); // img태그중 마지막것 // img중 홀수번째를 toggle : index가 0부터 시작(0은 짝수) // $('img:odd').toggle(500); // $('div img').attr("src", "sistar.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="./images/horse.jpg" alt="몽골마" id="horse"/> </div> <img src="./images/sistar.jpg" alt="씨스타" width="150px" class="ttt" /> <img src="./images/sistar.jpg" alt="씨스타" width="150px" class="ttt" /> <img src="./images/sistar.jpg" alt="씨스타" width="150px" class="ttt" /> <img src="./images/sistar.jpg" alt="씨스타" width="150px" class="ttt" /> <img src="./images/sistar.jpg" alt="씨스타" width="150px" class="ttt" /> <img src="./images/sistar.jpg" alt="씨스타" width="150px" /> <img src="./images/sistar.jpg" alt="씨스타" width="150px" /> <img src="./images/sistar.jpg" alt="씨스타" width="150px" /> </body> </html>
|
실행 결과 |
  |
'Dev. 웹 > JavaScript' 카테고리의 다른 글
| [JQuery 예제] 동적생성과 Traversing (0) | 2012.09.13 |
|---|---|
| [JQuery 예제] 체크박스 클릭 해제시 모든 체크박스에 체크 설정 (0) | 2012.09.13 |
| [JavaScript 예제] 자바스크립트 정규식 이용한 유효성 검사 (5) | 2012.09.13 |
| [JavaScript 예제] 시간이 흐르는 시간 텍스트 출력하기 (0) | 2012.09.12 |
| [JavaScript 예제] 버튼 클릭시 구구단 출력 (0) | 2012.09.12 |