Programing

jQuery Selector

handam 2018. 8. 14. 12:58

원문 : http://xxwony.egloos.com/66807


BASIC SELECTOR

 

·         All Selector (“*”)

HTML DOCUMENT내의 모든 HTML요소(HEAD, BODY, SCRIPT) 등등의 모든 요소들을 선택하기 위함

 

·         Class Selector (“.class”)

요소의 정의되어 있는 클래스(class)를 구분자로 선택하기 위함  (.)

) <div class=”jquery”></div>  ->  $(‘.jquery’);

 

·         ID Selector (“#id”)

요소의 정의되어 있는 아이디(id)를 구분자로 선택하기 위함.  (#)

) <div id=”jquery”></div>  ->  $(‘#jquery’)

 

·         Element Selector (“element”)

일정 html 요소를 선택하기 위함 (해당 테그로 찾기 때문에 그다지 유용하진 않음). – 선택 범위가 넓기 때문

) <div></div><span></span><div></div> ->  $(‘div’);  =  2개 반환

 

·         Multiple Selector (“selector1, selector2, selectorN”)

다중으로 일정 html 요소를 선택하기 위함

) <div><span></span></div><form><input type=”text” /></form,>  ->  $(‘div, span, form, input’)  

ATTRIBUTE SELECTOR

 

·         Attribute Contains Prefix Selector [name|=value]

이 선택자는 요소에 포함 되어 있는 속성과 속성값을 비교하여 해당 요소를 선택하기 위하여 사용 된다.

속성값이 두 단어 이상일 경우에는 아이픈(-) 으로 연결하면 선택되어 질 수 있으며 스크립트에 설정된 값은 요소에 선언된 속성값에 앞부분에 나와야 한다.

) $(a[wow|=you]);  ->  모든 a 테그를 검색하고 속성 이름이 wow 인것에 값에 you 가 들어 있는 해당 요소를 반환한다   ( <a href=# wow=aa-you-wow> x ), ( <a href=# wow=you-wow> o )

 

·         Attribute Contains Selector [name*=value]

이 선택자는 요소에 포함되어 있는 속성과 속성값을 비교하여 해당 요소를 선택하기 위하여 사용 된다.

선언되어진 필요로 하는 속성값의 문자를 요소에 있는 속성값의 내용 중 아무곳에 해당 문자가 어떠한 형태로 있던 일치 하는 부분이 있다면 해당 요소를 반환하게 된다.

) $(input[name*=wow]);  ->  우선 모든 input 테그를 검색하고 속성 name 중에 wow’ 라는 문자열이 포함 되어 있다면 무조건 반환 하라.

 

·         Attribute Contains Word Selector [name~=value]

이 선택자는 요소에 포함 되어 잇는 속성과 속성값을 비교하여 해당 요소를 선택하기 위하여 사용 된다.

선언되어진 필요로 하는 속성값(단어를 요소에 있는 속성과 비교하여 해당 단어가 있다면 해당 요소를 반환한다하지만 기존의 셀렉터와는 틀리게 이 선택자는 해당 단어가 하이픈(-) 이라든지단어 중간에 끼어 있다면 반환하지 않으며공백으로 구분되어 있는 경우나해당 단어 하나만 있을 경우에는 요소를 반환한다.

) $(input[name~=wow])  ->  모든 input 테그를 검색하고 속성에 wow’ 라는 단어가 독립적으로 존재하면 반환한다.

 

·         Attribute Ends With Selector [name$=value]

비교 html 요소 속성값 중 해당 속성값의 가장 뒤에 필요로 하는 단어가 붙어 있다면 해당 요소를 반환한다.

) $(input[name$=wow]);  -> 요소 속성이 <input type=text name=abcdwow /> 로 되어야 반환

 

·         Attribute Equals Selector [name=value]

기본형태로 요소 속성값과 필요로 하는 단어가 무조건 일치하여야 해당 요소를 반환한다.

) $(input[name=wow]);  ->  <input type=text name=wow /> 로 되어야 반환

 

