(script) jQuery

kjn·2023년 3월 2일
0
  • 자바스크립트(JavaScript) : 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어(개발자)
  • 제이쿼리(jQuery) : 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리

스크립트는 다른 프로그램에 의해 번역되거나 수행되는 프로그램이나 명령어들의 나열을 말하며, 위에서 아래순으로 인식하여 맨 아래에 쓰였으나, $(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() 메소드를 번갈아가며 적용함

* 변수선언문

profile
초심

0개의 댓글