본문 바로가기
Web/jQuery

JavaScript & jQuery/예제/실습

by 나비와꽃기린 2016. 6. 22.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

>>> JavaScript & jQuery

-자바스크립트란?

클라이언트(사용자 컴퓨터의 브라우저) 화면을 제어하는 데 주로 사용

HTML 태그와 CSS로 된 부분은 웹 브라우저가 그대로 화면에 표시하고 자바스크립트 부분은 스크립트 인터프리터를 한 번 더 거친 후 그 결과를 웹 브라우저 화면에 표시한다.

-jQuery?

자바스크립트 라이브러리(Javascript library)

자바스크립트로 길게 작성해야 하는 소스를 간단히 하나의 메서드(method)로 줄여서 작성할 수 있게 한 것

 

JavaScript & jQuery 강의는 실습 위주 ▼

***실습1 "제이쿼리 기본 문법1"

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

   <title>Document</title>

   <style type="text/css">

             body{font:12px/1.5 "굴림",Gulim; margin:10px;}

   </style>

<!-- 제이쿼리 소스 연결 -->

 

<!--제이쿼리 라이브러리 연결-->

<script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

             $('*').css("font-size","13px");

             $('h1').css('color','red');

             $('#firstTitle').css('color','green');

             $('.nextTitle').css('color','blue');

             $('.Obj3>li').css('font-weight','bold');

             $('.Obj3').children('.theObj1').css('color','purple');

             $('.Obj5').parent().css('border','dashed 2px #0033ff');

 

             $('#wrap h3').css('font-size','20px').css('background-color','yellow');

             $('.Obj4').next().css('color','orange');

             $('.Obj5').prev().css('text-align','right');

             $('.Obj6').siblings('li').css('text-align','center');

             $(':text').css({'background-color':'#ccc','border':'solid 1px #000','color':'green'}); /*맵방식*/

             //$(':text').css({'background-color':'#ccc').css('border':'solid 1px #000').css('color':'green'}); /*체이닝방식*/

});

 

</script>

 </head>

 <body>

<div id="wrap">

             <h1>제이쿼리</h1>

             <h2 id="firstTitle">선택자</h2>

             <h3 class="nextTitle">부모 요소</h3>

             <div>

                           <p class="Obj1">현재 id obj1인 요소를 기준으로,

                           부모 요소는 div요소입니다

                           </p>

             </div>

 

             <h3>자식 요소 선택자</h3>

             <ul class="Obj3">

                           <li>리스트1</li>

                           <li class="theObj1">리스트2</li>

                           <li>리스트3</li>

             </ul>

             <h3>형 요소 선택자</h3>

             <ul>

                           <li>리스트4</li>

                           <li class="Obj4">리스트5</li>

                           <li>리스트6</li>

             </ul>

             <h3>동생 요소 선택자</h3>

             <ul>

                           <li>리스트7</li>

                           <li class="Obj5">리스트8</li>

                           <li>리스트9</li>

             </ul>

             <h3>형제 요소 선택자</h3>

             <ul>

                           <li>리스트10</li>

                           <li class="Obj6">리스트11</li>

                           <li>리스트12</li>

             </ul>

             <h3>입력 요소 선택자</h3>

             <p><label for="user_name">이름</label> <!--'이름'클릭시 커서 위치 이동 for id 구문은 같아야-->

                           <input type="text" name="user_name" id="user_name"/>

             </p>

</div>

 </body>

</html>

 

 

****실습2 "제이쿼리 기본 문법2"

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

             body{font:12px/1.5 "굴림",Gulim; margin:10px; }

  </style>

  <!-- 제이쿼리 라이브러리 -->

<script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

//본문에 있는 내용을 모두 읽어온후에 function(){ 다음문장을을 수행하라는 의미}

 

