기본/탐색&기타탐색 선택자는 대체 뭘까?

jQuery

제이쿼리란 HTML의 클라이언트 조작을 단순화 하도록 설계된 자바스크립트 라이브러리로써 오픈 소프트웨어이며 jQuery 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인 되었고, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공합니다.

---

다운로드 방식은?

크롬 브라우저에서는 jQuery 라이브러리를 복사해야 하는 번거로움이 있기 때문에 크롬브라우저에서 다운을 받을 경우 웹페이지에 있는 라이브러리 코드 전체를 복사하여 웹 에디터에서 붙여 넣고 jquery-3.3.1.min.js로 저장해주면 됩니다.

[다운로드 바로가기] : 이곳에서 'Download the compressed, production jQuery 3.3.1"을 다운로드 해주세요!

---

CDN방식

[바로가기] 사이트에 접속하여 jQuery Core 3.3.1 - minified 버전을 선택하고 CDN을 카피해봅시다!

---

기본 형식

jQuery를 사용하기 위해서는 하단과 같이 세팅해 사용하면 됩니다.

<script src="jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function(){
        //실행문을 이곳에!
    });
</script>

---

선택자

jQuery는 html 요소와 관련된 기능 구현이 많아 그만큼 css와 매우 밀접한 관계가 있으니 형식과 선택자에 대해서 알아봅시다!

선택자 종류	설명
태그 선택자	$("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");
})

---

탐색 선택자의 종류

탐색을 위한 선택자의 종류로는 아래와 같은 것들이 있습니다.

선택자 종류	설명
children()	$("div").children()	div 요소의 자식 요소를 선택합니다.
parent()	$("p").parent()	p 요소의 부모 요소를 선택합니다.
parents()	$("p").parents()	p 요소의 부모가 되는 모든 div 요소를 선택합니다.
closest()	$("p").closest(div)	p 요소의 부모가 되는 첫 번째 div 요소를
next()	$("div.m").next()	div.m 요소의 다음 요소를 선택합니다.
nextAll()	$("div.m").nextAll()	div.m 요소의 다음 요소들을 모두 선택합니다.
nextUntil()	$("div.m").nextUntil("p")	div.m 요소부터 p요소 전까지의 요소를 선택합니다.
prev()	$("div.m").prev()	div.m 요소의 이전 요소를 선택합니다.
prevAll()	$("div.m").prevAll()	div.m 요소의 이전 요소들을 모두 선택합니다.
prevUntil()	$("div.m").prevUntil("p")	div.m 이전 요소부터 p 요소 다음 요소까지를 선택합니다.
siblings()	$("div.m").siblings("p")	div 요소의 형제 요소 중 p 요소를 선택합니다.
find()	$("div.m").find("span")	div 요소의 하위 요소 중 span 요소를 선택합니다.
filter()	$("div.m").filter(".m")	div 요소 중 class가 "m인 요소를 선택합니다.
not()	$("div.m").not(".m")	div 요소 중 class가 "m이 아닌 요소를 선택합니다.
has()	$("div.m").has("span")	div 요소 중 span 요소를 포함하고 있는 요소를 선택합니다.
eq()	$("div").eq(0)	div 요소 중 index가 0인 요소들을 선택합니다. index 0번은 첫 번째 요소입니다.
gt()	$("div").gt(0)	index가 0보다 큰 div 요소들을 선택합니다.
lt()	$("div").lt(3)	index가 3보다 작은 div 요소들을 선택합니다.

---

예시용 코드펜

---

기타 탐색 선택자의 종류

기타 탐색을 위한 선택자의 종류로는 아래와 같은 것들이 있습니다.

선택자 종류	설명
add()	$("div").add("p") div요소와 p요소를 선택합니다.
addBack()	$("div").children("p").addBack() p요소와 이전 선택요소 div요소를 선택합니다.
end()	$("div").find("span").css(...).end().find("em").css(...) $("div").find("span").css(...)의 실행이 끝나면 처음 선택자 $("div")로 다시 돌아와 $("div").find("em").css(...)가 실행됩니다.
is()	선택한 요소를 판별해 주는 선택자로 보통 if문의 조건식에 사용됩니다. if("div").children().is("p")){ console.log("p요소가 맞습니다.")}

---

예시용 코드펜