티스토리 뷰

[개발]프로그래밍/jquery

[jquery] 필터 선택자 - :을 포함한 선택자

좋은 블로그 2016. 9. 28. 13:08

1. 필터 선택자 - 역할

기본 선택자 뒤에서 사용


세부적으로 좀 더 섬세하게 선택자를 선택


2. 필터 선택자 - 입력양식 선택자 예제

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
 
 $('input:password').css('color','blue');
 
 alert($('select > option:selected').val());
  
});
</script>
 
<body>
    <div>
        <input type='text' value='test_1'>   </input>
        <br>
        <input type='text' value='test_2'>   </input>
        <br>
        <input type='text' value='test_3'>   </input>
        <br>
        <input type='password' value='test1'>   </input>
        <br>
        <input type='password' value='test2'>   </input>
        <br>
    </div>
    <select>
     <option value="test1">테스트1</option>
     <option value="test2" selected>테스트2</option>
</select>
</body>





◈ 결과화면


3. 필터 선택자 - 위치 선택자 역할

 위치 선택자

역할

 

기본요소:odd

 

홀수 번째 위치한 객체 선택

 

기본요소:even

 

짝수 번째 위치한 객체 선택

 

기본요소:first

 

첫 번째에 위치한 객체 선택 

 

기본요소:last 

 

마지막에 위치한 객체 선택


4. 필터 선택자 - 위치 선택자 예제

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
 $('tr:odd').css('color','white'); 
 $('tr:odd').css('background','blue');
});
</script>
 
<body>
    <table>
        <tr><th>아이디</th><th>번호</th><th>성명</th></tr>
        <tr><td>test1</td><td>1</td><td>테스트1</td></tr>
        <tr><td>test2</td><td>2</td><td>테스트2</td></tr>
        <tr><td>test3</td><td>3</td><td>테스트3</td></tr>
        <tr><td>test4</td><td>4</td><td>테스트4</td></tr>
    </table>
</body>





◈ 결과화면


5. 필터 선택자 - 함수 선택자 역할

 함수 선택자

역할

 

기본요소:contains(문자)


문자가 포함된 문서 객체

 

기본요소:eq(숫자)


숫자번째에 위치한 문서 객체

 

기본요소:gt(숫자)


숫자번째를 초과한 문서 객체

 

기본요소:lt(숫자) 


숫자번째 미만에 위치한 객체

 

기본요소:has(태그)


태그가 포함된 문서 객체


6. 필터 선택자 - 함수 선택자 예제

1. 아무작업도 하지 않은 기본 테이블

◈ 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
 
});
</script>
 
<body>
    <table>
        <tr><th>아이디</th><th>번호</th><th>성명</th></tr>
        <tr><td>test1</td><td>1</td><td>테스트1</td></tr>
        <tr><td>test2</td><td>2</td><td>테스트2</td></tr>
        <tr><td>test3</td><td>3</td><td>테스트3</td></tr>
        <tr><td><h4>test4<h4></td><td>4</td><td>테스트4</td></tr>
    </table>
</body>





◈ 결과화면






 2. 문자 3인 포함된 tr를 검색하여 작업


◈ 코드

 

1
2
3
4
5
6
7
<script>
$(document).ready(function () 
{
 $('tr:contains("3")').css('color','white'); 
 $('tr:contains("3")').css('background','blue');
});
</script>





◈ 결과화면



3. 2번째에 위치한 tr를 찾아 작업 (0부터 시작)


◈ 코드


1
2
3
4
5
6
7
<script>
$(document).ready(function () 
{
 $('tr:eq(2)').css('color','white'); 
 $('tr:eq(2)').css('background','blue');
});
</script>





◈ 결과화면



 4. 2번째를 초과한 tr를 찾아 작업


◈ 코드


1
2
3
4
5
6
7
<script>
$(document).ready(function () 
{
 $('tr:gt(2)').css('color','white'); 
 $('tr:gt(2)').css('background','blue');
});
</script>





◈ 결과화면





5. 2번째 미만 tr를 찾아 작업


◈ 코드


1
2
3
4
5
6
7
<script>
$(document).ready(function () 
{
 $('tr:lt(2)').css('color','white'); 
 $('tr:lt(2)').css('background','blue');
});
</script>


◈ 결과화면



6. h4 태그를 포함한 tr를 찾아 작업


◈ 코드


1
2
3
4
5
6
7
<script>
$(document).ready(function () 
{
 $('tr:has(h4)').css('color','white'); 
 $('tr:has(h4)').css('background','blue');
});
</script>

◈ 결과화면



'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jquery] filter() - 객체 필터링 선택  (0) 2016.10.01
[jquery] addClass() ,removeClass() - 클래스 속성 추가 , 삭제  (0) 2016.09.30
[jquery] 속성 선택자 - 속성,구분기호,값  (0) 2016.09.28
[jquery] 자식 선택자 - >의 포함여부에 따른 선택  (0) 2016.09.28
[jquery] 기본 선택자 - *,아이디,클래스  (0) 2016.09.28
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday