jQuery 개요
- 오픈소스 라이브러리
- 복잡한 자바스크립트 문법을 간소화
- 크로스 브라우징
- 다양한 오픈소스 라이브러리 사용 가능
jQuery 기본 문법
<script>
$(document).ready(function() {
});
</script>
<!-- 간소화 -->
<script>
$(function() {
});
</script>
- 문서가 준비 완료되면 전달된 함수를 실행하라는 의미
- script를 html의 head안에 넣었을 경우 본문이 출력되기 전에 script가 먼저 실행되기 때문에 사용한다.
- javascript의 onload와 같다.
- $ 표시는 jQuery 문자를 간소화 한것
기본 선택자
<script>
$("h1").css("color","red");
</script>
- 가장 많이 사용하는 형태
- $ 괄호 안에 들어가는 것은 선택 자이고. 뒤에 오는 것은 메서드이다.
- h1 태그의 css color style을 red로 바꾼다.
- 선택자에 쉼표를 사용해 하나 이상의 선택자를 사용할 수 있다.
- id나 class 태그를 선택할 경우 css태그를 선택하는 것과 같다.
<script>
$("h1").css("color","red");
$("#id").css("color","red");
$(".class").css("color","red");
</script>
자식 선택자/ 후손 선택자
- 기본 선택자 앞에 붙여 사용하며 기본 선택자의 범위를 제한한다.
<script>
/* 자식 선택자
바디의 E만 색이 변함 */
$("div > h1").css("color","red");
/* 후손 선택자
바디의 A와 E의 색이 변함*/
$("div h1").css("color","red");
</script>
<body>
<div>
<ul>
<li><h1>A</h1></li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<h1>E</h1>
</div>
</body>
속성 선택자
<script>
/*속성 안의 값이 특정 값과 같은 객체 선택*/
$("input[type=text]").css("color","red");
/*속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택*/
$("input[type~='값']").css("color","red");
/*속성 안의 값이 특정 값으로 시작하는 객체 선택*/
$("input[type^='값']").css("color","red");
/*속성 안의 값이 특정 값으로 끝나는 객체 선택*/
$("input[type$='값']").css("color","red");
/*속성 안의 값이 특정 값을 포함하는 객체 선택*/
$("input[type*='값']").css("color","red");
</script>
- 대괄호 말고 ":"을 사용하여 속성을 선택할 수도 있다.
<script>
/*input 태그의 button 타입 선택*/
$("input:button").css("color","red");
</script>
필터 선택자
| 요소:odd |
홀수에 위치한 객체 선택 |
| 요소:even |
짝수에 위치한 객체 선택 |
| 요소:first |
첫 번째 위치한 객체 선택 |
| 요소:last |
마지막에 위치한 객체 선택 |
| 요소:contains(문자열) |
특정 문자열을 포함하는 객체 선택 |
| 요소:eg(n) |
n번째 위치하는 객체 선택 |
| 요소:gt(n) |
n번째를 초과하는 객체 선택 |
| 요소:lt(n) |
N번째 미만에 위치하는 객체 선택 |
| 요소:has(선택자) |
선택자를 가지고 있는 객체 선택 |
| 요소:not(선택자) |
선택자와 일치하지 않는 객체 선택 |
| 요소:nth-child(2n) |
2n번째 위치하는 객체 선택 |
부분의 필터 선택자의 경우 배열에 담아 그 배열에 위치한 인덱스를 기준으로 객체를 선택한다.
때문에 예를 들어 odd의 경우 홀수에 위치한 객체를 선택하는데
배열에 [1,2,3,4,5]가 있을 경우 홀수라 1,3,5 가 선택되어야 할 것 같다.
[1,2,3,4,5]의 인덱스가 [0,1,2,3,4]라서 실제로는 2,4가 선택된다.
<script>
/*예시*/
/*여러 선택자를 사용해 봅시다.*/
$("table tr:eq(1) td:gt(0)").css("color","yellow");
$("table tr:eq(2) td:gt(0)").css("color","yellow");
$("table tr:lt(3) td:nth-child(2)").css("color","yellow");
$("table tr:lt(3) td:nth-child(3)").css("color","yellow");
</script>