jQuery란 무엇인가?

1-1. 라이브러리

• 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 "라이브러리" 라고 한다.
• "자주 사용"하는 코드들을 "재사용"할 수 있는 형태로 가공해서 프로그래밍 "효율을 높여주는" 코드

1-2. jQuery

• jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다.
• 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트를 효율적으로 제어할 수 있는
  다양한 수단을 제공하는 "자바스크립트 라이브러리"

1-3. api 문서

• J Query 사용설명서 같은 문서이다.

2. jQuery 제어의 대상 찾기

• jQuery : $로 표현한다.
• <h1>태그 요소에 대한 획득
  let mytag = $("h1");
• hello라는 css클래스를 갖는 요소에 대한 획득
  let mytag = $(".hello");
• hello라는 id속성을 갖는 요소에 대한 획득
  let mytag = $("#hello");
• 여러개 선택

$('a,b')	//a태그와 b태그

• 자식/자손 선택자
  $('a b')
• 태그 속성
  $('tag_name[name=태그명]');

3. 이벤트

3-1. 이벤트를 정의하는 방법

$("셀렉트").이벤트이름(function(){
	.. 처리내용..
}); 

3-2. 마우스 이벤트

• Mouse Enter + Mouse Leave 이벤트
• 이를 위한 복합적인 hover 이벤트를 제공

3-3. 키보드 이벤트

1. keypress

• 한글에 대해서 동작하지 않는다.

2. keydown

• 한글, 영문, 띄어쓰기 등에 대해 모두 1회씩 이벤트 발생한다.
• 누르고 있는 동안 down 이벤트가 발생
• 키 코드가 있다.

4. 태그 내 문장 삽입

$("셀렉터").html();

• 셀렉터 태그 내에 존재하는 자식 태그를 통째로 읽어올때 사용되는 함수로 태그를 동적으로 추가할 때 주로 사용
  $("셀렉터").text();
• 셀렉터 태그 내에 자식 태그들 중에 html 태그는 모두 제외한 채 문자열만 출력하고자 할때 사용하는 함수

5. effect효과

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

6. HTML속성제어

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

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

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

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

7. 요소의 속성값 제어

7-1. 속성값 읽기

• html 태그 요소의 특정 속성값을 얻기 위해서는 attr() 함수를 사용한다.
  let 변수 = $("셀렉터").attr("속성이름");

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

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

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

8. 페이지가 로드될 때

• onload

8-1. 자바스크립트에서 표현

window.onload = function(){
	...
}

8-2. jQuery에서 표현

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

8-3. jQuery에서 좀 더 축약버전으로 표현

$(function(){
	...
});

9. CSS 속성 제어

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

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

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

9-2. CSS클래스의 적용 여부 알기

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

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

• 요소에 특정 css클래스를 적용할 경우, addClass() 함수를 사용

• 두개 이상 클래스를 한번에 적용할 경우 공백으로 구분하여 지정
  $("요소").addClass("클래스이름");

• HTML태그 요소에 적용된 특정 CSS 클래스를 제거할 경우 removeClass()함수를 사용한다.

• 두 개 이상의 클래스에 대한 처리일 경우 공백으로 구분
  $("요소").removeClass("클래스이름");

9-4. toggleClass();

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

9-5. this의 용법

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

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

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

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

• .btn클래스를 갖는 요소 중에서 #mybtn만 제외
  $(".btn").not($("#mybtn")).css(....);
• button태그 중에서 세번째 요소만 제외
  $(".btn").not(".btn:eq(2)").css(...);
  

10. 엘리먼트 제어

엘리먼트 = 태그 요소

10-1. 자식으로 삽입

append(), appendTo(), html()
prepend(), prependTo(), text()

10-2. 형제로 삽입

after(), before(), inserAfter(), insertBefore()

10-3. 부모로 감싸기

unWrap(), wrap(), wrapAll(), wrapInner()

10-4. 삭제

detach(), empty(), remove(), unwrap()

10-5. 치환

replaceAll(), replaceWith()

10-6. 클래스

addClass(), hasClass(), removeClass(), toggleClass()

10-7. 속성 제어

• attr(), prop(), removeAttr(), removeProp(), val()

11. 탐색(traversing)

12. 입력요소 값 가져오기

12-1. val()함수의 사용

1. 입력값 조회

• 파라미터 없이 함수를 호출하면 현재 설정 되어있는 입력값 (value 속성 값)을 리턴받는다.
  let value = $("셀렉터").val();

2. 입력값을 설정

• 파라미터를 통해 입력값(value 속성 값)을 설정한다.
  $("셀렉터").val("내용");

3. 조회한 입력값의 존재여부를 if문으로 검사하면 입력여부를 알수있다.

