jQuery - 변수와 제이쿼리

어느 언어에서 마찬가지로 변수를 이해하는 건 매우 중요합니다. 자바스크립트가 기초가 되는 언어인 만큼 프로그래밍에 있어 중요한 부분입니다.

변수를 이용하면 어떤 값을 저장해 두었다가 필요에 따라 꺼내 쓸 수 있습니다. 자바스크립트에서 변수는 다음과 같이 정의합니다.

var name = '안녕 하보니';

제이쿼리와 어떻게 조합되는지 다음 예를 보면 알 수 있습니다.

var name = $("#use-ntn");
name.css("background", "yellow");

제이쿼리도 하나의 객체이기 때문에 특별한 조합이 가능한 이유입니다. 변수는 한번쓰고 버리는 것이 아니라 그 뒤에도 변수를 통해 계속 재사용할 수 있습니다.

var name = $("#use-ntn");

name.css("background", "yellow");
name.css("border", "1px solid");
name.css("color", "red");

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  var content = $("#use-nth");
  var age = content.find(".age");
  var img = content.find("img");
  var name = content.find(".name");

  age.css("background", "yellow");
  img.css("border", "10px solid");
  name.css("background", "#CCC");
});
</script>

<div id="use-nth">
  <div class="age">30</div>
  <img src="..."/>
  <div class="name">하보니</div>
</div>