- 자바스크립트 라이브러리 ( 오픈소스 )
- 자바스크립트 코드 형식을 좀 더 직관적으로 이해할 수 있도록
짧고 단순한 코드 형태로 변형하여 제공
* 연동 방법
1. 다운로드
https://cdnjs.com/libraries/jquery
2. 네트워크 전송 방식
https://cdnjs.com 에서 링크 복사 후, html 파일 타이틀 밑에 아래와 같이 붙여넣기
* jQuery 함수 이해하기
결과값 모두 true
<script>
console.log('1. jQuery:', jQuery);
console.log('2. typeof jQuery:', typeof jQuery);
console.log('3. jQuery instanceof Function:', jQuery instanceof Function);
console.log('4. $:', $);
console.log('5. typeof $:', typeof $);
console.log('6. $ instanceof Function:', $ instanceof Function);
console.log('7. jQuery == $:', jQuery == $);
console.log('8. jQuery === $:', jQuery === $);
// -------------------------------------------- //
// jQuery 함수의 리턴 타입은 JQuery (대문자 J)
// jQuery(): JQuery
$(document).ready(function (params) {
console.log('- document.onload event handler invoked.');
console.log('- params:', params, params === jQuery, params === $);
console.log(window.jQuery === window.$, window.$ === jQuery, jQuery === $);
});
</script>
* Entry Point 빼먹지 말기!
<script>
//jQuery의 잘못된 적용방법
$('#txt').css('color', 'blue');
// css 메소드: 선택된 요소노드의 CSS스타일을 변경하는 제이쿼리 메소드
// Entry Point 적용
//1
$(function () {
$('#txt').css('color', 'blue');
}); //.jq
//2
$(()=> {
$('#txt').css('color', 'blue');
}); //.jq
</script>
* 선택자
- 문서 객체 모델
1. 기본 선택자
- 직접 선택자
- 인접 관계 선택자
2. 위치 탐색 선택자
- first / last 선택자
$("요소 선택:first") 또는 $("요소 선택").first()
$("요소 선택:last") 또는 $("요소 선택").last()
<head>
<script>
$(() => {
$("#menu li:first").css({ backgroundColor: "#ff0"});
$("#menu li:last").css({ backgroundColor: "#0ff"});
}); //.jq
</script>
</head>
<body>
<h1>구조적 가상 클래스 선택자</h1>
<ul id="menu">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</body>
- even / odd 선택자
$("요소 선택:even")
$("요소 선택:odd")
<script>
$(() => {
// 후손선택자 + 구조적 가상클래스 선택자(:even, 짝수번째 요소노드만 선택)
$("#menu li:even").css({
backgroundColor: "#ff0",
color: "white"
});
// 후손선택자 + 구조적 가상클래스 선택자(:odd, 홀수번째 요소노드만 선택)
$("#menu li:odd").css({
backgroundColor: "#0ff",
color:"white"
});
}); //.jq
</script>
</head>
<body>
<h1>구조적 가상 클래스 선택자</h1>
<ul id="menu">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</body>
- eq / lt / gt 탐색 선택자
$("요소 선택:eq(index)") 또는 $("요소 선택).eq(index)
$("요소 선택:lt(index)")
$("요소 선택:gt(index)")
<script>
$(() => {
// eq(n) 메소드 : 지정된 인덱스번호와 일치하는 요소노드를 선택
$("#menu li").eq(2).css({ backgroundColor: "yellow" });
// lt(n) 메소드: 지정된 인덱스번호보다 작은 모든 요소노드 선택
$("#menu li:lt(2)").css({ backgroundColor: "red" });
// gt(n) 메소드: 지정된 인덱스번호보다 큰 모든 요소노드 선택
$("#menu li:gt(2)").css({ backgroundColor: "blue" });
}); //.jq
</script>
</head>
<body>
<h1>구조적 가상 클래스 선택자</h1>
<ul id="menu">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
</body>
'교육과정 기록 > jQuery' 카테고리의 다른 글
| Ajax 시작 (0) | 2022.07.04 |
|---|---|
| jQuery 이벤트 (0) | 2022.07.01 |
| jQuery - 객체 조작 메서드 (0) | 2022.06.30 |
| jQuery - 배열 메소드 (0) | 2022.06.29 |