jQuery

[jQuery] 4장 필터 및 기본 필터

반응형

 

필터

 

: 선택한 요소에서 선택자, 변수, 함수를 통해 선택하는 메서드

 

기본 필터, 자식 필터, 내용 필터, 입력 상태 필터, 기타 필터 등이 존재한다.

 

 

필터 설 명
:first 첫번째 요소
:last 마지막 요소
:not(selector) selector이 일치되는 요소 제외
:even 짝수요소
:odd 홀수요소
:eq(index) index에 일치하는 요소
:gt(index) index보다 큰 요소
:lt(index) index보다 작은 요소

 

 

 

  • :first
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
	$('li:first').css('background-color', 'yellow');
});
</script>
<body>
  <h4>기본필터</h4>
  <ul>
    <li>:first</li>
    <li>:last</li>
    <li>:eq(index)</li>
    <li>:gt(index)</li>
    <li>:lt(index)</li>
    <li class="not">:odd</li>
    <li class="not">:even</li>
    <li class="not">:not(select)</li>
  </ul>
</body>
</html>

 

결과 화면1

 

 

 

  • :last
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
	$('li:last').css('background-color', 'yellow');
});
</script>
<body>
  <h4>기본필터</h4>
  <ul>
    <li>:first</li>
    <li>:last</li>
    <li>:eq(index)</li>
    <li>:gt(index)</li>
    <li>:lt(index)</li>
    <li class="not">:odd</li>
    <li class="not">:even</li>
    <li class="not">:not(select)</li>
  </ul>
</body>
</html>

 

결과 화면2

 

 

 

  • :eq
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
	$('li:eq(4)').css('font-style', 'italic');
});
</script>
<body>
  <h4>기본필터</h4>
  <ul>
    <li>:first</li>
    <li>:last</li>
    <li>:eq(index)</li>
    <li>:gt(index)</li>
    <li>:lt(index)</li>
    <li class="not">:odd</li>
    <li class="not">:even</li>
    <li class="not">:not(select)</li>
  </ul>
</body>
</html>

 

결과 화면3

 

 

 

  • :lt, :gt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){	
  // lt, gt에 지정한 index는 포함하지 않음
	$('li:lt(4)').css('color', 'green');
	$('li:gt(4)').css('color', 'brown');
});
</script>
<body>
  <h4>기본필터</h4>
  <ul>
    <li>:first</li>
    <li>:last</li>
    <li>:eq(index)</li>
    <li>:gt(index)</li>
    <li>:lt(index)</li>
    <li class="not">:odd</li>
    <li class="not">:even</li>
    <li class="not">:not(select)</li>
  </ul>
</body>
</html>

 

결과 화면4

 

 

 

  • :odd
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
	$('li:odd').css('border-style','inset');
});
</script>
<body>
  <h4>기본필터</h4>
  <ul>
    <li>:first</li>
    <li>:last</li>
    <li>:eq(index)</li>
    <li>:gt(index)</li>
    <li>:lt(index)</li>
    <li class="not">:odd</li>
    <li class="not">:even</li>
    <li class="not">:not(select)</li>
  </ul>
</body>
</html>

 

결과 화면5

 

 

 

  • :even
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
	$('li:even').css('border-style','outset');
});
</script>
<body>
  <h4>기본필터</h4>
  <ul>
    <li>:first</li>
    <li>:last</li>
    <li>:eq(index)</li>
    <li>:gt(index)</li>
    <li>:lt(index)</li>
    <li class="not">:odd</li>
    <li class="not">:even</li>
    <li class="not">:not(select)</li>
  </ul>
</body>
</html>

 

결과 화면6

 

 

 

  • :not
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
	$('li:not(.not)').css('textDecoration','line-through');
});
</script>
<body>
  <h4>기본필터</h4>
  <ul>
    <li>:first</li>
    <li>:last</li>
    <li>:eq(index)</li>
    <li>:gt(index)</li>
    <li>:lt(index)</li>
    <li class="not">:odd</li>
    <li class="not">:even</li>
    <li class="not">:not(select)</li>
  </ul>
</body>
</html>

 

결과 화면7

 

 

 

  • 필터 first, last, eq, lt, gt의 경우 메소드로 대체하기를 권장
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
	$('li').first().css('background-color', 'yellow');

	$('li').last().css('background-color', 'yellow');

	$('li').eq(4).css('font-style', 'italic');

	// :lt :gt를 대체할 slice(str, end미포함 및 생략 가능)
	$('li').slice(0, 4).css('color', 'green');
	$('li').slice(5).css('color', 'red');
});
</script>
<body>
  <h4>기본필터(통과선으로 표시된 필터는 메소드로 대체할 것. v3.4~)</h4>
  <ul>
    <li>:first</li>
    <li>:last</li>
    <li>:eq(index)</li>
    <li>:gt(index)</li>
    <li>:lt(index)</li>
    <li class="not">:odd</li>
    <li class="not">:even</li>
    <li class="not">:not(select)</li>
  </ul>
