jquery를 이용해 <body>영역에 있는 태그를 선택하는 선택자에 대해 알아보겠다.
선택자는 직접 선택자와 인접 관계 선택자로 나눌 수 있다.
도둑잡기를 하는 것처럼 선택자를 도둑으로 보고, "선택한다"를 "잡는다"라고 표현하겠다
먼저, 직접 선택자는 아이디선택자, 클래스선택자, 요소선택자 등이 있다.
<script>
$("#id명");
$(".class명");
</script>id를 잡을 때는 #을 사용하고
class를 잡을 때는 .을 사용한다.
직접 선택자는 주로 태그속성을 직접 잡을 때 사용한다.
그 다음, 인접 관계 선택자는 부모선택자, 자식선택자, 형제선택자 등이 있다.
<script>
$("요소").parent( );
$("요소").closest( );
$("요소").prev( );
</script>parents( )메서드는 모든 부모태그를 잡는다.
closest( )메서드는 해당 요소의 부모던 할아버지던 가장 가까운 요소를 잡는다.
prev( )메서드는 형제 태그 중에 하나를 잡는 메서드다.
하나의 요소를 잡을 때 사용하는 메서드는 parent( ), prev( ) , next( )다.
다중 요소를 잡을 때 사용하는 메서드는 closest("요소"), children("요소"), parents("요소")이다.
Q. 라디오 버튼처럼 input속성이 많을 경우 선택자를 어떻게 잡을까?
A. 태그로(div) 감싸서 임의의 타겟을 잡는 것이 편하다.
그래서 자식태그에서 라디오버튼이 있으면 잡도록 each문을 돌려서 작성한다.
<div class="radio">
<input type="radio" id="rdo1" name="rdo-group">
<label for="rdo1">받음</label>
</div>
<div class="radio">
<input type="radio" id="rdo2" name="rdo-group" checked>
<label for="rdo2">받지않음</label>
</div>
****태그로(div) 감싸서 임의의 타겟을 잡는 것이 편하다.***
<div class="radioHead">
<div class="radio">
<input type="radio" id="rdo1" name="rdo-group">
<label for="rdo1">받음</label>
</div>
<div class="radio">
<input type="radio" id="rdo2" name="rdo-group" checked>
<label for="rdo2">받지않음</label>
</div>
</div>
Q. 태그의 속성을 잡고 싶으면 어떻게 할까?
A. 타입을 잡으려면 그냥 쓰고, 속성을 잡으려면 대괄호[ ]로 태그를 잡는다.
체크된거를 잡으려면 checked라고 적어준다.
$("input[id=txt]");
$("input[type='radio'] : checked");
출처 : 한큐의 자바 수강내용
'웹 > Javascript' 카테고리의 다른 글
| 도큐먼트 레디가 동작하는 방법 (0) | 2019.07.02 |
|---|---|
| apply( )함수 사용법과 Math.max.apply( )로 최대값 구하기 (0) | 2019.06.20 |
| 전역변수와 지역변수 (0) | 2019.06.04 |
| 객체리터럴함수와 즉시실행함수! 그리고 클로저현상 (0) | 2019.06.04 |
| 자바스크립트와 제이쿼리는 무엇일까? (0) | 2019.06.03 |