Romantic Developer : )
(Web JavaScript) 웹 자바스크립트 DOM (5) jQuery객체 본문
(Web JavaScript) 웹 자바스크립트 DOM (5) jQuery객체
Romantic_Developer 2018. 8. 3. 01:31안녕하세요, 영감을 주는 개발자 방민방민입니다.
오늘은 jQuery객체에 대하여 알아보고자 합니다.
지난 시간에 jQuery를 통해서 제어하고자 하는 대상 객체를 호출하는 것을 학습하였습니다.
이번 시간에는 그 연장선에서 jQuery에 대하여 조금 더 깊은 관점에서 학습한다고 생각하시면 될 것 같습니다.
그러면 바로 시작하도록 하겠습니다.
1. 암시적 반복
아래의 코드를 먼저 html 파일에 입력합니다.
<!DOCTYPE> <html> <head> </head> <body> <script src = 'jquery.js'></script> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <script> </script> </body> </html>
이는 아래의 내용을 출력합니다.
그리고 콘솔을 통해 jQuery 객체를 불러옵니다. 콘솔에 아래의 명령어를 입력합니다.
var li = $('li')// li 태그값을 갖는 엘리먼트를 모두 저장
li.css('text-decoration','underline');// li 제이쿼리 객체를 돌며 내부 엘리먼트 모두에 밑줄
이때, 기존 DOM 코드처럼 for문을 돌며 각각의 엘리먼트의 스타일을 변경시킨것이 아님에도 불구하고, 웹은 아래와 같은 결과를 출력합니다.
li 태그값을 갖는 엘리먼트들이 모두 underline 값을 갖게 되었습니다. 이렇게 DOM 과 다르게 jQuery 내부에서 그 엘리먼트 객체들을 돌며 모든 엘리먼트에 속성값을 적용시키는 jQuery 객체의 특징을 암시적 반복이라고 합니다.
2. 조회
위와 같은 코드에서 새로고침 후 콘솔을 통해 아래와 같이 입력합니다.
var li = $('li');
li[0];
li[1];
li[2];
이는 아래의 내용을 출력합니다.
jQuery 를 통해 호출되는 객체 콜렉션은 유사배열형태이기 때문에 배열을 호출하는것과 같은 형태로 조회가 가능합니다. 이는 기존에 DOM 에서 배운것 처럼 jQuery 배열을 돌며 그 내부 엘리먼트들을 각각 조회가 가능하다는 뜻입니다. 그러나 이것은 DOM 배열이 아닌, jQuery 객체이기 때문에 jQuery 함수를 사용하는 것만 가능합니다.
<!DOCTYPE>
<html>
<head>
</head>
<body>
<script src = 'jquery.js'></script>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
var li = $('li');
for(var i = 0; i<li.length; i++){
//li[i].css('color','red');// 오류 발생
$(li[i]).css('color','red');// 실행 가능
}
</script>
</body>
</html>
즉 위의 코드에서 var li = $('li') 코드를 통해 jQuery 객체를 가져 왔을때, 단순히 DOM 객체를 돌며 그 색상을 변경시키는 코드를 적용시키면 안되고, $() 을 이용하여 jQuery 문법을 사용하여야만, 그 함수가 정용된다는 것입니다.
3. jQuery 다운 조회 map()
아래의 코드를 먼저 살펴 보도록 하겠습니다.
<!DOCTYPE>
<html>
<head>
</head>
<body>
<script src = 'jquery.js'></script>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
var li = $('li');
li.map(function(index,elem){
console.log(index, elem)
$(elem).css('color','red');
})
</script>
</body>
</html>
이는 각 객체를 순회하는 것에 있어서 조금 더 jQuery다운 방법입니다.
script 코드 내부에는
li.map 이라는 jquery함수가 실행되고 있습니다. 이 내부에서는 function 을실행하게 되는데 그 인자로 jquery 객체 li 에 들어잇는 각 엘리먼트의 번호를(유사배열 , 이 경우 0,1,2) 을 idex 로 각 엘리먼트를 순서대로 elem 으로 받게 됩니다. 따라서 각 엘리먼트의 모든 값을 돌며 해당 명령을 실행하게 되고 각 엘리먼트 내용을 콘솔로 출력함과 동시에 그 스타일(컬러)를 red로 변경합니다.
4. jQuery API
제이쿼리에는 굉장히 많은 API 를 제공하고 있습니다. 이는 아래의 링크에서 확인이 가능합니다.
이에 대하여서는 모든것을 확인하기보다는 시중에 있는 여러 책 혹은 강의들을 통해서 자주 사용되는 API 를 공부하고 사용할것을 권장 드립니다.
오늘은 간략하게 jQuery 객체에 대하여 알아보았습니다.
많이 어려운 부분이 있겠지만 시간을 가지고 천천히 학습하면 분명 이해하실수 있으리라 믿습니다.
그러면 지금까지 영감을 주는 개발자 방민방민 이었습니다 : )
'Romantic Developer > Web JavaScript' 카테고리의 다른 글
| (Web JavaScript) 웹 자바스크립트 DOM (7) 조회 API (0) | 2018.08.05 |
|---|---|
| (Web JavaScript) 웹 자바스크립트 DOM (6) 식별자 API (0) | 2018.08.04 |
| (Web JavaScript) 웹 자바스크립트 DOM (4) HTML element (0) | 2018.08.02 |
| (Web JavaScript) 웹 자바스크립트 DOM (3) jquery 제어대상 찾기 (0) | 2018.08.01 |
| (Web JavaScript) 웹 자바스크립트 DOM (2) jquery 사용 (0) | 2018.07.31 |
