Languages/Java Script

[Js] jQuery 제어 대상찾기 | jQuery | javascript

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

출처는 아래의 주소로 "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를 이용하면 DOM을 사용하는 것 보다 훨씬 효율적으로 필요한 객체를 조회할 수 있다.

jQuery는 객체를 조회할 때 CSS 선택자를 이용한다.

jQuery의 기본문법

jQuery의 기본 문법은 단순하고 강력하다.

$()는 jQuery의 함수이다.

함수의 인자로 여러가지가 들어올 수 있지만 그 중 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다.

그 뒤에 . 은 이 함수가 리턴한 값이 객체라는 것을 의미한다.

이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다.

위의 그림에서 css는 선택자에 해당하는 객체들의 style에 color:red로 변경한다.

아래는 DOM을 이용했을 때와 jQuery를 이용했을 때를 비교한 것이다.

아래 코드는 복잡하니, 실행결과만 확인하자.

<!DOCTYPE html>
<html>
<head>
    <style>
    #demo{width:200px;float: left; margin-top:120px;}
    #execute{float: left; margin:0; font-size:0.9em;}
    #execute{padding-left: 5px}
    #execute li{list-style: none}
    #execute pre{border:1px solid gray; padding:10px;}
    </style>
</head>
<body>
<ul id="demo">
    <li class="active">HTML</li>
    <li id="active">CSS</li>
    <li class="active">JavaScript</li>
</ul>
<ul id="execute">
    <li>
        <pre>
var lis = document.getElementsByTagName('li');
for(var i=0; i&lt;lis.length; i++){
    lis[i].style.color='red';   
</pre>
        <pre>
$('li').css('color', 'red')     </pre>
        <input type="button" value="execute" onclick="$('li').css('color', 'red')" />
    </li>
    <li>
        <pre>
var lis = document.getElementsByClassName('active');
for(var i=0; i &lt; lis.length; i++){
    lis[i].style.color='red';   
}</pre>
        <pre>
$('.active').css('color', 'red')</pre>
        <input type="button" value="execute" onclick="$('.active').css('color', 'red')" />
    </li>
    <li>
        <pre>
var li = document.getElementById('active');
li.style.color='red';
li.style.textDecoration='underline';</pre>
        <pre>
$('$active').css('color', 'red').css('textDecoration', 'underline');
        </pre>
        <input type="button" value="execute" onclick="$('#active').css('color', 'red').css('textDecoration', 'underline')" />
    </li>
</ul>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
</body>
</html>

동작을 시키면 아래와 같이 브라우저에 나타난다.

출력된 것중 파란색으로 표시된 부분은 DOM으로 코드를 짠 경우이고, 빨간선으로 표시한 것은 jQuery를 이용하여 코딩한 것이다.

같은 역할을 하는 코드이지만, 한 눈에 봐도 jQuery가 훨씬 간결하다는 것이 느껴질 것이다.

맨마지막 빨간색 네모를 살펴보면 마치 체인처럼 연결이 되어있다.

선택한 엘리먼트들을 연속적으로 메소드를 호출하여 어떠한 작업을 하는 것, 이러한 것을 'chaining'이라고 한다.

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

[Js] HTML Collection \| DOM \| javascript (0)	2021.02.08
[Js] HTML Element \| 단수와 복수 \| DOM (0)	2021.02.08
[Js] jQuery \| 라이브러리 \| DOM base jQuery (0)	2021.02.07
[Js] DOM \| DOM 제어대상 찾기 \| Javascript DOM (0)	2021.02.07

Contents

새소식

인기 검색어

[Js] jQuery 제어 대상찾기 | jQuery | javascript

제어 대상을 찾기 (jQuery)

jQuery의 기본문법

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

당신이 좋아할만한 콘텐츠

티스토리툴바