JQuery 활용

1. 이벤트

1-1. 마우스이벤트

• MouseEnter + MouseLeave 이벤트
• 이를 위한 복합적인 hover 이벤트를 제공

1-2. 키보드 이벤트

• keypress
  : 영문, 숫자, 특수문자, 띄어쓰기 키에 대해 반응. 한글x
• keydown
  : 모든 키에 대해 반응

2. 태그 내에 문장 삽입

• $("셀렉터").html()
  : 셀렉터 태그 내에 존재하는 자식태그를 통째로 읽어올 때 사용되는 함수.
  태그를 동적으로 추가할 때 주로 사용

• $("셀렉터").text()
  : 셀렉터 태그 내에 존재하는 자식태그들 중에 html 태그는 모두 제외한 채 문자열만 출력하고자 할 때 사용하는 함수

3. effect 효과

• show() : 선택한 요소를 나타나게 한다.
• hide() : 선택한 요소를 사라지게 한다.

4. html 속성 제어

4-1. 이벤트 처리 함수 안에서 자기 자신을 판별하기

• 이벤트에 의해서 실행되는 함수 영역 안에서는 특수 키워드 this를 사용할 수 있다.
• 이 키워드를 $(this) 함수에 전달하면, 이벤트가 발생한 자기 자신을 감지할 수 있다.

4-2. 나는 몇 번째 요소인가

• 특정 객체에 대하여 index()함수의 리턴값을 사용하면 자신이 속한 부모 태그 안에서 태그 종류의 구분 없이 자신이 몇 번째 요소인지를 알 수 있다.
• index() 함수는 요소를 0부터 카운트한다.
• 태그 종류에 상관 없이 무조건 부모 요소 안에서 몇번째 항목인지를 판별한다.

5. 요소의 속성값 제어

5-1. 속성값 읽기

• html 태그 요소의 특정 속성값을 얻기 위해서는 attr()함수를 사용한다.

	let 변수 = $("셀렉터").attr("속성이름");

5-2. 속성값 변경/추가 하기

• HTML 태그 요소의 특정 속성값을 지정할 경우에도 attr()함수를 사용한다

	$("요소").attr("속성이름", "값");
	$("요소").attr(
		"속성이름" : "값",
		"속성이름" : "값",
		"속성이름" : "값"
	);

6. 페이지가 로드 될 때

6-1. javascript

  window.onload = function(){~}

6-2. jQuery

  $(document).ready(function(){~})

6-3. jQuery 에서의 축약 버전

  $(function(){~})

7. CSS 속성 제어

7-1. 속성값 읽고 변경/추가하기

• HTML 태그 요소에 적용된 특정 속성값을 얻기 위해서는 css() 함수를 사용한다.

	$("요소").css("속성이름","값");
	$("요소").css(
		"속성이름" : "값",
		"속성이름" : "값",
		"속성이름" : "값"
	);

7-2. CSS 클래스의 적용 여부 확인

• HTML태그 요소의 특정 클래스 적용 여부는
  hasClass() 메서드의 리턴값(boolean)으로 파악할
  수 있다.

  let 변수 = $("요소").hasClass("클래스이름");

7-3. 클래스의 적용과 해제

• 요소에 특정 css클래스를 적용할 경우, addClass()함수를 사용
• 두 개 이상의 클래스를 한번에 적용할 경우 공백으로 구분하여 지정

	$("요소").addClass("클래스이름");

• HTML태그 요소에 적용된 특정 CSS 클래스를 제거할 경우 removeClass() 함수를 사용한다.
• 두 개 이상의 클래스에 대한 처리일 경우 공백으로 구분

	$("요소").removeClass("클래스이름");

7-4. toggleClass();

• HTML 태그 요소에 CSS클래스에 대한 적용과 해제를 자동으로 반복하고자 할 경우, toggleClass() 함수를 사용할 수 있다.
• 두 개 이상의 CSS 클래스를 동시에 처리할 경우 공백으로 구분한다.

	$("요소").toggleClass("클래스이름");

7-5. this의 용법

• $(this)는 현재 이벤트가 발생한 단 하나의 요소

7-6. this를 부정하는 not(this)

• 이벤트가 발생한 자신을 제외한 나머지 객체들을 가리킨다.

7-7. 여러 패턴 확인하기

• .btn 클래스를 갖는 요소 중에서 #mybtn만 제외

	$(".btn").not($("#mybtn")).css(~);

• button 태그 중에서 세번째 요소만 제외

	$(".btn").not(".btn:eq(2)");