·         Attribute Not Equal Selector [name!=value]

요소 속성값과 필요로 하는 단어가 일치 하지 않는 요소들을 반환한다.

This selector is equivalent to :not([attr=value]);

) $(input[name!=wow]);  ->  <input type=text name=wow /> 반환안함 <,input type=text name=wowya /> 반환안함

 

·         Attribute Starts With Selector [name^=value]

요소 속성값과 필요로 하는 단어가 일치를 해야 하는데 전체가 일치할 필요는 없고필요로 하는 단어가 요소에 있는 속성값에 처음에 시작 하면 해당 요소를 반환한다.

) $(input[name^=wow]);  ->  <input type=text name=wowabcd /> 반환함, <input type=text name=abcdwow /> 반환안함

 

·         Has Attribute Selector [name]

해당 속성이 있다면 무조건 반환한다.

) $(div[id]);  ->  모든 div 를 검색하고해당 div  id 속성이 있다면 값이 있던 없던 해당 요소를 반환한다.

 

·         Multiple Attribute Selector [name=value][name2=value2]

호출 조건을 여러 가지로 설정하여 좀더 정교한 선택을 할 수 있도록 유도 한다.

) $(div[id][name$=wow]);  ->  모든 div 를 검색하고 그중 id 속성을 가지고 있는 요소중 name 속성이 있고 그 name 속성값에 wow’ 라는 값이 가장 마지막에 있다면 해당 요소 반환

<input type=text id=hey name=whatwow />  반환함

 FORM SELECTOR

 

·         :button Selector

버튼과 타입버튼 요소를 모두 반환함

) $(:button);  ->  <button></button> 혹은 <input type=button /> 을 모두 반환

 

·         :checkbox Selector

타입 체크박스 요소를 모두 반환한다.

) $(:checkbox);  ->  <input type=checkbox /> 을 모두 반환

 

·         :checked Selector

요소중 checked=checked” 되어 있는 요소를 모두 반환한다.

) $(:checked);  - >  <input type=checkbox checked=checked /> 등을 반환

 

·         :disabled Selector

요소중 disabled=disabled” 되어 있는 요소를 모두 반환한다.

) $(:disabled);  ->  <input type=text disabled=disabled /> 등을 반환

 

·         :enabled Selector

요소중 enabled 되어 있는 요소를 모두 반환한다. -> 즉 해당 요소에서 disabled 가 되지 않은 것들을 반환

) $(input:enabled);

 

·         :file Selector

요소중 input type=file” 요소를 모두 반환한다

) $(input:file);

 

·         :image Selector

요소중 input type=image” 요소를 모두 반환한다.

) $(input:image);

 

·         :input Selector

영역내의 모든 요소(input, textarea, select, button) 등을 모두 반환한다 ( $(form > *); )

) $(:input);

 

·         :password Selector

요소중 input type=password” 요소를 모두 반환한다

) $(input:password);

 

·         :radio Selector

요소중 input type=radio” 요소를 모두 반환한다.

) $(input:radio);

 

·         :reset Selector

요소중 input type=reset” 요소를 모두 반환한다.

) $(input:reset);

 

·         :selected Selector

Select 요소의 option 항목을 위한 선택자로, option 항목이 선택 되어지는 순간 해당 선택된 option 을 반환한다.

) $(select).change(function(){

       $(select option:selected)………..xxxxxxxx

})

 

·         :submit Selector

요소중 input type=sutmit” 요소를 모두 반환한다

) $(input:submit);

 

·         :text Selector

요소중 input type=text” 요소를 모두 반환한다.

) $(input:text);  


BASIC FILTER SELECTOR

 

·         :animated Selector

에니메이션 효과가 진행된 엘리먼트 요소를 반환한다.

) $(element).slideToggle(slow, anymethod);  =  element  slideToggle 에니메이션 실행  그후

   $(button).click(function(){

            $(div:animated).toggleClass(anyclass);

    });

 

