<h3>조상 탐색 함수</h3>
    <div class="wrap1">
        <div style="width:500px;"> div(great-grandparent)
            <ul> ul(grandparent)
                <li> li(parent)
                    <span> span </span>
                </li>
            </ul>
        </div>
       
        <div style="width:500px"> div(great-grandparent)
            <p> p(parent)
                <span>span</span>
            </p>
           
        </div>
    </div>
   <script>
        $('span:eq(0)').parent().css({
            color:'red',
            border:'2px solid red'        
        });
        //$('span:eq(0)').parent().praret().parent()
        $('span:eq(0)').parents('ul').css({
             //ul->div로 표기하면 div 2개가 파란색이됨.
             //미기재하면 전체 부모가 모두 변경됨.
            color:'blue',
            border : '2px solid blue'            
        });

        $('span:eq(1)').parentsUntil('.wrap1').css({  //모든 부모모
            color:'green',
            border:'2px solid green'
        })

---------------------------------------------------------------------------

 <h3>후손 요소 선택 함수</h3>
    div.wrap2>div[style="width 500px;"] ch.div(chind)
    <div  class="wrap2">
        <div style="width:500px"> div(child)
            <ul> ul(grandchild)
                <li>(gerat-drandchiod)
                    <span>
                        span
                    </span>
                </li>
            </ul>
        </div>
        <div style="width:500px;"> div(child)
         <p> p(grandchild)  
            <span>
                span
            </span>
        </p>

    </div>
    </div>
    <script>
        $('.wrap2').children().css({
            //children()한번더 기재하면 자식자식
            color : 'blue',
            border : '2px solid blue'
        });
    </script>
    <script>
        $('.wrap2').find('ul').css({
            //특정자식찾기가 가능해짐  //자식은 너무 많아서 find로 직접 찾기
            color:'red',
            border : '2px solid red'
        });
     </script>
 
///////////////////////////////////////////////////////////////////////////////////////////
    <h3>동위요소() 탐색함수</h3>
    <!--div.wrap3[style='border:2px solid black;']>(p+span+h2+h3+p)-->
    <div class="wrap3" style="border:2px solid black;">
        div(parent)
        <p>1번 p태그</p>
        <span>2번 span태그</span>
        <h2>3번 h2태그</h2>
        <h3>4번 h3태그</h3>
        <p>5번 p태그</p>
    </div>
    <script>
        // side 옆에있는
        $('h2').siblings().css({
            color:'red',
            border :'2px solid red'
        });
        $('h2').siblings('p').css({
            color:'blue',
            border :'2px solid blue'
        });
        // prev 앞에
        $('h2').prev().css({
            background:'lightblue'
        });
        $('h2').prevAll().css({
            background : 'gold'
        });
        $('h2').prevUntil('p').css('color','black');
        // next 다음에
        $('h2').next().css({
            color:'plum',
            border:'2px solid plum'
        });
        $('h2').nextAll().css('background', 'wheat');
        $('h2').nextUntil('p').css('border','2px solid darkgreen');
    </script>

'JQUERY > 기초' 카테고리의 다른 글

순서 관련 선택자  (0) 2022.08.28
선택자, CSS, VAL, ATTR  (0) 2022.08.28
축약형  (0) 2022.08.28
<h3>순서 관련 선택자</h3>
    <table border="1">
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>주소</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>5</td>
            <td>강남구</td>
        </tr>
        <tr>
            <td>홍길소</td>
            <td>10</td>
            <td>인천</td>            
        </tr>
        <tr>
            <td>홍길남</td>
            <td>15</td>
            <td>부산</td>
        </tr>
        <tr>
            <td>홍길북</tb>
            <td>20</tb>
            <td>대전</tb>            
        </tr>
        <tr>
            <td>고길동</td>
            <td>25</td>
            <td>서울</td>
        </tr>

        <script>
            $('tr:first').css('background','yellow');
            $('tr:last').css('background','lawngreen');
            $('tr:odd').css('background','cyan');   //홀수 인덱스
            $('tr:even').css('background','wheat');  //짝수 인덱스

            $('table tr:eq(3)').css('color','red');
            $('table tr:nth-child(2n+1)').css('color','yellow')  
            //ntn-child(n)은 부모 안의 모든 요소중 n번째 요소
            //n은 0,1,2,3~~정수를 의미// 5n은 5의 곱하기로 보면 되고 n+5은 5번째 이후 모든 요소로 보면됨.
            //an+b== a증감수, b는 오프셋, n은 정수///3n+1...n=0이면 1....1이면 4, 2이면 7....1부터 3번째마다 선택됨
            //ntn-child(2n+1)은 첫번째 요소로부터 2번째 마다 선택

        </script>


    </table>

