[J] JavaScript & jQuery 공부하기 #24

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.

 

29. 문서 객체 선택
- 문서 객체를 다양한 방식으로 선택할 수 있다
- 일반적인 선택이 아닌 filter 메소드를 이용해 특정한 객체를 선택 할 수 있다
- 주요 함수 : first(), last(), eq()
< script type="text/javascript">
$(요소).eq(0); //0번 인덱스 문서 객체 선택
$(요소).first(); //첫 번째 문서 객체 선택
$(요소).filter(function(i){i ==0;});
</ script>

* filter 관련 메소드로 문서 객체 선택
- filter 메소드를 이용해 선택할 객체들 생성
- 작성된 객체를 선택하는 메소드 생성
< script type="text/javascript">
$(document).ready(function(){
var first = $('h1').first().text();
var eq1 = $('h1').eq(2).text();
var eq2 = $('h1').eq(4).text();
var last = $('h1').last().text();
var odd = $('h1:odd').text(); //짝수는 even

alert(first);
alert(eq1);
alert(eq2);
alert(last);
alert(odd);
});
</ script>

* filter()로 문서 객체 선택
- filter() 메소드를 이용해 원하는 객체를 선택하는 코드 작성
< script type="text/javascript">
$(document).ready(function(){
var filter = $('h1').filter(function(index){
return index % 2 ==0;
}).text();

alert(filter);
});
</ script>

* 예제
< script type="text/javascript">
$(document).ready(function(){
var select1 = $('h1:odd').text();
var select2 = $('h1:even').text();
var select3 = $('h1:even').filter(function(index){
return index % 3 ==0;}).text();
var select4 = $('h1').filter(function(index){
return index > 3;}).text();

alert(select1);
alert(select2);
alert(select3);
alert(select4);
});
</ script>

< body>
< h1>1</ h1>
< h1>2</ h1>
< h1>3</ h1>
< h1>4</ h1>
< h1>5</ h1>
< h1>6</ h1>
< h1>7</ h1>
< h1>8</ h1>
</ body>