자바스크립트와 제이쿼리의 선택자 - 자바스크립트 강좌 9강
이번 강좌에서는 자바스크립트의 선택자와 제이쿼리의 선택자를 비교해보고, 제이쿼리의 사용법에 대해 알아보겠습니다.
※선택자란?
이 강좌를 보기 전에 CSS강좌를 보셨다면 선택자에 대해 알고 있을수도 있는데요.
선택자는 HTML 오브젝트를 선택한 값입니다.
즉 선택자를 이용해 HTML 오브젝트 속성값을 컨트롤 하고, 속성값을 가져오기도 합니다.
※자바스크립트의 선택자
우리는 이전강좌인 자바스크립트 폼검증에서 이미 선택자를 사용했습니다.
간단한 예제로 자바스크립트 선택자를 이용하여 오브젝트를 컨트롤 해보겠습니다.
자바스크립트 선택자 예제)
1. 본문코드
<body>
<span id="span1">안녕하세요.</span> <br>
<span id="span2">반갑습니다.</span> <br>
<input type="button" value="안녕" onclick="testFunction1()">
<input type="button" value="반갑" onclick="testFunction2()">
</body>
코드설명)
첫 번째 버튼을 클릭하면 testFunction1 메소드를 실행하고, 다른 버튼은 testFunction2 메소드를 실행합니다.
2. 스크립트 코드
<script>
function testFunction1(){
var spanObj1 = document.getElementById("span1");
spanObj1.innerHTML = "반갑습니다";
}
function testFunction2(){
var spanObj2 = document.getElementById("span2");
spanObj2.innerHTML = "안녕하세요";
}
</script>
코드설명)
(1)spanObj1 라는 변수에 document.getElementById라는 선택자를 이용해 아이디가 span1인 오브젝트를 선택합니다.
(2)spanObj2 라는 변수에 document.getElementById라는 선택자를 이용해 아이디가 span2인 오브젝트를 선택합니다.
(3)innerHTML 이라는 함수를 이용해 각각의 선택자의 내용을 수정합니다.
결과)
안녕 버튼을 클릭하면 첫 번째 span의 내용이 변경되고, 반갑 버튼을 클릭하면 두 번째 span의 내용이 변경됩니다.
뿐만 아니라 다양한 방법으로 HTML 오브젝트를 컨트롤 할 수 있습니다.
※제이쿼리란?
먼저 제이쿼리가 무엇인지 간단히 설명하겠습니다.
제이쿼리는 자바스크립트 라이브러리 입니다.
제이쿼리를 이용하면 오브젝트를 다양한 방법으로 선택할 수 있고, 그러한 오브젝트를 아주 효율적으로 컨트롤 할 수 있습니다.
제이쿼리를 이용하기 위해선 문서 상단에서 제이쿼리 라이브러리를 호출해야 합니다.
위와 같이 제이쿼리 라이브러리 파일을 로컬 디렉터리에서 호출할 수 있고, 라이브러리 URL 경로로 호출할 수 있습니다.
호출코드)
1. 제이쿼리가 로컬 디렉터리에 있는경우
<script src="js/jquery-1.8.3.min.js"></script>
2. 구글 자바스크립트 URL을 이용한 호출
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
제이쿼리 선택자 예제)
1. 본문코드
<body>
<span id="span1">안녕하세요.</span> <br>
<span id="span2">반갑습니다.</span> <br>
<input type="button" value="안녕" onclick="testFunction1()">
<input type="button" value="반갑" onclick="testFunction2()">
</body>
본문코드는 변경된 내용이 없습니다.
2. 스크립트 코드
<script src="js/jquery-1.8.3.min.js"></script>
<script>
function testFunction1(){
var spanObj1 = $("#span1");
spanObj1.text('제이쿼리를');
}
function testFunction2(){
var spanObj2 = $("#span2");
spanObj2.text('이용합니다');
}
</script>
코드설명)
(1)가장 먼저 로컬 디렉터리에 있는 제이쿼리 라이브러리를 호출합니다.
(2)spanObj1 라는 변수에 아이디가 span1인 오브젝트를 저장합니다.
(3)$를 선언함으로 제이쿼리의 시작을 알립니다.
(4)#은 아이디를 선택하겠다는 의미입니다.
(5)아이디 선택자 : $("#아이디값") 이러한 방식으로 아이디를 이용하여 오브젝트를 선택합니다.
(6)클래스 선택자 : $(".클래스값") 이러한 방식으로 클래스를 이용하여 오브젝트를 선택합니다.
결과)
제이쿼리를 사용하게 되면 자바스크립트의 사용량은 극히 줄어듭니다.
그만큼 제이쿼리는 가벼우면서 강력하고, 플러그인 또한 많이 있어 주로 제이쿼리를 사용하게 되는거죠.
다음 강좌부터는 제이쿼리 강좌를 시작할텐데요.
가장 먼저 선택자에 대해 심층적으로 알아보겠습니다.
'코딩이야기 > Javascript' 카테고리의 다른 글
| 자바스크립트 모바일 접속기기 체크 (0) | 2017.02.01 |
|---|---|
| 자바스크립트 랜덤 숫자 예제 (0) | 2017.01.13 |
| 자바스크립트 이메일 검증 - 자바스크립트 강좌 8강 (0) | 2016.11.09 |
| 자바스크립트 폼 유효성 검증 - 자바스크립트 강좌 7강 (0) | 2016.11.08 |
| 자바스크립트 이벤트 - 자바스크립트 강좌 6강 (5) | 2016.06.04 |