콘텐츠 선택자는 요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자
- contains()
contains() 선택자는 선택한 요소 중 지정한 텍스트(text)를 포함하는 요소만 선택
이런 형식의 ＜html＞ 구조가 있다고 가정할 때
$('#menu li:contains(\'내용3\')').css({border : '1px solid red'});이라고 jquery를 작성하게되면 내용3 이라는 text를 가진 li만 선택이 된다.
contains()안에 해당 text 반드시 필요.
contains()를 사용할 때 주의점은 ()안에 ''로 선택자를 잡았을경우 안에 text도 ''로 하게되면 오류가 난다. 그래서 선택자와 text를 "",''로 다르게 잡거나 \' \' 역슬래쉬 '를 사용해야 오류가 나지않고 제대로 된다.
- contents()
contents()는 선택한 요소의 하위 요소중 1 깊이의 텍스트와 태그 노드를 선택
( 여기서 1 깊이는 자식이 있는 요소를 선택하고 또 그 자식을 선택한다. )
$('#menu li').contents().css({border : '1px solid red'});
실행결과를 보면 해당 li가 아닌 자식이 선택되었다.
- has()
선택한 요소 중 지정한 태그를 포함하는 요소만 선택한다.
태그명 / 아이디명 / 클래스명
()안에 아무것도 없을경우 아무것도 선택되지 않는다.
$('#menu li').has('span').css({border : '1px solid red'});
＜span＞ 태그를 가진 li는 내용2 text의 li뿐이라서 내용2 li가 선택된다.
- not()
선택한 요소 중 지정한 요소만 제외한 채 선택
$('#menu li').not(':first').css({border : '1px solid red'});
.not() 안에는 CSS선택자를 사용한다.
$('#menu li:first').not().css({border : '1px solid red'});이렇게 사용할 경우에는 li의 첫 번째만 선택된다.
.not() 안에 아무것도 쓰지않을경우 메서드 실행이 되지않는다.
- find()
선택한 요소중에서 하위요소 ( 자식 or 자손 ) 를 선택한다.
$('부모 or 조상요소').find('자식 or 자손요소');
$('#menu').find('.third').css({border : '1px solid red'});
- filter()
두가지 형식이 존재한다.
- 선택한 요소 중에서 filter()로 필터링한 요소만 선택
- filter(function(){}); 으로 {}안에 특정한 조건을 넣어서 조건에 맞는 데이터를 반환
**첫 번째 방식**
$('#menu li').filter('.third').css({border : '1px solid red'});filter() 안에는 태그명 / 아이디명 / 클래스명 / CSS선택자가 들어간다.
**두 번째 방식**
var a = [1,2,3,4,5,6,7,8,9,10];
var b = a.filter(function(e){
return e > 5;
}
console.log(b);
- index()
앞에 선택자가 몇 번째 index인지 알아보기 위해 쓰는 메서드
$('#menu li:css선택자').index();
ex) console.log($('#menu li:first').index());
실행결과 : 0제이쿼리 선택자로 잡은걸 index화 시키고 index화 시킨걸 이용해서 javascript 문법을 사용할 수 있다.
