본문 바로가기
개발의 기록/Web

JQuery Selector

by prographer J 2010. 4. 17.
728x90

오랜만에 포스팅~!
JQuery Selector~!!!

내가 JQuery를 쓰면서 가장 많이 사용하는 기능이 아닌가 한다..
보통 Javascript를 통해서 선택을 하기 위해서는
document.getElementsById("~~"); 이런식??ㅎ 하도 안써서 기억도 안난다 -_-;

하지만!! JQuery를 사용하면
$('#ID') 간단하지 아니한가!!
또 한, 선택의 폭도 다양하다~
ID, Class, ChildeNode 등등..

자~하나씩 알아보자!

1. ID를 이용한 선택
   가장 간편하고, 쉽게 사용 할 수 있는방법!
   <div id='div1'></div>
   이와 같이 태그에 ID값이 있을 경우 그 id값을 이용해서 찾는 방법이다.
  var myDiv = $('#div1');  요정도!

2. ClassID를 이용한 선택
    <div class='divClass'></div>
    이와 같이 태그의 Class값을 이용하여 선택하는 방법.
    var clsDiv = $('.divClass');

3. ChildNode 선택방법
    <div id='pdiv'>
           <div>
               <a href='#'></a>
           </div>
    </div>
           
     이와같이 pdiv의 자식노드 cdiv를 선택하기 위해서 ID를 이용한 선택을 할 수도 있지만, 만약 id를 모르고 바로 
     밑에 div를 선택 해야 할 경우 사용한다.
              
     3-1. 바로 밑에 있는 자식노드 선택
          var cdiv=('#pdiv > div');
    3-2. 바로 밑은 아니고, 자식이든 손자든 어딘가에 있을 태그 선택 방법
          var cdiv=('#pdiv a');    

대략 이정도?ㅎㅎ

눈치가 빠른 사람은 벌써 알았을 것이다!!!
css의 선택 방법과 동일하다는 것을!!!

즉, css에서 쓰는 방법을 다 쓸수 있다!!ㅎ
편리해~~좋아 좋아~

점심먹고 대충 후려 갈겨 쓴거라 별 내용은 없지만...필요로 하는 사람이 있을까 하여~ㅎㅎ
자세한 사항은 http://api.jquery.com/category/selectors/ 여기 참조 바람~!
728x90

댓글