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(‘color’, ‘red’); -> 모든 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:first-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 과는 반대로 보여지는 모든 요소들을 반환한다.
********
<!DOCTYPE html>
<html>
<head>
<style>
#div_id > p:nth-child(n+3)[class^="2"]{
background: #ff0000;
}
</style>
</head>
<body>
<div id="div_id">
<h1>This is a heading</h1>
<p class="2">The first paragraph.</p>
<div id="div_id2">
<span class="1-1">d2The third paragraph.</span >
<span class="2-1">d3The fourth paragraph.</span >
<p class="2-1">d3The fourth paragraph.</p>
</div>
<span class="3-1">1The second paragraph.</span>
<span class="1-1">2The third paragraph.</span>
<p class="2-1">3The fourth paragraph.</p>
<div>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
</body>
</html>
댓글 없음:
댓글 쓰기