[JS + jquery] ์ ์ด์ฟผ๋ฆฌ ์ฐ์ต๋ฌธ์ 1,2
2021. 10. 28. 22:30ใHTML + CSS + JS/JS ์๋ฐ์คํฌ๋ฆฝํธ
728x90
* ์ฐ์ต๋ฌธ์ 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> ์ ํ์ </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".wrap_1 p:first").text("๋ด์ฉ1");
$(".wrap_1 p.active").removeClass("active").addClass("on");
$(".wrap_1 p:eq(2) a").attr("href", "http://naver.com");
$(".wrap_1 p:eq(3) input").val("Korea");
$(".wrap_2 p:first").after("<p>After(์ถ๊ฐ1)</p>");
$(".wrap_2 p:first").before("<p>Before(์ถ๊ฐ2)</p>");
$(".wrap_3 p").unwrap().wrapInner("<strong />");
});
</script>
</head>
<body>
<div class="wrap_1">
<p>ํ
์คํธ1</p> <!--๋ด์ฉ1๋ก ๋ฐ๋-->
<p class="active">๋ด์ฉ2</p>
<p><a href="#">๋ค์ด๋ฒ</a></p>
<p>
<input type="text" value="Hello">
</p>
</div>
<div class="wrap_2">
<p>๋ด์ฉ5</p>
<p>๋ด์ฉ6</p>
</div>
<div class="wrap_3">
<div>
<p>๋ด์ฉ7</p>
<p>๋ด์ฉ8</p>
</div>
</div>
</body>
</html>
* ์ฐ์ต๋ฌธ์ 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> ๊ฐ์ฒด ์กฐ์ ๋ฐ ์์ฑ </title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#myList li").not(":first").css("background-color", "yellow");
});
</script>
</head>
<body>
<ul id="myList">
<li>๋ด์ฉ1</li>
<li>๋ด์ฉ2</li>
<li>๋ด์ฉ3</li>
<li>๋ด์ฉ4</li>
</ul>
</body>
</html>
* ์ฐ์ต๋ฌธ์ 3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> ๊ฐ์ฒด ์กฐ์ ๋ฐ ์์ฑ </title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$("#myList li:eq(2)").css("background-color", "yellow");
});
//]]>
</script>
</head>
<body>
<ul id="myList">
<li>๋ด์ฉ1</li>
<li>๋ด์ฉ2</li>
<li>๋ด์ฉ3</li>
<li>๋ด์ฉ4</li>
</ul>
</body>
</html>728x90