[포스코 x 코딩온] JS_05 JQuery

jQuery 

제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있는 자바스크립트 라이브러리이다. 

- 대부분의 웹 브라우저에서 지원

- html dom, css 스타일 적용 가능

- 같은 동작이어도 더 짧게 구현 가능

- 오픈 라이센스를 적용해 누구나 사용 가능

but, 현재 jquery를 사용하지 않아도 바닐라 자바스크립트로 구현이 가능하여 사용하지 않는 추세이다! 

그래도 예전에 만든 코드를 유지보수 하기 위해 공부할 필요도 있는 것 같다. 

https://www.samsungsds.com/kr/insights/jquery.html

제이쿼리[jQuery]를 아직도 사용하나요 - 제이쿼리의 현재와 미래 | 인사이트리포트 | 삼성SDS

제이쿼리를 사용하기 위해 공식 사이트에서 가장 최신 버전의 cdn을 head에 넣어 사용했다.  

 

$(선택자).val(설정할 값); 

• 선택자에 입력된 값을 가져올 수도 있고 val에 설정된 값을 지정한다면 선택자에 값을 설정해둔다.  

See the Pen val by Jung ji young (@stop-zero) on CodePen.

 

$(선택자).css('속성', '속성값')

• 선택자의 속성을 지정한다. 

See the Pen jquery-css by Jung ji young (@stop-zero) on CodePen.

 

$(선택자).attr('속성', '속성값');

• 속성 변경

See the Pen jquery-attr by Jung ji young (@stop-zero) on CodePen.

 

$(선택자).text('글자');

• text 변경
• html 태그는 텍스트 처리

See the Pen jquery-text by Jung ji young (@stop-zero) on CodePen.

 

$(선택자).html(html)

• html 변경

See the Pen jquery-html by Jung ji young (@stop-zero) on CodePen.

 

---

요소 추가

$(선택자).append(요소);

• 선택된 요소의 자식 요소 중 마지막 요소로 추가

$(선택자).prepend(요소);

• 선택된 요소의 자식 요소 중 첫번째로 추가

$(선택자).before(요소);

• 선택된 요소의 이전 형제 요소로 추가

$(선택자).after(요소);

• 선택된 요소의 다음 형제 요소로 추가 

---

요소 삭제

$(선택자).remove();

• 선택한 요소 삭제
•  

$(선택자).empty();

• 선택한 요소의 자식 요소 모두 삭제
• 내용만 삭제되고 태그는 남아있다!
• (요소).innerHTML="" / (요소).textContent=""; 동일하게 처리 가능

 

---

요소 탐색

$(선택자).next();

• 선택된 요소 다음에 위치하는 형제 요소 선택
• (요소).nextSibling 이랑 동일하게 처리 

 

$(선택자).prev();

• 선택된 요소 이전에 위치하는 형제 요소 선택
• (요소).previousSibling 이랑 동일하게 처리 

---

클래스 추가/삭제/확인

$(선택자).addClass('클래스명');

• 선택된 요소에 클래스 추가

$(선택자).removeClass('클래스명');

• 선택된 요소에서 클래스 삭제

$(선택자).hasClass('클래스명');

• 선택된 요소에 클래스 여부 확인
• return 값으로 true / false