jQuery를 사용하여 요소 집합을 변수에 저장하기

체인 $('.www').html('!!!')를 구성하는 대신, 먼저 요소 집합 $('.www')을 변수에 저장할 수 있습니다 (저는 이 변수를 elems라고 명명했습니다), 그런 다음 이 변수에 메서드 .html('!!!')를 적용합니다. 예를 들어, 우리의 HTML 코드는 다음과 같습니다:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

JavaScript로 작성된 코드는 다음과 같을 것입니다:

let elems = $('.www');
elems.html('!!!');

편의를 위해 따르는 것이 좋은 관례가 있습니다: jQuery로 래핑된 집합을 포함하는 변수의 이름은 달러 기호로 시작하는 것이 관례입니다. 즉, 우리의 경우 elems가 아니라 $elems여야 합니다.

$elems와 같은 변수 이름이 불편하다면, JavaScript에서 달러 기호는 일반적인 기호이며 어디에서나 사용할 수 있다는 점을 명심하세요. jQuery 및 일부 다른 라이브러리에서와 같이 하나의 $ 기호로 구성된 함수 이름을 만들 수도 있습니다.

그래서, 다시 한 번 말하자면, jQuery 배열을 변수에 저장하려면, 그 변수를 달러 기호로 시작하는 것이 관례입니다. 이는 필수는 아니지만, 이 변수에 요소 그룹이 포함되어 있고 이 변수에 모든 jQuery 메서드를 적용할 수 있다는 것을 한눈에 이해할 수 있게 해줍니다.

아래에 제시된 HTML 코드와 함께 우리의 예제에서 이를 사용해 봅시다:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

이때 JavaScript는 다음과 같습니다:

let $elems = $('.www');
$elems.html('!!!');

마찬가지로 텍스트 삽입을 위해 text 메서드를 적용할 수 있습니다:

$('.www').text('!!!');

모든 h3 요소에 대해 text 메서드를 사용하여 텍스트 '!!!'를 설정하세요.