2024.08.29.JS - jQuery 사용하기

https://jquery.com/

jQuery

1. 다운로드 후 저장해서 사용 (다운로드 후 원하는 페이지에 다운로드 주소를 넣으면 됨.)

2.CDN 활용하기 (코드 복사하여 원하는 페이지에 붙여서 사용함.

---

* ready() 메서드 활용하기

1. jQuery 객체를 통해 document 객체의 ready 이벤트 핸들링 : 사용빈도 없음.

    jQuery(document).ready(function() {
        alert("문서로딩완료!!-jQuery");		
     });

2. jQuery 객체명 대신 $ 기호사용

 	$(document).ready(function() {
 		alert("문서로딩완료22-jQuery");		
 	});

3. document 객체 지정 및 ready 이벤틑 메서드 호출 과정 모두 생략
   => $(function() {});
   => document 객체의 ready 이벤트 전용 핸들러

	$(function() {
		alert("문서로딩완료33-jQuery");		
	});
	

---

* 선택자(Selector)

- 문서 객체 내의 요소 선택을 위한 용도로 사용하는 구성 요소

- 자바스크립트에서 사용하는 document.getElementByXXX("선택자명") 또는  document.querySelector("선택자") 메서드 호출과 달리  jQuery 에서는 $("선택자") 형태로 대상을 지정하므로 문장이 간결해짐

 

< 선택자 사용 기본 문법 >

$("선택자" 또는 "*").메서드명("속성명"); => 특정 속성값 확인

$("선택자" 또는 "*").메서드명("속성명", "속성값");

   => 특정 속성값 변경, 선택자를 지정하는 대신 * 지정 시 문서 내의 모든 요소 지정

 

● 지정한 요소에 대한 CSS 속성 변경하는 기본 문법

   $("선택자").css("속성명", "속성값");

   - 문서내의 전체요소(*)에 대한 CSS 속성값 변경

      => css() 메서드 활용 (공식문서 : https://api.jquery.com/css/#css-propertyName)

1. 직접 선택자 - 특정 대상(요소)을 직접 지정하기 위한 선택자

1) 아이디(#) - 페이지 내에서 유일한 요소 => $("#선택자명")

2) 클래스(.) - 복수개의 동일한 요소 => $(".선택자명")

3) 태그 - 동일한 태그를 갖는 복수개의 요소 => $("태그명")

4) 태그 속성 - 동일한 태그들 중 특정 속성만 지정 => $("태그명[속성명]")

5) 태그 속성 값 - 동일한 태그의 동일한 속성들 중 특정 속성값 지정 => $("태그명[속성명=값]")

 

 

2. 인접관계선택자

1) 자식 선택자(>) - 특정 선택자의 바로 하위 요소(자식)선택
     => $("부모선택자 > 자식선택자")
2) 자식 또는 후손선택자(공백) - 특정 선택자의 하위에 있는 모든 일치하는 요소 선택
     => $("부모선택자  자식선택자")

// 자식선택자와 후손선택자의 차이점 비교
// 1) 자식선택자(>) 활용하여 id 선택자 "divBox" 요소의 자식 div  요소들 글자색 "blue" 로 변경
$("#divBox > div").css("color", "blue"); // 1번2번3번 변경됨

// 2) 후손선택자(공백) 활용하여 id 선택자 "divBox" 요소의 자식 div  요소들 글자색 "pink" 로 변경
$("#divBox  div").css("color", "green"); // span 태그 제외한 나머지 모두변경됨

---

* 특정 요소에 대한 조작 이벤트

1. html()
   - HTML 문서 내에서 지정된 범위(선택자) 안의 모든 요소를 가져오거나 표시하는 메서드
   - 요소를 가져올 때 주석까지 포함해서 모든 요소를 가져오거나 표시(태그 포함)
   - 단, XML 문서를 대상으로는 사용 불가
   - 자바스크립트의 innerHTML 속성과 거의 동일(document.xxx.innerHTML)
2. text()
   - html() 메서드와 달리 HTML 문서 및 XML 문서 모두 사용 가능
   - 대상 요소 내의 모든 문자열을 가져오거나 표시 가능(태그 제외)
   - 단, 브라우저마다 줄바꿈이나 공백 등이 달라질 수 있음
   - 자바스크립트의 innerText 속성과 거의 동일(document.xxx.innerText)
