Post

jQuery) 선택자(selector)

Posted Updated
Preview Image
By parksohyunnn 13 min read

jQuery 선택자

jQuery 선택자란?

jQuery는 JavaScript 라이브러리로, HTML 문서를 조작하고 이벤트를 처리하는 데 유용한 기능을 제공합니다. jQuery의 선택자(selector)는 HTML 요소를 선택하기 위한 패턴이며, 선택된 요소에 대해 동작을 수행할 때 사용됩니다.

jQuery 선택자는 CSS 선택자와 매우 유사하게 작동합니다. 일반적으로 HTML 요소의 클래스, ID, 태그 이름등을 기반으로 요소를 선택합니다. jQuery 선택자는 $() 함수를 사용하여 작성하며, 선택한 요소에 대한 동작을 연결할 수 있습니다.

  • 기본형식

| $(“선택자”) | $(“gnb”) |

jQuery 선택자

제이쿼리(jQuery)의 기본 선택자는 HTML 요소를 선택하는 데 사용되는 간단한 형식입니다. jQuery는 CSS 선택자를 기반으로 하여 요소를 선택하는데 사용됩니다. 이를 통해 HTML 문서 내에서 원하는 요소를 식별하고 조작할 수 있습니다.

jQuery 선택자 종류

01. 기본 선택자

