[TIL] 3일차

 

jQuery에 다양한 메서드들을 알게되어서 그 새로운 메서드 3가지를 여기에 정리해야겠다.

 

• text()

: 선택한 요소의 텍스트 콘텐츠를 가져오거나 설정한다.

만약 값을 설정하려면 매개변수로 값을 전달하면 된다.

<div id="textContent">
    <p> 이건 텍스트 창! </p>
</div>

//textContent의 <p> 요소의 텍스트 설정하기
const textArea = $('#textContent p').text();
console.log(textArea); 
//출력 : 이건 텍스트 창!

// #textContent <p> 요소의 텍스트 설정하기
$('#textContent p').text('안녕하세요!');
//  화면에 안녕하세요! 로 바뀐다.

 

 

• find()

: 선택한 요소의 하위 요소를 찾는다.

<div id="textContent">
	<div class="wrap-content">
		<p>텍스트 창</p>
		<p>코멘트 창</p>
		<p>버튼 창</p>
	</div>
</div>

 

const container = $('#textContent').find('p');

//글자 빨간색으로 바꾸기
container.css('color', 'red');

 

 

• data()

HTML 요소에 연결된 데이터를 가져오거나 저장한다.

$('#textContent').data({
	name1: 'Kim',
	name2: 'Park',
	name3: 'Lee',
});

// 여러 데이터를 한 번에 가져오기
const dataObject = $('#textContent').data();
	console.log(dataObject.name1); //Kim
	console.log(dataObject['name2']); //Park
	console.log(dataObject['1']); 
    //undefined
    // 왜? 문자열(name1)로 키를 생성했기 때문에 dataObject[1]은 키가 '1'인 데이터를 찾아보게 된다.

 

 

제이쿼리는 정말 간편한 것 같다.

아직도 모르는게 너무 많다..