본문 바로가기
프로그래밍/jQuery

jQuery 활용 준비

by 가므자 2012. 3. 8.
jQuery를 읽어 들이는 부분

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/
jquery/1.6.2/jquery.min.js"></script>


jQuery를 읽어 들이는 부분

<script type="text/javascript">
이 곳에 jQuery 처리할 내용을 기술
</script>


HTML의 태그를 지정하는 "셀렉터"

$(function(){
 $("셀렉터").jQuery의 명령
});


셀렉터의 분류
- CSS에서 자주 이용되는 셀렉터
① 태그 셀렉터
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
$(function(){
$("li").css("color","red");
});
  </script>
 </head>
 <body>
 <ul>
  <li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
  <li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
  <li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
  <li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
 </ul>

②ID 셀렉터
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
  $(function(){
   $("#first").css("color","red"); // 또는 $("li#first").css("color","red"); 
  });
  </script>
 </head>
 <body>
  <ul>
  <li id="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
  <li id="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
  <li id="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
  <li id="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
  </ul>

③클래스 셀렉터
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
  $(function(){
   $(".second").css("color","red");
  });
  </script>
 </head>
 <body>
  <ul>
   <li class="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
   <li class="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
   <li class="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
   <li class="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
  </ul>

④자손 셀렉터
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
  $(function(){
   $(".first strong").css("color","red"); // first 인 태그 안에 있는 strong 태그
  });
  </script>
 </head>
 <body>
  <ul>
   <li class="first"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
   <li class="second"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
   <li class="third"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
   <li class="fourth"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
  </ul>

⑤유니버셜 셀렉터
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
  $(function(){
   $("li *").css("color","red");  // li 태그 안에 포함되어 잇는 모든 태그  즉 storing, em, span 태그
  });
  </script>
 </head>
 <body>
  <ul>
   <li><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
   <li><em> 텍스트 </em> 텍스트 텍스트 텍스트 텍스트 </li>
   <li><sapn> 텍스트 </span> 텍스트 텍스트 텍스트 텍스트 </li>
   <li> 텍스트텍스트텍스트텍스트 </li>
  </ul>

⑥그룹 셀렉터
  <script type="text/javascript">
  $(function(){
   $("#first , #third").css("color","red"); // id 속성이 "first"인 li태그와 "third"인 li 태그
  });
  </script>
 </head>
 <body>
  <ul>
   <li id="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
   <li id="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
   <li id="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
   <li id="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
  </ul>

-CSS2 셀렉터
-CSS3 셀렉터
-CSS의 속성 셀렉터
-jQuery 자체의 필터


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] 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치.
E[A=V] 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치.
E[A^=V] 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치.
E[A$=V] 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치.
E[A*=V] 값이 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치.


- 위치 기반 셀렉터.

셀렉터 설 명
:first 페이지에서 처음으로 일치하는 엘리먼트. li a:first는 리스트 아이템의 첫 번째 링크를 반환.
:last 페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링크를 반환.
:first-child 첫 번째 자식 엘리먼트. li:first-child는 각 리스트의 첫 번째 아이템을 반환.
:last-child 마지막 자식 엘리먼트. li:last-child는 각 리스트의 마지막 아이템을 반환.
:only-child 형제가 없는 엘리먼트를 반환.
:nth-child(n)

n번째 자식 엘리먼트. li:nth-child(2)는 각 리스트의 두 번째 아이템을 반환.

* n은 0부터가 아닌 1부터 시작.

:nth-child(even|odd)

짝수 또는 홀수 자식 엘리먼트.

* even(짝수) / odd(홀수)

:nth-child(Xn+Y)

li:nth-child(5n+1)

각 리스트의 5의 배수 + 1 번째 아이템을 반환.

:even / :odd 페이지 전체의 짝수 / 홀수 번째 엘리먼트. li:even은 모든 짝수 번째 아이템을 반환.
:eq(n) n번째로 일치하는 엘리먼트.
:gt(n) n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치.
:lt(n) n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.


- 정의 필터 셀렉터.

셀렉터 설 명
:animated 현재 애니메이션이 적용되고 있는 엘리먼트를 선택.
:button 모든 버튼을 선택. (input[type=submit], input[type=reset], input[type=button], button)
:checkbox 체크박스 엘리먼트만 선택. (input[type=checkbox])
:checked 선택된 체크박스나 라이도 버튼만을 선택. (CSS에서 지원)
:contains(Hello) 텍스트 Hello를 포함하는 엘리먼트만 선택.
:disabled

인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택. (CSS에서 지원)

:enabled

인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택. (CSS에서 지원)

:file

모든 파일 엘리먼트를 선택한다. (input[type=file])

:header 헤더 엘리먼트만 선택. ex) <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] 이나 button[type=reset])
:selected 선택된 엘리먼트만 선택.
:submit 전송 버튼을 선택. (button[type=submit] 이나 input[type=submit])
:text 텍스트 엘리먼트만 선택. (input[type=text])
:visible 보이는(visible) 엘리먼트만 선택.

'프로그래밍 > jQuery' 카테고리의 다른 글

'이벤트'로 타이밍을 설정하자  (0) 2012.03.09
기본 명령을 이용한 HTML/CSS의 조작  (0) 2012.03.09

관련글

댓글

티스토리툴바