728x90
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>728x90
'노트' 카테고리의 다른 글
| jQuery 여러 메서드 (0) | 2022.05.19 |
|---|---|
| jQuery 필터링 메서드 (1) | 2022.05.18 |
| 5월 6일 JSP (0) | 2022.05.07 |
| 5월 3일 JSP 게시판 페이징 학습 (0) | 2022.05.03 |
| 4월 28일 게시판 글 삭제하기 (0) | 2022.04.28 |