[jQuery ] jQuery 선택자 란 ?

➰ Ancestors(조상) 메소드 : 선택된 요소의 상위 요소들을 선택할 수 있는 메소드

1. $("요소명").parent()
   • 선택된 요소의 바로 위 상위 요소
2. $('요소명').parents([매개변수])
   • 선택된 요소의 모든 상위 요소 리턴
   • 매개변수가 있으면 매개변수와 일치하는 부모만 리턴
3. $('요소명').parentsUntil(매개변수)
   • 선택된 요소부터 매개변수 요소 전까지 범위의 요소 리턴

➰  descendants(자손, 후손) 메소드 : 선택된 요소의 하위 요소들을 선택할 수 있는 메소드

1. $('요소명').children([매개변수])
   • 선택된 요소의 모든 자식 객체 리턴
   • 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴
   • 연속해서 사용 가능
2. $('요소명').find(매개변수)
   • 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴

➰  sideways(옆으로, 옆에서) 메소드 : 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드

 

1. $('요소명').siblings([매개변수])
   • 선택된 요소와 같은 레벨(형제)에 있는 모든 요소 리턴
   • 매개변수가 있으면 같은 레벨에 있는 요소 중 매개변수와 일치하는 모든 요소 리턴
2. $('요소명').next()
   • 선택된 요소의 같은 레벨 중 선택된 요소 다음 한 개 요소 리턴
3. $('요소명').nextAll()
   • 선택된 요소의 같은 레벨 중 선택된 요소 다음의 모든 요소 리턴
4. $('요소명').nextUntil(매개변수)
   • 선택된 요소의 같은 레벨 중 매개변수 이전 까지의 모든 요소 리턴

1. $('요소명').prev()
   • 선택된 요소의 같은 레벨 중 선택된 요소 이전 한 개 요소 리턴
2. $('요소명').prevAll()
   • 선택된 요소의 같은 레벨 중 선택된 요소 이전의 모든 요소 리턴
3. $('요소명').prevUntil(매개변수)
   • 선택된 요소의 같은 레벨 중 매개변수 이전 까지의 모든 요소 리턴

---

💡

• JS 객체를 매개변수로 전달하는  방법
  .css({K : V, K : V})
• is("CSS 선택자")
  지정된 범위 내에 매개변수로 지정된 선택자와 일치하는 요소가 존재하는지 확인하는 메소드
  존재하면 true, 존재하지 않으면 fasle를 반환 

h2 태그 이전에 있는 모든 형제 요소 중 p 태그가 있는지 확인
console.log($("h2").prevAll().is("p"));

📌jQuery선택자 

: $("css선택자") 또는 $(요소가 저장된 변수)의 형식으로 작성

: css 선택자로 요소를 선택할 경우  id 선택시 단일 요소 반환 class, name,자식/후속 등으로 선택시 반드시 배열로 반환 ! 

 

➰ 속성 선택자 

• 요소[속성] : 특정 속성을 가지고 있는 객체 선택.
• 요소[속성 = 값] : 속성 안의 값이 특정 값과 같은 객체 선택.
• 요소[속성 ~= 값] : 속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택.
• 요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 객체 선택.
• 요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 객체 선택.
• 요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 객체 선택.

➰ prop() 메소드

• attribute : type, name, class, id, value 등과 같이 속성값을 별도로 입력해야되는 속성
• property : checked, selected 와 같이 속성값이 별도로 입력되지 않는 속성
• prop("속성명") : 해당 속성이 요소에 존재하면 true, 아니면 false
• prop("속성명", ture | false) : 해당 속성을 checked 또는 selected 상태로 변경(true)/해제(false)\

 

⭐ 

• 두 태그 동시에 선택 가능 : $("h5, p")
• style(CSS) 적용 시 : .css(" ", " ")

 ex) h5, p 두 태그 동시에 배경색을 green으로 지정하기
       $("h5, p").css("backgroundColor", "green");

• 속성 선택자 : $(input[name='gender'])

HTML 코드 
    성별 :
    <input type="radio" name="gender" id="male" value="남">
    <label for="male">남자</label>

    <input type="radio" name="gender" id="female" value="여">
    <label for="female">여자</label>

    <button type="button" id="check">확인하기</button>
RS코드 
$("#check").on("click",function(){

    const gender = $("input[name='gender']:checked");

    //radio 버튼이 하나도 선택되지 않은 경우
    if(gender.length == 0){
        alert("남자 또는 여자 중 하나를 선택해주세요.")
 
    }else{
        alert( $(gender).val() + "자를 선택하셨습니다." );
    }
})

• jQuery에서 value 얻어오기 : .val()

 

• css 선택자로 요소 선택 시 배열로 얻어오기

HTML 코드 
<P>테스트4</P>
<P>테스트5</P>
<P>테스트6</P>

RS코드 
    const arr = document.getElementsByTagName("p");

    for(let item of arr){
       item.style.color = "pink";
    }