jQuery선택자
jQuery선택자에 대해서 정리해보겠습니다.
태그 선택자
1 | $("div").css("color", "red"); |
아이디 선택자
- id는 키역할을 하므로 특정 요소, 객체, 태그를 제어하기 위해서 사용합니다.
1 | $("#box").css("color", "blue"); |
class선택자
- class는 공통적인 속성을 가진, 즉 그룹핑되어 있는 요소들을 묶어서 제어하기 위해서 사용합니다.
1 | $(".box").css("color", "black"); |
자식, 자속 선택자
- list1이라는 id를 가진 태그안에 있는 li태그들을 모두 선택, 적용 depth 1이상
- 바로 아래 자식태그만 건드리는것이 아닌 list1의 모든 자식들을 컨트롤
1 | $("#list li").css("color", "yellow"); |
- list1이라는 id를 가진 태그안에 있는 바로 1depth아래있는 자식들 중 li태그만 선택됨
1 | $("list1 > li").css("color", "green"); |
형제, 인접 선택자
- ul태그가 연속적으로 붙어있는 태그들을 숨긴다.
1 | $("ul + ul").css("display", "none"); |
속성 선택자
- div중에 title속성이 있는 태그들만 가져옴 활용할 여지가 많음
1 | $("div[title]").css("color", "gray"); |
- 모든 태그들(부모태그 자식중에서)중에서 title속성이 있는 모든 태그들을 가져오는 것
1 | $("큰 부모태그의 id").find("*").attr('title'); |
기타
- 짝수, 홀수
1 | $("li:nth-child(even)").css("color", "white"); // even짝수, odd홀수 |