.png)
🤔 jQuery ?
jQuery는 오픈 소스 기반의 자바스크립트 라이브러리 이다.
jQuery를 사용하지 않으면 DOM 트리를 이용해서 요소(element)에 접근 해야 하는데, 이는 배우기도 어렵고 불편한데, jQuery를 사용하면 CSS의 선택자를 이용해서 간편하게 접근할 수 있다.
jQuery 적용방법
<!-- 적용방법 1 -->
<script src="js/jquery.js"></script>
<!-- 적용방법 2 : cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 적용방법 3 -->
<script src="http://code.jquery.com/jquery-latest.js"></script>- 첫 번째 방법은 API를 직접 다운받아 사용
- 두 번째 방법은 CDN을 이용
- 세 번째 방법은 jQuery에서 제공하는 최신 버전의 URL
jQuery 선언
$(document).ready(function(){
// process..
});
$(function(){
// process..
})자바스크립트에서의 window.onload 와 비슷하게 $(document).ready()로 선언한다.
ready는 일종의 jQuery 이벤트로 document 문서가 로드 되었을 때 발생한다. 이로 인해
jQuery가 자바스크립트 보다 더 빨리 실행되는 이유이다.
jQuery 기본 선택자
직접 선택자
| 종류 | 사용법 | 설명 |
|---|---|---|
| 전체 선택자 | $("*") | 모든 요소를 선택 한다 |
| 아이디 선택자 | $("#아이디명") | id 속성에 지정한 값을 가진 요소를 선택 한다. |
| 클래스 선택자 | $(".클래스명") | class 속성에 지정한 값을 가진 요소를 선택 한다. |
| 요소 선택자 | $("요소명") | 지정한 요소명과 일치하는 요소들만 선택 한다. |
| 그룹 선택자 | $("선택 1, 선택2, 선택3, ...") | 선택1, 선택2, 선택3, ... 에 지정된 요소들을 한 번에 선택 |
| 종속 선택자 | $("요소명.클래스명")$("요소명#아이디명") | 요소 중 class 값이 클래스명인 요소 또는 id 값이 아이디명인 요소를 선택 |
인접 관계 선택자
| 종류 | 사용법 | 설명 |
|---|---|---|
| 부모 요소 선택자 | $("요소 선택").parent() | 선택한 요소의 부모 요소를 선택 한다. |
| 상위 요소 선택자 | $("요소 선택").parents() | 선택한 요소의 상위 요소 모두를 선택 한다. |
| 가장 가까운 상위 요소 선택자 | $("요소 선택").closet("div") | 선택한 요소의 상위 요소 중 가장 가까운 div 만 선택. |
| 하위 요소 선택자 | $("요소선택 하위요소") | 선택한 요소에 지정한 하위 요소를 선택 |
| 자식 요소 선택자 | $("요소선택 > 하위요소") | 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택 |
| 다음 요소 선택자 | $("요소 선택").next()$("요소 선택+다음 요소") | 선택한 요소의 다음 요소를 선택 |
| 다음 요소들 선택자 | $("요소 선택").nextAll()$("요소명#아이디명") | 선택한 요소의 다음 요소 모두를 선택 |
| 전체 형제 요소 선택자 | $(".box_1").siblings() | class 값이 box_1인 요소의 형제 요소 전체를 선택 |
jQuery 탐색 선택자
위치 탐색 선택자
| 종류 | 사용법 | 설명 |
|---|---|---|
$("요소 선택:first")$("요소 선택").first() | $("li:first")$("li").first() | 전체 li 요소 중 첫 번째 요소만 선택 |
$("요소 선택:last")$("요소 선택").last() | $("li:last")$("li").last() | 전체 li 요소 중 마지막 요소만 선택 |
$("요소 선택:odd") | $("li:odd") | li 요소 무리 중 짝수 번째(홀수 인덱스) 요소만 선택 |
$("요소 선택:even") | $("li:even") | li 요소 무리 중 홀수 번째(짝수 인덱스) 요소만 선택 |
$("요소 선택:nth-child(숫자)") | $("li:nth-child(3)") | li 요소 무리 중 세번째 요소만 선택 |
$("요소 선택:eq(인덱스)")$("요소 선택").eq(인덱스) | $("li:eq(2)")$("li").eq(2) | li 요소 중 인덱스 2가 참조하는 요소 |
$("요소 선택").slice(index) | $("li").slice(2) | li 요소 중 인덱스 2부터 참조하는 요소 |
each() / $.each() 메소드
$('요소').each(function(index, item){
// 각 요소들의 작업을 수행
})*/
$.each(배열, function(index, item){
//배열의 각 요소들의 작업을 수행
})each()와 $.each() 메소드는 배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져온다.
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.high_light-0 {
background: yellow;
}
.high_light-1 {
background: orange;
}
.high_light-2 {
background: blue;
}
.high_light-3 {
background: green;
}
.high_light-4 {
background: red;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('h1').each(function(index, item){ // 각 h1 요소에 css 적용
$(item).addClass('high_light-'+index);
})
})
</script>
</head>
<body>
<h1>item - 0</h1>
<h1>item - 1</h1>
<h1>item - 2</h1>
<h1>item - 3</h1>
<h1>item - 4</h1>
</body>
</html>
DB 엔지니어👍