티스토리 뷰
var $$ = jQuery.noConflict();
$() ==> $$() 사용
1. 태그로 접근 basic
<p> test_p <em> test_em <em> </p>
jQuery("p");
jQuery("p em");
<div><p><a> test_has</a></p></div>
jQuery("div:has(p a)"); // div 안에 p 안의 a 태그를 찾음
2. 아이디 접근 : "부모>*" 자식 선택 : 자식만 적용받음
아이디 접근 : "부모 *" 후손 선택 : 자식밑에 후손 모두 적용<p id="idName" >
<div>
<li><a>idTest1</a></li>
<li>idTest2</li>
</div>
</p>
jQuery("#idName" >li);
jQuery("p#idName" >li);jQuery("p *");
3. 클래스 접근
<li class="className"> classTest </li>
jQuery(".className");
jQuery("li.className");
jQuery("li:className");
4. 타입 접근
<input type="checkbox"/>
jQuery(":checkbox");
5. 태그 내용으로 접근
<span>Hello dj!</span>
jQuery("span:contains('dj')").append(" #<<=");
6. 어트리뷰트로 접근
[attribute] 특정 어트리뷰트를 가지고 있는 요소
[attribute = value] 특정 어트리뷰트에 특정값을 가지고 있는 요소
[attribute != value] 특정 어트리뷰트에 특정값이 없는 요소
[attribute ^= value] 특정 어트리뷰트에 특정값으로 시작 하는요소
[attribute $= value] 특정 어트리뷰트에 특정값으로 끝나는 요소
[attribute ~= value] 특정 어트리뷰트에 특정값을 포함하는 요소
<div id="content-1"> test1 </div>
<div id="content-2"> test2 </div>
<div id="content-3"> test3 </div>
<div id="content-4"> test4 </div>
<div id="content-5"> test5 </div>
jQuery("div[id ^= 'content-']")
출처 : 실전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)엘리먼트만 선택한다.
'HMLT&CSS&JS > jQuery' 카테고리의 다른 글
# jQuery 회전 (0) | 2013.08.07 |
---|---|
# chapter06 객체지향 프로그래밍 (0) | 2013.02.04 |
# chapter17 효과 (0) | 2012.12.21 |
1. jQuery 메소드 정리 (2) | 2012.09.10 |
1. Effects (0) | 2011.07.22 |
- Total
- Today
- Yesterday