jquery selector

코드에 jQuery를 설치하는 방법

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.js"></script>

 

 

http://www.hgjung.pe.kr/jQuery/

기본셀렉터와 위치기반셀렉터 jQuery정의 셀렉터의 소개와 간단한 예제가 있다.

 

======================================================================================================

 

# 기본 셀렉터

*             : 모든 엘리먼트와 일치
E             : 태그명이 E인 모든 엘리먼트와 일치
E F          : E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
E>F         : E의 바로 아래 자식이면서 태그명이 F인 모든 엘러먼트와 일치
E+F         : E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
E~F        : E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E:has(F) : 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치
E.C        : 클래스명 C를 가지는 모든 엘리먼트 E와 일치, E의 생각은 *.C와 동일함
E#I         : 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함
E[A]       : 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A=V]   : 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A^=V]  : 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A$=V]  : 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V] : 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

 

 

# 위치기반 셀렉터

:first              : 페이지에서 처음으로 일치하는 엘리먼트. li a:first는 리스트 아이템의 첫번째 링크를 반환함
:last              : 페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링크를 반환함
:first-child      : 첫번째 자식 엘리먼트. li:first-child는 각 리스트의 첫번째 아이템을 반환한다.
:last-child      : 마지막 자식 엘리먼트. li:last-child는 각 리스트의 마지막 아이템을 반환한다.
:only-child     : 형제가 없는 모든 엘리먼트 반환
:nth-child(n)  : n번째 자식 엘리먼트. li:nth-child(2)는 각 리스트의 두번째 리스트 아이템을 반환함
:nth-child(event|odd) : 짝수 또는 홀수 자식 엘리먼트. li:nth-child(event)은 각 목록의 짝수 번째 자식 엘리먼트 반환
:nth-child(Xn + Y) : 전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인경우 생략가능하다. li:nth-child(3n)은 3의 배수번째 아이템을 반환, li:nth-child(5n+1) 은 5의 배수 +1번째 아이템을 반환
:event / :odd    : 페이지 전체의 짝수/홀수 번째 엘리먼트. li:even은 모든 짝수번째 아이템을 반환한다.
:eq(n)              : n번째로 일치하는 엘리먼트
:gt(n)               : n번째 엘리먼트(포함안됨) 이후의 엘리먼트와 일치
:lt(n)                : n번째 엘리먼트(포함안됨) 이전의 엘리먼트와 일치

 

 

# 필터 셀럭터

:animated          : 현재 애니메이션이 적용되고 있는 엘리먼트를 선택
:button              : 모든 버튼을 선택함(input[type=submit], input[type=reset], input[type=button], button)
:checkbox         : 체크박스 엘리먼트만 선택(input[type=checkbox])
:checked          : 선택된 체크박스나 라디오 버튼만을 선택
:contains(foo)    : 텍스트 foo를 포함하고 있는 엘리먼트만 선택
:disabled          : 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.
:enabled          : 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.
:file                 : 모든 파일 엘리먼트를 선택함(input[type=file])
:header            : 헤더 엘리먼트만 선택한다. 예를 들어 <h1>부터 <h6>엘리먼트만 선택한다.
:hidden            : 감춰진 엘리먼트만 선택한다.
:image             : 폼 이미지를 선택한다.(input[type=image])
:input              : 폼 엘리먼트만 선택한다.(input, select, textarea, button)
:not(filter)        : 필터의 값을 반대로 변경한다.
:parent            : 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.
:password       : 패스워드 엘리먼트만 선택한다. (input[type=password])
:radio              : 라디오 버튼 엘리먼트만 선택한다.(input[type=radio])
:reset              : 리셋 버튼을 선택(input[type=reset], button[type=reset])
:selected         : 선택된 엘리먼트만 선택한다.
:submit            : 전송 버튼을 선택한다.(button[type=submit], input[type=button])
:text                : 텍스트 엘리먼트만 선택(input[type=text])
:visible            : 보이는 (visible)엘리먼트만 선택한다.

 

 

 

$("div + p")는 div 바로 다음에 나오는 형제 수준의 p 요소, 즉, "노라조"를 선택하게 되는 반면, $("div ~ p")는 div 요소 다음에 나오는 형제 요소들 중 모든 p 요소, 즉, "노라조", "이적", "현진영"과 일치된다는 것이죠.

