반응형
제이쿼리 셀렉터란?
제이쿼리를 선택하는 가장 큰 이유는 제이쿼리 선택자이다.
CSS의 선택자를 그대로 사용할 수 있기 때문에 CSS를 해왔던 사람한테는 거부감이 덜 할 것이다.
제이쿼리의 선택자는 $(선택자)의 형태를 띄고 있다.
제이쿼리에 중독되는 이유
제이쿼리에 중독되는 이유는 간단하다.
너무나도 쉬운 선택자 때문이다.
예를들어 title이라는 태그를 선택할때를 살펴보면 알 수 있다.
javascript = document.getElementById('title');
jquery = $("#title")
위의 두개를 비교했을 때 너무나도 간단하게 엘리먼트를 선택 할 수 있다.
물론 javascript es5버전 부터는 querySelector가 나오긴 했지만 제이쿼리 선택자를 보고 있으면 이마저도 길다고 느껴진다.
제이쿼리 id, Class
제이쿼리에서 id와 class를 선택하는 방법은 간단하다.
ID로 선택하는 방법
$("#id")
Class로 선택하는 방법
$(".class")
반응형
그 외 선택자 모음
아래는 id와 class 외에도 필자가 자주 쓰는 선택자 들이다.
선택자 | 예제 | 설명 |
:first-child | $("div:first-chlid") | 첫번 째 요소 선택 |
:last-child | $("div:last-chlid") | 마지막 요소 선택 |
:odd | $("div:odd") | 홀수 번째에 위치한 요소를 모두 선택 |
:even | $("div:even") | 짝수 번째에 위치한 요소를 모두 선택 |
:eq(n) | $("div:eq(1)") | n번째 요소를 선택 |
:checked | $(":checked") | cehecked된 요소를 선택 |
input[name=name] | $("input[name=name]") | input name으로 요소를 선택 |
:hidden | $(":hidden") | hidden된 요소를 선택 |
:visible | $(":visible") | visible된 요소를 선택 |
이외에도 많은 선택자가 있으니 한번 찾아보는 것도 좋을 것 같다.
css에서 쓰이는 선택자는 모두 사용할 수 있다고 보면 된다.
오늘의 포스팅은 여기까지
끝까지 읽어주셔서 감사합니다.
300x250
'IT > JQuery' 카테고리의 다른 글
제이쿼리(JQuery) 슬라이드 효과 .slideDown(), .slideUp(), .slideToggle() (0) | 2024.03.21 |
---|---|
제이쿼리(JQuery) 간단한 모달(Modal)창 레이어 팝업 만들기 (0) | 2024.03.20 |
제이쿼리(jQuery) 간단한 탭 메뉴 만들기 (0) | 2023.09.05 |