JQ day 03

1-2. 속성값 변경, 추가
#("요소").css("속성이름","값");
$("요소").css({"속성이름":"값","속성이름":"값"});

1-3. css에 클래스의 적용 여부 알기

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

1-4. 클래스의 적용과 해제

• 요소의 특정 CSS 클래스를 적용할 경우, addClass()를 사용한다.
• 두개 이상의 클래스를 한번에 적용할 경우 공백으로 구분하여 지정한다.
  -> $("요소").addClass("클래스이름");
  -> $("요소").removeClass("클래스이름");
• HTML 태그 요소에 적용된 특정 CSS클래스를 제거할 경우 removeClass()함수를 사용한다.( 두개 이상 적용시 공백 )

if($("요소").hasClass("클래스이름")){
$("요소").removeClass("클래스이름")
}else{
$("요소").addClass("클래스이름")
}

=> 구문 축약
$("요소").toggleClass("클래스이름");

1-5. this의 용법

• 여러개의 요소를 의미하는 CSS 셀렉터를 사용하여 이벤트를 정의한 경우에, 대상 요소들은 모두 동일한 이벤트를 발생시킬수 있다. 이 때 $(this)는 현재 이벤트가 발생한 단 하나의 요소를 가라킨다.

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

• $("요소")객체의 not(this)함수는 여러 HTML요소들 중 이벤트가 발생한 자신을 제외한 나머지 객체들을 가리킨다.

1-7. not() 함수의 기능은 "~~중에서 대상 제외"라는 의미이다

• this뿐만 아니라 다른 jQuery 객체나 다른 객체를 지정하기 위한 selector에 대해서도 적용할 수 있다.

• .btn 클래스를 갖는 요소 중에서 #mybtn만 제외
  -> let mybtn = $("#mybtn");
  -> $(".btn").not(mybtn).css(....);
• $$(".btn).not($(#mtbtn")).css(...);

2. 엘리먼트 제어
   2-1. 자식으로 삽입.

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

2-2. 형제로 삽입.

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

2-3. 부모로 감싸기.

• unwrap(), wrap(), wrapAll(), wrapinner()

2-4. 삭제.

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

2-5. 치환.

• replaceAll(), replaceWith()

2-6 클래스.

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

2-7. 속성제어

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

  3. Input 요소의 입력값 검사

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

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

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

• 조회한 입력값의 존재 여부를 if문으로 검사하면 입력여부를 알 수 있다.
  -> let value = $("셀렉터").val();
  if(!value){
  ...
  }

-focus() 함수의 사용
-> focus() 함수는 입력 요소에 포커스를 강제로 설정
$('셀렉터').focus();

3-2. 드롭다운의 입력값

• 선택 값 조회하기
  -> 만약 < option > 요소에 value 속성이 없을 경우 태그 안의 내용을 가져오기 때문에 값이 필요없는 항목이더라고 반드시 공백을 지정해야 한다.
  -> 드롭다운 역시 val() 함수를 사용하여 선택한 < option > 요소의 값을 가져온다
  let value = $("#foo").val();
  -> 선택 위치 조회
  드롭다운에 포함된 option 태그중에서 선택된 항목(:selected)의 위치를 검사한다.

$("#foo > option:selected").index();

3-3. Radio

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