코밍이의 하루
[JQuery] jQuery 배열 메소드 본문
1. 개발 환경
구분 | 내용 |
사용 언어 | HTML5, CSS3, JS, jQuery |
개발환경 | Visual Studio Code |
참고 도서 | [Do it] 자바스크립트 + 제이쿼리 입문 |
웹브라우저 | Chrome |
2. 주요 문법
1) 배열 관련 메소드
종류 | 사용법 | 설명 |
each()/$each() | $("요소 선택").each(function) $each($("요소 선택").function) |
- 배열에 저장된 문서 객체만큼 메소드 반복 실행 - 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구함 |
$.map() | $.map(Array, function) | - 배열에 저장된 데이터 수만큼 메소드 반복 실행 - 함수에서 반환된 데이터는 새 배열에 순서대로 저장 - 새로 저장된 배열 객체 반환 |
$.grep() | $grep(Array, function) | - 배열에 저장된 데이터 수만큼 메소드 반복 실행 - 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 그 배열을 반환 |
$.inArray() | $.inArray(data, Array, start index) | - 배열 안에서 데이터를 찾음. - 데이터를 찾으면 가장 맨앞 데이터의 인덱스 반환, 찾지 못한 경우 -1 반환 - start index의 값을 지정하면 해당 위치부터 데이터를 찾음 |
$.isArray() | $.isArray(object) | - 입력한 객체가 배열 객체라면 true, 아닌 경우 false 반환 |
$.merge() | $.merge(Array1, Array2) | - 인자값으로 입력한 2개의 배열 객체를 하나로 그룹화함 |
index() | $("요소 선택").index("지정 요소 선택") | - 선택자로 요소를 먼저 선택하고 지정한 요소의 인덱스 정보를 가져옴 |
3. 소스 코드 및 실행 결과
- jq_selec2_7_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var obj = [
{"area":"서울"},
{"area":"부산"},
{"area":"전주"}
];
$(obj).each(function(i,o) {
console.log(i + ":", o);
});
console.log("==== The End 1 ====");
$.each($("#menu2 li"), function(i,o){
console.log(i + ":", o);
});
console.log("==== The End 2 ====");
$.each($("#menu2 li"), function(i) {
console.log(i + ":", $(this));
});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu1">
<li>내용1-1</li>
<li>내용1-2</li>
<li>내용1-3</li>
</ul>
<ul id="menu2">
<li>내용2-1</li>
<li>내용2-2</li>
<li>내용2-3</li>
</ul>
</body>
</html>
- jq_selec2_8_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var arr1 = [{
"area":"서울",
"name":"무대리"
},{
"area":"부산",
"name":"홍과장"
},{
"area":"대전",
"name":"박사장"
},{
"area":"서울",
"name":"빅마마"
}];
var arr2 = $.map(arr1, function(a,b){
if(a.area == "서울"){
return a;
}
});
console.log(arr2);
console.log("==== first End ====");
var arr3 = $.grep(arr1, function(a,b){
if(a.area == "서울"){
return true;
} else {
return false;
}
});
console.log(arr3);
console.log("==== Second End ====");
});
</script>
</head>
<body>
</body>
</html>
- jq_selec2_9_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var arr1 = ["서울", "대전", "부산", "전주"];
var arr2 = ["한국", "미국", "일본", "중국"];
var obj = {
"name":"정부장",
"area":"서울"
}
var idxNum = $.inArray("부산", arr1);
console.log(idxNum);
var okArray1 = $.isArray(arr1);
var okArray2 = $.isArray(obj);
console.log(okArray1);
console.log(okArray2);
$.merge(arr2,arr1);
console.log(arr2);
});
</script>
</head>
<body>
</body>
</html>
- jq_selec2_10_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var idxNum = $("li").index($("#list3"));
console.log(idxNum);
});
</script>
</head>
<body>
<h1>배열 관련 메서드</h1>
<ul>
<li>내용1</li>
<li>내용2</li>
<li id="list3">내용3</li>
<li>내용4</li>
</ul>
</body>
</html>
'웹언어 공부 > JQuery' 카테고리의 다른 글
[JQuery] 탐색 선택자 - 콘텐츠 탐색 선택자 (0) | 2021.08.18 |
---|---|
[JQuery] 탐색 선택자 - 속성 탐색 선택자 (0) | 2021.08.18 |
[JQuery] 탐색 선택자 - 위치 탐색 선택자 (0) | 2021.08.17 |
[JQuery] 선택자 - 인접 관계 선택자 (0) | 2021.08.17 |
[JQuery] 선택자 - 직접선택자 (0) | 2021.08.17 |