css에 클래스로 스타일을 먼저 만들어 놓고, JQuery에서 적용한다.
Style과 Script를 분리하는 효과가 나타난다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addClass():: html코드와 css코드를 분리</title>
<style type="text/css">
/*꼭 클래스로 해줘야합니다. */
.totalView{color: orange}/*클래스 속성이라는 말입니다. */
.divP{color:red}
.pFirst{background: gray}
.paragraph{border: 1px solid green}
.statement{border : 1px sold blue}
.item{border:1px solid blue}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('h1, p').addClass('totalView');
$('div p').addClass('divP');
$('p:eq(0)').addClass('pFirst');
$('p#paragraph').addClass('paragraph');
$('p.statement').addClass('statement');
$('.item').addClass('item');
});
</script>
</head>
<body>
<h1>What is jQuery?</h1>
<div>
<p>Query is a fast, small, and feature-rich JavaScript library.</p>
</div>
<p id="paragraph">It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.</p>
<p class="statement">With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.</p>
<p class="statement item">With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.</p>
</body>
</html>'컴퓨터 프로그래밍 > JQuery' 카테고리의 다른 글
| setTimeout()-select (0) | 2020.05.30 |
|---|---|
| filter()-addClass(), :even, :odd (0) | 2020.05.30 |
| form fields-input (0) | 2020.05.30 |
| on(), click(), one()-clone(), appendTo() (0) | 2020.05.30 |
| key event-keyup(), textarea:maxlength (0) | 2020.05.30 |