$(document).ready(function(){

             //----------list1번째 요소 적용----------------

             //1.id=list1인 요소의 li요소중 홀수번째 노랑 바탕

             $('#list1 li:odd').css('background','yellow');

             //2.id=list1인 요소의 li요소중 짝수번째 회색 바탕

             $('#list1 li:even').css('background','gray');

             //3.id=list1인 요소의 li요소중 첫번째 글자색 빨강

             $('#list1 li:first').css('color','red');

             //4.id=list1인 요소의 li요소중 마지막번째 요소 글자색 파랑

             $('#list1 li:last').css('color','blue');

            

             //5. id=list1인 요소의 li요소중 두번째 <li>요소만 기울임

             $('#list1 li:eq(1)').css('font-style','italic');

    //6.  id=list1인 요소의 li요소 중 세 번째 이전 요소만 선택후 2px 하늘색 점선

             $('#list1 li:lt(2)').css('border','dotted 2px aqua');

             //7.  id=list1인 요소의 li요소 중 세번째 이후 요소만 선택후 2px 보라색 점선

             $('#list1 li:gt(2)').css('border','dotted 2px purple');

            

             //----------list2번째 요소 적용----------------

             //8. id=list2인 요소의 li요소 중 2의 배수번째 요소만 선택(인덱스와 무관)

             $('#list2 li:nth-child(2n)').css('background','orange');

             //9. id=list2인 요소의 li요소 중 내용이 리스트8이 포함된 <li>요소만 선택

             $('#list2 li:contains("리스트8")').css('color','red');

             //10. id=list2인 요소의 li요소 중 태그가 span이 포함된 <li>요소만 선택

             $('#list2 li:has("span")').css('color','aqua');

             //11. id=list2인 요소의 li요소 중의 class=theObj li요소만 선택

             $('#list2 li').filter(".theObj").css('font-size','20px');

             //12. id=list2인 요소의 li요소 중 하위<a>요소만 선택

             $('#list2 li').find('a').css('background','red');

            

//----------list3번째 요소 적용:문서 객체 조작 메서드----------------

 

             //13. class='theTitle'인 요소의 하위 요소를 새 요소 변경

             $('.theTitle').html('<a href="#">요소 개체 조작</a>');//html은 자바스크립트의 innerHtml과 같다

             //14. class=obj1인 요소의 텍스트를 새 텍스트로 변경

             $('.Obj1').text('리스트_2');

             //15. id=list3인 요소의 마지막에 새 요소를 추가

             $('#list3').append('<li>list_6</li>');

 

             //16. id=list3인 요소의 처음에 새 요소를 추가합니다.

             $('#list3').prepend('<li>list_0</li>');

/*           //17. id=list3 4번째 li 요소 이전에 새요소 추가

             $('<li>insertBefore</li>').insertBefore($('#list3 li').eq(4));

 

             //18. id=list3 6번째 li요소 이후에 새 요소를 추가

             $('<li>insertAfter</li>').insertAfter($('#list3 li').eq(6));

             //19. class=obj1인 요소를 복사후에 id list3인 마지막에 추가

             $('.Obj1').clone().appendTo('#list3');

             //20. id=list3인 요소의 하위 li 요소 중에서 첫번째 요소삭제

             $('#list3 li').eq(0).remove();

 

             //21.  id=list3인 요소인 하위 li 요소 중에서 첫번째 요소의 값을 반환

             $('#list3 li').eq(0).attr('class');

             //22. id=list3인 요소인 하위 li 요소중에서 첫번째 요소의 값을 새 데이터 지정

             $('#list3 li').eq(0).attr('class','obj2');

             $('.obj2').css('background','yellow');

             //23. id=list3

             $('#list3 li').eq(1).attr('class','obj3');

             $('.obj3').css('color','blue');*/

});

 

</script>

 </head>

 <body>

<div id="wrap">

             <h1>탐색 선택자 및 html 조작</h1>

             <h2>탐색 선택자   </h2>

             <ul id="list1">

                           <li>리스트1</li>

                           <li>리스트2</li>

                           <li>리스트3</li>

                           <li>리스트4</li>

                           <li>리스트5</li>

                           <li>리스트6</li>

                           <li>리스트7</li>

             </ul>

            

             <ul id="list2">

                           <li>리스트8</li>

                           <li class="theObj">리스트9</li>

                           <li><span>리스트10</span></li>

                           <li>리스트11</li>

                           <li><a href="#">리스트12</a></li>

                           <li>리스트13</li>

                           <li>리스트14</li>

             </ul>

            

             <h2 class="theTitle">Html 조작</h2>

             <ul id="list3">

                           <li>list_1</li>

                           <li class="Obj1">list_2</li>

                           <li>list_3</li>

                           <li>list_4</li>

                           <li>list_5</li>      

             </ul>

