<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.aaa{
color: #f00;
}
.bbb{
padding: 10px;
border: #000 10px solid;
background-color: rgb(255, 0, 0);
}
.q11_a{
text-decoration: underline;
color: #00f;
}
#q17{
background: #f00;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<button>변경</button>
<p id="q1">Hello JQuery</p>
<br>
<p id="q2">최선을 다할 것이다</p>
<br>
<ul id="list">
<li>사과</li>
<li>배</li>
<li>바나나</li>
</ul>
<p id="q3">나는 실패를 알고 있다</p>
<div class='bbb'>
<p id="q4">나는 실패를 겁내지 않는다</p>
</div>
<p class="q5">
<a href="http://www.daum.net">Daum</a>
</p>
<script type="text/javascript">
$(function () {
$("button").click(function () {
// 폰트 컬러 변경
/* $("#q1").css("color", "red");
// 폰트 컬러와 배경색 변경
$("#q1").css({
"color":"#00f",
"background-color":"#ffff00"
});
// 태그의 문자열을 변경
$("#q1").text("World JQuery");
// link로 변경
$("#q1").html("<a href='http://zum.com'>Zum</a>");
// class를 추가
$("#q1").addClass("aaa");
// 지정 p태그에 추가 (앞, 뒤)
$("#q2").prepend("끝까지<br>");
$("#q2").append("<br>성공하는 그 날까지"); */
// list 삭제
// $("#list li").remove();
// list 추가(앞, 뒤)
// $("#list li").before("<li>오렌지</li>");
// $("#list li").after("<li>수박</li>");
$("#q3").wrap("<div class='bbb'></div>");
$("#q4").unwrap("div.bbb");
$("#q4").attr("class", "q11_a");
$(".q5 a").removeAttr("href");
$("#list").empty();
});
});
</script>
</body>
</html>
'JQuery > JQuery 기본' 카테고리의 다른 글
| [JQuery] 달력만들기 (0) | 2018.08.08 |
|---|---|
| [JQuery] JQuert UI 사용하기 (이미지 투명도) (0) | 2018.08.07 |
| [JQuery] 사진 윗쪽 뒤쪽 글추가 및 div <p>테그 삭제하기. (0) | 2018.08.07 |
| [JQuery] 버튼누르면 태그,배경색,메세지띄우기 (0) | 2018.08.07 |
| [JQuery] 사이트 및 코드사용 (0) | 2018.08.07 |