선택자종류코드설명
태그 선택자$(“p”)p 요소를 선택합니다.
아이디 선택자$(“#gnb”)특정 아이디를 가진 요소를 선택합니다.
클래스 선택자#(“.logo”)특정 클래스를 가진 모든 요소를 선택하여 조작합니다.
자식 선택자$(“#gnb > ul > li”)특정 요소의 직계 자식 요소를 선택하여 조작합니다.
하위 선택자$(“#gnb ul”)특정 클래스를 가진 모든 요소를 선택하여 조작합니다.
인접 선택자$(“#visual + #content”)지정된 요소의 바로 뒤에 있는 형제 요소를 선택하여 조작합니다.
형제 선택자$(“#visual ~ #footer”)특정 요소와 같은 부모를 가진 모든 형제 요소를 선택하여 조작합니다.
종속 선택자&(“div.until”)하위 선택자와 유사하지만, 상위 요소와 하위 요소 간의 관계가 명확하지 않을 때 사용됩니다.
그룹 선택자$(“.left .right. #banner”)여러 선택자를 동시에 사용하여 하나의 선택자 그룹을 형성하여 조작합니다.
전체 선택자$(“*”)문서 내의 모든 요소를 선택하여 조작합니다.

02. 속성 선택자

선택자종류코드설명
요소[속성]$(“span[class]”)span요소 중 class 속성을 가지고 있는 요소를 선택합니다.
요소[속성=’값’]$(“span[class=’abc’]”)span요소 중 class가 adc인 요소를 선택합니다.
요소[속성!=’값’]$(“span[class!=’abc’]”)span요소 중 class가 adc가 아닌 요소를 선택합니다.
요소[속성~=’값’]$(“span[class~=’abc’]”)span요소 중 class가 adc를 포함하는 요소를 선택합니다. ‘abc’ 앞뒤로 연결된 문자가 없어야 합니다. ‘bg abc’는 선택되나 ‘bg_abc’는 선택되지 않습니다.
요소[속성*=’값’]$(“span[class*=’abc’]”)span요소 중 class가 adc를 포함하는 요소를 선택합니다. ‘bg abc’, ‘bg_abc’모두 선택합니다.
요소[속성ㅣ=’값’]$(“span[class ㅣ=’abc’]”)span요소 중 class가 ‘abc’ 나 ‘abc-‘로 시작하는 요소를 선택합니다.
요소[속성^=’값’]$(“span[class ^=’abc’]”)span요소 중 class가 ‘abc’로 시작하는 요소를 선택합니다.
요소[속성$=’값’]$(“span[class 4(달러)=’abc’]”)span요소 중 class가 ‘abc’로 끝나는 요소를 선택합니다.


03. 필터 선택자

선택자종류코드설명
:even$(“tr:even”)tr 요소 중 짝수 행만 선택합니다.
:odd$(“tr:odd”)tr 요소 중 홀수 행만 선택합니다.
:first$(“td:first”)첫 번째 td 요소를 선택합니다.
:last$(“td:last”)마지막 td 요소를 선택합니다.
:header$(“td:header”)헤딩(h1~h6) 요소를 선택합니다.
:eq$(“li:eq(0)”)index가 0인 li 요소를 선택합니다. index는 0번이 첫 번째 요소입니다.
:gt$(“li:gt(0)”)index가 0보다 큰 li 요소를 선택합니다.
:lt$(“li:lt(2)”)index가 2보다 작은 li 요소를 선택합니다.
:not$(“li:not(bg)”)li 요소 중에서 class명 bg가 아닌 li 요소를 선택합니다.
:root$(“tr:root”)html을 의미합니다.
:animated$(“tr:animated”)움직이는 요소를 선택합니다.

04. 자식 필터 선택자

선택자종류코드설명
:first-child$(“span:first-child”)첫 번째 span 요소를 선택합니다.
:last-child$(“span:last-child”)마지막 span 요소를 선택합니다.
:first-of-type$(“span:first-of-type”)span 요소 중에서 첫 번째 span 요소를 선택합니다.
:last-of-type$(“span:last-of-type”)span 요소 중에서 마지막 span 요소를 선택합니다.
:nth-child$(“span:nth-child(2)”)두 번째 span 요소를 선택합니다.
:nth-last-child$(“span:nth-last-child(2)”)마지막에서 두 번째 span 요소를 선택합니다.
:nth-of-child$(“span:nth-of-child(2)”)span 요소 중에서 두 번째 span요소를 선택합니다.
:nth-last-of-child$(“span:nth-last-of-child(2)”)span 요소 중에서 마지막에서 두 번째 span요소를 선택합니다.
:only-child$(“div>span:only-child”)div의 자식 요소에서 오직 span 요소가 하나만 있는 span 요소를 선택합니다.
:only-of-type$(“div>span:only-of-type”)div의 자식요소에서 span 요소가 하나만 있는 span 요소를 선택합니다.

05. 콘텐츠 필터 선택자

선택자종류코드설명
:contains()$(“p:contains(‘html)”)p 요소 중에서 ‘html’ 텍스트를 포함하고 있는 p요소를 선택합니다.
:empty$(“div:empty”)div 요소 중에서 자식 요소가 없는 div 요소를 선택합니다.
:parnet$(“span:parnet”)span 요소 중에서 자식 요소가 있는 span 요소를 선택합니다.
:has()$(“section:has(article)”)section 요소 중에서 article을 하위 요소로 가지고 있는 section 요소를 선택합니다.

06. 폼 필터 선택자

선택자종류코드설명
:input$(“form :input”)폼(form) 내의 모든 input, textarea, select, button 요소를 선택합니다.
:text$(“form :text”)폼(form) 내의 모든 텍스트 입력(input type=”text”) 요소를 선택합니다.
:password$(“form :password”)폼(form) 내의 모든 비밀번호 입력(input type=”password”) 요소를 선택합니다.
:radio$(“form :radio”)폼(form) 내의 모든 라디오 버튼(input type=”radio”) 요소를 선택합니다.
:checkbox$(“form :checkbox”)폼(form) 내의 모든 체크박스(input type=”checkbox”) 요소를 선택합니다.
:submit$(“form :submit”)폼(form) 내의 모든 제출 버튼(input type=”submit”) 요소를 선택합니다.
:reset$(“form :reset”)폼(form) 내의 모든 리셋 버튼(input type=”reset”) 요소를 선택합니다.
:button$(“form :button”)폼(form) 내의 모든 일반 버튼(input type=”button”) 요소를 선택합니다.
:file$(“form :file”)폼(form) 내의 모든 파일 업로드(input type=”file”) 요소를 선택합니다.
:image$(“form :image”)폼(form) 내의 모든 이미지 버튼(input type=”image”) 요소를 선택합니다.
:selected$(“select option:selected”)선택된(select) 요소 내의 모든 옵션(option) 요소를 선택합니다.
:focus$(“input:focus”)현재 포커스를 가진(input) 요소를 선택합니다.
:disabled$(“input:disabled”)비활성화(disabled)된(input) 요소를 선택합니다.
:enabled$(“input:enabled”)활성화(enabled)된(input) 요소를 선택합니다.
:password$(“input:password”)모든 비밀번호 입력(input type=”password”) 요소를 선택합니다.
:checked$(“input:checked”)체크된(input type=”checkbox” 또는 input type=”radio”) 요소를 선택합니다.


07. 가시성 필터 선택자

선택자종류코드설명
:visible$(“div:visible”)화면에 표시되는(div) 요소를 선택합니다.
:hidden$(“div:hidden”)화면에 표시되지 않는(div) 요소를 선택합니다.


08. 탐색 선택자

선택자종류코드설명
.children()$(“ul”).children(“li”)지정된 자식 요소를 선택합니다.
.parent()$(“li”).parent(“ul”)지정된 부모 요소를 선택합니다.
.parents()$(“li”).parents(“ul”)모든 조상 요소를 선택합니다.
.closest()$(“li”).closest(“ul”)가장 가까운 조상 요소를 선택합니다.
.find()$(“div”).find(“p”)지정된 후손 요소를 선택합니다.
.siblings()$(“li”).siblings()지정된 형제 요소를 선택합니다.
.next()$(“p”).next()다음 형제 요소를 선택합니다.
.prev()$(“p”).prev()이전 형제 요소를 선택합니다.
.nextAll()$(“p”).nextAll()다음 형제 요소를 모두 선택합니다.
.prevAll()$(“p”).prevAll()이전 형제 요소를 모두 선택합니다.
.nextUntil()$(“p”).nextUntil(“h3”)다음 형제 요소를 지정된 요소까지 선택합니다.
.prevUntil()$(“p”).prevUntil(“h3”)이전 형제 요소를 지정된 요소까지 선택합니다.
.filter()$(“div”).filter(“.highlight”)선택한 요소 중에서 지정된 조건을 만족하는 요소를 선택합니다.
.not()$(“p”).not(“.highlight”)선택한 요소 중에서 지정된 조건을 만족하지 않는 요소를 선택합니다.
.has()$(“div”).has(“p”)지정된 자식 요소를 포함하는 요소를 선택합니다.
.eq()$(“p”).eq(2)지정된 인덱스의 요소를 선택합니다.
:gt()$(“li:gt(2)”)지정된 인덱스보다 큰 인덱스를 가진 요소를 선택합니다.
:lt()$(“li:lt(2)”)지정된 인덱스보다 작은 인덱스를 가진 요소를 선택합니다.


09. 기타 탐색 선택자

선택자종류코드설명
.add(selector)$(“p”).add(“span”)현재 선택한 요소와 추가 요소를 모두 선택합니다.
.addBack()$(“p”).next().addBack()이전 선택 상태로 되돌아가며 현재 요소와 이전 요소를 모두 선택합니다.
.end()$(“p”).next().end()현재 선택된 요소를 이전 상태로 되돌립니다.
.is(selector)$(“div”).is(“.highlight”)선택한 요소 중에서 지정된 선택자와 일치하는 요소가 있는지 확인합니다.


jQuery
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github