jQ 2 - 선택자의 종류

DOM객체에 접근할 수 있는 방법은 CSS에 작성하는 선택자 작성방법과 동일하다.

다양한 선택자의 종류가 있으므로, 아래와 같이 한번씩 작성해 본다. 

<h1>구조선택자와 메서트체이닝</h1>
    <table border=1 width=450> 
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

    <h1>인접 관계 선택자</h1>
    <!-- <ul id="wrap">
        <li>내용 1</li>
        <li>내용 2
            <ul>
                <li>내용 2-1</li>
                <li class="sibling">내용 2-2</li>
                <li class="next">내용 2-3</li>
                <li class="prev">내용 2-4</li>
            </ul>
        </li>
    </ul> -->

    <h1>탐색 선택자</h1>
    <ul id="menu">
        <li>내용 1</li>
        <li>내용 2</li>
        <li>내용 3</li>
    </ul>
    <ul>
        <li>내용 4</li>
        <li>내용 5</li>
        <li>내용 6</li>
    </ul>
    <ul>
        <li><a href="https://www.naver.com" title='네이버'>네이버</a></li>
        <li><a href="https://www.google.com">구글</a></li>
        <li><a href="https://www.daum.net">다 음</a></li>
        <li><a href="https://www.youtube.com">유투브</a></li>
        <li><a href="mailto:admin@naver.com">메일보내기</a></li>
    </ul>

    <h2>내용 7</h2>
    <h2 style='display: none;'>내용 8</h2>
    <h2>내용 9</h2>

    <p>
        <label for="user_name">이름</label>
        <input type="text" name="user_name" id="user_name">
    </p>
    <p>
        <label for="accept">사용자동의</label>
        <input type="checkbox" name="accept" id="accept" checked="checked">
    </p>
    <select name="site" id="site">
        <option value="네이버">네이버</option>
        <option value="다음" selected="selected">다음</option>
    </select>

 

---

 

 

 $(function(){ //jqeury에서 위와 동일한 뜻
        //   $(selector).method();
            // $('tr:odd').css('background', '#f00');//index 홀수
            // $('tr:even').css('background', '#0f0');//index 짝수
            //메서드체이닝 $(selector).css().css().css()...
            $('tr:nth-child(3n+1)').css('background', '#f00');
            $('tr:nth-child(3n+2)').css('background', '#0f0');
            $('tr:nth-child(3n)').css('background', '#00f');
            $('tr:first').css('background', '#333').css('color', '#fff');

            $('.sibling').parent().css('border','1px solid #333');
            $('#wrap li').css('background', '#ff0');
            $('.sibling').siblings().css('background', '#0f0');
            $('body').children().css('border', '2px dotted blue');
            $('.prev').prev().css('background', 'pink');
            $('.next').next().css('background', '#0ff');

            // $('li:first').css('background', 'yellow');
            // $('li:last').css('background', 'green');
            // $('li:first-of-type').css('background', 'red');
            // $('li:last-of-type').css('background', 'blue');
            // $('li:nth-last-of-type(2)').css('background', 'pink');

            $('a[title]').css('background', 'pink');
            $('a[href="https://www.google.com"]').css('background', 'yellow');
            $('a[href^="mailto"]').css('background', 'green');
            $('a[href$="net"]').css('background', 'blue');
            $('a[href*="com"]').css('background', 'orange');

            $('h2:visible').css('border', '1px solid red');
            $('h2:hidden').css('display','block');

            $(":text").css('border', '1px solid red');
            // $(":checked").css('checked', 'true');
            // $(":seleced").css('seclected', 'false');

        });