반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
.q5 {
color: #aabbcc;
border: 2px solid;
}
.q8 {
padding: 10px;
border: #000 2px solid;
background-color: gray;
}
</style>
</head>
<body>
<button>실행</button>
<p id="q01">Hello JQuery</p>
<p id="q02">Hello JQuery</p>
<p id="q03">Hello JQuery</p>
<p id="q04">Hello JQuery</p>
<ul id="q05">
<li>사과</li>
<li>배</li>
<li>바나나</li>
</ul>
<p id="q06">최선을 다함으로</p>
<ul id="q07">
<li>커피</li>
</ul>
<p id="q08">나는 최선을 다 할 것입니다</p>
<div class="q8">
<p id="q09">나는 최선을 다 할 것입니다</p>
</div>
<p id="q10" class="q10">나는 문제 없어</p>
<p id="q11">
<a href="http://www.naver.com">Naver</a>
</p>
<script>
$("button").click(function() {
// font color 변경
$("#q01").css("color", "#ff0000");
// font color, background-color 변경
$("#q02").css({
"color": "#0000ff",
"background-color": "#ffff00"
});
// setter
$("#q03").text("헬로우 제이쿼리");
$("#q03").html("<b>헬로우</b> 제이쿼리");
$("#q04").text("<a href='http://www.naver.com'>Naver 홈피</a>");
//html코드에 넣었을때는 html코드로 인식
$("#q04").html("<a href='http://www.naver.com'>Naver 홈피</a>");
$("#q05").addClass("q5");
var app = $("<li>").text("복숭아");
$("#q05").append(app);
$("#q05 li").remove();
$("#q06").prepend("<p>끝까지</p>");
$("#q06").append("<p>나는 성공할 것이다</p>");
$("#q07").children().before("<li>홍차</li>");
$("#q07").children().after("<li>우유</li>");
//씌운다
$("#q08").wrap("<div class='q8'></div>");
//씌운것을 제거
$("#q09").unwrap("div.q8");
//클래스명 변경
$("#q10").attr("class", "q11");
console.log($("#q10").attr("class"));
//attr내 요소 제거
$("#q11 a").removeAttr("href");
});
</script>
</body>
</html>
반응형
'JavaScript > jQuery' 카테고리의 다른 글
| 제이쿼리, jsp간 연동해보기2 (0) | 2020.01.13 |
|---|---|
| 제이쿼리 기본 태그 조작법 (0) | 2020.01.13 |
| 제이쿼리 , JSP 간 연동1 (0) | 2020.01.13 |
| 제이쿼리 filter, blur, hide, show, toggle (0) | 2020.01.13 |
| 제이쿼리 테이블에 값 넣기 (0) | 2020.01.13 |