</div>

 </body>

</html>

 

 

****실습3  "이벤트 주기"

<!doctype html><html lang="en">

 <head>

  <meta charset="UTF-8">

   <title>Document</title>

<style type="text/css">

             *{margin:0;padding:0;}

             li{list-style:none;}

             body{font:12px/1.5 "굴림",gulim; margin:10px;}

             h2{margin-top:30px}

             a{color:#333}

             #textZone{width:700px;}

             #listWrap{background:#cfcfcf; width:110px;padding:10px;}

             .list1{display:none;}

</style>

<script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

             //btn1를 클릭하면 textZone에 글자색을 변경

             $('#btn1').click(function(){

               $('#textZone').css('color','blue');

  });

  //btn2에 마우스 올려지면  textZone에 배경색을 변경

  $('#btn2').mouseover(function(){

               $('#textZone').css('background','yellow');

  });

  //btn2에 포커스를 얻었을 때 textZone에 배경색을 변경(tab으로 이동했을때 )

  $('#btn2').focus(function(){

               $('#textZone').css('background','yellow');

  });

 

  //bind이벤트 btn mouseover/ focus 이벤트 발생

  $('#btn3').bind('mouseover focus',function(){

               //.css(~~).css(~~) 체이닝 방법

              $('#textZone').css('color','green').css('font-weight','bold');

  });

 

             //listWrap에 마우스가 들어가면 block,빠져나가면 none

  $('#listWrap').mouseenter(function(){

                           $('.list1').css('display','block');

  });

 

  $('#listWrap').mouseleave(function(){

                           $('.list1').css('display','none');

  });

  //toggle이벤트:클릭할 때 마다 함수들을 차례차례 적용시킴

             $('#btn4').toggle(function(){ 

                                        //this 객체 자신==선택요소

                                        $(this).next().css('background','red');

                           },function(){

                                        $(this).next().css('background','orange');

                           },function(){

                                        $(this).next().css('background','yellow');

                           },function(){

                                        $(this).next().css('background','white');

             });

             // hover이벤트 : 마우스가 선택요소의 영역에 오버되거나

             // 벗어나면 실행

  $('.hover').hover(function(){//커서가 선택요소에 들어오면

                                        $(this).css('color','green');

                           },function(){

                                        $(this).css('color','red');//커서가 선택요에서 빠져나가면

  });

});

</script>

 </head>

 <body>

 <div id="wrap">

             <h1>이벤트 연습   </h1>

             <p id="textZone">웹 브라우저에서 버튼을 클릭한다거나 mouse를 움직이거나

             하는 모든 행위를 이벤트라고 합니다. 그리고 이벤트발생시 함수의 실행문이

             수행되도록 이벤트를 지정하는 것을 이벤트 핸들러라고 합니다.

             </p>

 

             <h2>Click메서드   </h2>

             <p><button id="btn1">Click</button>           </p>

 

             <h2>Mouseover 메서드       </h2>

             <p><button id="btn2">Mouseover</button>   </p>

            

             <h2>bind 메서드  </h2>

             <p><button id="btn3">bind</button>            </p>

            

             <h2>Mouseleave 메서드      </h2>

             <div id="listWrap">

                           <h3>관련 사이트                </h3>

                           <ul class="list1">

                                        <li><a href="#">list1</a></li>

                                        <li><a href="#">list2</a></li>

                                        <li><a href="#">list3</a></li>

                                        <li><a href="#">list4</a></li>

                           </ul>

             </div>

 

             <h2>toggle 메서드</h2>

             <button id="btn4">toggle</button>

             <p>누를 때마다 실행함수를 차레대로 번갈아 가면서 실행합니다.

                 <br/>위의 toggle 버튼을 계속 클릭해 보세요.

             </p>

 

             <h2>hover 메서드</h2>

             <h3><a href="#" class="hover">hover</a></h3>

 

 </div> </body></html>

 

 

****실습4 "화면전환효과 "

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

