02. jQuery 요소 선택하기 (selector)

http://dimpledfox.tistory.com/category/jQuery

data 속성

$('.slide-link[data-slide="0"]').addClass('active');

2.0 CSSselector

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에 적용된 ( ~ ) 일반 형제 결합자 , 위의 기능과 동일하다 

2.3 인덱스 순서로 요소 선택하기

:first - 첫번재 요소

:last - 마지막 요소

:even - 짝수 요소와 일치

:odd - 홀수 요소와 일치 

:eq(n) - (n)번째 인덱스에 해당하는 단일 요소와 일치

:lt(n) - (n)번째 보다 밑에 있는 모든 요소와 일치

:gt(n) -(n)번째 보다 위에 있는 모든 요소와 일치

jQuery('ul li').filter(':first');

//ul 하위 li를 선택후 첫번째 요소만 가져온다.

2.4 현재 애니메이션중인 요소 선택하기

jQuery('div:animated'); 

//현재 애니메이션 중인 요소만을 가져온다.

jQuery('div:not(div:animated)').animate({height:100});

//에니매이션중이 아닌 요소를 찾아 에니매이션을 설정한다.

var myElem=jQuery('#elem');

if( myElem.is(':animated')){

//에니메이션중이 라면 작업수행, is()메서드를 이용해서 확인

}

2.5 무엇을 포함하고 있는지에 따라 요소 선택하기

jQuery('span:contains("Bob")'); //contains() 필터는 대소문자를 구분한다.

//Bob으로 모든 span요소를 검색

jQuery('div:has(p a)');

//p요소안에 a요소를 가지고 있는 모든 div요소를 선택

2.6 일치되지 않는 요소 선택하기

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클래스를 선택

2.7 가시성을 기반으로 요소 선택하기

if(jQuery('#elem'.is(':hidden')){ 

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

}

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

2.8 어트리뷰트 기반으로 요소 선택하기

jQuery('a[href="http://google.com"]'); - a요소중 href속성이 구글인 요소를 선택

attr - 특정 어트리뷰트를 가지고 있는 요소와 일치

attr=val - 지정된 어트리뷰트가 특정 값을 가지는 요소와 일치

attr!=val - 지정된 어트리뷰트나 값을 갖지 않는 요소와 일치

attr^=val - 지정된 어트리뷰트가 특정 값으로 시작하는 요소와 일치

attr$=val - 지정된 어트리뷰트가 특정 값을 끝나는 요소와 일치

attr~=val - 공백과 함께 특정 값을 포함하는 요소와 일치

jQuery('*[title][href]');  // TITLE과 HREF로 모든 요소를 선택한다.

//HTML 예

<div id="content-sec-1">...</div>

<div id="content-sec-2">...</div>

<div id="content-sec-3">...</div>

<div id="content-sec-4">...</div>

jQuery('div[id^="content-sec-"]'); -굉장히 편하게 요소 검색이 가능하다.

2.9 형식에 따라 폼 요소 선택하기

# 여러가지 필터

:text - <input type="text" />

:password - <input type="password" />

:radio - <input type="radio" />

:checkbox -<input type="checkbox" />

:submit - <input type="submit" />

:image - <input type="submit" />

:reset - <input type="reset" />

:button - <input type="button" />

:file - <input type="file" />

:hidden - <input type="hidden" />

jQuery(':text') - 모든 text로된 폼 선택

jQuery(':input:not(:hidden)'); - hidden을 제외한 모든 input 요소를 선택

2.10 특성을 갖는 요소 선택하기

jQuery('*').filter(function(){

    return !!jQuery(this).css('backgroundImage');

}); //배경이미지를 가진 모든 요소 선택  

 !!는 자바스크립의의 어떤 형식을 Boolean식으로 빠르게 변환 할 수 있는 방법

2.11 컨텍스트 매개변수 사용하기

jQuery('form').bind('submit', function(){

    var allInputs = jQuery('input', this);

    // 지금 ' allInputs'로 작업을 할 것이다.

});

jQuery('p','#content');

jQuery('#content p'); 위 코드와 동일하지만 가독성과 처리속도에 도움이 된다.

2.12 사용자 정의 필터 셀렉터 만들기

jQuery.expr[':'].inline = function(elem){

    return jQuery(elem).css('display')=== 'inline';

};

//사용 예

jQuery ('div a:inline').css('color','red');

jQuery('span').filter(':not(:inline)').css('color', 'blue');