jQuery 객체란?
- jQuery 함수의 리턴값 ex. $('li')의 리턴값
- jQuery 함수를 이용해서 선택한 엘리먼트들에 대해서 처리할 작업을 프로퍼티로 가지고 있는 객체
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.7.1.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</body>
</html>
암시적 반복
- jQuery 객체의 가장 중요한 특성은 암시적인 반복을 수행한다는 것이다. DOM과 다르게 jQuery 객체의 메소드를 실행하면 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리된다.
- 암시적 반복은 값을 설정할 때만 동작한다. 값을 가져올 때는 선택된 엘리먼트 중 첫번째에 대한 값만을 반환한다.
체이닝(Chaining)
선택된 엘리먼트에 대해서 연속적으로 작업을 처리할 수 있는 방법
엘리먼트 정보 조회
jQuery 객체에는 조회된 엘리먼트가 담겨 있다. jQuery 객체는 일종의 유사배열의 형태로 조회된 엘리먼트를 가지고 있기 때문에 배열처럼 사용해서 엘리먼트를 가져올 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.7.1.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
</head>
<body>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<script>
console.log($('li').length); //3
console.log($('li')[0]); //<li>HTML</li>
var li = $('li');
for(var i = 0; i < li.length; i++){
console.log(li[i]);
}
</script>
</body>
</html>
|
cs |
.map()으로 조회 결과 열람
map은 jQuery 객체의 엘리먼트를 하나씩 순회한다. 이때 첫 번째 인자로 전달된 함수가 호출되는데 첫 번째 인자로 엘리먼트의 인덱스, 두 번째 인자로 엘리먼트 객체(DOM)가 전달된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-3.7.1.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
</head>
<body>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<script>
$('li').map(function(index, element){
console.log(index, element);
$(element).css('color', 'red');
})
</script>
</body>
</html>
|
cs |
jQuery 객체 API
제어할 대상을 선택한 후에는 대상에 대한 연산을 해야한다. .css는 jQuery 객체가 가지고 있는 메서드 중의 하나인데, jQuery는 그 외에도 많은 API를 제공하고 있다. 이에 대한 내용은 jQuery API를 참고하자.
jQuery API Documentation
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t
api.jquery.com