PinkCoding

CLASS web

jQuery

변수 선언

제이쿼리에도 변수가 있습니다.

지금까지 아이디, 클래스 혹은 태그를 선택할때 $('SELECTOR');를 사용했었죠.

이렇게 셀렉터를 선언할때마다 컴퓨터는 html소스를 확인하고 또 선언되면 또 확인하고 이작업을 반복한다고 합니다.

하지만 이것을 변수로 선언한다면 그렇지 처음 선언할때 한번만 불러오고 그 정보가 변수에 저장 되게 됩니다.

지금처럼 간단하고 짧게 작업을 하면 속도에 거의 무리를 주지 않지만 대량의 소스가 쓰일때는 사이트 작동시 버벅일 수가 있습니다.

그럼 변수를 선언해 봅시다. 자바스크립트와 같이 var로 변수를 선언하게 됩니다.

그러면 hello 라는 클래스가 있다고 가정하고 이 hello 클래스를 일단 선언해 봅시다.

$('.hello');

기존에는 위와 같이 선언을 한후 어떠한 함수를 붙였죠.

하지만 변수를 선언하면

var hello = $('.hello');

var은 변수를 선언할때 사용하는 명령어 이고요. hello는 사용자가 임의로 선언하는 이름입니다. 그리고 hello가 가진 의미는 $('.hello'); 라는 뜻입니다.

그럼 어떻게 활용할까요?

var hello = $('.hello');
hello.hide(); ex) 변수를 선언하지 않고 사용한다면 $('.hello').hide();
hello.show(); ex) 변수를 선언하지 않고 사용한다면 $('.hello').show();

위와 같이 활용 할 수 있습니다.

즉 hello 라는 변수를 작성함으로써 $('.hello')를 작성하는것과 같습니다.

그럼 변수를 사용해서 예제를 통한 연습을 해봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</title>
<style>
.yellow_circle{width:40px;height:40px;border-radius:20px;background:yellow}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  var yellow_circle = $('.yellow_circle');
  var yellow_circle_word = $('.yellow_circle_word');
  yellow_circle.mouseenter(function(){
    yellow_circle_word.text('마우스 포인터가 노란색원 안에 있습니다. ');
  });
  yellow_circle.mouseleave(function(){
    yellow_circle_word.text('마우스 포인터가 노란색원을 떠났습니다. ');
  });
});
</script>
</head>
<body>
<div class="yellow_circle"></div>
<p class="yellow_circle_word">노란색 원에 마우스 포인터를 올리고 내려 보세요.</p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

변수를 이용한 예제의 결과

노란색 원에 마우스 포인터를 올리고 내려 보세요.

또 다른 예제로 변수 익히기

제이쿼리를 이용해서 alert창을 띄울수도 있답니다. ^^

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  var usa_hi = 'hi';
  var jp_hi = 'konnichiha';
  var kr_hi = 'annyeong';
  var cn_hi = 'nihao';
  alert(usa_hi);
  alert(jp_hi);
  alert(kr_hi);
  alert(cn_hi);
  var con1 = usa_hi + jp_hi;
  alert(con1);
  var con2 = con1 + kr_hi;
  alert(con2);
});
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

위와 같이 활용도 가능 합니다.

alert();의 괄호안에 usa_hi를 넣었더니 usa_hi가 갖고 있는 값 hi가 출력이 됩니다.

그리고 alert()안에 만약 usa_hi를 ''로 감싸서