🧀 [UIUX] 0209 JQUERY Coding, 제이쿼리 2일차

✏️ 2025. 02월 09일 / jQuery 2일차

🌳 제이쿼리 배열 관련 메서드
태그를 불러오면 태그들은 모두 배열과 비슷한 공간안에 담기게 됩니다.
이 배열안을 순회하면서 특정 기능을 만들고 싶을 때 배열관련 메서드를 사용합니다.

      1. ⭐ each() / $.each()
      each() / $.each() 메서드는 배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져옵니다.
      [기본형]
      1. $('요소선택').each(function(매개변수1, 매개변수2){
        코드;
      })
      2. $.each($('요소선택'), function(매개변수1, 매개변수2){
        코드;
      })
      : 배열에 저장된 요소의 개수만큼 메서드를 반복 실행합니다.
        메서드를 실행할때마다 매개변수 1, 매개변수 2에는
        배열에 저장된 요소와 인덱스 값이 배열에 오름차순으로 대입됩니다.
      3. $('요소선택').each(function(){
        $(this)
      })
      4. $.each($('요소선택'), function(){
        $(this)
      })
      : 배열에 저장된 요소의 개수만큼 메서드를 반복 실행합니다.
        메서드를 실행할 때마다 this에는 배열에 저장된 요소가 오름차순으로 대입됩니다.

      2. ⭐ $.map(), $.grep()메서드
      ==========================================================================
      $.map() 메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행합니다.
      그리고 메서드에서 반환된 데이터는 새 배열에 저장되고 그 배열 객체를 반환합니다.
      $.map() 메서드는 배열에 저장된 데이터 수만큼 메서드를 반복 실행하면서
      인덱스 오름차순으로 배열의 데이터를 불러옵니다.
      메서드의 반환 값이 true일 경우, 데이터가 새 배열에 저장되고 새 배열을 반환합니다.
      $.map(), $.grep()메서드는 기존 배열은 유지한 채 새롭게 가공된 배열을 반환받고 싶은 경우 많이 사용합니다.
      .each()메서드는 기존 배열 자체를 가공하는 메서드 입니다.
      -
      [기본형]
      1. $.map()메서드
      -------------------------------------------------------------------------
      $.map(("요소") 또는 Array, function(매개변수1, 매개변수2){
        return 데이터 ;
      })
      : 배열에 저장된 요소 또는 데이터만큼 메서드를 반복 실행하면서 메서드가 실행될때 마다
        매개변수 1,2에 각각 배열의 데이터와 인덱스 값이 오름차순으로 대입됩니다.
        반환된 데이터는 새 배열에 저장되고, 새롭게 가공된 배열 객체를 반환합니다.
      -
      2. $.grep()메서드
      -------------------------------------------------------------------------
      $.grep(("요소") 또는 Array, function(매개변수1, 매개변수2){
        return true 또는 false ;
      })
      : 배열에 저장된 요소 또는 데이터만큼 메서드를 반복 실행하면서 메서드가 실행될때 마다
        매개변수 1,2에 배열의 데이터와 인덱스 값이 오름차순으로 대입됩니다.
        반환된 데이터가 true면 인덱스 오름차순으로 데이터를 새 배열에 저장하고,
        새롭게 가공된 배열 객체를 반환합니다.

      3. $.inArray() / $.isArray(), $.merge() 메서드
      ================================================================
      $.inArray() 메서드는 배열에 저장된 데이터 중 지정한 데이터를 찾아 인덱스 값을 반환합니다.
      $.isArray() 메서드는 지정한 데이터가 배열 객체면 true를, 아니면 false를 반환합니다.
      $.merge() 메서드는 두 배열 객체를 하나의 객체로 묶습니다.
      -
      [기본형]
      $.inArray(data, Array, start index);
      $.isArray(object);
      $.merge(Array1, Array2);
      -
      4. $.index()메서드
      =================================================================
      지정한 선택 요소를 찾아 인덱스 값을 반환합니다.
      -
      [기본형]
      $('요소').index('찾을 요소');

🌻 제이쿼리 배열 관련 메서드
속성 탐색 선택자는 선택한 요소를 기준으로
일치하는 속성의 포함여부를 따져 요소를 선택하는 선택자 입니다.
예를 들어 선택한 img 태그 중
alt 속성값이 '메인 비주얼'인 요소를 찾고자 할 때 유용하게 사용이 가능합니다.

      [선택자 종류]
      1. $('요소 선택[속성]')
      : 선택한 요소의 해당 속성이 있는 모든 태그 요소를 선택합니다.
      -
      2. $('요소 선택[속성 = '값']')
      : 선택한 요소의 속성과 값이 일치하는 태그 요소를 선택한다.
      -
      3. $('요소 선택[속성 ^= '값']')
      : 선택한 요소 중 '값'으로 시작하는 태그 요소를 찾아 선택합니다.
        이때 '값'은 한 단어로 일치해야 합니다.
      -
      4. $('요소 선택[속성 $= '값']')
      : 선택한 요소 중 '값'이라는 단어로 끝나는 태그 요소를 찾아 선택합니다.
        이때 '값'은 한 단어로 일치해야 합니다.
      -
      5. $('요소 선택[속성 *= '값']')
      : 선택한 요소 중 '값'을 포함하는 태그 요소를 찾아 선택합니다.
        이때 '값'은 한 단어로 일치하지 않아도 찾아냅니다.
      -
      6. $('요소 선택:hidden')
      : 선택한 요소 중 css로 숨겨둔 요소를 선택하여 가져옵니다. (display, visibillity, overflow)
      -
      7. $('요소 선택:visible')
      : 선택한 요소 중 화면에 보이는 요소를 선택하여 가져옵니다.
      -
      8. $(':text')
      : input 태그 중 type속성 값이 text인 요소를 가져옵니다.
        : 뒤에는 input의 type 속성값들을 쓸 수 있습니다.
      -
      9. $(':selected')
      : selected 속성이 적용된 태그를 가져옵니다.
      -
      10. $('cheacked')
      : cheacked 속성이 적용된 태그를 가져옵니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)