jQuery css, 속성, 엘리먼트 등

1. css 제어
1-1. 속성값 읽기

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

1-2. 속성값 변경 및 추가

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

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

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

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

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

• 요소에 특정 CSS 클래스를 적용할 경우, addClass를 사용한다.

• 두 개 이상의 클래스를 한번에 적용할 경우 공백으로 구분하여 지정한다.

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

• HTML 태그 요소에 적용된 특정 CSS 클래스를 제거할 경우, removeClass() 함수를 사용한다. (두 개 이상 적용시 공백)

  	$("요소").removeClass("클래스 이름")
  
  	if($("요소".hasClass("클래스이름")){
  		$("요소").removeClass("클래스이름")
  
  	} else {
  		$("요소").addClass("클래스이름")
  	}
  
  	=> 구문 축약
  
  	$("요소").toggleClass("클래스 이름")

1-5. this의 용법

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

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

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

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

• this뿐만 아니라 다른 jQuery 객체나 다른 객체를 지정하기 위한 selector에 대해서도 적용할 수 있다.
• .btn 클래스를 갖는 요소 중에서 #mybtn 만 제외

  	let mybtn = $("#mybtn");
  	$(".btn").not(mybtn).css(....);
  	$(".btn").not($("#mybtn")).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. 속성제어

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

3. 탐색

4. input 요소의 입력값 검사
   4-1. val() 함수의 사용

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

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

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

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

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

  	if(!value){
  		...
  	}	

• focus() 함수의 사용
  -> focus()함수는 입력 요소에 포커스를 강제로 설정

  	$('셀렉터').focus();

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

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

-> 드롭다운 역시 val() 함수를 사용하여 선택한 <option 요소의 값을 가져온다.

let value = $("#foo").val();

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

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

4-3. Radio

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

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