Romantic Developer : )

(Web JavaScript) 웹 자바스크립트 DOM (3) jquery 제어대상 찾기 본문

Romantic Developer/Web JavaScript

(Web JavaScript) 웹 자바스크립트 DOM (3) jquery 제어대상 찾기

Romantic_Developer 2018. 8. 1. 17:00

안녕하세요 영감을 주는 개발자 방민방민입니다.


오늘은 jquery 의 실질적인 사용법에 대하여 알아보고자 합니다.



1. jquery 기본 문법


jQuery 의 문법은 단순하지만 강력합니다.


기본 문법

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

$() 는 jQuery 의 함수입니다. 위에서 css li 객체를 넘겨주고 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<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 < 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="jquery.js"></script>
</body>
</html>

위의 코드는 아래의 결과를 출력합니다.



좌측 실행화면에서 위의 박스는 돔을 사용하여  객체를 선택하는 코드이고, 아래 박스는 jQuery 를 사용하여 객체를 선택하는 방법을 적어두었습니다.


첫번째 jQuery 코드에 대하여 먼저 살펴보도록 하겠습니다.

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

이 제이쿼리 코드는 li 값을 갖는 모든 엘리먼트를 선택하여 그 color 속성을 red 값으로 변경합니다.


두번쨰 jQuery 코드를 보겠습니다.

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

두번째 코드는 active 라는 클레스 값을 가지는 엘리먼트를 선택하고, 그 객체의 color 속성을 red 로 변경시킵니다.


마지막 세번째 jQuery 코드입니다.

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

세번째 코드는 id 값을 active 로 갖는 엘리먼트를 선택하고, 그 객체의 색상 프로퍼티를 red로 textDecoration 속성을 underline 으로 변경합니다. 해당 excute 버튼을 누르면 해당하는 HTML 코드의 속성이 추가됩니다.


실질적으로 $('') 는 객체를 소환하고, .css 는 css 를 변경하겠다는 메서드에 가깝습니다. 

jQuery 가 편리한 이유는 .css 라는 메서드를 연속적으로 실행할 수 있습니다.

이를 chaining 이라고 합니다. 강력한 jQuery 의 강력한 기능이 아닐수 없습니다.!



오늘은 jQuery 의 정말 간단한 문법에 대하여 알아보았습니다.

오늘은 이만 하도록 하겠습니다.


지금까지 영감을 주는 개발자 방민방민이었습니다 :)

저작자표시

'Romantic Developer > Web JavaScript' 카테고리의 다른 글

(Web JavaScript) 웹 자바스크립트 DOM (5) jQuery객체  (0) 2018.08.03
(Web JavaScript) 웹 자바스크립트 DOM (4) HTML element  (0) 2018.08.02
(Web JavaScript) 웹 자바스크립트 DOM (2) jquery 사용  (0) 2018.07.31
(Web JavaScript) 웹 자바스크립트 DOM (1) 제어대상 찾기  (0) 2018.07.30
(Web JavaScript) 웹 자바스크립트 BOM (4) 창제어  (0) 2018.07.29
'Romantic Developer/Web JavaScript' Related Articles more