>>> 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>
|
'
'Web > jQuery' 카테고리의 다른 글
| [Javascript 기본 개념] Javascript 문법-함수(function)이란 (0) | 2016.06.23 |
|---|---|
| [Javascript 기본 개념] Javascript 문법-조건문/반복문 (0) | 2016.06.23 |
| [Javascript 기본 개념] Javascript 문법-비교/= == === 차이점 (0) | 2016.06.23 |
| [Javascript 기본 개념] Javascript 문법-자바스크립트란/숫자/문자/변수 (0) | 2016.06.23 |
| AJAX 란?/AJAX 예제/ajax sample/ajax example (0) | 2016.06.22 |