jQuery 소개
jQuery는 효율적이고 컴팩트하며 기능이 풍부한 JavaScript 도구 라이브러리입니다. 제공되는 API는 사용하기 쉽고 많은 브라우저와 호환되므로 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 작업 등이 더 쉬워집니다.
jQuery의 가장 큰 장점은 DOM 작업을 단순화한다는 것입니다.
공식 웹사이트 문서: jQuery
jQuery 릴리스 노트
jQuery는 1.x, 2.x, 3.x의 세 가지 주요 버전으로 나뉩니다.
1.x 버전
가장 널리 사용되는 ie678과 호환되며 공식적으로는 BUG 유지 관리만 수행하고 새로운 기능은 없습니다. 따라서 일반 프로젝트의 경우 버전 1.x, 최종 버전인 1.12.4(2016년 5월 20일)를 사용할 수 있습니다.
2.x 버전
ie678과 호환되지 않아 사용하는 사람이 거의 없으며 공식적으로는 BUG 유지 관리만 수행하고 새로운 기능은 추가되지 않습니다. 낮은 버전의 브라우저가 호환되지 않는 것으로 간주되면 2.x를 사용할 수 있습니다. 최종 버전: 2.2.4(2016년 5월 20일)
3.x 버전
ie678과 호환되지 않으며 최신 브라우저만 지원합니다. 특별한 요구 사항이 없는 한 일반적으로 3.x 버전은 사용되지 않으며, 이전 jQuery 플러그인 중 상당수는 이 버전을 지원하지 않습니다. 이 버전은 현재 공식적인 주요 업데이트 및 유지 관리 버전입니다. 최신 버전: 3.6.0
jQuery는 지식 포인트에 중점을 둡니다.
선택자
DOM 조작
CSS 작업
이벤트 처리
횡단
생기
다음은 JavaScript를 사용하여 내용을 수정하는 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">新年快乐</div>
<script>
var root = document.getElementById("root")
root.innerHTML = "大展宏图"
</script>
</body>
</html>jQuery를 이용하여 컨텐츠를 수정하는 방법은 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="root">新年快乐</div>
<script>
$("#root").html("2023年")
</script>
</body>
</html>1. jQuery 선택기
JavaScript 기본 선택기 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">类选择器</div>
<span>元素选择器</span>
<a id="root" href="#">ID选择器</a>
<script>
// 类选择器
var container = document.getElementsByClassName("container")[0]
container.innerHTML = "JS类选择器"
// 元素选择器
var span = document.getElementsByTagName("span")[0]
span.innerHTML = "JS元素选择器"
// ID选择器
var root = document.getElementById("root")
root.innerHTML = "JS的ID选择器"
</script>
</body>
</html>
jQuery 선택기 구현
기본 선택자: 클래스 선택자 ID 선택자 요소 선택자
속성 선택기: 완벽한 일치 접두사(|) 포함(*) 공백(~) 시작(^) 끝($)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="container">类选择器</div>
<span>元素选择器</span>
<a id="root" href="#">ID选择器</a>
<ul class="navtop">
<li>item1</li>
<li>
<ul>
<li>child-item1</li>
<li>child-item1</li>
<li>child-item1</li>
</ul>
</li>
<li>item3</li>
</ul>
<div>
<input type="radio" name="user" value="username" />
<span>name</span>
</div>
<div>
<input type="radio" name="user" value="age" />
<span>age</span>
</div>
<a href="#" alt="sxt">sxt</a>
<a href="#" alt="sxt-itbaizhan">sxt-itbaizhan</a>
<a href="#" alt="sxtitbaizhan">sxtitbaizhan</a>
<a href="#" alt="itbaizhan">itbaizhan</a>
<a href="#" alt="sxt itbaizhan">sxt itbaizhan</a>
<script>
// 类选择器
$(".container").html("jQuery类选择器")
// 元素选择器
$("span").html("jQuery元素选择器")
// ID选择器
$("#root").html("jQuery的ID选择器")
// 子代选择器 .css("属性"，"属性值")
$(".navtop > li").css("border","1px solid red")
// 后代选择器
$(".navtop li").css("border","1px solid red")
// 属性选择器（完美匹配）
// .next()是同一目录下的下一个标签
// .html()等同于JavaScript 的innerHTML()
$("input[value = 'username']").next().html("username")
// 属性选择器 前缀（-）
$("a[alt |= 'sxt']").css("border","2px solid red")
// 属性选择器 包含即可
$("a[alt *= 'sxt']").css("border","2px dashed green")
// 属性选择器 包含空格中任意一个单词
$("a[alt ~= 'sxt']").css("border","2px dotted red")
// 属性选择器，以给定字符开始
$("a[alt ^= 'sxt']").css("border","2px double orange")
// 属性选择器，以给定字符结束
$("a[alt $= 'baizhan']").css("border","2px dashed pink")
</script>
</body>
</html>jQuery 확장 선택기:
:eq(색인) :홀수 :짝수 :첫 번째 :마지막 :gt(색인) :lt(색인)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
<table border="1">
<tr>
<td>Row #1</td>
</tr>
<tr>
<td>Row #1</td>
</tr>
<tr>
<td>Row #1</td>
</tr>
</table>
<table border="1">
<tr>
<td>item #0</td>
<td>item #1</td>
<td>item #2</td>
</tr>
<tr>
<td>item #3</td>
<td>item #4</td>
<td>item #5</td>
</tr>
<tr>
<td>item #6</td>
<td>item #7</td>
<td>item #8</td>
</tr>
</table>
<script>
// jQuery扩展选择器 :eq(index)
// index 是下标，下标从0 开始
$("li:eq(2)").css("border","2px dashed green")
// jQuery扩展选择器 :even 偶数 从0开始
$("li:even").css("border","3px solid red")
// jQuery扩展选择器 :odd 奇数
$("li:odd").css("border","2px dotted orange")
// jQuery扩展选择器 :first 选择第一个(效果看第一个table)
$("tr:first").css("background-color","orange")
// jQuery扩展选择器 :last 选择最后一个（效果看第一个table）
$("tr:last").css("background-color","greenyellow")
// jQuery扩展选择器 :gt(index) 选择大于index的 （效果看第二个table）
$("td:gt(5)").css("background-color","red")
//jQuery扩展选择器 :lt(index) 选择小于index的 （效果看第二个table）
$("td:lt(5)").css("background-color","pink")
</script>
</body>
</html>2. jQuery의 DOM 연산
js 작업 추가 클래스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">Hello</div>
<script>
var div = document.getElementsByTagName("div")[0]
// 增加class 会覆盖原来的class
div.className = "text success"
// 清空class如下
div.className = ""
</script>
</body>
</html><jQuery_DOM 작업이 클래스를 추가합니다.
1.addClass(): 클래스 추가
2.removeClass(): 클래스 제거
3.toggleClass(): 클래스가 있는지 확인하여 있으면 삭제하고 없으면 추가합니다.
4.hasClass(): 클래스가 있는지 확인하고 Boolean 값을 반환합니다.