J쿼리의 메서드: size(), eq(), first()/last(), index(), not(), filter(), slice(), has(), each()
jQuery 2017. 9. 5. 19:27J쿼리의 메소드
예제1) size() 메서드로 ul의 자식 엘리먼트의 갯수 세어보기
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>01_size_method</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
html * { margin:0; padding:0; }
body span { color:red; font-size: 30px; }
#wrapper > ul > li { margin:5px; list-style: none; border: 1px solid green; }
</style>
<script>
$(document).ready(function(){
var len = $('#wrapper > ul > li').size();
alert(len);
});
</script>
</head>
<body>
<span>size() 메서드로 ul의 자식 엘리먼트의 갯수 세어보기</span>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
예제2) eq() 메서드로 ul의 자식 엘리먼트중 세번째 엘리먼트의 색을 바꿔주세요.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>02_eq_method</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
html * { margin:0; padding:0; }
body span { color:red; font-size: 30px; }
#wrapper > ul > li { margin:5px; list-style: none; border: 1px solid green; }
</style>
<script>
$(document).ready(function(){
var el = $('#wrapper > ul > li').eq(2);
el.css('color', 'red');
console.log($('#wrapper > ul > li'));
});
</script>
</head>
<body>
<span>eq() 메서드로 ul의 자식 엘리먼트중 세번째 엘리먼트의 색을 바꿔주세요.</span>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3 ( 여기를 바꿔 주세요. )</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
예제3) first() 메서드로 ul의 자식 엘리먼트중 첫번째 엘리먼트와 last() 메서드로 마지막 엘리먼트의 색을 바꿔 주세요.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>03_first_and_last_method</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
html * { margin:0; padding:0; }
body span { color:red; font-size: 30px; }
#wrapper > ul > li { margin:5px; list-style: none; border: 1px solid green; }
</style>
<script>
$(document).ready(function(){
var el = $('#wrapper > ul > li');
var firstEl = el.first();
firstEl.css('color', 'red');
var lastEl = el.last();
lastEl.css('color', 'blue');
});
</script>
</head>
<body>
<span>first() 메서드로 ul의 자식 엘리먼트중 첫번째 엘리먼트와 last() 메서드로 마지막 엘리먼트의 색을 바꿔 주세요.</span>
<div id="wrapper">
<ul>
<li>1 ( 여기를 바꿔 주세요. )</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6 ( 여기를 바꿔 주세요. )</li>
</ul>
</div>
</body>
</html>
예제4) ul의 자식 엘리먼트중 네번째 엘리먼트를 index() 메서드로 해당 index값을 alert()을 띄워 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>04_index_method</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
html * { margin:0; padding:0; }
body span { color:red; font-size: 30px; }
#wrapper > ul > li { margin:5px; list-style: none; border: 1px solid green; }
</style>
<script>
$(document).ready(function(){
var el = $('#wrapper #el');
var i = el.index();
alert(i);
});
</script>
</head>
<body>
<span>ul의 자식 엘리먼트중 네번째 엘리먼트를 index() 메서드로 해당 index값을 alert()을 띄워 봅시다.</span>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li id="el">4 ( 여긴 몇번째 index일까요?? )</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
예제5) ul의 자식 엘리먼트중 클래스값이 el이 아닌 엘리먼트만 글자색을 변경해 주세요.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>05_not_method</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
html * { margin:0; padding:0; }
body span { color:red; font-size: 30px; }
#wrapper > ul > li { margin:5px; list-style: none; border: 1px solid green; }
</style>
<script>
$(document).ready(function(){
var el = $('#wrapper li').not('.el');
el.css('color', 'red');
});
</script>
</head>
<body>
<span>ul의 자식 엘리먼트중 클래스값이 el이 아닌 엘리먼트만 글자색을 변경해 주세요.</span>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="el">4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
예제6) ul의 자식 엘리먼트중 클래스값이 el인 엘리먼트만 글자색을 변경해 주세요.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>06_filter_method</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
html * { margin:0; padding:0; }
body span { color:red; font-size: 30px; }
#wrapper > ul > li { margin:5px; list-style: none; border: 1px solid green; }
</style>
<script>
$(document).ready(function(){
var el = $('#wrapper li').filter('.el');
el.css('color', 'red');
});
</script>
</head>
<body>
<span>ul의 자식 엘리먼트중 클래스값이 el인 엘리먼트만 글자색을 변경해 주세요.</span>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="el">4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
예제7) slice() 메서드를 이용하여 해당 위치에 색을 바꿔주세요.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>08_slice_method</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
html * { margin:0; padding:0; }
body span { color:red; font-size: 30px; }
#wrapper > ul > li { margin:5px; list-style: none; border: 1px solid green; }
</style>
<script>
$(document).ready(function(){
var el = $('#wrapper > ul > li');
el = el.slice(2,5);
el.css('color', 'red');
});
</script>
</head>
<body>
<span>slice() 메서드를 이용하여 해당 위치에 색을 바꿔주세요.</span>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3 ( 여기를 바꿔 주세요. )</li>
<li>4 ( 여기를 바꿔 주세요. )</li>
<li>5 ( 여기를 바꿔 주세요. )</li>
<li>6</li>
</ul>
</div>
</body>
</html>
예제8) has() 메서드를 사용해서 li엘리먼트중 자식으로 ul엘리먼트를 가지고 있는 엘리먼트를 찾아서 색을 바꿔 주세요.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>09_has_method</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
html * { margin:0; padding:0; }
body span { color:red; font-size: 30px; }
#wrapper > ul > li { margin:5px; list-style: none; border: 1px solid green; }
#wrapper > ul > li > ul > li { margin:5px; list-style: none; border: 1px solid blue; }
</style>
<script>
$(document).ready(function(){
$('#wrapper > ul > li')
.has('ul')
.css('color', 'red');
});
</script>
</head>
<body>
<span>has() 메서드를 사용해서 li엘리먼트중 자식으로 ul엘리먼트를 가지고 있는 엘리먼트를 찾아서 색을 바꿔 주세요.</span>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>
4
<ul>
<li>4-1</li>
<li>4-2</li>
<li>4-3</li>
<li>4-4</li>
</ul>
</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
예제9) each() 메소드를 사용하여 ul엘리먼트 자식엘리먼트를 순환하여 모두 색을 바꿔 주세요.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>09_each_메소드.html</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
html * { margin:0; padding:0; }
body span { color:red; font-size: 30px; }
#wrapper > ul > li { margin:5px; list-style: none; border: 1px solid green; }
#wrapper > ul > li > ul > li { margin:5px; list-style: none; border: 1px solid blue; }
</style>
<script>
$(document).ready(function(){
$('#wrapper > ul > li').each(function(i){
console.log(this);
console.log($(this));
$(this).css('color', 'red');
});
});
</script>
</head>
<body>
<span>each() 메소드를 사용하여 ul엘리먼트 자식엘리먼트를 순환하여 모두 색을 바꿔 주세요.</span>
<div id="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
'jQuery' 카테고리의 다른 글
| test (0) | 2022.08.31 |
|---|---|
| 오늘부터 마감일까지의 날짜 일수 계산 카운트 (0) | 2018.01.30 |
| 제이쿼리 스크롤메뉴 (0) | 2017.08.29 |
| 2. 제이쿼리 문법 기초: attr(), 클래스명 바꾸기 (0) | 2017.08.24 |
| 1. 제이쿼리 문법 기초 (0) | 2017.08.24 |
