🧀 [UIUX] 0211 JQUERY Coding, 제이쿼리 3일차

✏️ 2025. 02월 11일 / jQuery 3일차

🌳 컨텐츠 탐색 선택자
컨텐츠 탐색 선택자는 요소 또는 속성의 포함여부에 따라 특정 요소를 선택하는 선택자입니다.

      [선택자 종류]
      1. $("요소선택:contains('텍스트')")
      : 선택한 요소 중 '텍스트'를 포함하는 태그를 불러온다.
      -
      2. $("요소선택").contents()
      : 선택한 요소의 하위 요소 중 가장 가까운 하위요소를 불러온다.
      -
      3. $("요소선택:has('요소명')") 또는 $("요소선택").has('요소명')
      : 선택한 요소 안에 '요소명'인 자식 태그가 있으면 선택한다.
      -
      4. $("요소선택:not(:'제외요소')") 또는 $("요소선택").not(:'제외요소')
      : 선택한 요소 중 제외요소를 제외한 나머지 요소를 불러온다.
      -
      5. $("요소선택").filter('필터 요소')
      : 선택한 요소중 지정한 요소만 필터링하여 가져온다.
      -
      6. $("요소선택").find('찾을 요소')
      : 선택한 요소 안에 있는 찾을 요소를 찾아 선택한다.
      -
      7. $("요소선택").closest('요소선택2')
      : 선택한 요소의 상위 요소 중 가장 가까운 부모 요소를 선택한다.
      -
      8. $("요소선택").탐색선택자().end()★
      : 필터링 되기 이전 요소가 선택된다.

🌳 .is()메서드
is()메서드는 선택한 요소의 상태가 지정한 속성과 일치하면 true,
일치하지 않으면 false를 반환하는 메서드입니다.
주로 입력요소인 input과 같은 태그에 많이 사용하는 메서드 입니다.

      [기본형]
      $("요소선택").is(":checked / :selected / :visible / :hidden / :animated")

      - :checked 
      : 선택한 체크박스 또는 라디오 버튼이 체크된 상태면 true, 아니면 false를 반환한다.
      - :selected
      : 선택한 셀렉트 박스의 option태그가 선택된 상태면 true를 아니면 false를 반환한다.
      - :visible 
      : 선택한 요소가 눈에 보이는 상태면 true, 아니면 false를 반환한다.
      - :hidden
      : 선택한 요소가 숨겨진 상태면 true, 아니면 false를 반환한다.
      - :animated
      : 선택한 요소가 애니메이션 동작상태면 true, 아니면 false를 반환한다.

🌳 객체 조작 메서드
자바스크립트에서 태그는 객체로 취급된다. 객체를 생성하고, 복제하고
삭제하고 속성 변환하는 다양한 객체 조작 메서드가 있습니다.
객체 조작 메서드에는 '속성 조작 메서드'와 '수치 조작 메서드',
'객체 편집 메서드'가 있습니다.
속성 조작 메서드는 요소의 속성을 조작할때 사용하고
수치 조작 메서드는 요소의 넓이와 높이같은 수치를 바꿀때 사용하고
객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할때 사용합니다.
🌳 속성 조작 메서드
속성 조작 메서드는 요소의 속성을 조작할때 사용하는 메서드입니다.

      [기본형]
      1. .html() 또는 .html('새요소')
      : .html()메서드는 선택한 요소를 가져와 문자열로 변환하고
        .html('새요소')는 하위 요소를 전부 제거하고 새 요소로 바꾼다.
        바닐라 자바스크립트의 innerHTML 프로퍼티와 동일하다.

      2. .text()또는 .text("새 텍스트")
      : .text()는 선택한 요소의 텍스트를 가져오고,
        .text("새 텍스트")는 요소의 하위요소를 전부 제거하고 새 텍스트로
        채운다. 바닐라 자바스크립트의 innerText 프로퍼티와 동일하다.