JQuery 활용2

1. 엘리먼트 제어

1-1. 자식으로 삽입

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

• jquery 설명

1-2. 형제로 삽입

• after(), before(), insertAfter(), insertBefore()

1-3. 부모로 감싸기

• unwrap(), wrap(), wrapAll(), wrapInner()

1-4. 삭제

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

1-5. 치환

• replaceAll(), replaceWith()
• jquery 설명

1-6. 클래스

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

1-7. 속성제어

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

2. 탐색

• jquery 설명

3. 입력요소 값 가져오기

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

• 입력값 조회
  : 파라미터 없이 함수를 호출하면
  현재 설정되어 있는 입력값(value 속성의 값)을
  리턴받는다.

	let value = $("셀렉터").val();

• 입력값 설정
  : 파라미터를 통해 입력값(value 속성 값)을
  설정한다.

	 $("셀렉터").val("내용");

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

	if(!value){...}

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

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

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

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

• 드롭다운 역시 val() 함수를 사용해서 선택한
  요소의 값을 가지고 온다.
• 선택위치 조회
  드롭다운에 포함된 option 태그 중에서 선택된 항목
  (:selected)의 위치를 검사한다.

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

3-3. Radio의 선택항목

• 선택값 조회
• 여러개 항목중에서 선택된 항목을 의미하는 가상 셀렉터
  :checked를 사용하여 선택된 요소에 접근한다
• 라디오 버튼은 여러 개의 항목 중에서 단 하나만
  선택할 수 있으므로, :checked 가상 클래스를 사용하여
  접근하는 요소 역시 단일 요소가 된다.

 	let value = $("셀렉터:checked").val();

3-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 value = $(el[i]).val();
  }

4. 입력요소 제어

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

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

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

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

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

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

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