[jQeury] eq(), slice(), first(), last()

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">

$(function(){
	$("div > p").eq(0).click(function(){
		$("pre b").eq(0).toggle();
	});
	$("div > p").eq(1).click(function(){
		$("pre b").slice(1, 2).toggle();
	});
	$("div > p").eq(2).click(function(){
		//$("pre b").first().css("color", "red");
		//$("pre b").eq(2).toggle();
		$("pre b").first().css("color","blue").text("연결되네?").end().eq(2).toggle();
	});
	$("div > p").eq(3).click(function(){
		$("pre b").last().css("color", "green").text("얘도되네?").end().eq(1).toggle();
	});
});

</script>
</head>
<body>

	<pre>
		<b>eq() : 선택한 앨리먼트 들 중에, 인덱스로 탑색</b>
		<b>slice() : 선택한 앨리먼트 들 중에, 인덱스 길이로 탐색</b>
		<b>first() : 선택한 앨리먼트 들 중에, 첫번째 요소</b>
		<b>last() : 선택한 앨리먼트 들 중에, 마지막 요소</b>
	</pre>
	<div>
		<p>eq()</p>
		<p>slice()</p>
		<p>first()</p>
		<p>last()</p>
	</div>

</body>
</html>

$("div > p").eq(0).click(function(){
	$("pre b").eq(0).toggle();
});

div태그의 내부에있는 p태그의 0번지를 클릭하면 (eq() 라는 텍스트) pre태그의 자식요소 p태그의 0번지가 toggle효과를 받습니다.

$("div > p").eq(1).click(function(){
	$("pre b").slice(1, 2).toggle();
});

div태그의 내부에있는 p태그의 1번지(slice() 텍스트)를 클릭하면 pre태그의 자식요소 p태그중 1번지부터 2번지 전까지의 태그들이 toggle효과를 받습니다.

하지만 1번지부터 2번지 전까지라고 하면 1번지만 적용되겠죠?

왼쪽은 slice() 텍스트를 한번 클릭했을때 오른쪽은 한번 더 클릭 했을 때

$("div > p").eq(2).click(function(){
	//$("pre b").first().css("color", "red");
	//$("pre b").eq(2).toggle();
	$("pre b").first().css("color","blue").text("연결되네?").end().eq(2).toggle();
});

first()를 클릭하면 pre태그의 자식 b태그의 첫번째는 color가 바뀝니다.

동시에 2번지의 p태그는 toggle()효과를 받습니다.

여기서 2가지 효과를 주기 위해 원래 두줄로 작성이 되어야하지만 end()를 이용하면 한줄로 바꿀수 있습니다.

end()를 만나면 명령을 끝내고 처음으로 돌아가서 지금까지 수행하지 않았던 명령을 재수행합니다.

$("div > p").eq(3).click(function(){
	$("pre b").last().css("color", "green").text("얘도되네?").end().eq(1).toggle();
});

last()를 클릭하면 pre태그의 자식중 마지막p태그의 color가 변하고 1번지의 p태그는 toggle효과를 받습니다.

728x90

티스토리툴바