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 |