[JQuery] 속성/필터선택자, 배열
속성 선택자
-기본 선택자 뒤에 붙여 사용
-입력 양식과 관련된 태그를 선택할 때 많이 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('input[type=text]').val('hello jquery').css("background","yellow");
});
</script>
</head>
<body>
<input type="text"/><br>
<input type="password"/><br>
<input type="radio"/>선택1<br>
<input type="checkbox"/>선택2<br>
<input type="file"/><br>
<input type="image" src="images/Koala.jpg" width="100"/><br>
</body>
</html>
필터 선택자
1. 입력 양식 필터 선택자(상태에 의한)
-input: button
-input: checkbox
-input: radio
-input: file
-input: image -> <input type='image' src=''>: submit 버튼을 이미지로 대신할 때 사용. submit 버튼을 대신하는 이미지이기 때문에 경로에 그림이 없으면 '액박'이 표시되고 옆에 '제출'이라는 말이 같이 표시됨
-input: password
-input: text
-input: submit
-input: reset
-요소: checked
-요소: disabled
-요소: enabled
-요소: focus
-요소: selected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>selected</title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
setInterval(function(){
var value=$('select>option:selected').val();
// 현재 선택된 옵션의 값을 변수에 저장
},500);
});
</script>
</head>
<body>
<select>
<option>Apple</option>
<option>Bag</option>
<option>Cat</option>
<option>Dog</option>
</select>
</body>
</html>
2. 위치 필터 선택자
-.선택자를 사용해 문서 객체를 선택한 후 에 다음과 같은 위치를 지정
-요소: odd → 홀수 번째에 위치한 문서 객체 선택
-요소: even → 짝수 번째에 위치한 문서 객체 선택
-요소: first → 첫번째에 위치한 문서 객체 선택
-요소: last → 마지막에 위치한 문서 객체 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('tr:odd').css('background','yellow');
// odd: 홀수, even: 짝수
$('li:first').css('background','blue');
$('li:last').css('background','red');
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul>
<li>내용1</li><li>내용2</li><li>내용3</li><li>내용4</li>
</ul>
<table border="1">
<tr><th>이름</th><th>혈액형</th><th>지역</th></tr>
<tr><td>홍길동</td><td>AB형</td><td>서울시 강남구</td></tr>
<tr><td>홍길동</td><td>AB형</td><td>서울시 강남구</td></tr>
<tr><td>홍길동</td><td>AB형</td><td>서울시 강남구</td></tr>
<tr><td>홍길동</td><td>AB형</td><td>서울시 강남구</td></tr>
<tr><td>홍길동</td><td>AB형</td><td>서울시 강남구</td></tr>
</table>
</body>
</html>
3. 특정 필터 선택자
-$("요소선택: first-of-type"): 요소 무리중 첫번재 요소 선택
-$("요소선택: last-of-type"): 요소 무리중 마지막번재 요소 선택
-$("요소선택: nth-child(3)"): 요소 무리중 세번재 요소 선택
-$("요소선택: nth-child(3n)"): 요소 무리중 3의 배수번째 요소 선택
-$("요소선택: nth-last-of-type(2)"): 요소 무리중 뒤에서 두번째 선택
-$("요소선택: only-child"): 부모 요소 내에 자식요소가 1개뿐인 요소 선택 → $(li: only-child"): 부모 요소 내에 <li>요소가 1개뿐인 요소 선택
-$("요소선택: eq(index)): 요소 무리중 인덱스번호가 참조하는 요소 → $("요소선택").eq(index) 와 같은 표현
-$("요소선택: gt(index)): 요소 무리중 인덱스번호보다 큰 인덱스가 참조하는 요소
-$("요소선택: lt(index)): 요소 무리중 인덱스번호보다 작은 인덱스가 참조하는 요소
-$("요소선택").slice(index,index): 요소 중 인덱스 번호부터 뒤쪽 인덱스 번호전까지 참조하는 요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$("#menu li").eq(2).css("background-color","red"); // 인덱스는 0부터 시작
$("#menu li:eq(3)").css("background-color","blue");
$("#menu li:gt(7)").css({"background-color":"green"});
$("#menu li:lt(2)").css({"background-color":"pink"});
$("#menu li").slice(5,7).css({"background-color":"yellow"});
$("#menu2 li:first-of-type").css({"background-color":"skyblue"});
$("#menu2 li:last-of-type").css({"background-color":"gray"});
$("#menu3 li:only-child").css({"background-color":"yellowgreen"});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li> <li>내용2</li> <li>내용3</li> <li>내용4</li> <li>내용5</li>
<li>내용6</li> <li>내용7</li> <li>내용8</li> <li>내용9</li> <li>내용10</li>
</ul>
<ul id="menu2">
<li>내용1</li> <li>내용2</li> <li>내용3</li> <li>내용4</li>
</ul>
<ul id="menu3">
<li>내용one</li>
</ul>
</body>
</html>
배열 관리
-배열의 생성은 자바스크립트와 같음
1. each()
-매개 변수로 입력한 함수 사용하거나 .for in 반복문처럼 객체나 배열의 요소 검사하는 메서드
- 매개변수로 배열이름과 익명함수를 갖음
-지정된 배열의 요소갯수만큼 반복실행하되 실행내용은 익명함수에 쓰임
-익명함수는 index와 item 변수를 매개변수로 갖으며 매 반복마다 해당 인덱스와 요소값이 매개변수에 전달됨
1) 사이트로 이동하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
// 객체를 배열의 요소로 넣어서 배열을 생성할 수 있음
var array=[ {name:'Naver',link:'https://www.naver.com' },
{name:'Daum',link:'https://www.daum.net' },
{name:'Nate',link:'https://www.nate.com' }
];
// each 함수를 이용한 배열의 각 요소 접근
$(function(){
$.each(array,function(index,item){
// index: 반복 실행 배열의 현재 인덱스 번호
// item: 반복 실행 배열의 현재 값
var output='';
output+="<a href='" + item.link +"'>" +item.name+"</a><br>";
// "<a href='" + "https://www.naver.com" +"'>"+ "Naver" +"</a>" 배열 요소 중 name과 link를 이용해 anchor 태그 구성
document.body.innerHTML+=output;
// 그것을 body의 내용으로 맨 끝에 삽입
});
});
</script>
</head>
</html>
2) 날짜 표시하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
var m_days=[31,28,31,30,31,30,31,31,30,31,30,31];
// 특정 배열을 대상으로 하는 반복실행. m_days 배열의 값을 하나씩 item 변수에 전달하면 반복을 진행. index는 그때 그대의 첨자(인덱스). 배열을 대상으로 하는 반복 실행
$.each(m_days,function(index,item){
var output= '';
output=(index+1)+'월 마지막 날짜: '+item+'일<br>';
document.body.innerHTML+=output;
})
});
</script>
</head>
</html>
2. class 추가 및 제거
1) addClass()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('h1:eq(0)').addClass('high-light-0');
$('h1').eq(1).addClass('high-light-1');
$('h1').eq(2).addClass('high-light-2');
$('h1').eq(3).addClass('high-light-3');
$('h1').eq(4).addClass('high-light-4');
});
</script>
<style type="text/css">
.high-light{background:pink;}
.high-light-0{background:yellow;}
.high-light-1{background:orange;}
.high-light-2{background:blue;}
.high-light-3{background:green;}
.high-light-4{background:red;}
</style>
</head>
<body>
<h1>item - 0</h1>
<h1>item - 1</h1>
<h1>item - 2</h1>
<h1>item - 3</h1>
<h1>item - 4</h1>
</body>
</html>* 코드의 script 내용만 변경
2) each()
-배열을 대상으로 하는 each: $.each(배열이름, 매개변수가 있는 익명함수){});
-selector 선택한 다수의 동일한 태그를 대상으로 할 때: $('selector').each(매개변수가 있는 익명함수(){});
$(function(){
$('h1').each(function(index,item){
// index:0~4 item: $('h1').eq(0)~$('h1').eq(4)
$(item).addClass('high-light-'+index);
// $(this).addClass('high-light-'+index);
// this: 반복 실행문에선 해당 인덱스번째의 아이템(h1태그)을 지목함
});
// $.each($('h1'),function(index,item){});
// 배열의 이름처럼 selector를 지정할 수 있음
});3) return
-인덱스 값과 연산된 결과를 리턴해서 addClass의 적용값이 사용된 예
-$('h1')에 의해 선택된 태그들과 그들에 부여된 index가 서로 매칭되어 함수를 index만큼 호출함
-다수의 태그(또는 class)를 선택자로 선택하면 선택자 내부에 자동으로 index 값이 부여됨. 이 index 값은 위와 같은 each 함수 뿐만 아니라 일반 익명함수에서도 사용될 수 있음.
$(function(){
$('h1').addClass(
function(index){
return 'high-light-'+index;
}
);
});
