Languages/Java Script

[Js] jQuery 객체 | map() | jQuery API

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

jQuery 객체란?

jQuery 함수의 리턴값으로 jQuery 함수를 이용해서 선택한 엘리먼트들에 대해서 처리할 작업을 프로퍼티로 가지고 있는 객체다.

<script>
	var li = $('li');

/*
li  : jQuery Object
$~~ : jQuery function
*/
</script>

위 코드에서 만약 li.css('text-decoration','underline'); 라고 한다면 li에 해당하는 모든 값의 CSS가 변경 될 것이다.

이렇게, 내부적으로 한 차례씩 반복작업을 수행해주는 것을 바로 "암시적 반복"이라고 한다.

암시적 반복

jQuery 객체의 가장 중요한 특성은 암시적인 반복을 수행한다는 것이다. DOM과 다르게 jQuery 객체의 메소드를 실행하면 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리된다.

암시적 반복은 값을 설정할 때만 동작한다. 값을 가져올 때는 선택된 엘리먼트 중 첫번째에 대한 값만을 반환한다. 이에 대한 내용은 아래에서 살펴본다.

jQuery에서는 보통, 두 개의 인자를 모두 명시해주면 "설정"을 의미하고, 한 가지의 인자만 명시한다면 "가져온다"라는 뜻을 의미한다. 즉 인자로 두가지를 넣지 않고 하나만 써주는 경우엔 그것에 해당하는 메소드나 값을 가져온다는 의미이다.

체이닝

chainig이란 선택된 엘리먼트에 대해서 연속적으로 작업을 처리할 수 있는 방법이다.

위 사진과 같이 여러가지 일을 연속적으로 처리 할 수 있음.

조회 결과

jQuery 객체에는 조회된 엘리먼트가 담겨 있다. jQuery 객체는 일종의 유사배열의 형태로 조회된 엘리먼트를 가지고 있기 때문에 배열처럼 사용해서 엘리먼트를 가져올 수 있다.

<ul>
    <li>html</li>
    <li>css</li>
    <li>JavaScript</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    console.log($('li').length);
    console.log($('li')[0]);
    var li = $('li');
    for(var i=0; i<li.length; i++){
        console.log(li[i]);
    }
</script>

한가지 주의할 것은 li[i]의 값은 해당 엘리먼트에 대한 jQuery 객체가 아니라 DOM 객체라는 것이다.

따라서 jQuery의 기능을 이용해서 이 객체를 제어하려면 jQuery 함수를 이용해야 한다.

<script>
    for(var i=0; i<li.length; i++){
        $(li[i]).css('color', 'red');
    }
</script>

좀더 'jQuery'다운 조회 방법이 있을까?

아래와 같은 방법으로 .map()을 이용하여 조회된 결과를 열람할수도 있다.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
		<li>html</li>
		<li>css</li>
		<li>Javascript</li>
</ul>

	
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script>
	var li = $('li');
	li.map(function(index, elem){
		console.log(index, elem);
		$(elem).css('color','red');

	})

</script>
</body>
</html>

map은 jQuery 객체의 엘리먼트를 하나씩 순회한다. 이 때 첫번째 인자로 전달된 함수가 호출되는데

첫번째 인자로 엘리먼트의 인덱스, 두번째 인자로 엘리먼트 객체(DOM)이 전달된다. 참고

.map() | jQuery API Documentation

Description: Pass each element in the current matched set through a function, producing a new jQuery object containing the return values. If you wish to process a plain array or object, use the jQuery.map() instead. As the return value is a jQuery object,

api.jquery.com

jQuery 객체 API

제어할 대상을 선택한 후에는 대상에 대한 연산을 해야한다. .css와 .attr은 jQuery 객체가 가지고 있는 메소드 중의 하나인데, jQuery는 그 외에도 많은 API를 제공하고 있다. 이에 대한 내용은 jQuery API를 참고하자.

https://api.jquery.com

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

아래는 우리가 자주쓰는 .css메소드의 대한 사용법과 정의이다.

api.jquery.com/css/

.css() | jQuery API Documentation

Description: Set one or more CSS properties for the set of matched elements. As with the .prop() method, the .css() method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or

api.jquery.com

'Languages > Java Script' 카테고리의 다른 글

[Js] 식별자 API \| 조회 API \| 속성 API (0)	2021.02.10
[Js] Element 객체 \| Node \| 식별자 \| 조회 \| 엘리먼트 (0)	2021.02.08
[Js] HTML Collection \| DOM \| javascript (0)	2021.02.08
[Js] HTML Element \| 단수와 복수 \| DOM (0)	2021.02.08

Contents

새소식

인기 검색어

[Js] jQuery 객체 | map() | jQuery API

jQuery 객체란?

암시적 반복

체이닝

조회 결과

jQuery 객체 API

'Languages > Java Script' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바