jQuery | 기본 선택자

jQuery 기본 선택자에 대해 알아봅시다 !

기본 형식 : $("선택자") == $("#gnb")

선택자 종류	설명
태그 선택자	$("p")	p 요소 선택
id 선택자	$("#gnb")	#gnb 요소 선택
class 선택자	$(".logo")	.logo인 요소 선택
자식 선택자	$("#gnb > ul > li")	#gnb의 자식 요소의 자식 요소 li 선택
하위 선택자	$("#gnb ul")	#gnb의 하위에 있는 모든 ul 요소 선택
인접 선택자	$("#visual + #content")	#visual 다음에 오는 #content 요소 선택
형제 선택자	$("#visual ~ #footer")	#visual의 형제 요소 #footer 선택
종속 선택자	$("div.util")	div 요소 중 class가 util인 요소 선택
그룹 선택자	$(".left, .right, #banner")	.left, .right, #banner 요소들 선택
전체 선택자	$("*")	모든 요소 선택

---

📢 직접 적용하면서 이해하자 !

$(document).ready(function() {
    $("p").css("border", "4px solid red");
    $("#gnb").css("border", "4px solid orange");
    $(".logo").css("border", "4px solid yellow");
    $("#gnb > ul > li").css("border", "4px solid green");
    $("#gnb ul").css("border", "4px solid blue");
    $("#visual + #content").css("border", "4px solid navy");
    $("#visual ~ #footer").css("border", "4px solid purple");
    $("div.util").css("border", "4px solid pink");
    $(".left, .right, #banner").css("border", "4px solid gray");
});