Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

FU11M00N

[ JavaScript ] JS 제어 대상 찾기 : 제이쿼리(jQuery) 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS 제어 대상 찾기 : 제이쿼리(jQuery)

호IT 2021. 2. 7. 14:45

 

 

 

이미지 출처 :    https://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#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

 

 

 

 

 

 

- 라이브러리

 

자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리입니다.

 

 

- jQuery

 

jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구 중 하나입니다.

 

 

 

 

- jQuery 의 사용

 

 

jQuery를 사용하기 위해서는 jQuery를 HTML로 로드해야 합니다. 

 

직접 다운 받는 방식과, CDN 을 이용하는 방법이 있습니다.

 

아래의 예제 코드는 CDN 을 이용해 jQuery 를 로드하는 코드입니다.

 

CDN(콘텐츠 전송 네트워크)이란 서버와 사용자 사이의 물리적 거리를 줄여 웹 페이지 콘텐츠 로드 지연을 최소화하는, 촘촘히 분산된 서버로 이루어진 플랫폼입니다.

 

<!DOCTYPE html>
<html>
<body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    jQuery( document ).ready(function( $ ) {
    
    });
    </script>
</body>
</html>

 

 

 

jQuery 를 이용하면 DOM 을 사용하는 것보다 훨씬 효율적으로 필요한 객체를 조회할 수 있습니다.

 

 

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

 

 

 

- jQuery의 기본문법

 

 

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

 

 

 

 

 

 

$()는 jQuery의 함수입니다.

 

이 함수의 인자로 CSS 선택자(li)를 전달하면, jQuery 객체를 리턴합니다.

 

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

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

 

 

 

 

 

 

<!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="//code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
</html>

test.html

 

 

 

 

코드실행 결과입니다.

 

execute 버튼 위에 있는 두개의 box 가 같은 코드입니다.

 

 

 

 

var lis = document.getElementsByTagName('li');
for(var i=0; i<lis.length; i++){
    lis[i].style.color='red';

 

위 코드는 DOM 을 이용하여 li 태그의 글자 색을 red 로 바꾸는 코드입니다.

 

$('li').css('color', 'red')

 

위의 코드는 jQuery 를 이용하여 li 태그의 글자색을 red 로 바꾸는 코드입니다.

 

 

육안으로 봤을 때도 jQuery 를 이용한 코드가 훨씬 쉽고 간단해 보입니다.

 

 

 

 

var lis = document.getElementsByClassName('active');
for(var i=0; i < lis.length; i++){
    lis[i].style.color='red';   
}

 

getElementsByClassName 메소드를 이용한 코드입니다.

 

 

$('.active').css('color', 'red')

 

css에서 .은 클래스를 나타냅니다.

 

 

var li = document.getElementById('active');
li.style.color='red';
li.style.textDecoration='underline';

 

getElementById 메소드를 이용한 코드입니다.

 

 

 

$('#active').css('color', 'red').css('textDecoration', 'underline');

 

 

# 은 아이디를 나타냅니다.

 

 

 

위의 예시가 보여주는 것은, DOM 을 이용했을 때와 jQuery 를 이용했을 때 어떤 것이

더욱 편리하고 생산성이 좋은것일까 이빈다.

 

 

 

제이쿼리를 이용하면 코드의 길이 뿐만 아니라 고려해야할 요소가 줄어드는 것을 확인할 수 있습니다.

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

 

'SUA 정보보안 > JavaScript' 카테고리의 다른 글

[ JavaScript ] JS HTMLCollection  (0) 2021.02.08
[ JavaScript ] JS HTMLElement , DOM Tree  (0) 2021.02.08
[ JavaScript ] JS 제어대상 찾기 querySelector , querySelectorAll  (0) 2021.02.07
[ JavaScript ] JS 제어대상 찾기 getElementById ,getElementsByTagName,getElementsByClassName  (0) 2021.02.07
[ JavaScript ] JS 창(Window) 제어  (0) 2021.02.07
'SUA 정보보안/JavaScript' Related Articles more
Comments