jQuery 선택자

DONI·2022년 5월 10일
0

JavaScript / jQuery

목록 보기
15/18
post-thumbnail

🏹 jQuery 선택자

jQuery 선택자는 $(" ") 형태를 띄고 있으며, CSS의 선택자 방식을 따름

💥 주의 : jQuery는 JS로 만들어진 라이브러리이므로 서로 다른 줄에 각각 사용할 수 있으나,
             한 줄에 JS와 jQuery를 혼용하여 사용할 수는 없다!

JSjQuery
태그 선택자document.getElementsByTagName(" ");$(" ");
클래스 선택자document.getElementsByClassName(" ");$(". ");
아이디 선택자document.getElementById(" ")$("# ");
자식, 후손 선택자$(" ");
속성 선택자document.querySelector(" ");
document.querySelectorAll(" ");
$("요소[속성=속성값]");
$("input: ");

  🌼 $("input: "); : input 태그 선택자

  • 순서에 따른 필터 선택자
선택자설명
$(:odd)홀수 번째 인덱스 요소 선택
$(:even)짝수 번째 인덱스 요소 선택
$(:first)첫 번째 인덱스 요소 선택
$(:last)마지막 번째 인덱스 요소 선택

🏹 prop() 메서드

속성설명
attribute(속성)id, class, value, name 등 속성과 속성 값을 함께 작성하는 것
property(성질)checked, selected 등 속성만 작성하는 것

  예) $("input:checkbox").prop("checked"));


🚩 소스코드 - 태그 선택자

// JS 선택자는 배열로 반환되기 때문에 for문으로 하나씩 접근
const arr = document.getElementsByTagName("h3");
for (let h3 of arr)
  h3.style.backgroundColor = "red";

// jQuery 선택자는 동시에 여러 요소를 선택하여 
// 배열로 반환되는 경우에도 for문 없이 한 번에 다룰 수 있음
const arr = $("h3");
$(arr).css("backgroundColor", "yellow");
profile
틀린 내용이 있다면 댓글 또는 이메일로 알려주세요 ❤ꔛ❜

0개의 댓글