jQuery Selector 셀렉터 사용법 > 홈페이지제작

본문 바로가기

팝업레이어 알림

팝업레이어 알림이 없습니다.

사이트 내 전체검색


홈페이지제작

jQuery Selector 셀렉터 사용법

페이지 정보

작성자 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일16-02-08 02:07 조회292회 댓글0건

본문

목록

셀렉터 예시 설명
id, class, tag로 선택 ★★★
* $("*") 모든 요소들
#id $("#lastname") id가 "lastname"인 요소
.class $(".intro") 클래스가 "intro"인 요소들
.class,.class $(".intro,.demo") 클래스가 "intro" 또는 "demo"인 요소들
element $("p") <p> 요소들
el1,el2,el3 $("h1,div,p") <h1>, <div> and <p> 요소들
처음, 마지막, 홀수, 짝수 선택 ★
 :first $("p:first") 첫번째 <p> 요소
 :last $("p:last") 마지막 <p> 요소
 :odd $("tr:odd") 홀수번째 <tr> 요소들
 :even $("tr:even") 짝수번째 <tr> 요소들
자식, 타입에 따른 선택
 :first-child $("p:first-child") All <p> elements that are the first child of their parent
 :first-of-type $("p:first-of-type") All <p> elements that are the first <p> element of their parent
 :last-child $("p:last-child") All <p> elements that are the last child of their parent
 :last-of-type $("p:last-of-type") All <p> elements that are the last <p> element of their parent
 :nth-child(n) $("p:nth-child(2)") All <p> elements that are the 2nd child of their parent
 :nth-last-child(n) $("p:nth-last-child(2)") All <p> elements that are the 2nd child of their parent, counting from the last child
 :nth-of-type(n) $("p:nth-of-type(2)") All <p> elements that are the 2nd <p> element of their parent
 :nth-last-of-type(n) $("p:nth-last-of-type(2)") All <p> elements that are the 2nd <p> element of their parent, counting from the last child
 :only-child $("p:only-child") All <p> elements that are the only child of their parent
 :only-of-type $("p:only-of-type") All <p> elements that are the only child, of its type, of their parent
태그간 관계에 따른 선택
parent > child $("div > p") All <p> elements that are a direct child of a <div> element
parent descendant $("div p") All <p> elements that are descendants of a <div> element
element + next $("div + p") The <p> element that are next to each <div> elements
element ~ siblings $("div ~ p") All <p> elements that are siblings of a <div> element
비교에 따른 선택
 :eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)
 :gt(no) $("ul li:gt(3)") List elements with an index greater than 3
 :lt(no) $("ul li:lt(3)") List elements with an index less than 3
 :not(selector) $("input:not(:empty)") All input elements that are not empty
태그 등에 따른 선택
 :header $(":header") All header elements <h1>, <h2> ...
 :animated $(":animated") All animated elements
 :focus $(":focus") The element that currently has focus
 :contains(text) $(":contains('Hello')") All elements which contains the text "Hello"
 :has(selector) $("div:has(p)") All <div> elements that have a <p> element
 :empty $(":empty") All elements that are empty
 :parent $(":parent") All elements that are a parent of another element
 :hidden $("p:hidden") All hidden <p> elements
 :visible $("table:visible") All visible tables
 :root $(":root") The document’s root element
 :lang(language) $("p:lang(de)") All <p> elements with a lang attribute value starting with "de"
attribute에 따른 선택
[attribute] $("[href]") All elements with a href attribute
[attribute=value] $("[href='default.htm']") All elements with a href attribute value equal to "default.htm"
[attribute!=value] $("[href!='default.htm']") All elements with a href attribute value not equal to "default.htm"
[attribute$=value] $("[href$='.jpg']") All elements with a href attribute value ending with ".jpg"
[attribute|=value] $("[title|='Tomorrow']") All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen
[attribute^=value] $("[title^='Tom']") All elements with a title attribute value starting with "Tom"
[attribute~=value] $("[title~='hello']") All elements with a title attribute value containing the word "hello"
[attribute*=value] $("[title*='hello']") All elements with a title attribute value containing the string "hello"
input 태그 선택 ★
 :input $(":input") 모든 input 요소들
 :text $(":text") 타입이 "text"인 input 요소들 ★★
 :password $(":password") 타입이 "password"인 input 요소들
 :radio $(":radio") 타입이 "radio"인 input 요소들
 :checkbox $(":checkbox") 타입이 "checkbox"인 input 요소들
 :submit $(":submit") 타입이 "submit"인 input 요소들
 :reset $(":reset") 타입이 "reset"인 input 요소들
 :button $(":button") 타입이 "button"인 input 요소들
 :image $(":image") 타입이 "image"인 input 요소들
 :file $(":file") 타입이 "file"인 input 요소들
 :enabled $(":enabled") enabled인 input 요소들
 :disabled $(":disabled") disabled인 input 요소들
 :selected $(":selected") selected인 input 요소들
 :checked $(":checked") checked인 input 요소들


  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기
  • 카카오스토리로 보내기

댓글목록

등록된 댓글이 없습니다.

홈페이지제작 목록

게시물 검색


홈쇼핑 인기상품을 국내 최저가로 구매하실 분들만 들어 오세요.^0^

*패쇄몰*이라 국내 최저가가 가능합니다.

새로운 상품을 매일 공동구매로 진행.

*패쇄몰*이라 싸게 판매가 되어 금방 매진이 됩니다.(꼭 참고 하세요)

오셔서 득템 하세요. ^0^

후회하지 않습니다.^0^

교환,반품,A/S도 철저히 이루어 집니다.

아래 주소로 들어오시면 됩니다.^0^

▶밴드 바로가기 클릭◀
https://bit.ly/2q69oFl


Copyright © http://jamesoft.kr All rights reserved.
상단으로
PC 버전으로 보기