<style type="text/css">

             *{margin:0;padding:0;}

             li{list-style-type:none;}

             body{font:12px/1.5 "굴림", Gulim; margin:10px;}

             h2{margin-top:20px;}

 </style>

  <script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

             //버튼1을 클릭했을때 box1숨김

             $("#btn1").click(function(){

                           $(".box1").hide("fast");

             });

 

             //버튼2을 클릭했을 box1표시

             $("#btn2").click(function(){

                           $(".box1").show("slow");

             });

 

             //toggle, 숨김/노출 번갈아 실행

             $("#btn3").click(function(){

                           $(".box2").toggle("slow");

             });

 

//---slideUp/slideDown/sildeToggle--

             $("#btn4").click(function(){

                           $(this).parent().next().slideUp(500); //시간

             });

 

             $("#btn5").click(function(){

                           $(this).parent().next().slideDown(500);

             });

             $("#btn6").click(function(){

                           $(this).parent().next().slideToggle("slow");

             });

 

//---fadeOut/fadeIn/fadeToggle----------

             $("#btn7").click(function(){

                           $(this).parent().next().fadeIn(1000);

             });

 

             $("#btn8").click(function(){

                           $(this).parent().next().fadeOut(1000);

             });

 

             $("#btn9").click(function(){

                           $(this).parent().next().fadeToggle(2000);

             });

 

//----fadeTo-------------------------------

             $("#btn10").click(function(){

                           $(this).parent().next().fadeTo(1000,0.3);

             });

 

             $("#btn11").click(function(){

                           $(this).parent().next().fadeTo(1000,1); //1이 진하게를 뜻함

             });

});

</script>

 </head>

 <body>

<div id="wrap">

             <h1>제이쿼리 효과 주기</h1>

             <p>제이쿼리에서는 화면전환, 슬라이드는 다운과 업

             효과 등<br/>다양한 효과 메서드를 제공합니다.

             </p>

 

             <h2>show/hide효과</h2>

             <p><button id="btn1">hide</button>

             <button id="btn2">show</button>

             </p>

             <p class="box1"> 선택요소를 숨기거나 노출하고 싶을

             경우에 사용합니다.<br/>

             hide(시간)/show(시간) 시간은 fast,slow,normal 등을 입력

             할 수 있으며, 1000분의 1초 단위 숫자로 표기할 수 있습니다.

             </p>

 

             <h2>toggle효과 주기</h2>

             <p><button id="btn3">toggle</button></p>

             <p class="box2">선택요소가 숨겨져 있다면,보이게 하고

             <br/> 보이고 있다면 숨기는 역할을 합니다.</p>

            

             <h2>slideup/Down효과 주기</h2>

             <p><button id="btn4">slideUp</button>

             <button id="btn5">slideDown</button>

             <button id="btn6">slideToggle</button></p>

             <p> slideUp은 선택요소가 위로 미끄러져 말아

             올리면서 숨깁니다.<br/>반면, slideDown은 선택 요소를

             아래로 미끄러지듯              말아 내리면서 노출시킵니다.</p>

 

             <h2>fadeIn/fadeOut 효과주기           </h2>

             <p><button id="btn7">fadeIn</button>

                <button id="btn8">fadeOut</button>

                <button id="btn9">fadeToggle</button></p>

             <p> fadeIn은 선택요소를 천천히 사라지게 만듭니다<br/>

             fadeOut은 선택요소가 천천히 나타나게 합니다.</p>

            

             <h2>fadeTo 효과주기          </h2>

             <p><button id="btn10">fadeTo(0.3)</button>

             <button id="btn11">fadeTo(1)</button></p>

             <p id="box3"> fadeTo 선택요소를 원하는 만큼만 <br/>

             보일수 있습니다.</p>

</div>

 </body>

</html>

 

 

***실습5 "애니메이션 효과"

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

<style type="text/css">

             *{margin:0;padding:0;}

             #box1{width:100px;height:100px;background:#f00;

             position:relative;border-radius:50px;}

             /*border-radius:50px;를 하면 동그라미 만드는*/

</style>

