JQuery day2

JQuery 함수 | 선택자

JQuery 함수

제이쿼리에서 함수를 표현하는 방법에 대해 배워보자.

    window.onload = function(){    // HTML 문서를 다 읽고 실행하는 함수
        실행문
        ...
    }
    
    $(function(){    // HTML 문서를 다 읽고 실행하는 함수
        실행문
        ...
    });

    $(document.ready(function(){    // 구버전
        실행문
        ...
    }));

위 세개의 코드는 전부 같은 코드로 3가지의 방법으로 표현이 가능하다. 모두 웹 문서(HTML)가 전부 로드 되었을 때 실행되는 함수이다.

JQuery 선택자

JQuery 선택자는 함수에서 사용하거나 적용되길 원하는 특정 요소 혹은 속성으로 자바스크립트와 비교했을 때 굉장히 간단한 방법으로 요소와 속성을 지정할 수 있다. 자바스크립트는 요소를 선택하기위해서는 document.getElement를 활용하지만 제이쿼리는 $(‘’)로 간단하게 표현이 가능하다.

자바 스크립트와 제이쿼리를 코드를 통해 비교해보면

document.getElementsByTagName('요소이름'); // == $('요소이름);
document.getElementsByClass('클래스명'); // == $('.클래스명);
document.getElementById('아이디명'); // == $('#아이디명);

이런식으로 좌측이 자바스크립트 코드이고 우측이 제이쿼리 코드이다. 한눈에 봐도 코드가 간단해진것을 볼 수 있다.

다음으로는 요소를 다루는 예제를 확인해보자.

<h2 id="selector">선택자</h2>
<p><span>오픈소스</span> 기반의 자바스크립트 라이브러리</p>
<p><span>문서 객체 모델(DOM)와 이벤트 처리(Event)</span>에 관한 처리를 쉽게 할 수 있음</p>
<p><span>Ajax 응용 프로그램</span>을 빠르게 개발 가능</p>
<p><span>크로스 브라우징</span>을 위해 사용</p>

$(function(){ //on() : 이벤트를 연결하는 함수
    $('p').on('click', function(){
        $('span').css('fontSize', '30px');
    });

    $('#selector').on('click', function(){
        $('#selector').css('border', '3px solid deeppink');
    });
});

이벤트가 작동하지 않았을 때)

이벤트가 작동된 후)

다음으로는 속성를 다루는 예제를 확인해보자.

<h2>선택자</h2>
<p><img src="./sunny.png" alt="sunny"></p>
<p><button>속성변경</button></p>

$(function(){
    $('button').on('click',function(){
        $("img[alt='sunny']").attr('src', './flash.png');
    });
});

이벤트가 작동하지 않았을 때)

이벤트가 작동된 후)