<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src ="../js/jquery-3.2.1.js"></script>
</head>
<!-- 기본 필터 메서드
filter() : 문서 객체를 필터링합니다.
형식) $(selector).filter(selector);
$(selector).filter(function(){});
-->
<script>
//필터를 계속 줄 수 있다. (필터의 필터)
$(function(){
$('h1').css('background','orange')
.filter(':odd').end().css('color','red')
.filter(':even').css('color','white')
});
</script>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
<h1>Header-3</h1>
<h1>Header-4</h1>
<h1>Header-5</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src ="../js/jquery-3.2.1.js"></script>
</head>
<!-- 기본 필터 메서드
filter() : 문서 객체를 필터링합니다.
형식) $(selector).filter(selector);
$(selector).filter(function(){});
-->
<script>
//필터를 계속 줄 수 있다. (필터의 필터)
$(function(){
$('h1').eq(0).css('background','orange');
$('h1').eq(1).css('background','pink');
$('h1').eq(-1).css('background','hotpink');
});
</script>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src ="../js/jquery-3.2.1.js"></script>
</head>
<!--
h1태그에 background -> black
color -> green
h2태그를 추가로 선택해 color -> green
-->
<script>
//.aad()를 이용해서 태그를 적절한 곳에 걸어 줄 수 있다.
$(function(){
$('h1').css('background','black')
.add('h2')
.css('color','green');
});
</script>
<body>
<h1>Header-0</h1>
<h2>Header-1</h2>
<h1>Header-2</h1>
<h2>Header-3</h2>
<h1>Header-4</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src ="../js/jquery-3.2.1.js"></script>
</head>
<!--
h1태그에 background -> black
color -> green
h2태그를 추가로 선택해 color -> green
-->
<script>
//.aad()를 이용해서 태그를 적절한 곳에 걸어 줄 수 있다.
$(function(){
$('h1').each(function(){
if($(this).is('.select')){
$(this).css('background','orange')
$(this).hide('.select')
$(this).show('.select')
}
});
});
</script>
<body>
<!-- h1 태그 중 select 클래스 속성이 있는 문서 객체에 스타일을 적용합니다. -->
<h1 class ="item select">Header-0</h1>
<h1>Header-1</h1>
<h1 class ="item select">Header-2</h1>
<h2 class ="item select">Header-3</h2>
</body>
</html>
' sundries' 카테고리의 다른 글
| 3-1 addClass() 콜백 함수 (0) | 2018.01.12 |
|---|---|
| 2-10 xml 문서 find 로 찾기 (0) | 2018.01.12 |
| 2-4 체이닝 (0) | 2018.01.12 |
| 2-3 filter(function(index)) (0) | 2018.01.12 |
| 2-2 filter() (0) | 2018.01.12 |