<script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $('#box1').animate({

                 left:'500px',//오른쪽으로 500px이동

                           width:'200px',//오른쪽으로 가면서 상자크기가 200*200

                           height:'200px',

             },200).animate({//아래쪽으로 500px이동            

                           top:'500px',

                           width:'50px',

                           height:'50px',

                           opacity:1

             },1000).animate({

                           left:'0px',//왼쪽으로 500px이동

                           width:'50px',

                           height:'50px',

                           opacity:1

             },1000).animate({

                           top:'0px',//위로 500px이동

                           width:'50px',

                           height:'50px',

                           opacity:1

             },1000)

 });

 </script>

 

 </head>

 <body>

  <div id="box1">박스~ 박스1</div>

 </body>

</html>

 

 

***실습6 "애니메이션 효과 -왼쪽,오른쪽,,아래 버튼 생성 및 효과주기"

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

<style type="text/css">

             *{margin:0;padding:0;}

             #box1{width:50px;height:50px;background:#f00;

                                                      margin-top:200px;position:relative;

                                                      margin-left:10px;/* if문 삽입시 추가*/

                                                     

             }

</style>

<script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 

             $('#rightBtn').click(function(){

                           if($("#box1").offset().left>=$(document).width()-$("#box1").width()){

                                        $("#box1").offset().left-100+"px";

                                        alert($("#box1").offset().left);

                           }else{

                           $("#box1").stop().animate({left:"+=100px"},500);}

             });

 

             console.log($("#box1").offset());

 

             $('#leftBtn').click(function(){

                           if($("#box1").offset().left<=10){

                                        alert($("#box1").offset().left);

                           }else{

                           $("#box1").stop().animate({left:"-=100px"},500);}

             });

 

             $('#topBtn').click(function(){

                           $("#box1").stop().animate({top:"-=100px"},500);

             });

 

             $('#bottomBtn').click(function(){

                           $("#box1").stop().animate({top:"+=100px"},500);

             });

            

 

             /*

               console.log($("#box1").offset());

                           if($("#box1").offset().left<=10){

                                        //$("#box1").offset().left +500+"px";

                                        alert($("#box1").offset().left);

                           }else{

                           $("#box1").stop().animate({left:"-=100px"},500);}*/

                          

});

</script>

 </head>

<body>

 

<div id="box1">박스</div>

<p>

             <button id="leftBtn">left</button>

             <button id="rightBtn">right</button>

             <button id="topBtn">top</button>

             <button id="bottomBtn">bottom</button>

</p>

 

</body>

</html>

 

 

***실습7  "hasClass 사용해서 박스 선택하기"

<!doctype html>

<html lang="en">

 <head><!-- class="toggleStyle" -->

  <meta charset="UTF-8">

  <title>Document</title>

<style type="text/css">

div{width:100px;height:100px;border:1px solid #000;

    cursor:pointer; margin:4px;float:left;}

.toggleStyle{background:blue;color:white;}

</style>

<script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

             $('div').hover(function(){//div가 클릭 되었을때 실행

                           //this div class=toggleStyle를 갖고 있으면 실행

                           if( $(this).hasClass('toggleStyle') ){

                                        // div class를 삭제

                                        $(this).removeClass('toggleStyle');

                           }else{

                                        //class=toggleStyle를 갖고 있지 않으면 실행

                                        //클래스를 추가해 주어서 파랑색 적용.

                                        $(this).addClass('toggleStyle');

                           }

             });

});

</script>

 

 </head>

 <body>

<div class='toggleStyle'>hasCalss()는 선택된 엘리먼트에 해당 클래스가

</div> 

<div> 적용되어 있으면 true를 리턴하고</div>

<div>아직 적용되어 있지 않으면 false를 리턴한다.</div>

 </body>

</html>

 

 

***실습8  "val함수 사용해서 폼 요소에 값 설정, 가져오기"

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

<style type="text/css">

             #console{margin:20px;font-size:30px;color:blue;}

</style>

<script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

             //input 요소에 키가 눌리면 함수호출

             $('input').keyup(function(){

                           //input value값을 얻어오기

                           var value=$(this).val();

                           report(value);//함수 호출(value넣어주면)

             });

             $('button').click(function(){

                           $('input').val('val 메소드 호출중...');

                           $('input').keyup();   //누르고, 떼고

             });

             function report(msg){//value값을 넘겨 받아서

                           //div에 텍스노드에(컨텐츠부분에) 출력

                           $('#console').text(msg);

             }

});

 </script>

  <title>Document</title>

 </head>

 <body>

  <button>reset </button>

  <input type="text" value="val 메소드 연습중..." size="80"/>

  <div id="console"></div>

 </body>

