엘레멘트 불러오기

엘레멘트 불러오기

- 언제 어디서 누가 어떻게 무엇을 왜?! jQuery에서 가장 중요한 것은 '누가'(Element)를 정확하게 찾아오는 것이 jQuery의 시작이다.

 

================================================================

<form id='frm_input'>
    TEXT : <input id='txt_test' type='text' value='TEST' /><br />
    BUTTON : <input id='btn_test' type='button' value='확인' /><br />
    CHECKBOX : <input id='ckb_test' type='checkbox' /><label for='ckb_test'> 체크</label><br />
    RADIO : <input id='opt_test' name='radio' type='radio' value='Y' checked /><label for='opt_test'> 체크박스 보이기</label>
    <input id='opt_test2' name='radio' type='radio' value='N' /><label for='opt_test2'> 체크박스 숨기기</label><br />
</form>

<form id='frm_select'>
 SELECT :
    <select id='lst_test'>
        <option value='Y' selected>INPUT 보이기</option>
        <option value='N'>INPUT 숨기기</option>
    </select>
</form>

================================================================

 

1. id

$('#btn_test').click(function() {
    alert( $('#txt_test').val() );
});

 

2. 태그

$('#lst_test').change(function() {
    if( $('#lst_test option:selected').val() == '1') { 
        $('input').show();

    }
    else {
        $('input').hide(); 
    }

});

- 눈치 빠른 사람은 위 예제에서 $('#lst_test option:selected')을 발견했을 것이다.

  : id형태(#lst_test)로 <select> 엘레멘트를 찾은 후 <option> 태그를 찾은 것이다. 그 뒤 :selected 는 <option selected>를 표현한다.

 

3. 조건

$('[name=radio]').click(function() {
    if( $('[name=radio]:checked').val() == 'Y' ) {
        $('input[type=checkbox]').show();
    }
    else {
        $('input[type=checkbox]').hide();
    }

});

- 이쯤 오면 감이 올거라 믿어 의심치 않는다.

  : 태그형태의 input에서 type이 checkbox인 것 <input type='checkbox'> 를 표현한다.

- 조건식으로 =, ^=, ~=, $=, |=가 있다.

  : A = B (A가 B인것)

  : A ^= B (A가 B로 시작하는 것)

  : A ~= B (A가 B를 포함하는 것)

  : A $= B (B가 A의 압부분에 속하는 것)

  : A |= B (B가 A의 뒷부분에 속하는 것)

  : 줄쳐진 애들은 잊어라. 굳이 쓸 일 없다.

 

* 일반적으로 사용되는 엘레멘트를 찾는 방법은 이정도다. 심오하게 들어가는건 이 블로그에서 찾지말고 네이버형과 구글느님이 잘 검색해 줄 것이다. 아.. 거기서 이 곳을 타고 온거면 쏘리..

 

예제 : http://www.xeroad.com/blog/20131011.php

[출처] 엘레멘트 불러오기|작성자 Xeroad