728x90
➰ Ancestors(조상) 메소드 : 선택된 요소의 상위 요소들을 선택할 수 있는 메소드
- $("요소명").parent()
- 선택된 요소의 바로 위 상위 요소
- $('요소명').parents([매개변수])
- 선택된 요소의 모든 상위 요소 리턴
- 매개변수가 있으면 매개변수와 일치하는 부모만 리턴
- $('요소명').parentsUntil(매개변수)
- 선택된 요소부터 매개변수 요소 전까지 범위의 요소 리턴
➰ descendants(자손, 후손) 메소드 : 선택된 요소의 하위 요소들을 선택할 수 있는 메소드
- $('요소명').children([매개변수])
- 선택된 요소의 모든 자식 객체 리턴
- 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴
- 연속해서 사용 가능
- $('요소명').find(매개변수)
- 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴
➰ sideways(옆으로, 옆에서) 메소드 : 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드
- $('요소명').siblings([매개변수])
- 선택된 요소와 같은 레벨(형제)에 있는 모든 요소 리턴
- 매개변수가 있으면 같은 레벨에 있는 요소 중 매개변수와 일치하는 모든 요소 리턴
- $('요소명').next()
- 선택된 요소의 같은 레벨 중 선택된 요소 다음 한 개 요소 리턴
- $('요소명').nextAll()
- 선택된 요소의 같은 레벨 중 선택된 요소 다음의 모든 요소 리턴
- $('요소명').nextUntil(매개변수)
- 선택된 요소의 같은 레벨 중 매개변수 이전 까지의 모든 요소 리턴
- $('요소명').prev()
- 선택된 요소의 같은 레벨 중 선택된 요소 이전 한 개 요소 리턴
- $('요소명').prevAll()
- 선택된 요소의 같은 레벨 중 선택된 요소 이전의 모든 요소 리턴
- $('요소명').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";
}
728x90
'ON > JavaScript' 카테고리의 다른 글
[jQuery] 순회(탐색)메소드 란? (1) | 2023.08.19 |
---|---|
[jQuery ] jQuery 란 ? (0) | 2023.06.27 |
[JavaScript] 요소 추가 및 제거하기 (0) | 2023.06.26 |
[JavaScript] DOM (0) | 2023.06.25 |
[JavaScript] 추가 함수 정리 (0) | 2023.06.23 |