jQuery selector

jQuery selector

1. $('*') : 모든 요소를 선택

2. $('#l') : 아이디가 l 인 모든 요소 선택

3. $('E') : 태그 이름이 E인 모든 요소 선택

4. $('.C') : 클래스 이름이 C가 지정된 모든 요소 선택

5. $('E F') : E 요소의 자식 요소 가운데 태그 이름이 F인 모든 요소 선택

6. $('E.C') : E 요소 가운데 클래스 이름이 C인 모든 요소 선택

7. $('E .C') : E 요소의 자식 노드 가운데 클래스 이름인 C인 모든 요소 선택

8. $('E > F') : E 요소의 자식 요소 가운데 다음에 위치하는 모든 F 요소 선택

9. $('E+F') : E의 형제 요소 가운데 바로 다음에 위치하는 F 요소 선택

10. $('E~F') : E의 형제 요소 가운데 다음에 위치하는 모든 F 요소 선택

11. $('E:has(F)') : F요소를 하나 이상 포함하는 E 요소 선택 (ex : $('div:has(p)').css();)

12. $('E[A]') : 속성 A를 포함한 모든 E요소를 선택 (ex : $(':[data-test]').css();)

13. $('E[A=V]') : 속성 A의 값이 V인 모든 E 요소 선택

14. $('E[A^=V]') : 속성 A의 값이 V로 시작되는 모든 E 요소 선택

15. $('E[A$=V]') : 속성 A의 값이 V로 끝나는 모든 E 요소 선택

16. $('E[A*=V]') : 속성 A의 값이 V를 포함하는 모든 E 요소 선택

17. $('div:first') : 전체 리스트의 첫 번째 요소 선택

18. $('div:first-child') : 각 리스트의 첫 번째 요소 선택

19. $('div:last') : 전체 리스트의 마지막 요소 선택

20. $('div:last-child') : 각 리스트의 마지막 요소 선택

21. $('div:only-child') : 형제 노드가 없는 모든 요소 선택

22. $('div:even') : 전체 리스트에서 짝수(even) 또는 홀수( odd) 번째 위치한 모든 요소 선택

21. $('div:nth-child(1)') : 각 리스트의 N번째에 해당하는 요소 선택

22. $('div:eq(1)') : 리스트 전체에서 N번째에 해당하는 요소 선택

23. $('div:gt(1)') : 리스트 전체에서 N번째 이후의 모든 요소 선택

24. $('div:lt(1)') : 리스트 전체에서 N 번째 이전의 모든 요소 선택

<!-- css 적용 example --!>

html table에 클래스가 table인놈 tbody의 tr에서 두번째 td를 찾아 그 안에 a태그의 css를 변경 ( 두개는 같은 표현 )

$('table.table tbody tr').find('td:eq(1) > a').css("color", "#050099");

$('table.table tbody tr').find('td:eq(1)').children('a').css("color", "#050099");

$('table.table tbody tr').find('td:eq(1)').css("color", "#050099"); ->a태그 제외하고 td의 css변경

html table에 클래스가 table인놈 tbody의 tr갯수만큼 반복 

$('table.table tbody tr').each(function(index){

}); 

BUT!! css 적용은 스크립트보다 table.table tbody tr td.title a {color: #050099;} 선언하는것이 올바르다.

tr.hoverline:hover {

    background-color: #eaf2fa;

}

table.table tbody tr td.title a {color: #050099;}