반응형
엘리먼트 제어
- jQuery는 엘리먼트를 제어하는 일관되고 풍부한 기능들을 제공한다.
- http://api.jquery.com/category/manipulation/
Manipulation | jQuery API Documentation
Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, to the end of each element in the set of
api.jquery.com
자식으로 삽입 (.append(), .appendTo(), .html(), .prepend(), .prependTo(), .text())
<!DOCTYPE html>
<html>
<head>
<style>
p {
background:yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
Jin seok kim:
</p>
<script>$("p").append("<strong>Hello</strong>");</script>
</body>
</html>

형제로 삽입 (.after(), .before(), .insertAfter(), .insertBefore())
<!DOCTYPE html>
<html>
<head>
<style>
p {
background:yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
jin seok kim:
</p>
<script>$("p").after("<b>Hello</b>");</script>
</body>
</html>

부모로 감싸기 (.unwrap(), .wrap(), .wrapAll(), .wrapInner())
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:2px blue solid;
margin:2px;
padding:2px;
}
p {
background:yellow;
margin:2px;
padding:2px;
}
strong {
color:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span>Span Text</span>
<strong>What about me?</strong>
<span>Another One</span>
<script>$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");</script>
</body>
</html>

삭제 (.detach(), .empty(), .remove(), .unwrap())
<!DOCTYPE html>
<html>
<head>
<style>
p {
background:yellow;
margin:6px 0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
Hello
</p>
how are
<p>
you?
</p>
<button>
Call remove() on paragraphs
</button>
<script>
$("button").click( function () {
$("p").remove();
});
</script>
</body>
</html>


치환 (.replaceAll(), .replaceWith())
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p> Hello </p>
<p> cruel </p>
<p> World </p>
<script>$("<b>jin seok. </b>").replaceAll("p"); </script>
</body>
</html>

클래스 (.addClass(), .hasClass(), .removeClass(), .toggleClass())
<!DOCTYPE html>
<html>
<head>
<style>p {
margin: 4px;
font-size:16px;
font-weight:bolder;
cursor:pointer;
}
.blue {
color:blue;
}
.highlight {
background:yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue"> Click to toggle </p>
<p class="blue highlight"> highlight </p>
<p class="blue"> on these </p>
<p class="blue"> paragraphs </p>
<script>
$("p").click( function () {
$(this).toggleClass("highlight");
});
</script>
</body>
</html>


속성제어 (.attr(), .prop(), .removeAttr(), .removeProp(), .val())
<!DOCTYPE html>
<html>
<head>
<style>p {
color:blue;
margin:8px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" value="some text"/>
<p>
</p>
<script>$("input").keyup( function () {
var value = $(this).val();
$("p").text(value);
}).keyup();</script>
</body>
</html>

반응형
'프로그래밍 개발 > JQuery' 카테고리의 다른 글
JQuery 탐색 (0) | 2020.12.30 |
---|---|
JQuery 폼 (0) | 2020.12.29 |
JQuery Event (0) | 2020.12.25 |
JQuery Chain (0) | 2020.12.23 |
JQuery 선택자 (0) | 2020.12.22 |
댓글