코밍이의 하루

[JQuery] jQuery 배열 메소드 본문

웹언어 공부/JQuery

[JQuery] jQuery 배열 메소드

코밍이 2021. 8. 18. 12:04

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_7_test.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_8_test.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_9_test.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>

jq_selec2_10_test.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
'웹언어 공부/JQuery' Related Articles more