달력

12

« 2019/12 »

  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  

'전체 선택자'에 해당되는 글 2

  1. 02.html-전체 선택자
  2. 00.jQuery 기본

전체 선택자

  • CSS와 동일하므로 익숙하게 익혀야 함

선택자

설명

*

  • 전체 선택자
  • 문서 객체 전체 선택(DOM에서는 태그가 객체로 인식됨)

   

   

jQuery 내용 분량

1/3

선택자

CSS에서도 사용되는 선택자 임

1/3

DOM and event

1/3

ajax

   

   

소스코드

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

//*        : 전체 선택자로 문서 객체 전체 선택(DOM에서는 태그가 객체로 인식됨)

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

});

</script>

</head>

<body>

<h1>계절</h1>

</body>

 


 

   

출력결과

   

마우스 우클릭 > 요소 검사

모든 태그에 적용된 것을 확인 할 수 있습니다.

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

js파일 인코딩 방식 설정 방법 3가지  (0) 2014.09.26
NaN(Not a Number)  (0) 2014.09.22
02.html-전체 선택자  (0) 2014.09.21
객체의 프로퍼티 접근하기  (0) 2014.09.10
Sencha 라이브러리 설치  (0) 2014.09.04
01.html-객체 생성 2  (0) 2014.09.02
Posted by codedragon codedragon

댓글을 달아 주세요

   

jQuery(document).ready()

문서의 준비가 완료되면 매개 변수로 전달된 함수를 실행하라는 의미 

<script>

$(document).ready(function(){

 

});

</script>

   

아래의 표현도 동일한 기능 수행

   

<script>

$(function(){

 

});

</script>

   

   

jQuery 기본 선택자

   

선택자

설명

전체 선택자

HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자

태그 선택자

HTML 페이지 있는 문서 객체를 태그 이름으로 선택하는 선택자

아이디 선택자

HTML 페이지 안의 특정 ID 속성을 가지고 있는 문서 객체를 선택하는 선택자

클래스 선택자

HTML 페이지 안의 특정 class 속성을 가지고 있는 문ㅅ 객체를 선택하는 선택자

자식 선택자

자식 선택자는 자식을 선택하는 선택자이며 '부모 > 자식'의 형태로 사용

후손 선택자

후손 선택자는 이름 그대로 후손을 선택하는 선택자. '요소 A 요소 B'의 형태로 사용하여 요소 A의 후손으로 범위를 한정

속성 선택자

속성 선택자는 태그이름에 속성을 조합해서 선택하는 방식

입력 양식 필터 선택자

  

 필터 선택자

기본 필터 선택자와 함수 필터 선택자가 있음

   

   

전체 선택자

HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

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

});

</script>

   

태그 선택자

HTML 페이지 있는 문서 객체를 태그 이름으로 선택하는 선택자

   

<script>

$(document).ready(function(){

$('h1').css('color','orange');

});

</script>

   

아이디 선택자

HTML 페이지 안의 특정 ID 속성을 가지고 있는 문서 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

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

});

</script>

   

클래스 선택자

HTML 페이지 안의 특정 class 속성을 가지고 있는 문ㅅ 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

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

});

</script>

   

자식 선택자

자식 선택자는 자식을 선택하는 선택자이며 '부모 > 자식'의 형태로 사용

   

<script>

$(document).ready(function(){

$('body > div').css('color','red');

});

</script>

   

후손 선택자

후손 선택자는 이름 그대로 후손을 선택하는 선택자. '요소 A 요소 B'의 형태로 사용하여 요소 A의 후손으로 범위를 한정

   

<script>

$(document).ready(function(){

$('body div').css('color','red');

});

</script>

   

속성 선택자

속성 선택자는 태그이름에 속성을 조합해서 선택하는 방식

   

선택자 형태

설명

요소[속성]

특정 속성을 가지고 있는 문서 객체를 선택

요소[속성=값]

속성 안의 값이 특정 값과 같은 문서 객체를 선택

요소[속성~=값]

속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택

요소[속성^=값]

속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택

요소[속성$=값]

속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택

요소[속성*=값]

속성 안의 값이 특정 값을 포함하는 문서 객체를 선택

   

입력 양식 필터 선택자

   

선택자 형태

설명

요소:button

input 태그 중 type 속성이 button인 문서 객체와 button 태그를 선택

요소:checkbox

input 태그 중 type 속성이 checkbox인 문서 객체를 선택

요소: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인 문서 객체를 선택

   

선택자 형태

설명

요소:checked

체크된 입력 양식을 선택

요소:disabled

비활성화된 입력 양식을 선택

요소:enabled

활성화된 입력 양식을 선택

요소:focus

초점이 맞춰져 있는 입력 양식을 선택

요소:input

모든 입력 양식을 선택(input,textarea,select,button 태그)

요소:selected

option 객체 중 선택된 태그를 선택

   

필터 선택자

   

기본 필터 선택자 

선택자 형태

설명

요소:odd

홀수 번째에 위치한 문서 객체를 선택

요소:even

짝수 번째에 위치한 문서 객체를 선택

요소:first

첫 번째 위치한 문서 객체를 선택

요소:last

마지막에 위치한 문서 객체를 선택

   

함수 필터 선택자 

선택자 형태

설명

요소:contains(문자열)

특정 문자열을 포함하는 문서 객체를 선택

요소:eq(n)

n번째에 위치하는 문서 객체를 선택

요소:gt(n)

n번째 초과에 위치하는 문서 객체를 선택

요소:has(h1)

h1태그를 가지고 있는 문서 객체를 선택

요소:lt(n)

n번째 미만에 위치하는 문서 객체를 선택

요소:not(선택자)

선택자와 일치하지 않는 문서 객체를 선택

요소:nth-child(3n+1)

3n+1번째에 위치하는 문서 객체를 선택(1,4,7,...)

   

    

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

Sencha 라이브러리 설치  (0) 2014.09.04
01.html-객체 생성 2  (0) 2014.09.02
00.jQuery 기본  (0) 2014.08.31
객체 생성1  (0) 2014.08.26
프로젝트 생성  (0) 2014.08.24
jQuery API 문서 2  (0) 2014.08.23
Posted by codedragon codedragon

댓글을 달아 주세요