javascript DOM - jQuery

 

 

jQuery이란?

 

 

• 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리 중 하나이다.
• jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다.

 

 

 

 

jQuery의 사용

 

 

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

 

 

 

 

 

 jQuery를 로드하는 방법

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    jQuery( document ).ready(function( $ ) {
      $('body').prepend('<h1>jin seok</h1>');
    });
    </script>

 

 

• <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>의  jQuery 연동 링크는 jQuery 홈페이지에 들어가서 다운 받을 수 있다.
• 위의 코드의 결과는 Body 태그 아래에 <h1>jin seok</h1> 코드가 만들어진다.
•  jQuery( document ).ready(function( $ ) 같이 {}로 감싸는 것이 이상적이다.

 

 

 

 

 

jQuery로 제어 대상을 찾기

 

 

• jQuery를 이용하면 DOM을 사용하는 것 보다 훨씬 효율적으로 필요한 객체를 조회할 수 있다.
• jQuery는 객체를 조회할 때 CSS 선택자를 이용한다.

 

 

 

jQuery의 기본문법

 

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

 

 

 

• $()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다.
• 위의 그림에서 css는 선택자에 해당하는 객체들의 style에 color:red로 변경한다.

 

 

 

 

jQuery 사용 예제

 

 

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

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

 

• 위 두 코드 모두 모든 <li> 배열의 텍스트를 빨간색으로 변화시키는 서로 같은 효과를 나타낸다.
• jQuery을 사용한 코드가 더 간결하고 편한 것을 확인 할 수 있다.

 

 

 

 

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

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

 

• 위 두 코드 또한 같은 서로 같은 효과를 나타낸다. 
• <li> 배열 중 id="active" 값을 가진 <li> 텍스트의 텍스트 색깔과 밑줄을 그려넣는 효과를 나타낸다.
• 이때 jQuery 함수 안의 인수에 id 값을 가르킨다면 '#'을 붙여주고 class 값을 가르키는 것은 '.' 을 붙여준다.

 

 

 

 

 

 

jQuery 객체

 

 

 

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

 

 

 

 

 

암시적 반복

 

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

 

예시1

<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>

 

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

• 한가지 주의할 것은 li[i]의 값은 해당 엘리먼트에 대한 jQuery 객체가 아니라 DOM 객체라는 것이다. 따라서 jQuery의 기능을 이용해서 이 객체를 제어하려면 jQuery 함수를 이용해야 한다. 

↓

 li[i]을 jQuery로 제어하기 위한 코드 수정

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

 

 

 

 

 

예시2

<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>
    var li = $('li');
    li.map(function(index, elem){
        console.log(index, elem);
        $(elem).css('color', 'red');
    })
</script>

 

• jQuery는 자체적으로 지원하는 foreach 메소드인 each(), map()를 제공한다. 
• map()이라는 메소드는 jQuery 객체의 엘리먼트를 하나씩 순회시킨다.
• 이 때 첫번째 인자로 전달된 함수가 호출되는데 첫번째 인자로 엘리먼트의 인덱스(index), 두번째 인자로 엘리먼트 객체(DOM(elem))이 전달된다. 즉 인덱스는 <li>배열의 [0], 엘리멘트 객체는 html, css, Javascript 라는 텍스트가 호출된다.

 

 

 

 

 

jQuery 객체 API

 

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

 

 

https://api.jquery.com

jQuery API Documentation