10. jQuery 알아보기

jQuery 객체란 ? jQuery 함수가 리턴한 값이다.

일반적인 jQuery의 쓰임은 다음과 같다.

$('A').B

$() 이 부분이 jQuery 함수가 되며 A가 jQuery 함수의 인자값이 된다.

A에 대한 jQuery 함수가 리턴한 값이 jQuery 객체가 되는데 그 객체에 대한 프로퍼티가 B 이다.

코드로 확인해본다.

<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<ul>
    <li>Kane</li>
    <li>Son</li>
    <li>Alli</li>
</ul>

<script>
    var li = $('li');
</script>
</body>
</html>

li 태그들에 대하여 jQuery 함수의 리턴값을 li 변수에 담았다.

li 변수는 jQuery 객체가 된다.

브라우저에 웹문서를 열고 개발자도구로 확인해 보았다.

jQuery 객체는 유사배열이기 때문에 배열의 값에 대해 사용하는 [] 로 각 배열 데이터를 확인했다.

li[1] 은 son 이다. 이 son이라는 값에 대해서 css 메소드를 적용해보려고 했더니 에러가 발생했다.

li[1] 에 대한 객체이름을 보니 HTML Element 이다. 즉, DOM 객체이다.

jQuery 메소드인 css를 DOM 객체에 적용하니 에러가 발생하는 것이다.

따라서 이것을 jQuery 객체로 변경($()) 해준 뒤 잘 적용되는 것을 확인할 수 있다.

이번엔 son 이라는 li에 id를 부여해본다.

<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<ul>
    <li>Kane</li>
    <li id="son">Son</li>
    <li>Alli</li>
</ul>

<script>
    var li = $('li');
</script>
</body>
</html>

DOM을 이용하여 ID가 son인 엘리먼트에 대한 객체를 변수 a에 담았다.

a의 객체이름을 보면 HTML Element 이다. (DOM 을 이용하여 생성한 객체이기 때문)

이 DOM 객체를 jQuery 함수의 인자값으로 전달하고 jQuery 메소드인 css를 사용해보면 잘 적용되는 것을 확인할 수 있다.

이것은 DOM 객체를 jQuery 함수의 인자로 전달받아 리턴된 값이 jQuery 객체라는 것을 알 수 있다.

다른 코드를 확인해보면,

<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<ul>
    <li>Kane</li>
    <li>Son</li>
    <li>Alli</li>
</ul>

<script>
    var li = $('li');
    li.map(function(index, elem){
        console.log(index, elem);
        $(elem).css('text-decoration', 'underline');
    })
</script>
</body>
</html>

li 태그에 해당하는 엘리먼트들을 jQuery 함수의 인자로 전달하여 리턴된 값을 변수 li에 넣었고 이 값은 jQuery 객체가 된다.

jQuery 메소드 중 map 이라는 메소드가 있는데 이 메소드는 함수를 인자로 받도록 약속되어있다.

이 메소드는 jQuery 함수에 포함되는 엘리먼트들, 즉 jQuery 객체에 담겨진 배열데이터를 하나하나 순회하면서 호출한다.

완전한 배열은 아니지만 유사배열이므로 일반적인 배열처럼 첫번째 값의 인덱스가 0, 두 번째가 1 ... 순으로 지정된다.

위 함수에 첫 번째 매개변수는 인덱스를 의미하고 두 번째 매개변수는 해당 엘리먼트를 의미하는 DOM 객체가 된다.

결과를 보면,

각 인덱스에 해당하는 DOM 객체가 콘솔창에 출력됨을 확인할 수 있고, DOM 객체를 jQuery 함수의 인자에 담아 생성한 jQuery 객체로 css가 적용되는 모습을 확인할 수 있다.

'Javascript' 카테고리의 다른 글

13. jQuery 속성 제어 (0)	2021.09.15
11. Element 객체 & 식별자 API (0)	2021.09.13
9. HTML Element (0)	2021.09.10
8. jQuery 기본 사용법 (0)	2021.09.09
7. getElementsByTagName / getElementsByClassName / getElementById (0)	2021.09.08

'Javascript' 카테고리의 다른 글

티스토리툴바