</body>
</html>

 

결과 화면8

 

 

 

자식 필터

 

 

필터 설 명
:first-child 부모에 속한 자식 중 첫번째 자식요소
:last-child 부모에 속한 자식 중 마지막 자식요소
:nth-child(index) 자식 중 index로 지정된 위치와 일치
:nth-child(even/odd) 짝수, 홀수 번째 요소들과 일치
:nth-child(equation) 방정식 값 위치의 요소들과 일치
:only-child 자신이 부모 요소의 유일한 자식 요소인 것과 일치 

 

 

 

  • first-child, first, last-child, nth-child
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
ul {
  display: inline-block;
}
td {
  padding: 10px;
}
</style>
<script>
$(function(){
  // 서로 다른 대상(부모)에 속한 각 요소의 첫번째/마지막 항목
  $('li:first-child').css('color','purple');
  
  // first()는 대상요소 전체 중 첫번째 항목
  $('li').first().css('border-style','dotted');
  
  // 테이블에 배경색 넣기
  // child관련 속성 index 1부터 시작
  $('td:last-child').css('background','olive');
  $('td:nth-child(3)').css('background','gray');
  
  // 배수 칸마다 +시작위치부터
  $('td:nth-child(3n+4)').css('background','red');
});
  </script>
</head>
<body>
  <h4>자식필터</h4>
  <ul>
    <li>first-child1</li>
    <li>last-child1</li>
    <li>nth-child1</li>
    <li>only-child1</li>
  </ul>
  <ul>
    <li>first-child2</li>
    <li>last-child2</li>
    <li>nth-child2</li>
    <li>only-child2</li>
  </ul>

  <hr>
  
  <table border="1">
    <tr>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
    </tr>
  </table>

</body>
</html>

 

결과 화면9

 

 

 

  • tr:first-child td, tr:nth-child(3) td, nth-child(even)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
ul {
  display: inline-block;
}
td {
  padding: 10px;
}
</style>
<script>
$(function(){  
  // 레이어 구조상 td가 tr을 덮음
  // $('tr:first-child').css('background','gold');
  $('tr:first-child td').css('background','gold');
  $('tr:nth-child(3) td').slice(2,7).css('background','navy');

  // 행 기준 홀수,짝수
  // $('tr:nth-child(odd) td').css('background','black');
  $('tr:nth-child(even) td').css('background','pink');
});
  </script>
</head>
<body>
  <h4>자식필터</h4>
  <ul>
    <li>first-child1</li>
    <li>last-child1</li>
    <li>nth-child1</li>
    <li>only-child1</li>
  </ul>
  <ul>
    <li>first-child2</li>
    <li>last-child2</li>
    <li>nth-child2</li>
    <li>only-child2</li>
  </ul>

  <hr>
  
  <table border="1">
    <tr>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
    </tr>
  </table>

</body>
</html>

 

결과 화면10

 

 

 

  • nth-child(odd)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
ul {
  display: inline-block;
}
td {
  padding: 10px;
}
</style>
<script>
$(function(){
  // 열 기준 홀수,짝수
  $('td:nth-child(odd)').css('background','black');
  // $('td:nth-child(even)').css('background','pink');
});
  </script>
</head>
<body>
  <h4>자식필터</h4>
  <ul>
    <li>first-child1</li>
    <li>last-child1</li>
    <li>nth-child1</li>
    <li>only-child1</li>
  </ul>
  <ul>
    <li>first-child2</li>
    <li>last-child2</li>
    <li>nth-child2</li>
    <li>only-child2</li>
  </ul>

  <hr>
  
  <table border="1">
    <tr>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
      <td></td><td></td><td></td>
    </tr>
  </table>

</body>
</html>

 

결과 화면11

 

 

 

  • only-child
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
ul {
  display: inline-block;
}
td {
  padding: 10px;
}
</style>
<script>
$(function(){
  // only-child
  $('table:only-child').css('border','5px dashed orange');
});
  </script>
</head>
<body>
  <div>
    <table border="1">
      <tr>
        <td></td><td></td><td></td>
        <td></td><td></td><td></td>
        <td></td><td></td><td></td>
      </tr>
      <tr>
        <td></td><td></td><td></td>
        <td></td><td></td><td></td>
        <td></td><td></td><td></td>
      </tr>
      <tr>
        <td></td><td></td><td></td>
        <td></td><td></td><td></td>
        <td></td><td></td><td></td>
      </tr>
      <tr>
        <td></td><td></td><td></td>
        <td></td><td></td><td></td>
        <td></td><td></td><td></td>
      </tr>
    </table>
  </div>
</body>
</html>

 

결과 화면12

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 6장 기타 필터  (0) 2024.02.21
[jQuery] 5장 내용 필터  (0) 2024.02.21
[jQuery] 3장 jQuery 선택자  (0) 2024.02.21
[jQuery] 2장 jQuery 기초  (0) 2024.02.20
[jQuery] 1장 jQuery와 사용법  (0) 2024.02.19

티스토리툴바