jQuery 수업

탐색

예제

<!-- http://opentutorials.org/example/jquery/example.traversing.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
            body{
                font-size:11px;
                width:1000px;
            }
            #panel div,#panel li,#panel ul{
                border:2px solid black;
                margin:10px;
                padding:10px;
            }
            #panel ul{
                list-style: none;
            }
            #panel .s{
                border:2px solid red;
                background-color: #808080;
            }
            #panel #root{
                margin-top:0;
            }
            textarea{
                width:982px;
                height:100px;
                font-size:11px;
                overflow: visible;
            }        
            #help{
                float:left;
                width:500px;
                height:450px;
                overflow-y: scroll;
                overflow-x: hidden
            }
            #panel{
                float:left;
                width:500px;
            }
            #help table{
                border:1px solid gray;
                border-collapse: collapse;
                width:100%;
            }
            #help table td{
                border:1px solid gray;
                padding:5px;
            }
            #help .title{
                color:white;
                background-color:#555;
                padding:3px;
            }
            #help .title.checked{
                background-color:red;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <p>
                javascript을 입력 한 후에 엔터를 눌러주세요.
                <textarea id="code"></textarea></p>
            <div id="help">
                <table>
                    <tr id="add"><td><div class="title">.add(selector)</div>엘리먼트를 추가한다</td></tr>
                    <tr id="andSelf"><td><div class="title">.andSelf()</div>현재 엘리먼트 셋에 이전 엘리먼트 셋을 더 한다</td></tr>
                    <tr id="children"><td><div class="title">.children([selector])</div>자식 엘리먼트를 선택한다</td></tr>
                    <tr id="closet"><td><div class="title">.closest(selector)</div>가장 가까운 selector 조상 엘리먼트를 탐색한다</td></tr>
                    <tr id="each"><td><div class="title">.each(function(index,Element))</div>현재 엘리먼트 셋에 반복 작업을 실행한다</td></tr>
                    <tr id="end"><td><div class="title">.end()</div>이전 체인 컨텍스트로 돌아간다.</td></tr>
                    <tr id="eq"><td><div class="title">.eq(index)</div>현재 엘리먼트 셋에서 index에 해당하는 엘리먼트를 선택한다</td></tr>
                    <tr id="filter"><td><div class="title">.filter(selector)</div>현재 엘리먼트 셋에서 selector에 해당하는 엘리먼트를 선택한다</td></tr>
                    <tr id="find"><td><div class="title">.find(selector)</div>현재 엘리먼트 셋에서 selector에 해당하는 자손 엘리먼트를 선택한다</td></tr>
                    <tr id="first"><td><div class="title">.first()</div>현재 엘리먼트 셋 중 첫번째 엘리먼트를 선택한다</td></tr>
                    <tr id="last"><td><div class="title">.last()</div>현재 엘리먼트 셋 중 마지막 엘리먼트를 선택한다</td></tr>
                    <tr id="next"><td><div class="title">.next()</div>각각의 엘리먼트에 대한 다음 형재 엘리먼트를 선택한다</td></tr>
                    <tr id="nextAll"><td><div class="title">.nextAll()</div>각각의 엘리먼트에 대한 다음 형재 엘리먼트 전부를 선택한다</td></tr>
                    <tr id="prev"><td><div class="title">.prev()</div>각각의 엘리먼트에 대한 이전 형재 엘리먼트를 선택한다</td></tr>
                    <tr id="prevAll"><td><div class="title">.prevAll()</div>각각의 엘리먼트에 대한 이전 형재 엘리먼트 전부를 선택한다</td></tr>
                    <tr id="siblings"><td><div class="title">.siblings()</div>각각의 엘리먼트에 대한 형재 엘리먼트 전부를 선택한다</td></tr>
                    <tr id="slice"><td><div class="title">.slice(start, [end])</div>현제의 엘리먼트 셋 중 start에서 end까지의 엘리먼트를 선택한다</td></tr>
                </table>
            </div>
            <div id="panel">
                <div id="root">
                    div#root
                    <div>
                        div
                    </div>
                    <div>
                        div
                        <ul>
                            ul
                            <li>li</li>
                            <li>li</li>
                            <li>li</li>
                            <li>li</li>
                        </ul>
                    </div>
                    <div>
                        div
                    </div>
                </div>    
            </div>
        </div>
        <script>
            var $wrapper = $('#root').addClass('selected');
            $('#code').keydown(function(e){
                if(e.keyCode == 13){
                    eval($(this).val());
                    return false;
                }
            }).change(function(){
                    eval($(this).val());
            });
            $('tr').click(function(){
                $(this).find('.title').toggleClass('checked');
            })
        </script>
    </body>
</html>

 

댓글

댓글 본문
작성자
비밀번호
  1. hajung
    너무 감사합니다.
  2. 허공
    감사합니다!
  3. 홍고잉
    형재가 아니라 형제 아닌가요 ㅋㅋ
  4. 싸커홍
    좋은 강의 감사합니다.
    다시한번 정리하게되네요
  5. 삼고잉
    chaining을 이루며 traversing 하기..
  6. sheis
    잘 봤어요^^
  7. crable
    감사합니다.
  8. 완료!
    완료! 감사합니다!
  9. tachyon
    감사합니다!
  10. GunLoc
    #panel .s{
    border:2px solid red;
    background-color: #808080;
    }
    이부분 말씀 하시죠? 감사합니다.
    대화보기
    • 사람구실
      s 클래스는 css 쪽에 class = "s" 라고 태그에 삽입 될 경우 적용될 내용들이 정의되어있어요.
      대화보기
      • JustStudy
        고맙습니다
      • GunLoc
        여기서 eval은 무슨 메소드죠?
        그리고 addClass ("s")의 s 클래스가 정의되있는곳은 어디있죠?
      • 쥬슈야
        12분 17초 부분에 .add('li') 작성하기 앞에 .removeClass('s')를 작성할 필요가 있는지 궁금합니다. 어짜피 ul과 li 모두 클래스이름을 s로 동일하게 지정해주려는 것이 목적이라면 오히려 removeClass('s')를 작성하면 안 되는 것이 아닌가요?
      • 코딩할배
        매우 좋은강의 감사할 따름입니다.
      • styner007
        크롬에서실행이 잘 안되내요 ,,,
      • 포스만빵
        신기할 따름이네요.. ^^
      • 정보문
        전율이....
      • song ye park
        잘봤습니당~><
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기