① size()
<div id="box">
rect
<ul>
<li>hellow</li>
<li>hellow</li>
<li>hellow</li>
</ul>
</div>
$(document).ready(function(){
var len = $('#box > ul > li').size();
console.log(len); // 3출력
});
② eq(index)
<div id="box">
rect
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
eq("메서드인자 숫자 ") 메서드를 이용하여 엘리멘트를 선택.
$(document).ready(function(){
var el = $('#box > ul > li').eq(2);
el.css('color','red');
consloe.log(el);
});
③ first() , last()
<div id="box">
rect
<ul>
<li>1</li> // first()
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li> // last()
</ul>
</div>
$(document).ready(function(){
var el = $('#box > ul > li');
var first_el = el.first();
var last_el = el.last();
first_el.css('color','red');
last_el.css('color','blue');
});
④ not()
<div id="box">
rect
<ul>
<li>1</li>
<li>2<li>
<li class="el">3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
아이디가 box인 엘리먼트의 자손중 li태그를 선택하고 클래스 값이 el이 아닌 엘리먼트의 글자색을 변경합니다.
$(document).ready(function(){
var el = $(#box li').not('.el');
el.css('color','red');
});
⑤ filter
<div id="box">
rect
<ul>
<li>hellow</li>
<li class="el">yellow</li>
<li>hellow</li>
</ul>
</div>
엘리먼트를 선택하여 글자색을 변경
$(document).ready(function(){
var el = $('#box li').filter('.el');
el.css('color','red');
});
⑥ slice(begin, end)
<div id="box">
rect
<ul>
<li>hellow 1</li>
<li>hellow 2</li>
<li>hellow 3</li>
<li>hellow 4</li> //변경
<li>hellow 5</li> //변경
<li>hellow 6</li>
</ul>
</div>
해당위치의 엘리먼트를 새로운 확장집합으로 만들기// 배열 3번부터 4번까지 선택
$(document).ready(function(){
var el = $('#box > ul> li');
el = el.slice(3,4);
el.css( 'color', 'red');
});
⑦ has()
<div id="box">
rect
<ul>
<li>hellow 1</li>
<li>hellow 2</li>
<li>hellow 3
<ul>
<li>3-1</li>
<li>3-2</li>
</ul>
</li>
<li>hellow 4<li>
<li>hellow 5<li>
<li>hellow 6<li>
</ul>
</div>
자손으로 has() 메서드 인자와 일치하는 엘리먼트를 가지고 있는 엘리먼트를 선택하여 글자색을 변경합니다.
$(document).ready(function(){
$('#box > ul> li')
.has('ul') // 자손 중 태그네임이 "ul" 엘리먼트를 가지고 있는 엘리먼트를 선택.
.css( 'color', 'red');
});
// 셀렉터 뒤에 바로 has메서드를 호출하였다.
// 세미콜론을 붙이지 않고 메서드를 연결하여 사용했다.
// 부모 엘리먼트에 style을 적용하면 자식 엘리먼트는 그 스타일을 그대로 상속받는다.
⑧ each()
<div id="box">
rect
<ul>
<li>hellow 1</li>
<li>hellow 2</li>
<li>hellow 3</li>
<li>hellow 4</li>
<li>hellow 5</li>
<li>hellow 6</li>
</ul>
</div>
each()메서드를 호출하여 확장집합으로 만들어 원소를 차례대로 순환하여 글자색을 변경
$(document).ready(function(){
$('#box > ul> li').each(function(i){
$(this).css('color','red'); });
el.css( 'color', 'red');
});