신입 개발자 복습일지

DOCTYPE html> #box{ width:100px; height:100px; background-color: antiquewhite; position: relative; top:100px; left:300px; } $(document).ready(function(){ $("#btn").click(function(){ $("#box").animate({"margin-top":"-=100px"}) }) $("#btn2").click(function(){ $("#box").animate({"margin-top":"+=100px"}) }) $("#btn3").click(function(){ $("#box").animate({"margin-left":"-=100px"}) }) $("#btn4").click..

DOCTYPE html> #box{ width:100px; height:100px; background-color: antiquewhite; } $(document).ready(function(){ $("#btn").click(function(){ $("#box").fadeIn(); }) $("#btn_2").click(function(){ $("#box").fadeOut(); }) $("#btn_3").click(function(){ $("#box").fadeOut(); $("#box").fadeIn(); }) $("#btn_4").click(function(){ $("#box").fadeToggle(); }) $("#btn_5").click(function(){ $("#box").fadeTo(1000..

DOCTYPE html> #box{ width:100px; height:100px; background-color: antiquewhite; } $(document).ready(function(){ $("#btn").click(function(){ $("#box").slideUp(500,function(){ // function 추가가능 // $("#box").css("background-color","aqua") // $("#box").slideDown(1000) // 이렇게 연달아 사용도 가능 console.log("slideUP") }) }) $("#btn_2").click(function(){ $("#box").slideDown(500) // 안에 값은 소요시간 , 디폴트값은 400 console..

DOCTYPE html> #box{ width:100px; height:100px; background-color: antiquewhite; } $(document).ready(function(){ //ready는 document객체에 접근해서 DOMContentLoaded이벤트가 발생했는지 감지하는 역할 $("#btn").click(function(){ //

DOCTYPE html> $(document).ready(function(){ $(".btn_1").on("mouseover",function(){ console.log("hello") }) $(".del_1").on("click",function(){ $(".btn_1").off("mouseover") console.log("mouseover 이벤트 해제") }) }) Document 버튼1 버튼1 이벤트 해제 버튼1에 mouseover 될대마다 "hello" 출력 버튼2 click하면 btn_1의 mouseover를 끄면서 해제콘솔 출력

DOCTYPE html> $(document).ready(function(){ $("#gnb>li>a").on({"mouseover":function(){ var idx=$("#gnb>li>a").index(this) var menuIdx = "메뉴"+(idx+1) console.log(menuIdx) }, "mouseout":function(){ console.log("out!") } }) }) Document 메뉴1 메뉴2 메뉴3 메뉴4 태그에 mouseover 될때마다 index값 콘솔출력 태그에서 mouseout 될때마다 "out!" 콘솔출력

DOCTYPE html> $(document).ready(function(){ $("#gnb>li>a").on("click",function(){ var idx=$("#gnb>li>a").index(this) console.log(idx) $("#a").text("메뉴"+(idx+1)) }) }) Document 메뉴1 메뉴2 메뉴3 메뉴4 선택한 메뉴는? #gnb > li > a , 즉 a를 click하면 function 작동 var idx 에 클릭된 index값을 저장 콘솔에 출력 및 하단 #a에 text값으로 들어감

DOCTYPE html> $(document).ready(function(){ $(document).on("keydown",keyEventFnc) function keyEventFnc(e){ //e에 인풋정보가 담김 var direct=""; switch(e.keyCode){ case 37: //왼쪽 방향키 키코드 direct="LEFT"; break; case 38://위쪽 방향키 키코드 direct="TOP"; break; case 39://오른쪽 방향키 키코드 direct="RIGHT"; break; case 40://아래쪽 방향키 키코드 direct="BOTTOM"; break; } if(direct){ $("#user_id").val(direct) console.log(direct) } } })..

DOCTYPE html> $(document).ready(function(){ $("#rel_site").on("change",function(){ $(".txt").val($(this).val()) }) $("#rel_site").on("change",function(){ $(".txt2").text($(this).val()) }) }) Document 사이트 선택 구글 네이버 다음 #rel_site 이 change 될때마다 선택된(this) 값(val)을 .txt에 넣어줌

DOCTYPE html> $(document).ready(function(){ $("#user_id_1,#user_pw_1").on("focus",function(){ $(this).css({"background-color":"grey"}) }) $("#user_id_1,#user_pw_1").on("blur",function(){ $(this).css({"background-color":"#fff"}) }) }) Document focus / blur ID PW focus - 포커스를 받을때 blur - 포커스를 잃을때 발생