1. 태그 선택하기 - $('selector')

const h1Elem1 = document.querySelector('h1');	// JavaScript로 태그 선택
const h1Elem2 = $('h1');						 // jQuery로 태그 선택

h1Elem1 === h1Elem2

jQuery에서는 $('selecto')로 선택자를 지정할 수 있다.

2. 태그 속성과 HTML 값을 확인하고 변경하기

attr() - 태그 속성의 값을 가져오고 변경하기

attr() 사용방법

$('selector').attr('태그의 속성 key명', '세팅할 value')

attr()를 이용해서 값 가져오기

$('div1').attr('style')

attr()를 이용해서 값 변경하기

$('div1').attr('style', 'color : red')

html(), text() - 태그 내부의 텍스트 값을 가져오고 변경하기

• .html() : 해당 태그 내부의 html 태그가 반영된 텍스트 값이며 html 영역의 html 값을 알기 위한 함수이다. 화면에 html이 적용된다.
• .text() : 해당 태그 내부의 텍스트 값이며 html 코드 자체를 화면에 출력한다.

val() - 입력 태그의 값을 가져오고 변경하기

jQuery의 .val()는 JavaScript의 .value와 역할이 비슷하다. 주로 select와 input의 값을 얻기 위해 사용된다.

val() 사용방법

$('selector').val('변경할 값');

val()를 이용해서 값 가져오기

let txt1 = document.getElementById('txt1').value;	  // JavaScript로 값 가져오기
let txt2 = $('#txt1').val();						   // jQuery로 값 가져오기 

val()를 이용해서 값 변경하기

txt1.value = 'text2';			// JavaScript로 값 변경하기
$('#txt1').val('text2');		 // jQuery로 값을 가져옴과 동시에 변경하기

---

해당 포스팅은 인프런 - 퍼블리셔, 신입 프론트 개발자를 위한 실무에서 써먹는 실전 jQuery 설명서의 내용을 보며 공부한 것을 정리한 내용입니다.

참고사이트

인프런 - 퍼블리셔, 신입 프론트 개발자를 위한 실무에서 써먹는 실전 jQuery 설명서