'JQUERY > 기초' 카테고리의 다른 글

조상, 후손, 동위 선택자  (0) 2022.08.28
선택자, CSS, VAL, ATTR  (0) 2022.08.28
축약형  (0) 2022.08.28
<body>
    <h1>jQuery 선택자</h1>
    <h3>전체 선택자 : *</h3>
    <script>
        $(function(){
            $('*').css('background','green')
        });
    </script>
    <h4>홍길동</h4>
    <h5>고길동</h5>
    <h6>홍길서</h6>
    <script>
        $(function(){
            $('h4').css('color','orangered')
            $('h5,h6').css('background','white')
        });
    </script>

    <h3>클래스 선택자</h3>
    <p class="g1">클래스 그룹 1</p>
    <p class="g1 g2">클래스 그룹 2</p>
    <p class="g2">클래스 그룹 3</p>

    <script>
        $(function(){
            $('.g1').css('color','red');
            $('.g1.g2').css('color','indianred');
            $('.g1, .g2').css('border','3px solid blue')
        })
    </script>
 
  <h3>아이디 선택자</h3>
    <h1>가나</h1>
    <h1 id="choco">투유</h1>
    <h1>크런치</h1>

    <script>
        $(function(){
            $('#choco').css('color','chocolate')
        })
    </script>

   
 
 
 
 
<h3>자식 선택자, 후손 선택자</h3>
    <ul>
        <li>
            <h4>후손</h4>
        </li>
        <li>자손</li>
            <ol>
                <li>후손11</li>
                <li>후손12</li>
                <li>후손13</li>
            </ol>
        <li>자손</li>
        <li>자손</li>
        <li>자손</li>
        <h4>별종</h4>
    </ul>
    <script>
        $(function(){
            $('li>h4').css('color','white');
            $('ul li').css('background','plum');
        });
    </script>
 
 
<h3>속성 선택자</h3>
<p>
      요소[속성]: 해당 속성을 가진 요소를 선택 <br>      
        ex)&gt;input type = "text"--&gt; $('input[type]'); <br>
        요소[속성=속성값]: 해당 속성의 값을 가진 요소를 선택 <br>
        ex) div[name=daniel]: div 중 name 속성의 값이 'daniel'인 div <br>
        요소[속성~=속성값]: 해당 속성의 특정 값을 단어로써 포함하는 요소 <br>
        ex) div class="hello whoami" -->; $('div[class~=hello]'); <br>
        요소[속성 $=속성값]:속성 안의 값이 특정 단어로 끝나는 경우 <br>
        ex) div class="prisonbox"-->;$('div[class$=box]'); <br>
        요소[속성 *=속성값]: 속성값 들 중 특정 값이 존재하면 선택 <br>
        ex)div class="applefox" -->; $('div[class*=lef'); <br>
    </p>

    <input type="text"> <br>
    <input type="password" class="test1 test2"> <br>
    <input type="radio"><br>
    <input type="checkbox" class="test3"> <br>
    <input type="file">
   
</body>

script로 변경

    <script>
        $(function(){
            $('input[type=text]').val('야 곧 점심시간이다!');
            $('input[class~=test1]').val(12345);
            $('input.test1').val(123456789);
            $('input[type*=ad]').attr('checked',true);  //checked속성을 넣어준다.

          /*  $('input[type$=box]').css('width','25px');
            $('input[type$=box]').css('height','25px')  */

         /*   $('input[type$=box').css('width','25px')
                                .css('height','25px');*/
                $('input[type$=box]').css({
                    width:'25px',
                    height:'25px'
                });

        })
    </script>

'JQUERY > 기초' 카테고리의 다른 글

조상, 후손, 동위 선택자  (0) 2022.08.28
순서 관련 선택자  (0) 2022.08.28
축약형  (0) 2022.08.28
    <script>
       // -JS-
    //  window.onload=function(){
    //         alert("웹 문서 로드 직후 실행 됩니다.");
    //     }
     
       //jQuery
 
    //    jQuery(document).ready(function(){
    //         alert("제이쿼리 실행 확인!");
    //    });
   
       // 축약형 1차
       // jQuery == $
    // $(document).ready(function(){
    //     alert("제이쿼리 축약형 1차");
    //    });
   
      // 축약형 2차 document 생략
       $(function(){
        alert("최종 축약 형태입니다.");
       });

'JQUERY > 기초' 카테고리의 다른 글

조상, 후손, 동위 선택자  (0) 2022.08.28
순서 관련 선택자  (0) 2022.08.28
선택자, CSS, VAL, ATTR  (0) 2022.08.28

+ Recent posts

티스토리툴바