</html>

 

 

*** 실습9 "button-text-password-폼 요소의 값 얻어오기"

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

             div{padding:5px; width:300px;}

             .item{float:left;width:100px;}

  </style>

<script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

             //회원가입

             $('#regBtn').click(function(){

                           invalidItem();//유효성 체크할 함수 호출

             });

             //취소버튼 눌렀을때

             $('#resBtn').click(function(){

                           $('#userId').focus();

                           clearInput();//이전에 입력값 모두 제거

             });

    //유효성 체크할 함수

    function invalidItem(){

             //아이디의 텍스트 박스의 속성값이 비었으면 실행

               if($('#userId:text').attr('value')==""){

                             alert("아이디를 입력하세요.");

                             $('#userId').focus();

                             return false;

               }

               //아이디의 텍스트박스의 속성값이 있으면 아래문자

               //이름 텍스트박스에 값이 유무에 따라 없으면 if문 수행

               var userName=$('#userName:text').attr('value');

               if(userName==""){

                            alert("이름을 입력하세요.");

                            $('#userName').focus();

                             return false;

               }

               if(( $('#pwd:password').val()=="") || $('#pwdConfirm:password').val()==""){

                                        alert("암호를 입력하세요");

                                         $('#pwd').focus();

                                        return false;          

                }

               if($('#pwd:password').val() != $('#pwdConfirm:password').val()){

                           alert("암호가 일치하지 않습니다");

                           return false;

               }

                alert(userName+"님 회원가입을 축하 합니다");

             }//invalidItem()

             //입력값 모두 삭제

             function clearInput(){

                           $('#userId:text').attr('value','');

                           $('#userName:text').attr('value','');

                           $('#pwd:password').attr('value','');

                           $('#pwdConfirm:password').attr('value','');

             }//clearInput()

 

});//ready

</script>

 </head>

 <body>

  <center>

             <div>

                           <span class="item">아이디</span>

                           <input id="userId" type="text">

             </div>

             <div>

                           <span class="item">이름</span>

                           <input id="userName" type="text">

             </div>

             <div>

                           <span class="item">암호</span>

                           <input id="pwd" type="password">

             </div>

             <div>

                           <span class="item">암호확인</span>

                           <input id="pwdConfirm" type="password">

             </div>

             <form action="">

             <input type="button" id="regBtn" value="회원가입"/>

             <input type="button" id="resBtn" value="취소"/>

             </form>

  </center>

 </body>

</html>

 

 

****실습10  "change함수를 사용해서 콤보박스에서 선택한 과일그림 출력하기"

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

             img{width:80px;height:80px;margin-left:50px;}

  </style>

<script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 

             $('#sel').change(function(event){

/*function(event):event는 동적인 객체(이벤트의 정보)

저장하고 있다

event.target :이벤트를 받아온 객체를 target의 값(value)

얻어 와서 imgSrc에 저장// src="images/apple.gif"

*/

             console.log(event);

                           var imgSrc=$(this).val();

                           $('#img').attr('src',imgSrc);//값을 설정해주기

                           //attr('src') 원래 들어있는 값을 얻어 오기

             }).change();

});

</script>

 </head>

 <body>

  <table>

  <tr>

             <td>

                           <select id="sel">

                                        <option value="images/strawberry.gif">딸기</option>

                                        <option value="images/banana.gif">바나나</option>

                                        <option value="images/apple.gif" selected="selected">사과</option>

            

                           </select>

             </td>

             <td><img id="img"></td>

  </tr>

  </table>

 </body>

</html>

 

