스크립트는 다른 프로그램에 의해 번역되거나 수행되는 프로그램이나 명령어들의 나열을 말하며, 위에서 아래순으로 인식하여 맨 아래에 쓰였으나, $(function(){}) 을 사용하면 위치 상관없음
(문서를 다 읽고 실행이 되게끔 해주는 기능)
/*괄호 안의 내용으로 바꿀 때 사용*/ ① .text( ); : 텍스트만 가능 ② .html( ); : 태그도 가능
/*css를 바꿀 때 사용*/ ① 한 가지일 때 : .css('속성','값'); ② 두 가지 이상일 때 : css({속성:'값',속성:'값'})
/*클래스명 추가 및 제거*/ ① .addClass('클래스명'); : 클래스명 추가 ② .removeClass('클래스명'); : 클래스명 제거 ③ .hasClass('클래스명'); : 해당 클래스명을 가지고 있는지 물어보고자 할 때 사용
/*if 조건문*/ if (조건:항상 참일 때){ 실행하고자 하는 기능 }else(그렇지 않을 때){ 실행하고자 하는 기능 }
/*데이터 타입*/ ① 숫자 : 1, 123, 12 ② 문자 : "ㅁ" (따옴표로 묶여있음) ③ 변수 : x (따옴표 사용x) (* 숫자끼리만 연산 가능, 중간에 문자나 변수가 섞이면 다시 숫자 x)
/*추가 설명*/ ① = : 대입 ② == : 비교 ③ === : 완벽한 비교 (데이터 타입까지 비교가능) ④ && : 그리고 ⑤ ||(enter키 위) : 또는 ⑥ 배열(array) : 다양한 값을 담을 수 있음 ⑦ 객체(object) : 복잡한 값을 담을 수 있음
/*<button>, <a> 사용시 주의사항*/ ① <button>의 경우, $('.btn').click(function(){ $('.menu').addClass('on'); } ② <a> $('.btn).click(function(e){ e.preventDefault(); $('.menu').addClass('on'); }
/*마우스이벤트(mouse)*/ * 지정된 태그 요소(혹은 자신)는 물론, 자식 요소가 있다면 그 영역까지 포함 ① mouseover : 마우스가 해당 요소 영역 안에 들어갔을 때 실행 ② mouseout : 마우스가 해당 요소 영역 안에서 나왔을 때 실행 * 지정된 태그 요소(혹은 자신)에만 해당, 자식 요소가 있다면 그 영역은 제외 ③ mouseenter : 마우스가 해당 요소 영역 안에 들어갔을 때 실행 ④ mouseleave : 마우스가 해당 요소 영역 안에서 나왔을 때 실행
/*슬라이드이벤트(slide)*/ ① .slideUp(); : 선택한 요소의 CSS height 속성값을 높여가며 사라지게 함 ② .slideDown(); : 선택한 요소의 CSS height 속성값을 낮춰가며 나타나게 함 ③ .slideToggle(); : 선택한 요소에 .slideUp() 메소드와 .slideDown() 메소드를 번갈아가며 적용함