시사 JQuery 이벤트

이벤트

click 

click - 요소 클릭시  $(".b").click(function(){ });

hover 

hover - 요소에 마우스 올리고 뺏을 시  $("div").hover( function(){} , function(){} ); ↓ $("div").hover( function(){ 마우스 오버 시 명령 } , function(){ 마우스 뺏을 시 명령 } );

 toggle

toggle - 클릭할 때마다 실행 될 함수를 차례대로 설정 가능.  < hide() show() 함수를 번갈아 실행하는 toggle() 메서드로도 사용가능 > JQuery 라이브러리 1.8.3버전 까지만 실행 됨.(1.91 이후 부터는 실행 안됨) $("p").toggle(function(){},function(){},function(){}); $("p").toggle(function(){  첫 번째 클릭 시 명령 },function(){  두 번째 클릭 시 명령 },function(){  세 번째 클릭 시 명령 });

mouse over/leave

mouseover : 노드에 마우스가 진입했을 때 발생.  mouseleave : 노드에서 마우스가 벗어났을 때 발생.

focus in/out

focusin : 포커스 가능 대상에 포커스 됐을 때 focusout : 포커스를 벗어 났을 때

e.pageY

e.pageY : 마우스의 y 위치를 구하고 싶을때 $("div").mousemove(function(e){   //div에서 마우스 움직일 때  var pos = epageY .....  // 마우스의 y 자표 값을 pos에 저장 });

substr(start, length)

substr(start, length) : start 매개 변수부터 시작하여 length 개수만큼 문자열을 가져 옮. var test = "btn2"; //test 변수에 "btn2" 저장 test.substr(3,1); //3이므로 test의 네 번째(index 0부터 시작)부터    //1이므로 하나의 값만 가져옮 //즉, btn2에서 네 번째 문자 값이면서  하나만 가져오므로 2만 가져 옮.

data-

data- : 사용자가 속성 지정할 수 있음. <a href="#" data-color="#f00"></a> // a 태그 안에 data-color="#f00" 라는 내가 만든 속성과 값 지정.

Interval()

setInterval() : 일정 시간마다 같은 명령 을 반복 실행. var timer = setInterval("moveBox()",1500) //1.5초 마다 moveBox() 라는 명령을 실행 함.

clearInterval() : 실행중인 setInterval을 취소. clearInterval(timer); //timer 이라는 이름의 셋인터벌 취소함.

Math

Math.reandom() :0~1사이의 모든 수을 반환함. Math.ceil() : 올림 함수로서 소수점 이하를 없애고 올림 처리  ex)3.789 => 4  7.1567=>8

for문

for문 : 반복되는 명령 사용 시. $("button").click(function()){ for(var i=0; i<7; i++){ //#box 1~7  $("#box"+i).css("background","#f60"); //배경색을 주황색으로 }

if문

if문 : 조건을 검사할 경우 사용. function change1(){ if(n>5){ //만약 n이 5보다 클 경우  $("#box").css("color","#f60"); //#box의 글자색을 주황색으로 }else if(n<5 && n>3){ $("#box").css("color","#00f"); //#box 글자색을  파란색으로 }else{ //n<3일 경우 $("#box").css("color","#0f0"); //#box를 글자색을 녹색으로 }  }