Jquery[제이쿼리] wrap()메서드 배우기
안녕하세요~ 제이쿼리공장장 주니주니 입니다. 오늘은 제이쿼리[jquery] wrap()메서드를 배워보겠습니다. 이렇게 준비해보았습니다. 실행화면입니다. =============================== $('.b1').on('click',fu..
itjunijuni.tistory.com
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
*{margin: 0 0; padding: 0 0}
.div0 {
width: 500px; height: 500px; margin: 50px auto;
border: 2px solid black; padding: 20px 0 0 20px;
}
input {width: 200px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="div0">
<input type="button" value="wrap('<b></b>')" class="b1">
<input type="button" value="wrap(function())" class="b2">
<p>안녕!</p>
<p>제이쿼리를 싫어하는</p>
<p>dev-jones입니다.</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".b1").on("click", function() {
$("p").wrap("<b></b>");
});
$(".b2").on("click", function() {
var a = ["blue", "green", "red"];
$("p").wrap(function(i) {
$(this).css("color", a[i]);
return "<li></li>";
})
})
});
</script>
</body>
</html>'제이쿼리' 카테고리의 다른 글
| [제이쿼리] 형(이전) / 동생(다음) 요소 선택자 (0) | 2020.10.04 |
|---|---|
| 인접 관계 선택자 (0) | 2020.10.01 |
| 기본 선택자 (0) | 2020.09.30 |
| this와 $(this)의 차이점 (0) | 2020.09.20 |
| 제이쿼리 커스텀 태그와 .data (0) | 2020.09.20 |
