웹을 문서로 만든다면 html이나 css만으로도 충분히 만듭니다.
웹을 문서가 아니라 애플리케이션으로써 만든다면 html을 동적으로 만든다거나 css를 수정한다거나 해야하고, 이에 대해서는 자바스크립트를 사용해야합니다. → jQuery
엘리먼트 제어
- jQuery는 엘리먼트를 제어하는 일관되고 풍부한 기능들을 제공한다.
- http://api.jquery.com/category/manipulation/
자식으로 삽입 (.append(), .appendTo(), .html(), .prepend(), .prependTo(), .text())
<!-- http://api.jquery.com/append/ -->
<!DOCTYPE html>
<html>
<head>
<style>
p {
background:yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
I would like to say:
</p>
<script>$("p").append("<strong>Hello</strong>");</script>//strong엘리먼트 생성, p태그의 자식 엘리먼트로 추가
</body>
</html>
형제로 삽입 (.after(), .before(), .insertAfter(), .insertBefore())
<!-- http://api.jquery.com/after/ -->
<!DOCTYPE html>
<html>
<head>
<style>
p {
background:yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
I would like to say:
</p>
<script>$("p").after("<b>Hello</b>");</script>//p태그 다음에
</body>
</html>
부모로 감싸기 (.unwrap(), .wrap(), .wrapAll(), .wrapInner())
<!-- http://api.jquery.com/wrap/ -->
<!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>//여러개의 태그필요. jQuery사용
</body>
</html>
삭제 (.detach(), .empty(), .remove(), .unwrap())
<!-- http://api.jquery.com/remove/ -->
<!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 () {//click이벤트
$("p").remove();
});
</script>
</body>
</html>
치환 (.replaceAll(), .replaceWith())
<!-- http://api.jquery.com/replaceAll/ -->
<!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>Paragraph. </b>").replaceAll("p"); // check replaceWith() examples </script>
//.replaceAll(target):제어하고자 하는 인자가 target으로 들어오고
</body>
</html>
클래스 (.addClass():클래스 추가, .hasClass():클래스를 가지고 있는지, .removeClass(), .toggleClass():가지고 있으면 삭제, 가지고있지 않으면 추가)
<!-- http://api.jquery.com/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"); //this->클릭된 엘리먼트
});
</script>
</body>
</html>
속성제어 (.attr(), .prop(), .removeAttr(), .removeProp(), .val():엘리먼트가 가지고있는 value값을 리턴)
<!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 () {//keyup이벤트:타이핑 후 타이핑을 뗐을때 작동
var value = $(this).val();
$("p").text(value);//text메소드호출, 인자:value
}).keyup();</script>//keyup:트리거->input엘리먼트가 keyup호출해서 P태그에 값을 넣어줌
</body>
</html>
'__ > jQuery' 카테고리의 다른 글
| [생활코딩] 9강. 탐색(traversing) (0) | 2021.02.19 |
|---|---|
| [생활코딩] 8강. Form (0) | 2021.01.24 |
| [생활코딩] 6강. Event (0) | 2021.01.24 |
| [생활코딩] 5강. Chain & Traversing (0) | 2021.01.24 |
| [생활코딩] 4강. 선택자 (0) | 2021.01.24 |