Hi

(jquery) 기본선택자 본문

WEB(웹)

(jquery) 기본선택자

SharingWorld 2018. 6. 26. 10:00
기본 선택자

기본 선택자

$('h1').css('color', 'red');
// $  선택자  메서드

전체 선택자

$('*').css('color', 'red');

* : 전체선택자


css() : 첫번째 매개변수 - 바꾸고자 하는 스타일 속성 이름.

두번째 매개변수 - 스타일 속성 값

태그 선택자

$(document).ready(function() {
	$('h1').css('color', 'orange');
});

아이디 선택자

$('#target').css('color', 'orange');

클래스 선택자

$('.item.select').css('color', 'orange');

자손 선택자와 후손 선택자

자손 선택자

‘요소A > 요소B’ 의 형태로 사용.


body 태그의 자식으로 범위를 한정해 전체가 선택 
$(document).ready(function() {
	$('body > *').css('color', 'red');
});

후손 선택자

후손을 선택하는 선택자


body 태그의 모든 후손을 선택하는 코드 
$(document).ready(function() {
	$('body *').css('color', 'red');
});

속성 선택자

선택자 형태 설명
요소[속성=값] 속성과 값이 같은 문서 객체를 선택합니다. 
$(document).ready(function() {
	$('input[type="text"]').val('Hello jQuery..!');
});

val() 메서드

매개변수 입력하면 - input 태그의 value 속성을 지정 (setter)
매개변수 입력하지 않으면 - value 속성을 검사 (getter)


필터 선택자

: 기호를 포함하는 선택자

입력 양식 필터 선택자

선택자 형태 설명
요소:button input 태그 중 type 속성이 button인 문서 객체와 button 태그를 선택합니다.
요소:checkbox input 태그 중 type 속성이 check인 문서 객체를 선택합니다.
요소:file input 태그 중 type 속성이 file인 문서 객체를 선택합니다.
요소:image input 태그 중 type 속성이 image인 문서 객체를 선택합니다.
요소:password input 태그 중 type 속성이 password인 문서 객체를 선택합니다.
요소:radio input 태그 중 type 속성이 radio인 문서 객체를 선택합니다.
요소:reset input 태그 중 type 속성이 reset인 문서 객체를 선택합니다.
요소:submit input 태그 중 type 속성이 submit인 문서 객체를 선택합니다.
요소:text input 태그 중 type 속성이 text인 문서 객체를 선택합니다.

ex) input:button


선택자 형태 설명
요소:checked 체크되어 있는 입력 양식을 선택합니다
요소:disabled 비활성화된 입력 양식을 선택합니다
요소:enabled 활성화된 입력 양식을 선택합니다
요소:focus 초점이 맞추어져 있는 입력 양식을 선택합니다
요소:input 모든 입력 양식을 선택합니다
요소:selected option 객체 중 선택된 태그를 선택합니다 
<body>
	<select>
		<option>Apple</option>
		<option>Bag</option>
		<option>Cat</option>
		<option>Dog</option>
		<option>Elephant</option>
	</select>
</body>

$(document).ready(function() {
	// 5초 후에 코드를 실행합니다.
	setTimeout(function() {
		//변수를 선언합니다.
		var value = $('select > option:selected').val();

		//출력합니다.
		alert(value);
	}, 5000);
});

위치 필터 선택자

선택자 형태 설명
요소: odd 홀수 번째에 위치한 문서 객체를 선택합니다.
요소: even 짝수 번째에 위치한 문서 객체를 선택합니다.
요소: first 첫 번째에 위치한 문서 객체를 선택합니다.
요소: last 마지막에 위치한 문서 객체를 선택합니다. 
$(document).ready(function() {
	$('tr:odd').css('background', '#F9f9f9');
	$('tr:even').css('background', '#9F9F9F');
	$('tr:first').css('background', '#000000').css(color', #FFFFFF');
});

함수 필터 선택자

선택자 형태 설명
요소:contains(문자열) 특정 문자열을 포함하는 문서 객체를 선택합니다.
요소:eq(n) n번째에 위치하는 문서 객체를 선택합니다
요소:gt(n) n번째 초과에 위치하는 문서 객체를 선택합니다
요소:has(h1) h1 태그가 있는 문서 객체를 선택합니다
요소:lt(n) n번째 미만에 위치하는 문서 객체를 선택합니다
요소:not(선택자) 선택자와 일치하지 않는 문서 객체를 선택합니다
요소:nth-child(3n+1) 3n+1번째에 위치하는 문서 객체를 선택합니다(1, 4, 7, …)

'WEB(웹)' 카테고리의 다른 글

스크롤바 제일 아래로 화면을 로드하기  (0) 2018.06.26
(html) display: flex 안에 display: flex  (0) 2018.06.26
문서 객체 모델  (0) 2018.06.26
(javascript) 캡슐화  (0) 2018.06.25
(javascript) 함수의 다양한 형태  (0) 2018.06.25
'WEB(웹)' Related Articles more