728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220422/jquery5.html -->
<html>
<head>
<meta charset="UTF-8">
<title>반복문 예제</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$("h3:odd").css({"background":"yellow", "color":"blue"})
$("h3:even").css({"background":"black", "color":"yellow"})
//nth-child : 태그의 종류와 상관없이 전체 갯수
/*
$("h2:nth-child(3n)").css({"background":"black", "color":"white"})
$("h2:nth-child(3n+1)").css({"background":"yellow", "color":"blue"})
$("h2:nth-child(3n+2)").css({"background":"blue", "color":"yellow"})
*/
//h2:nth-of-type : h2 태그 중 3의 배수
$("h2:nth-of-type(3n)").css({"background":"black", "color":"white"})
$("h2:nth-of-type(3n+1)").css({"background":"yellow", "color":"blue"})
$("h2:nth-of-type(3n+2)").css({"background":"blue", "color":"yellow"})
/*
$("h1").css("background", "pink")
$("h1:eq(0)").css("color", "red")
$("h1:eq(1)").css("color", "orange")
$("h1:eq(2)").css("color", "yellow")
$("h1:eq(3)").css("color", "green")
$("h1:eq(4)").css("color", "blue")
$("h1:eq(5)").css("color", "navy")
$("h1:eq(6)").css("color", "purple")
*/
//반복문으로 처리하기
let colors = ["red","orange", "yellow", "green", "blue", "navy", "purple"]
//$("h1") : h1 태그들. 배열
//each : 배열의 요소들 반복
//$(태그).each(배열,function(인덱스,태그한개){....})
//(i : 요소인덱스, item : h1태그 한개)
//$(this) : 현재 item객체
/*
$("h1").each(function(i, item){
$(this).css("color", colors[i])
})
*/
//$.each(배열,function(인덱스,요소){....})
$.each(colors,function(i, c){
$("h1:eq(" + i + ")").css("color", c)
})
})
</script>
</head>
<body>
h3태그의 홀수 번째를 노랑바탕에 파랑글씨, 짝수번째를 검정바탕에 노랑글씨로 설정하기<br>
<h3>H3:Header_0</h3>
<h3>H3:Header_1</h3>
<h3>H3:Header_2</h3>
<h3>H3:Header_3</h3>
<h3>H3:Header_4</h3>
<h3>H3:Header_5</h3>
<hr>
h2 태그 중 3의 배수인 경우 검정바탕에 흰글씨, 3배수의 나머지가 1인 경우 노랑바탕에 파랑글씨, 3배수의 나머지가 2인 경우 파랑바탕에 노랑글씨 설정하기<br>
<h2>H2:Header_0</h2>
<h2>H2:Header_1</h2>
<h2>H2:Header_2</h2>
<h2>H2:Header_3</h2>
<h2>H2:Header_4</h2>
<h2>H2:Header_5</h2>
<hr>
h1 태그 분홍바탕에 빨강, 오렌지, 노랑, 초록, 파랑, 남색, 보라색으로 설정하기<br>
<h1>H1:Header_0</h1>
<h1>H1:Header_1</h1>
<h1>H1:Header_2</h1>
<h1>H1:Header_3</h1>
<h1>H1:Header_4</h1>
<h1>H1:Header_5</h1>
<h1>H1:Header_6</h1>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 21. Jquery css 함수 (0) | 2022.04.25 |
|---|---|
| [Jquery] 21. Jquery each 함수(let arr=, $.each) (0) | 2022.04.22 |
| [Jquery] 21. Jquery table 태그 다루기(nth-child, tr:first, tr:last, tr:eq) (0) | 2022.04.22 |
| [Jquery] 21. Jquery 선택자 사용 (0) | 2022.04.22 |
| [Jquery] 21. Jquery alert창 띄우기(setTimeout) (0) | 2022.04.22 |