·         :eq() Selector

특정 엘리먼트의 :eq(index) index’ 번째의 영역을 반환한다. Index 는 0” 부터 시작한다.

) $(div:eq(2)).css(colorred);  ->  모든 div중에 2 번째 div 에 값들에 컬러를 red로 규정한다.

 

·         :even Selector

특정 엘리먼트의 짝수번째 영역을 반환한다순서는 0 부터 시작한다.

) $(tr:even).css(background-color#000000); ->  테이블의 tr  0부터 짝수번째 영역의 배경색은 흑색.

 

·         :first Selector

요소 중 첫번째 나오는 요소를 반환한다이것은 :eq(0) 과 같으며,  :lt(1) 로 사용되어도 무방하다.

) $(tr:first).css(color,red);  ->  tr 테그중 첫번째 나오는 영역을 반환한다.

 

·         :gt() Selector

요소중 :gt(index), index 번째 다음의 모든 요소를 반환한다. Index 는 0’ 부터 시작한다. :nth-child(n)  n 1부터 시작 하는 것과는 대조된다.

) $(td:gt(2)).css(border,red);  -> 세번째 나오는 td 부터의 모든 td border 색상이 붉은색이다

 

·         :header Selector

Html 요소중 header 테그 h1~h6 까지의 요소들을 반환한다.

) $(:header)

 

·         :last Selector

요소 중 마지막에 나오는 하나의 요소를 반환한다.

) $(tr:last).css(color,red);  ->  tr 테그중 마지막에 나오는 영역 내용의 컬러는 붉은색이다.

 

·         :lt() Selector

요소중 :lt(index), index 번째 이전의 모든 요소를 반환한다. Index 는 0’ 부터 시작한다. :nth-child(n)  n 1부터 시작 하는 것과는 대조된다. (:gt(index) 와는 지정 영역이 대비된다.)

) $(td:lt(2)).css(border,red);  -> 세번째 나오는 td 이전의 모든 td border 색상이 붉은색이다

 

·         :not() Selector

특정 요소 중 주어진 조건에 맞지 않는 요소들을 반환한다.  ( :not(div a), :not(div, a) )

) $(input:not(:checked))  ->  전체 input 테그중 checked 가 되지 않는 모든 input 을 반환한다.

 

·         :odd Selector

특정 엘리먼트의 홀수번째 영역을 반환한다순서는 0 부터 시작한다.

) $(tr:odd).css(background-color#000000); ->  테이블의 tr  0부터 홀수번째 영역의 배경색은 흑색.

CONTENTS FILTER SELECTOR

 

·         :contains() Selector

주어진 문자열이 포함 되어 있는 모든 요소를 반환한다.

) $(div(:contain(ouksoo)).cass(text-decoration,underline); -> ouksoo’ 문자열 포함 모든 div 영역의 속성을 아래밑줄 로 정의

 

·         :empty Selector

해당 요소내 child node 혹은 text 둘 중 아무것도 없는 요소를 반환한다즉 비어 있는 요소를 반환한다 이 선택자는 :parent  선택자와는 반대된다..

) $(td:empty).text(wow); -> td 요소 중 비어 있는 td 를 찾고 그 요소안에 wow라는 문자를 넣는다.

 

·         :has() Selector

해당 요소 내에 일정(주어진요소가 포함 되어 있는 요소를 반환한다즉 반환 받고자 하는 요소는 주어진 일정한 요소를 포함하고 있어야 한다.

) $(div:has(p)).addClass(text);  ->  모든 div 요소중 p 테그를 포함하고 있는 div 에 text’ 클레스를 적용

 

·         :parent Selector

해당 요소내 child node 혹은 text 둘 중 어떤 것이라도 포함하고 있는 요소를 반환한다즉 비어 있지 않는 요소를 반환한다 이 선택자는:empty  선택자와는 반대된다..

) $(td:parent).text(wow); -> td 요소 중 비어 있는 td 를 찾고 그 요소안에 wow라는 문자로 치환한다.

