jQuery 요소 선택하기 (selector)

jQuery(‘#content p a’);
// #context 안에있는 모든 단락(p태그) 요소내의 모든(a태그) 요소를 선택한다.
jQuery(‘#content p a’).addClass(‘selected’);
// selected란 클래스를 a태그안에 추가한다.

2.1 직속 자식 요소 찾기

직속 자손 결합자 (>)
jQuery(‘#nav li>a’);
//nav 안의 li의 직속 a만 선택한다.

jQuery(‘>p’, ‘#content’)이것은
jQuery(‘#content >p’)와 동일하다

jQuery(‘#content’).children();
//#content요소의 모든 자식 요소를 가져온다.

var anchors = jQuery(‘a’); //a태그의 자식 요소를 가져오는 3가지 방법
#1 – anchors.children();
#2 – jQuery(‘>*’, anchors);
#3 – anchors.find(‘>*’);

2.2 특정 형제들 선택하기

jQuery(‘h1+h2’); //h1요소 근처의 h2 요소를 검색한다.
jQuery(‘h1’).siblings(‘h2,h3,p’); //h1요소의 형제인 h2,h3,p의 요소를 선택한다.

//HTML 예

<ul>

    <li>First item</li>

    <li class=”selected”>Second item</li>

    <li>third item</li>

    <li>Fourth item</li>

    <li>Fifth item</li>

</ul>

jQuery(‘li.selected’).nextAll(‘li’);
//li중 class가 selected인 녀석 다음의 모든 li를 선택한다.
jQuery(‘li.selected ~ li’);
//css3에 적용된 ( ~ ) 일반 형제 결합자 , 위의 기능과 동일하다

:first – 첫번재 요소
:last – 마지막 요소
:even – 짝수 요소와 일치
:odd – 홀수 요소와 일치
:eq(n) – (n)번째 인덱스에 해당하는 단일 요소와 일치
:lt(n) – (n)번째 보다 밑에 있는 모든 요소와 일치
:gt(n) -(n)번째 보다 위에 있는 모든 요소와 일치

jQuery(‘ul li’).filter(‘:first’);
//ul 하위 li를 선택후 첫번째 요소만 가져온다.

jQuery(‘div:animated’);
//현재 애니메이션 중인 요소만을 가져온다.
jQuery(‘div:not(div:animated)’).animate({height:100});
//에니매이션중이 아닌 요소를 찾아 에니매이션을 설정한다.
var myElem=jQuery(‘#elem’);
if( myElem.is(‘:animated’)){
//에니메이션중이 라면 작업수행, is()메서드를 이용해서 확인
}

jQuery(‘span:contains(“Bob”)’); //contains() 필터는 대소문자를 구분한다.
//Bob으로 모든 span요소를 검색
jQuery(‘div:has(p a)’);
//p요소안에 a요소를 가지고 있는 모든 div요소를 선택

jQuery(‘div:not(#content)’); //모든 #content를 제외한 div요소 선택

jQuery(‘a:not(div.important a, a.nav)’); // ‘div.important’ 안에 존재하지 않거나 ‘nav’클래스를 가지고 있지 않은 앵커를 선택

var $anchors = jQuery(‘a’);
$anchors.click(function(){
$anchors.not(this).addClass(‘not=clicked’);
});
$(‘#nav a’).not(‘a.active’); //active클래스가 지정되있지 않은 #nav안의 모든 a클래스를 선택

if(jQuery(‘#elem’.is(‘:hidden’)){

 //#elem이 hidden이라면 무언가를 수행

}

jQuery(‘p:visible’).hide(); //현재 p요소 중 visible인경우 hide시킨다.

jQuery(‘a[href=”http://google.com”]’); – a요소중 href속성이 구글인 요소를 선택

• attr – 특정 어트리뷰트를 가지고 있는 요소와 일치attr=val – 지정된 어트리뷰트가 특정 값을 가지는 요소와 일치attr!=val – 지정된 어트리뷰트나 값을 갖지 않는 요소와 일치attr^=val – 지정된 어트리뷰트가 특정 값으로 시작하는 요소와 일치attr$=val – 지정된 어트리뷰트가 특정 값을 끝나는 요소와 일치attr~=val – 공백과 함께 특정 값을 포함하는 요소와 일치