if (!value) {....}
//value 값이 빈 값이라면 유사 false의 형태가 되는데, if문의 조건절을 true일때 if문을 실행하여 유효성검사를 진행할 수 있기 때문에 value값에 !을 부여한다.

4. focus()함수의 사용

• 입력요소에 포커스를 강제로 설정한다.
  $("셀렉터").focus();

12-2. 셀렉트박스 입력값

만약, <option> 요소에 value 속성이 없을 경우
태그 안의 내용을 가져오기 때문에 값이 필요없는 항목이더라도 반드시 공백을 지정해야한다.

<select>
	<option value="">--선택하세요--</option>
	<option value="1">항목1</option>
</select>

드롭다운 역시 val()함수를 사용해서 선택한 <option>요소의 값을 가지고 온다.
선택 위치 조회

• 드롭 다운에 포함된 <option>태그 중에서 선택된 항목(:selected)의
  위치를 검사한다.

$("셀렉터 > option:selected").index();

12-3. Radio의 선택항목

선택값 조회

• 여러개의 항목 중에서 선택된 항목을 의미하는 가상 셀렉터 :checked를
  사용하여 선택된 요소에 접근한다.

let value = $("셀렉터:checked").val();
// name 속성값으로 접근

12-4. checkbox 선택항목

• 체크박스는 여러개의 항목들 중에서 복수 선택이 가능한 요소이다.
• 사용자가 선택한 항목에 대한 접근은 가상셀렉터 :checked 를 사용해야한다.
• 체크박스는 복수 선택이 가능하기 때문에 접근한 요소는 배열 상태가 된다.

<input type="checkbox" name="hello" class="mycheck" value="1"/>
<input type="checkbox" name="hello" class="mycheck" value="2"/>
<input type="checkbox" name="hello" class="mycheck" value="3"/>

let el = $("셀렉터:checked");
let el = [
	<input type="checkbox" name="hello" class="mycheck" value="2"/>
	<input type="checkbox" name="hello" class="mycheck" value="3"/>
];

• 가져온 요소가 배열이기 때문에 반복문으로 유효성검사를 처리해야 한다.
• 배열의 요소들을 jquery 객체로 변환하여 val()함수를 호출

for(let i=0; i<el.length; i++){
	let val = $(el[i]).val();
};

13. 입력요소 제어

13-1. HTML요소에 대한 반복 처리가 필요한 경우

• $.each()함수는 HTML요소의 수 만큼 콜백함수를 호출하면서 배열의 인덱스와 원소를 파라미터로 전달한다.

$.each(el, function(index, item){
	// index는 배열의 위치
	// item은 배열의 각 원소
	let value = $(item).val();
}); 

13-2. 포커스 관련 이벤트 처리

• 요소에 포커스가 들어갔음을 감지하는 이벤트
• focus()

13-3. 포커스가 빠져 나왔음을 감지하는 이벤트

• blur() 함수는 포커스가 빠져나왔음을 감지
• blur()

14. change()

14-1. change란?

• 요소의 입력, 선택 상태가 변경되었음을 감지하는 이벤트

텍스트를 입력하는 요소일 경우

• 내용이 변경되고 포커스가 빠져나올때 이벤트가 발생한다.

체크박스나 라디오 버튼의 경우

• 선택 상태가 변경 즉시 발생한다.

드롭다운의 경우

• 선택 상태가 변경 즉시 발생한다.

15. 프로퍼티를 제어하는 prop()함수

attribute : 값을 갖는 속성

• 설정값 조회 : attr(key)
• 값 설정 기능 : attr(key,value)
property : 값을 갖지 않는 속성
• 설정값 조회 : prop(key)
• 값 설정 기능 : prop(key,value)

15-1. 프로퍼티 설정 예시

특정 입력항목에 대한 비활성 처리

• HTML태그에서 disabled 속성 부여하면, 해당 요소가 비활성화 되므로,
  Jquery에서는 true값을 부여해야 비활성화된다.
  $("셀렉터").prop("disabled",true);

특정 입력항목에 대한 활성 처리
$("셀렉터").prop("disabled",false);

특정 체크박스에 대한 선택 처리

• <input>에 checked 속성이 부여되면 선택 상태가 되므로, Jquery에서는 true값을 부여해야한다.
  $("#셀렉터").prop("checked", true);

체크박스 체크 해제
$("#셀렉터").prop("checked", false);

2번째 드롭다운에 대한 선택 처리 (0부터 카운트)

• 드롭다운은 <option> 중에서 n번째 항목과
  같은 형태로 접근해야 한다.
  $("#셀렉터 > option:eq(2)").prop("selected", true);