jQuery는
자바스크립트 라이브러리임
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
/**사용방법
1. cdn 사용
2. 다운로드 받아서 파일주소 링크
**셀렉터(Selector)
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery - 셀렉터</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<style>
body {
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
background: #f4f4f4;
line-height: 1.5em;
}
header {
background: #333;
color: white;
padding: 20px;
text-align: center;
border-bottom: 4px solid black;
margin-bottom: 10px;
}
#container {
width: 90%;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>jQuery 시작하기</h1>
</header>
<div id="container">
<h1 id="heading1">Heading One</h1>
<p id="para1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim nam sequi
expedita harum reiciendis repellendus tempora mollitia quae ipsam veniam
sed quas dignissimos iste, sit quidem perspiciatis distinctio ut itaque.
</p>
<h1 class="heading2">Heading One</h1>
<p class="para2">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum iusto
impedit laborum eaque, incidunt temporibus quam repudiandae tempora?
Molestias nam dolores hic aspernatur minus itaque sequi nobis
accusantium optio deleniti!
</p>
</div>
<script>
// 제이쿼리 선택자
// $("h1").hide(); //숨김
$("h1#heading1").hide(); //h1의 id heading1만 숨김
$("h1.heading2").hide(); //h1의 class heading2만 숨김
</script>
</body>
</html>
선택자 문법
태그:nth-child(n) = 해당 태그의 몇 번째
li:nth-child(3) = li태그의 3번째 태그 선택
type으로도 선택가능
속성으로도 선택가능
'FRONTEND > 기타' 카테고리의 다른 글
| Dom 응용실습 (1) | 2023.10.05 |
|---|---|
| jQuery - event (0) | 2023.10.05 |
| id로 DB검색하여 결과 출력 (0) | 2023.10.04 |
| AJAX로 구구단 출력 (1) | 2023.10.04 |
| AJAX를 이용해 서버에서 계산하여 결과 출력하기 (0) | 2023.10.04 |