****실습11 "취미를 체크박스해서 선택한 결과를 얻어오기"

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

             div{padding:5px;}

             .item{float:left;width:100px;}

  </style>

  <script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 

             $('#selectBtn').click(function(){

                           //var를 적어주지 않으면 '전역변수'

                           var checkedList="";//문자형 초기화

                           var checkedConsole="";

                           //type속성인 chkeckbox요소가 체크된name속성값이 hobby

                           //체크박스중에서 체크된 요소의 (each:집합을 얻어온 후 각각의

                           //요소에 대해 동작)

                           //each : 각 요소를 배열형태로 저장하고 for문처럼 각각을 실행,

                           //저장된 값 만큼 반복문을 시행함

                           $("input[name='hobby']:checked").each(function(index){

                                        checkedList += $(this).prev().text()+index+"<br>";

                                        checkedConsole+= $(this).val()+"\t";//\t : tab 8정도칸띄기

                           });

                           $('#contents').html(checkedList);

                           //콘솔창에 출력

                           console.log(checkedConsole);

             });//click

 

});  

 

</script>

 </head>

 <body>

  <div>

             <span class="item">음악 감상</span>

             <input type="checkbox" name="hobby" value="music"/>

  </div>

 

  <div>

             <span class="item">요가</span>

             <input type="checkbox" name="hobby" value="yoga"/>

  </div>

 

  <div>

             <span class="item">독서</span>

             <input type="checkbox" name="hobby" value="reading"/>

  </div>

  <input type="button" id="selectBtn" value="취미 선택"/>

  <div id="contents">결과  </div>

</body>

</html>

 

 

***실습12 "scroll 메소드- 윈도우 무한 스크롤"

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

   <title>Document</title>

 <script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

             //스크롤 이벤트 발생시 실행

             $(window).scroll(function(){

                           //$(window).scrollTop(): 스크롤의 높이

                           //$(window).height():윈도우의 높이

                           //$(document).height():문서의 높이

                           var scrollHeight=$(window).scrollTop()+$(window).height();

                           var documentHeight=$(document).height();

 

                           //스크롤의 높이와 문서의 높이가 같으면 실행

                           if(scrollHeight==documentHeight){

                                        for(var i=0;i<10;i++){

                                                      $('<h1>무한 스크롤.....</h1>').appendTo('body');

                                        }

                           }

             });

});

//처음 실행시 초기화면

$(document).ready(function(){

             for(var i=0;i<25;i++){

                           $('<h1>무한 스크롤 초기값</h1>').appendTo('body');

             }

});

 

</script>

 </head>

 <body>

 </body>

</html>

 

 

***실습13 "setInterval 함수 사용해서 이미지 순서 변경하기"

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

<script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

             //img 크기 설정

             $('img').css('width',250);

 

             //함수를 2초 마다 실행

             setInterval(function(){

                           //첫 번째 이미지를 마지막으로 보내기

                           $('img').first().appendTo('body');

             },5000);

 

});

</script>

 </head>

 <body>

  <img src="images/Koala.jpg"/>

  <img src="images/Lighthouse.jpg"/>

  <img src="images/Hydrangeas.jpg"/>

  <img src="images/Jellyfish.jpg"/>

  <img src="images/Desert.jpg"/>

 </body>

</html>

 

 

***실습14 event-target 함수 이용해서 이미지 확대 및 축소하기

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

                                        img{width:140px;height:120px;}

  </style>

  <script src="js/jquery-1.8.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

/*           $('img').bind('click',function(event){

//이벤트정보를 갖고 있는 대상, 클릭한 객체 갖고있는 요소

                           var $target=$(event.target);

                           $target.width($target.width()+20);

                           $target.height($target.height()+20);

                           console.log(event);

             });

             */

 

 

             //bind를 사용하면 각각의 이벤트를 줄 수 있다.

             $('img').bind({

                           click:function(e){

                                        /*function(event) 내에 event는 위치,

                                        키보드/마우스의 키값의 정보== propery */

                                        var t=$(this);//$(e.target)==$(this)

                                        t.width(t.width()+20);

                                        t.height(t.height()+20);

                                        //$(this).unbind();//이벤트 제거

                                        console.log(e);

                           },

                                        mouseout:function(){

                                                       var $t1=$(this);//$(e.target);//==$(this)

                                                      $t1.width($t1.width()-20);

                                                      $t1.height($t1.height()-20);

                             }

              });        

});

</script>

 </head>

 <body>

  <img src="images/photo6.jpg">

 </body></html>

 

 

 

 

'