선택자

 

 

JQuery 선택자는 함수에서 사용하거나 적용되길 원하는 특정 요소 혹은 속성으로 자바스크립트와 비교했을 때 굉장히 간단한 방법으로 요소와 속성을 지정할 수 있다.

 

자바스크립트는 요소를 선택하기위해서는 document.getElement를 활용하지만 제이쿼리는 $(‘’)로 간단하게 표현이 가능하다.

 

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

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

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

 

 

 

 

제이쿼리의 기본문법은 다음과 같다.

$(선택자).동작함수();

$ 기호는 제이쿼리임을 의미하며 제이쿼리에 접근할 수 있는 식별자를 뜻한다. 원하는 선택자를 기입하여 선택된 HTML 요소에 동작을 설정할 수 있다.

 

 

 

 

 

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

<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');
    });
});

 

기본 화면

 

P 태그에 해당되는 텍스트를 클릭한 경우

 

id가 selector인 요소를 클릭한 경우

 

 

 

 

 

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

<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');
    });
});

기본 화면

 

속성변경 버큰을 클릭한 경우 결과 화면