[ jQuery ] 셀렉터 기본

jQuery 기본셀렉터(Basic Selector)

jQuery에는 여러가지 Selector 가 존재하지만 그중이 기본셀렉터를 알아보겠습니다.

첫번쨰로는 전체셀렉터를 찾는 All Selector 입니다.

1. All Selector

전체 셀렉터는 말그래도 <body> 포함한 모든 엘리먼트를 찾는 셀렉터입니다.

사용방법은

		
     jQuery(document).ready(function(){
		var el = $("*");
		el.css( "border", "1px solid black" );
	});

와같이 $(); 안에 문자열 "*" 를 넣어서 사용하게 되면 아래와 같이 출력되는것을 확인할수있다.

body > ul > li > a 순으로 들어간 모든 엘리먼트에 border 가 생긴것이다.

2. ID Selector

아이디 셀렉터는 태그에 attribute 값으로 id="value" 와같이 주었을때

해당항목을 찾을때 사용한다.

사용방법은

	
    jQuery(document).ready(function(){
		var el = $("#menu1");
		el.css( "border", "1px solid red" );
	});

와같이 $(); 안에 문자열 "#" 뒤로 ID를 적으면 해당 ID 를 가진 엘리먼트를 찾는다.

3. Class Selector

아이디 셀렉터는 태그에 attribute 값으로 class="value" 와같이 주었을때

해당항목을 찾을때 사용한다.

사용방법은

	
    jQuery(document).ready(function(){
		var el = $(".list2_3");
		el.css( "border", "1px solid red" );
	});

와같이 $(); 안에 문자열 "." 뒤로 class명을 적으면 해당 ID 를 가진 엘리먼트를 찾는다.

4. Element Selector

엘리먼트 셀렉터는 태그이름을 사용하며 해당항목을 찾는 셀렉터이다.

사용방법은

	
    jQuery(document).ready(function(){
		var el = $("li");
		el.css( "border", "1px solid red" );
	});

엘리먼트 셀렉터는 위에 ID나 Class 셀렉터와 달리 태그명만 적어주면

해당 태그를 사용한 모든 엘리먼트를 찾는다.

4. Multiple Selector

jQuery는 다중셀렉터를 사용하여 여러 엘리먼트를 한번에 찾을수있다.

사용방법은

	
    jQuery(document).ready(function(){
		var el = $(".list1_2, .list1_4, #menu2");
		el.css( "border", "1px solid red" );
	});

와같이 여러 $(); 안에 콤마(,) 를 사용하여 자신이 원하는 엘리먼트를 찾을수있다.

[제이쿼리/jQuery] append() , appendTo() 새로운 요소 삽입 (0)	2017.11.28
[제이쿼리/jQuery] 요소 갯수 구하기 .length (2)	2017.06.15
[제이쿼리/jQuery] 필터셀렉터(:) . :first :last :even :odd :eq :gt :lt :has :not (3)	2017.06.14
[제이쿼리/jQuery] 자식노드, 다음 인접노드, 다음 형제노드 찾기( Child selector, Next Adjacent Selector, Next Siblings Selector ) (0)	2017.06.14
[제이쿼리/jQuery] 속성으로 노드찾기 ( attribute selector ) (0)	2017.06.13

버물리의 IT공부