제이쿼리 총정리(1) - 선택자 > Javascript

제이쿼리 제이쿼리 총정리(1) - 선택자

페이지 정보

작성자 너갱이 작성일 19-12-26 14:38 조회 1,641 댓글 1

본문

---------------- 프레임워크 선언 -----------------

<//script src="http://code.jquery.com/jquery-latest.js"></script//>
<//script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script//>

메소드 : $("선택자").click( function(){ 액션1; 액션2; ... } );

------- 선택자 표기----------------

$("*")
$("태그명")
$(".클래스명")
$("태그명.클래스명")
$("#ID명")
$("#ID명 종속태그명") = $("#ID명").find("종속태그명")
$("#ID명, .클래스명, 태그명")

---- DOM Selector ------------

$("선택자1 선택자2")
선택자1의 자손이면서 선택자2와 일치하는 모든 엘리먼트에 적용

$("선택자1 > 선택자2")
선택자1의 바로 아래 자손이면서 선택자2와 일치하는 엘리먼트에 적용

$("선택자1 + 선택자2")
선택자1의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 선택자2와 일치하는 엘리먼트에 적용

$("선택자1 ~ 선택자2")
선택자1의 형제 엘리먼트중에 선택자2와 일치하는 다음에 나오는 모든 엘리먼트에 적용

$("선택자1:has("선택자2")")
선택자2인 자손을 1개이상 가진 선택자1인 모든 엘리먼트에 적용

$("선택자:first")
선택자과 일치하는 것중 페이지에서 처음으로 일치하는 엘리먼트

$("선택자:last")
선택자과 일치하는 것중 페이지에서 마지막으로 일치하는 엘리먼트

$("선택자:first-child")
선택자과 일치하는 것중 첫번째 자식 엘리먼트

$("선택자:last-child")
선택자과 일치하는 것중 마지막 자식 엘리먼트

$("선택자:only-child")
선택자과 일치하는 것중 형제가 없는 모든 엘리먼트

$("선택자:nth-child(n)") //1~10
선택자과 일치하는 것중 n번째 자식 엘리먼트

$("선택자:nth-child(even | odd)")
선택자과 일치하는 것중 짝수 또는 홀수 자식 엘리먼트

$("선택자:nth-child(Xn+Y)")
전달된 공식에 따른 n번째 자식 엘리먼트, Y는 0인 경우 생략

$("선택자:even/odd")
페이지 전체의 짝수/홀수 번째 엘리먼트

$("선택자:eq(n)") // 0~9
n번째로 일치하는 엘리먼트

$("선택자:gt(n)")
n번째로 엘리먼트(포함되지 않음) 이후의 엘리먼트

$("선택자:lt(n)")
n번째로 엘리먼트(포함되지 않음) 이전의 엘리먼트

$(this).parent().next()
현재객체의 부모로부터 다음번째 엘리먼트...

$(this).parent().prev()
현재 객체의 부모로부터 이전번째 엘리먼트..

$(this).children()
현재객체의 자식노드

$(this).children().each(function(index, elem){

//현재객체의 자식노드들이 각각 실행하는 함수, 마치 for( value in key){ ...} 와 비슷.

console.log(index +":"+elem.tagName);

}

< 선택한 요소의 필터링 정리 >

선택자	예제	설명
:eq(n)	`$("ul li:eq(3)")`	선택한 요소 중에서 인덱스가 n인 요소를 선택함.
:gt(n)	`$("ul li:gt(3)")`	선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택함.
:lt(n)	`$("ul li:lt(3)")`	선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택함.
:even	`$("tr:even")`	선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택함.
:odd	`$("tr:odd")`	선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택함.
:first	`$("p:first")`	선택한 요소 중에서 첫 번째 요소를 선택함.
:last	`$("p:last")`	선택한 요소 중에서 마지막 요소를 선택함.
:animated	`$(":animated")`	선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택함.
:header	`$(":header")`	선택한 요소 중에서 `<h1>`부터 `<h6>`까지의 요소를 모두 선택함.
:lang(언어)	`$("p:lang(ko)")`	선택한 요소 중에서 지정한 언어의 요소를 모두 선택함.
:not(선택자)	`$("input:not(:empty)")`	선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택함.
:root	`$(":root")`	선택한 요소 중에서 최상위 루트 요소를 선택함.
target	`$("a[target='_blank']")`	선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택함.
:contains(텍스트)	`$(":contains('Hello')")`	선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택함.
:has(선택자)	`$("p:has(span)")`	선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택함.
:empty	`$(":empty")`	선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택함.
:parent	`$(":parent")`	선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함.

< input 요소의 선택 정리 >

선택자	예제	설명
:button	`$(":button")`	type 속성값이 "button"인 요소를 모두 선택한다.
:checkbox	`$(":checkbox")`	type 속성값이 "checkbox"인 요소를 모두 선택한다.
:file	`$(":file")`	type 속성값이 "file"인 요소를 모두 선택한다.
:image	`$(":image")`	type 속성값이 "image"인 요소를 모두 선택한다.
:password	`$(":password")`	type 속성값이 "password"인 요소를 모두 선택한다.
:radio	`$(":radio")`	type 속성값이 "radio"인 요소를 모두 선택한다.
:reset	`$(":reset")`	type 속성값이 "reset"인 요소를 모두 선택한다.
:submit	`$(":submit")`	type 속성값이 "submit"인 요소를 모두 선택한다.
:text	`$(":text")`	type 속성값이 "text"인 요소를 모두 선택한다.
:input	`$(":input")`	`<input>`, `<textarea>`, `<select>`, `<button>`요소를 모두 선택한다.
:checked	`$(":checked")`	type 속성값이 "checkbox" 또는 "radio"인 요소 중에서 체크되어 있는 요소를 모두 선택한다.
:selected	`$(":selected")`	`<option>`요소 중에서 선택된 요소를 모두 선택한다.
:focus	`$(":focus")`	현재 포커스가 가지고 있는 요소를 선택한다.
:disabled	`$(":disabled")`	비활성화되어있는 요소를 모두 선택한다.
:enabled	`$(":enabled")`	활성화되어있는 요소를 모두 선택한다.

댓글목록 1

너갱이님의 댓글

너갱이 작성일 21-07-07 13:31

비밀글 댓글내용 확인