CHILD FILTER SELECTOR

 

·         :first-child Selector

해당 구역에 포함되어 있는 요소 중 가장 첫번째 요소를 반환한다.  nth-child(1)” 와 같다고 보면 된다

) $(div span:first-child) .-> div 요소중 span 이 가장 첫번째 나올 때그 첫번째 span 을 반환한다.

 

·         :last-child Selector

해당 구역에 포함되어 있는 요소 중 가장 마지막 요소를 반환한다마지막에 선언되어진 요소가 나와야 한다.

) $(div span:last-child) .-> div 요소중 span 이 가장 마지막에 나올 때그 마지막 span 을 반환한다.

 

·         :nth-child Selector

:nth-child(index) 에서 index 번째의 요소를 반환한다기존의 :eq(index) 등은 시작점이 0부터 시작하여 카운팅을 하였으나 이 셀렉터의 index 1부터 시작한다는 것에 차이가 있다.

) $(ul li:nth-child(2)) -> ul 요소중 두번째 나오는 li 를 반환 / :eq(2) 일경우에는 세번째 나오는 li 를 반환.

 

·         :only-child Selector

부모영역 내에 child node 가 하나 밖에 없을 경우 해당 child 노드를 반환한다. Text node 는 여기에 child node에 포함 되지 않는다.

) $(div button:only-child). -> div 요소중 button 엘리먼트를 하나만 포함 하고 있을 때 그 button  엘리먼트를 반환한다.  

HIERARCHY(계층) SELECTOR

 

·         Child Selector (“parent > child”)

부모엘리먼트에 속해 있는 자식 엘리먼트를 반환한다. (순수계층 반환클래스나 아이디를 이용하여 원하는 값 도출

) $(ul.topclass > li->  클래스명이 topclass  ul 에 속해 있는 li 만 반환한다자식중에 클래스명을 가지지 않는 ul 이 계속 포함 되어 있더라도조건에 부합되진 않기 때문에 그 아래 li 는 비 반환

 

·         Descendant Selector (“ancestor descendant”)

기본 계층구조로 스페이스바에 따라 구분되며뒤에 나올수록 앞의 엘리먼트에 부합된며최종조건의 엘리먼트들을 반환한다.

) $(form input)  ->  폼테그 영역에 포함 되어 있는 요소 중 input 엘리먼트는 모두 반환한다.

 

·         Next Adjacent Selector (“prev + next”)

후자(next)를 반환하는데 전자의 조건이 갖추어 져야 한다.

) $(label + input); - > input 요소를 반환하는데 그 input 요조 부모가 아닌 전에 요소가 label 요소여야 반환

 

·         Next Siblings Selector (“prev ~ siblings”)

전자 조전이 시작 하는 데부터 후자 조건까지의 모든 해당 요소를 반환한다.

. First) $(#prev ~ div)  ->  요소들중 아이디가 prev 가 나온다면 거기서부터 나오는 div 요소 모두를 반환한다.

. Second) $(#prev ~ div.ouksoo)  -> 요소들중 아이디가 prev 가 나온다면 거기서부터 나오는 div 요소중 클래스가 ouksoo인 요소들을 모두 반환한다.

 VISIBILITY FILTER SELECTOR

 

·         :hidden Selector

숨어 있는 요소들을 반환한다.

-       Display 가 none’ 인 경우

-       Form element  type=hidden’ 인 경우

-       넓이나 높이가 각각 0’ 으로 세팅 되어 잇는 경우

-       조상 element  hidden 되어 있음 으로서 자기 자신도 보이지 않게 된 경우

 

) $(div:hidden)  ->  div 요소중 보이지 않는 div 요소들을 모두 반환한다. - <div></div> 여서 보이지 않는 것을 포함되지 않는다. 

·         :visible Selector

:hidden 과는 반대로 보여지는 모든 요소들을 반환한다

반응형