728x90
반응형
[filter]
<script>
$(document).ready(function () {
$('h1').css('background','orange')
.filter(':even').css('color','white')
.filter(':odd').css('color','red')
})
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
위와같이 fiter를 사용할 때 적용은 되지만 정확한 설정에 맞게 적용이 되지 않는다.
여기서 개발자가 의도하는 정확한 설정은 h1, h1의 홀수요소, h1의 짝수요소 각각의 스타일 속성을 다르게 지정한다.
하지만 위의 코드상의 순서대로 적용된다면 h1요소의 홀수에 filter를 걸고 h1요소의 홀수중 짝수에 filter가 걸리기 때문이다.
filter를 한번 사용할 때 마다 h1 이라는 문서 객체의 범위가 점점 좁아진다.
h1 -> h1:even(홀수) -> h1:even:odd(홀수중 짝수)
[end]
올바른 범위는 h1 -> h1: even(짝수) -> h1:odd(홀수) 가 되어야 하며 end() 메서드를 사용한다.
end() 메서드는 문서 객체를 한 단계 뒤로 돌려주는 기능을 한다.
<script>
$(document).ready(function () {
$('h1').css('background','orange')
.filter(':even').css('color','white').end()
.filter(':odd').css('color','red')
})
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>h1 객체의 범위에 filter() 메서드를 통해 문서 객체가 h1:even(짝수) 으로 좁아졌다면 end() 메서드를 사용하여 한단계 전인 h1 객체 상태로 되돌려 준 뒤 다시 filter() 메서드를 사용하여 h1:odd(홀수)를 선택한다.
[add]
jQuery에서는 문서 객체의 범위 확장을 위해 add() 메서드를 지원한다.
아래의 코드를 보자.
<script>
$(document).ready(function () {
$('h1').css('background','gray');
$('h2').css('float','left');
})
</script>
</head>
<body>
<h1>Header-0</h1>
<h2>Header-1</h2>
<h1>Header-2</h1>
<h2>Header-3</h2>
<h1>Header-4</h1>
</body>h1태그와 h2태그를 각각 선택하여 따로 접근하여 css속성을 부여하였다.
<script>
$(document).ready(function () {
$('h1').css('background','gray').add('h2').css('float','left');
})
</script>
</head>
<body>
<h1>Header-0</h1>
<h2>Header-1</h2>
<h1>Header-2</h1>
<h2>Header-3</h2>
<h1>Header-4</h1>
</body>add() 메서드를 통해 메서드 체이닝 기법으로 두가지 선택자 각각의 css속성을 부여하는 코드를 한줄로 구현할 수 있다.
728x90
반응형
'JavaScript > jQuery' 카테고리의 다른 글
| jQuery addClass() 동일한 태그의 class명을 +1 씩 증가하여 추가하는 문법 (0) | 2022.01.03 |
|---|---|
| [jQuery] css() 함수 사용 문법 종류 (0) | 2022.01.03 |
| each() 함수 '요소' 관리 사용 문법 (0) | 2022.01.03 |
| 속성선택자 , (입력양식)필터 선택자 / 요소[속성=값] , 요소:속성 (0) | 2022.01.03 |
| 버튼 클릭시 특정영역 숨기기 보이기 (1) | 2020.10.05 |