jQuery Selector (4) 탐색선택자

콘텐츠 선택자는 요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자

• 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()
  두가지 형식이 존재한다.

1. 선택한 요소 중에서 filter()로 필터링한 요소만 선택
2. 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 문법을 사용할 수 있다.