728x90
반응형
선택자 $()의 형태는 $('요소') 혹은 $('속성') 과 같이 사용해왔다. ( 요소[속성=값] 혹은 요소:속성 )
매개변수를 하나만 넣었을 경우 해당하는 요소나 클래스를 모두 찾아간다.
속성선택자 , (입력양식)필터 선택자 / 요소[속성=값] , 요소:속성
[속성 선택자] 속성 선택자 문법은 기본적으로 요소[속성=값] 의 형태이다. 속성 선택자는 요소에 명시적으로 지정하는 name, id, class 등의 속성 값과 일치한 요소를 찾는 선택자이다. 여기서 말하
u-it.tistory.com
우리는 jQuery를 사용하면서 <선택자> '요소' 혹은 '속성'이 적용하는 범위를 한정할 수 있다.
바로 매개변수를 하나 더 넣는 방법인데 이 매개변수를 context라 한다.
div태그에 h1태그가 들어있다고 가정해본다
이 형태가 5개가 있다면 단순히 $('h1) 형태는 5개의 div태그안에 들어있는 h1태그요소를 모두 선택한다.
<body>
<div>
<h1>Header 1</h1>
<p>Paragraph</p>
</div>
<div>
<h1>Header 2</h1>
<p>Paragraph</p>
</div>
<div>
<h1>Header 3</h1>
<p>Paragraph</p>
</div>
</body>현재 이벤트가 발생하고 있는 h1태그 요소를 가져올 때 context 매개변수를 사용한다.
따라서 context매개변수는 일반적으로 이벤트와 함께 사용된다.
다음과 같이 구현한다.
<script>
$(document).ready(function (){
$('div').click(function (){
var header = $('h1', this).text();
var paragraph = $('p', this).text();
alert(header + '\n' + paragraph)
});
});
</script>
context 매개변수 말고 find() 메서드를 사용해도 된다.
<script>
$(document).ready(function (){
$('div').click(function (){
var header = $(this).find('h1');
var paragraph = $(this).find('p');
alert(header + '\n' + paragraph)
});
});
</script>this 즉 현재 가리키는 div 태그에 있는 h1을 find() 한다. (찾는다).
728x90
반응형
'JavaScript > jQuery' 카테고리의 다른 글
| Document객체의 ready이벤트 연결 (0) | 2022.05.11 |
|---|---|
| jQuery 이벤트 문법 mouseenter,mouseleave,hover() ( 이름,리스터 or 객체 or 메소드 ) (0) | 2022.01.04 |
| jQuery addClass() 동일한 태그의 class명을 +1 씩 증가하여 추가하는 문법 (0) | 2022.01.03 |
| [jQuery] css() 함수 사용 문법 종류 (0) | 2022.01.03 |
| filter() 와 메서드 체이닝, end() , add() 메소드 (0) | 2022.01.03 |