더불어, a[title]이나 a[href^="mailto:"]와 같이 어트리뷰트를 기반으로 하는 필터링도 가능한데요. 특정 어트리뷰트가 존재하거나, 그 어트리뷰트 값이 특정 값으로 시작 혹은 끝나거나, 특정 값을 포함하거나 하는 부분까지 비교해서 선택할 수 있습니다. 다음은 이러한 어트리뷰트 필러의 예입니다.

a[title] : title 어트리뷰트를 갖는 하이퍼 링크와 일치된다.
a[href^="mailto:"] : href 값이 mailto로 시작하는 하이퍼 링크와 일치된다.
a[href$=".pdf"] : pdf 파일에 링크가 걸린 모든 하이퍼링크와 일치된다.
a[href*="taeyo.net"] : taeyo.net이라는 값이 포함되어 있는 모든 하이퍼 링크와 일치된다.
input[type="text"] : text 형식의 입력 컨트롤과 일치된다.

 

 

 

	함수명	함수 설명
엘리먼트 조작	each(Function)	선택된 엘리먼트가 다수일 경우에 each 함수를 사용하여 차례대로 엘리먼트를 선택한다.
에트리뷰트 조작	attr(name, value)	선택된 엘리먼트의 name 에트리뷰트의 값을 value로 설정
	attr(name)	선택된 엘리먼트의 name 에트리뷰트의 값을 얻어옴.
	attr(Attributes)	선택된 엘리먼트를 프로퍼티(json)형태로 설정할 수 있음
	val()	엘리먼트의 value 에트리뷰트 값을 얻어옴. attr("value")와 동일함.
	val(content)	엘리먼트의 value 에트리뷰트 값을 content로 설정함.
에트리뷰트 제거	removeAttr(name)	해당 어트리뷰트의 값이 초기화 된다.
스타일 변경	addClass(names)	선택된 엘리먼트에 CSS Class를 적용함.
		만약에 다수의 Class를 적용하려면 공백으로 구분하여 할당하면 됨.
	removeClass(names)	선택된 엘리먼트들을 제거함.
	toggleClass(names)	특정 Class를 적용하지 않은 상태면 적용하고, 적용한 상태면 제거함.
