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;}