2. 선택자

2023. 3. 28. 11:17ㆍLibrary/jQuery

728x90
반응형

$(selector) 또는 jQuery(selector)

  • 각각의 표현식은 각 DOM요소의 확장 개체인 jQuery 개체 집합을 반환
  • 일반 DOM개체를 jQuery 개체집합으로 반환하여, jQuery개체가 지원하는 메서드 적용 가능
  • body태그 내의 모든 DOM 요소에 접근 가능
  • $("selector")
    • selector로 읽어오는 개체의 반환값은 jquery에서 사용할 수 있는 개체
  • CSS선택자를 그대로 사용

1. 기본 선택자

  • $('*') : 전체 선택자
  • $('#id') : id 선택자
  • $('.className') : 클래스 선택자
  • $('tagName') : 태그 선택자 
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $('*').css("font=size","20px"); //전체 선택자
        $('h2').css("font-style","italic"); //태그 선택자
        $('#header2').css('color','blue'); // 아이디 선택자
        $('.ph').css('color','red');
        $('h1, div, span').css('border','1px solid green');    
        $('span.ph').css('background','yellow');
        $('.ph.red').css('background','cyan');
    })

</script>
</head>
<body>
    <h1>h1태그</h1>
    <h2>h2 태그1</h2>
    <h2 id="header2">h2태그 2</h2>
    <div>div 태그</div>
    <p class='ph'>문단1</p>
    <p class='ph red'>문단2</p>
    <span class='ph'>안녕</span>
</body>
</html>

2. 자식선택자, 후손선택자

  • $('parent > child') : 자식선택자 / p 요소 바로 아래 자식인 c요소 선택
  • $('parent child) : 후손선택자/ p요소 하위에 존재하는 모둔 a요소 선택 
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $('#div1 div > *').css('border','1px solid red');
        $('#div2 div *').css('border','1px solid blue');

        $('#div1 div > li').css('background','yellow');
        $('#div2 div li').css('background','cyan');

    });
</script>
</head>
<body>
    <div id = "div1">
        <div>
            <div>
                <span>프로그래밍 언어</span>
            </div>
            <ul>
                <li>spring</li>
                <li>jsp</li>
                <li>jquery</li>
            </ul>
        </div>
    </div>
    <div id = "div2">
        <div>
            <div>
                <span>프로그래밍 언어</span>
            </div>
            <ul>
                <li>spring</li>
                <li>jsp</li>
                <li>jquery</li>
            </ul>
        </div>
    </div>
</body>
</html>

3. 인접선택자, 이웃 선택자

  • $('prev + next') : 인접 선택자, p요소 바로 다음에 나오는 형제 n요소 선택
  • $('prev ~ siblings') : 이웃 선택자, p요소 다음에 나오는 모든 형제 s요소 선택 
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $('label+input').css('border','1px solid blue'); //다로 다음에 나오는 형제
        $('div.start ~ div').css('background','cyan'); //다음에 나오는 모든 형제
    });
</script>
</head>
<body>
    <div>
        <label>이름 : </label><input type="text">
    </div>
    <div class="start">
        <label>아이디 : </label><input type="text">
    </div>
    <div>
        <span>비밀번호 : </span><input type="text">
    </div>
    <p>
        <label>주소 : </label><input type="text">
    </p>
    <div>
        <label>전화번호 : </label><input type="text">
    </div>
</body>
</html>

4. 속성 선택자

캡처 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $('input[type=text]').val('java');
        $('a[title]').css('color','orange');
    });
</script>
</head>
<body>
    <input type="text">
    <input type="password">
    <input type="radio">
    <input type="checkbox">
    <hr>
    <a href="#">a태그1</a><br>
    <a href="#" title="a태그입니다">a태그2</a><br>
</body>
</html>

5. 필터선택자

  • 필터선택자

캡처1

  • 입력양식 필터선택자

캡처2
3 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $('tr:first').css('font-style','italic');
        $('tr:even').css('font-size','25px');
        $('tr:eq(1)').css('color','orange');
        $('tr:gt(4)').css('color','blue').css('font-weight','bold');
        $('th:contains("제목2")').css('color','red');


    });
</script>
</head>
<body>
    <h1>filter 선택자</h1>
    <table border="1" style="width:400px">
        <tr>
            <th>제목1</th>
            <th>제목2</th>
        </tr>
        <tr>
            <td>내용1</td>
            <td>내용2</td>
        </tr>
        <tr>
            <td>내용1</td>
            <td>내용2</td>
        </tr>
        <tr>
            <td>내용1</td>
            <td>내용2</td>
        </tr>
        <tr>
            <td>내용1</td>
            <td>내용2</td>
        </tr>
        <tr>
            <td>내용1</td>
            <td>내용2</td>
        </tr>
        <tr>
            <td>내용1</td>
            <td>내용2</td>
        </tr>
        <tr>
            <td>내용1</td>
            <td>내용2</td>
        </tr>
        <tr>
            <td>내용1</td>
            <td>내용2</td>
        </tr>
    </table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src = "../js/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("#btn1").click(function() {
            var str="체크된 값 - " + $("input[type=radio]:checked").val() + "<br>";
            str += "selected된 값 - " + $("select > option:selected").val() + "<br>";
            $("#div1").html(str);
            //$("#div1").text(str);
            });
    });
</script>
</head>
<body>
    <input id="rd1" type="radio" name="num" value="one" >하나
    <input id="rd2" type="radio" name="num" value="two" checked>둘<br><br>
    <select id="sel1">
        <option value="1">사과</option>
        <option value="2">귤</option>
        <option value="3" selected>배</option> 
    </select>
    <input id="btn1" type="button" value="버튼" />
    <h2>결과</h2>
    <div id="div1"></div> 
</body>
</html>
728x90
반응형

'Library > jQuery' 카테고리의 다른 글

6. 탐색메서드  (0) 2023.03.28
5. css 관련 메서드  (0) 2023.03.28
4. 문서 객체 조작  (0) 2023.03.28
3. 기본메서드  (0) 2023.03.28
1. 제이쿼리란  (0) 2023.03.28

관련글

댓글 0

티스토리툴바