Home > Blog > 자바스크립트

각카테고리별 기술문서를 올려놓았습니다.

자바스크립트

Jquery selector와 selector 관련함수 (1)

페이지 정보

작성자 :곰군 작성일 :15-04-20 17:10 조회 :3,113회

본문

 

1. 셀렉터    
     
셀렉터는 매우 좋은 기능이다. HTML문서에 있는 다양한 엘리먼트들 중 자신이 원하는 엘리먼트를 선택하는 기능이다.    
기존에는 document.getElementById('ID') 같은 식으로 했었지만 길기도하고 치기도 *같은 방식이었다.    
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=V] 값이 V인 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트  
E[A=V] 값이 V로 시작하는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트  
E[A$=V] 값이 V로 끝나는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트  
E[A*=V] 값이 V를 포함하는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트  
E[A] 에트리뷰트 A를 가지는 태그 명이 E인 모든 엘리먼트  
     
위치 셀렉터    
셀렉터 문법 문법 설명  
E:first 모든 엘리먼트 E 중에서 첫 번째인 엘리먼트  
E:last 모든 엘리먼트 E 중에서 마지막인 엘리먼트  
 
E:first-child 엘리먼트 E의 자식 엘리먼트 중에서 첫 번째인 엘리먼트  
E:last-child 엘리먼트 E의 자식 엘리먼트 중에서 마지막인 엘리먼트  
E:only-child 엘리먼트 E의 자식 엘리먼트 중에서 형제가 없는 엘리먼트  
E:nth-child(n) 엘리먼트 E의 n번째 자식 엘리먼트  
E:nth-child(even or odd) 엘리먼트 E의 홀수 or 짝수 자식 엘리먼트  
E:even or E:odd 페이지 전체의 짝수 or 홀수 엘리먼트  
E:eq(n) 태그 값이 E인 모든 엘리먼트 중에서 n번째로 일치하는 엘리먼트  
E:gt(n) 태그 값이 E인 모든 엘리먼트 중에서 n번째 엘리먼트(포함 X) 이후의 엘리먼트  
E:lt(n) 태그 값이 E인 모든 엘리먼트 중에서 n번째 엘리먼트 이전의 엘리먼트  
     
jQuery 정의 셀렉터    
셀렉터 문법 문법 설명  
:animated 현재 애니매이션이 적용되고 있는 엘리먼트 선택  
: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] or button[type=reset])  
:selected 선택된 엘리먼트만 선택  
:submit 전송 버튼을 선택 (input[type=submit] or button[type=submit])  
:text 텍스트 엘리먼트만 선택 (input[type=text])  
:visible 보이는 엘리먼트만 선택   
     
함수 정리    
  함수 명 함수 설명
엘리먼트 조작 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().leftE.offset().top과 같은 방법으로 얻을 수 있음.
엘리먼트 내용 설정 html() 선택된 엘리먼트 태그 내용을 얻을 수 있음.
  html(content) 선택된 엘리먼트의 태그 내용을 content로 설정함.
  text() 선택된 엘리먼트의 태그 내용 중 텍스트 값만 얻을 수 있음.
  text(content) 선택된 엘리먼트의 태그 내용을 content로 설정함.
엘리먼트 복사&이동 append(content) 선택된 엘리먼트의 내용 마지막에 새로운 content를 추가함.
  appendTo(target) 선택된 엘리먼트가 단일이면 target으로 이동시키고 다수라면 복사됨.
추천 0 비추천 0

댓글목록

주소 : 서울시 서초구 서초동 사임당로8길 16 성재빌딩 2층, 담당자(이철원부장) : 010-4235-9876 , maverick@knowledgepoint.co.kr

사업자번호 : 120-87-90108, 전화번호 : 070-4325-4033, FAX : 02-6937-1035

Copyrights 2012(c). All rights reserverd knowledgepoint.co.LTD