jQuery/Selector, Descendants

jQuery child, descendant selectors

Soul-Learner 2012. 4. 24. 12:00

jQuery 선택자 중에서 Child, Descendant Selectors

$('body > *').css('color', 'red'); // 직계 자식 태그를 선택 [테스트 해보기]

$('body  *').css('color', 'blue'); // 레벨에 관계 없이 모든 후손 태그를 선택 [테스트 해보기]

참고

$('.class1.class2').css('color','yellow'); // 2개의 클래스를 동시에 모두 가진 태그

$('prev + next').css('color', 'black'); // prev태그의 바로 다음에 있는 형제 태그

$('prev ~ siblings').css('cloor', 'gold'); // ?


jQuery 속성 선택자

테스트용 태그의 상태

id=div1
id=div2
class=myclass
class=myclass2

● div 태그 중에서 class 속성을 가진 경우 선택

$('div[class]').css('color', 'red');               [테스트 해보기]

● div 태그 중에서 id 속성을 가진 경우 선택

$('div[id]').css('color', 'blue');                   [테스트 해보기]

● div 태그 중에서 id="div1" 인 경우

$('div[id=div1]').css('color', 'red');             [테스트 해보기]

● div 태그 중에서 class 속성 값으로  'myclass' 가 독립된 한 단어로 포함되어 있는 경우

$('div[class~=myclass]').css('color', 'blue');   [테스트 해보기]

● div 태그 중에서 class 속성 값이 'my'로 시작되는 값을 가진 경우

$('div[class^=my]').css('color', 'red');             [테스트 해보기]

● div 태그 중에서 class 속성 값이 'ss' 으로 끝나는 경우

$('div[class$=ss]').css('color', 'blue');           [테스트 해보기]

● div 태그 중에서 class 속성 값이 'cla' 를 포함하고 있는 경우

$('div[class*=cla]').css('color', 'red');            [테스트 해보기]