스타일 얻고 설정	css(name, value)	선택된 엘리먼트의 name 에트리뷰트 값을 value로 설정함.
	css(properties)	{"name1:" value1", "name2": "value2", } 와 같은 형태로 설정함.
	css(name)	특정 name의 프로퍼티의 스타일 값을 얻을 수 있음.
	width(value)	선택된 엘리먼트의 width 값을 설정함.
	height(value)	선택된 엘리먼트의 height 값을 설정함.
	width()	선택된 엘리먼트의 width 값을 얻어옴.
	height()	선택된 엘리먼트의 height 값을 얻어옴.
	offset()	선택된 엘리먼트의 left 값과 top 값을
		E.offset().left, E.offset().top 과 같은 방법으로 얻을 수 있음
엘리먼트	html()	선택된 엘리먼트 태그 내용을 얻을 수 있음.
내용 설정	html(content)	선택된 엘리먼트의 태그 내용을 content로 설정함.
	text()	선택된 엘리먼트의 태그 내용 중 텍스트 값만 얻을 수 있음.
	text(content)	선택된 엘리먼트의 태그 내용을 content로 설정함.
엘리먼트	append(content)	선택된 엘리먼트의 내용 마지막에 새로운 content를 추가함.
복사&이동	appendTo(target)	선택된 엘리먼트가 단일이면 target으로 이동시키고 다수라면 복사됨.
	prepend(content)	append와 달리 앞으로 추가함
	prependTo(target)	appendTo와 달리 앞으로 복사 또는 이동함
	before(),insertBefore()	엘리먼트를 대상의 첫 번째 자식으로 삽입하는 대신에 대상의 바로 앞 형제로 추가함.
	after(),insertAfter()	엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에 대상의 바로 뒤 형제로 추가함
엘리먼트	wrap(wrapper)	매개 변수로는 String과 엘리먼트 타입이 올 수 있으며,
		"<div class='hello'></div>" 형태로 매개 변수 값을 넘기면 됨.
감싸기	wrapAll(wrapper)	선택된 모든 엘리먼트를 wrapper로 감쌈
엘리먼트 제거	remove()	페이지 DOM에서 확장 집합의 모든 엘리먼트를 삭제함.
	empty()	일치하는 집합의 모든 엘리먼트의 Content를 제거함.
엘리먼트 복사	clone(copyHandlers)	일반적으로 엘리먼트를 복사한 확장 집합을 만들면 이들은 DOM 어딘가에 덧붙일

 

 

 

 

 

 

 

 

 

http://www.hgjung.pe.kr/jQuery/SelectorFunction.aspx

확장집합 다루기

확장집합이란.. 흠.. jQuery 셀렉터에 의해서 수집된 요소들의 집합이다.
이 집합은 당연히 컬렉션으로 되어있다.
또다시 당연한 얘기지만 jQuery는 그 컬렉션을 다루는 함수들을 지원한다.
그 함수들에 알아보자.

size()

확장집합의 요소 개수를 반환한다.

$('div.someDiv').size();

get(index)

확장집합에서 하나 또는 모든 일치하는 요소를 반환한다. index가 없으면, 확장집합을 배열로 반환한다.

$('div.someDiv').get(0); -- div.someDiv의 일치하는 요소 중, 첫번째 요소를 반환한다.
$('div.someDiv')[0]; -- 이것과 같다.
$('div.someDiv').get(); -- div.someDiv의 모든 요소를 배열로 반환한다.

index(element)

확장집합에서 전달된 요소를 찾고 그 인덱스를 반환한다. 없으면 -1를 반환한다.

var ele = $('div.someDiv')[1];
$('div.someDiv').index(ele);

add(expression)

확장집합에서 전달된 요소를 찾고 그 인덱스를 반환한다. 없으면 -1를 반환한다.

var ele = $('div.someDiv')[1];
$('div.someDiv').index(ele);

not(expression)

var ele = $('div.someDiv')[1];
$('div.someDiv').index(ele);

filter(expression)

확장집합에서 셀렉터표현식에 맞는 요소를 제거한다

// 이미지 확장집합에서 alt속성이 네이버가 있는 이미지요소를 제거한다.
$('img').filter('alt*=네이버');

slice(begin, end)

확장집합에서 시작위 전달된 요소를 찾고 그 인덱스를 반환한다.

// 이미지 확장집합에서 처음 부터 4개까지 집합을 반환한다.
$('img').slice(0, 4);

children(expression)

확장 요소의 고유한 자식으로 구성된 확장집합을 반환한다.

contents()

확장집합에서 요소의 컨텐츠로 구성된 확장집합을 반환한다.

next(expression)

확장집합 내의 각 확장 요소 바로 다음에 나오는 형제로 구성된 확장집합을 반환한다.

nextAll(expression)

확장집합 내의 각 확장 요소 다음에 나오는 모든 형제로 구성된 확장집합을 반환한다.

parent(expression)

확장집합 내에 있는 모든 확장 요소의 바로 위 부모로 구성된 확장집합을 반환한다.

parents(expression)

모든 확장 요소의 조상으로 구성된 확장 집합을 반환한다.

바로 위 부모와 상위의 모든 조상이 포함되지만 문서루트는 포함되지 않는다.

prev(expression)

확장집합내의 각 확장 요소 바로 이전에 나오는 형제로 구성된 확장집합을 반환한다.

prevAll(expression)

확장집합내의 각 확장 요소 이전에 나오는 모든 형제로 구성된 확장집합을 반환한다.

siblings(expression)

확장 요소의 모든 형제를 포함하는 확장집합을 반환한다.

find(selector)

원본의 모든 요소 중 전달도니 셀렉터 표현식과 일치하는 요소로 구성된 새로운 확장집합을 반환한다.

$('img').find('[alt*=네이버]');

is(selector)

확장 집합에 전달된 셀렉터 표현식과 일치하는 요소가 있는지 확인한다.

var hasImage = $('*').is('img');