본문 바로가기
웹 코딩/JS + jQuery

jQuery - selectors / 선택자 목록

by 알릭2 2020. 8. 6.

제이쿼리의 가장 큰 장점이 쉽고 다양한 선택자라고 해도 과언이 아닐 듯

 

 

그래서 이 선택자들만 잘 파악하고 있어도 코드가 짧아지고 진행이 순조로울 수 있겠다

근데 원래 이렇게 많았니!!!??? 있는지도 몰랐던 넘들고 보이고.. (새로운 추가된 애들인가.., 쿨럭)

 

암튼, 여기 적어놓고 필요할 때 참고 하겠음 (자주 쓰는넘들은 하이라이트했음)

 

 

All Selector (“*”)
Selects all elements.

:animated Selector
Select all elements that are in the progress of an animation at the time the selector is run.

Attribute Contains Prefix Selector [name|=”value”]
Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).

Attribute Contains Selector [name*=”value”]
Selects elements that have the specified attribute with a value containing a given substring.

Attribute Contains Word Selector [name~=”value”]
Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

Attribute Ends With Selector [name$=”value”]
Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.

Attribute Equals Selector [name=”value”]
Selects elements that have the specified attribute with a value exactly equal to a certain value.

Attribute Not Equal Selector [name!=”value”]
Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.

Attribute Starts With Selector [name^=”value”]
Selects elements that have the specified attribute with a value beginning exactly with a given string.

:button Selector
Selects all button elements and elements of type button.

:checkbox Selector
Selects all elements of type checkbox.

:checked Selector
Matches all elements that are checked or selected.

Child Selector (“parent > child”)
Selects all direct child elements specified by “child” of elements specified by “parent”.

Class Selector (“.class”)
Selects all elements with the given class.

:contains() Selector
Select all elements that contain the specified text.

Descendant Selector (“ancestor descendant”)
Selects all elements that are descendants of a given ancestor.

:disabled Selector
Selects all elements that are disabled.

Element Selector (“element”)
Selects all elements with the given tag name.

:empty Selector
Select all elements that have no children (including text nodes).

:enabled Selector
Selects all elements that are enabled.

:eq() Selector
Select the element at index n within the matched set.

:even Selector
Selects even elements, zero-indexed. See also :odd.

:file Selector
Selects all elements of type file.

:first-child Selector
Selects all elements that are the first child of their parent.

:first-of-type Selector
Selects all elements that are the first among siblings of the same element name.

:first Selector
Selects the first matched DOM element.

:focus Selector
Selects element if it is currently focused.

:gt() Selector
Select all elements at an index greater than index within the matched set.

Has Attribute Selector [name]
Selects elements that have the specified attribute, with any value.

:has() Selector
Selects elements which contain at least one element that matches the specified selector.

:header Selector
Selects all elements that are headers, like h1, h2, h3 and so on.

:hidden Selector
Selects all elements that are hidden.

ID Selector (“#id”)
Selects a single element with the given id attribute.

:image Selector
Selects all elements of type image.

:input Selector
Selects all input, textarea, select and button elements.

:lang() Selector
Selects all elements of the specified language.

:last-child Selector
Selects all elements that are the last child of their parent.

:last-of-type Selector
Selects all elements that are the last among siblings of the same element name.

:last Selector
Selects the last matched element.

:lt() Selector
Select all elements at an index less than index within the matched set.

Multiple Attribute Selector [name=”value”][name2=”value2″]
Matches elements that match all of the specified attribute filters.

Multiple Selector (“selector1, selector2, selectorN”)
Selects the combined results of all the specified selectors.

Next Adjacent Selector (“prev + next”)
Selects all next elements matching “next” that are immediately preceded by a sibling “prev”.

Next Siblings Selector (“prev ~ siblings”)
Selects all sibling elements that follow after the “prev” element, have the same parent, and match the filtering “siblings” selector.

:not() Selector
Selects all elements that do not match the given selector.

:nth-child() Selector
Selects all elements that are the nth-child of their parent.

:nth-last-child() Selector
Selects all elements that are the nth-child of their parent, counting from the last element to the first.

:nth-last-of-type() Selector
Selects all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.

:nth-of-type() Selector
Selects all elements that are the nth child of their parent in relation to siblings with the same element name.

:odd Selector
Selects odd elements, zero-indexed. See also :even.

:only-child Selector
Selects all elements that are the only child of their parent.

:only-of-type Selector
Selects all elements that have no siblings with the same element name.

:parent Selector
Select all elements that have at least one child node (either an element or text).

:password Selector
Selects all elements of type password.

:radio Selector
Selects all elements of type radio.

:reset Selector
Selects all elements of type reset.

:root Selector
Selects the element that is the root of the document.

:selected Selector
Selects all elements that are selected.

:submit Selector
Selects all elements of type submit.

:target Selector
Selects the target element indicated by the fragment identifier of the document’s URI.

:text Selector
Selects all input elements of type text.

:visible Selector
Selects all elements that are visible.

댓글