3. empty() 
   - 지정된 선택자 내의 하위 요소 제거(비움)

   - 지정된 선택자 요소내의 하위요소(=내부요소)들만 제거
4. remove()
   - 지정된 선택자와 선택자 내의 하위 요소 모두 제거 (자기자신도 제거함)

 

* 지정한 대상의 특정 위치에 내용 추가하기
1. append()
   - 지정한 내용을 '선택자 내부'의 '마지막'에 추가
   - appendTo() 함수와 문장 구조의 차이를 제외하면 기능은 동일함
   - $('선택자').append('추가할내용');
     $('추가할내용').appendTo('선택자');
2. prepend()
   - 지정한 내용을 '선택자 내부'의 '처음'에 추가
   - prependTo() 함수와 문장 구조의 차이를 제외하면 기능은 동일함
   - $('선택자').prepend('추가할내용');
     $('추가할내용').prependTo('선택자');
3. after()
   - 지정한 내용을 '선택자 요소' 외부의  '뒤'에 삽입
   - insertAfter() 함수와 문장 구조의 차이를 제외하면 기능은 동일함
   - $('선택자').after('삽입할내용');
     $('삽입할내용').insertAfter('선택자');
4. before()
   - 지정한 내용을 '선택자 요소' 외부의 '앞'에 삽입
   - insertBefore() 함수와 문장 구조의 차이를 제외하면 기능은 동일함
   - $('선택자').before('삽입할내용');
     $('삽입할내용').insertBefore('선택자');

 

eq(인덱스)
- 선택자를 포함하여 형제자매 요소 탐색
- 인덱스는 0부터 시작하며, 인덱스에 해당하는 순서에 위치한 요소를 가져옴(리턴)
- 음수는 뒤에서부터 탐색

 

* attr('HTML속성명')
- 선택자에서 해당 속성의 값을 가져오거나 추가
- HTML 태그 속성값 자.체.를 가져오며 상태에 따라 변하지 않음
  ex) 체크박스 checked="checked" 속성값을 가져올 때 체크상태가 변해도 checked 임
      만약, checked 속성이 표기되어 있지 않으면 해당 속성이 없으므로 undefined
- 파라미터 2개('HTML속성명', '속성값')를 지정 시 지정한 속성을 지정한 속성값으로 변경 또는 추가
* prop('Javascript속성명')
- 선택자에서 해당 속성의 값에 대한 상.태.를 가져오거나 추가
- 값 자체를 다루지 않고 해당 속성의 값에 대한 상태를 true/false 값으로 리턴
- attr() 함수와 유사하나 HTML 태그의 상태에 따라 결과값이 변함
  ex) 체크박스 checked="checked" 의 속성값을 가져올 때
       체크박스 체크 시 true 리턴, 해제 시 false 리턴
- HTML 속성명이 두 단어 이상의 조합일 경우 Camel-case 표기법처럼 사용
   ex) HTML readonly 속성 = 자바스크립트 readOnly 로 표기
         jQuery에서 해당  속성명 지정시 그대로 readonly로 표기함.   
- 파라미터 2개('자바스크립트 속성명', '속성값')를 지정 시 지정한 속성을 지정한 속성값으로 변경 또는 추가

  ex. attr 사용해야 하는 예시

<input type="text" id="id2" placeholder="prop()"><br>

<script>
$("#id2").attr("type", "password");// text->password 타입으로 변경됨! 
// 하지말아야 할 예시
$("#id2").attr("readonly", ""); // 속성해제 불가능
// type은 바꿀게 많아서 되고 readonly는 바꿀게 하나니까 안됨
</script>

<<<<<<<<<<<결론>>>>>>>>>>
두메서드는 비슷한 동작은 수행하는 것 같지만  대상 요소의 "상태를" "직접적으로 변경(조작)"할 때는 prop() 메서드를 사용하고 (-> 상태가변하면) 대상요소에 특정 속성을 추가하거나 속성값을 변경할 때는 attr() 메서드를 사용하자.(-> 속성이 변하면)

Q. 셀렉트박스 태그의 자식요소(option태그) 중 첫번째 옵션태그를 지정하여 해당 요소의 "selected" 속성 "상태"가  true 인지 판별 => prop() 메서드 활용

if($("#selectBox > option").eq(0).prop("selected"){
	alert("과목을 선택하세요222");
	$("#selectBox").focus(); // 셀렉트박스에 포커스 요청
} else {
	console.log(subject);
}