addClass()를 사용해서 만든 버튼입니다. 이번 글에서는 이러한 버튼을 만드는 코드에 대해서 설명하겠습니다.
$ 함수는 요소, 클래스, 태그 등을 선택할 수 있습니다. 이 때 여러 개의 요소, 클래스, 태그 등을 선택하고자 할 때는 쉼표로 구분해서 작성하면 됩니다.
$("#id3, .class2, h1")
$ 함수로 선택한 것들에 일괄적으로 클래스를 추가하거나 삭제할 수 있습니다. addClass() 메서드가 전자에, removeClass() 메서드가 후자에 해당합니다. 여러 개의 클래스를 동시에 추가하거나 삭제할 수 있는데, 이 때는 스페이스로 각 클래스명을 구분하면 됩니다.
$("#button_ex").addClass("animated bounce");
// $("text_ex").removeClass("class1 class2");
*글 서두에 제공된 버튼의 경우, jQuery, Bootstrap, animate.css를 모두 링크하는 것이 필요합니다. 다음은 버튼을 만드는데 사용된 코드입니다.
<!DOCTYPE html>
<html>
<head>
<!-- Link Bootstrap -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Link animate.css -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<!-- Link jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button_ex").addClass("animated bounce");
});
</script>
<button class="btn btn-info" id="button_ex">Button</button>
</body>
</html>728x90
반응형
'Frontend > JQuery' 카테고리의 다른 글
| [jQuery] remove(), empty() 메서드 (0) | 2023.09.22 |
|---|---|
| [jQuery] prop() 메서드 vs attr() 메서드 (0) | 2023.09.21 |
| [jQuery] html(), text() 메서드 (0) | 2023.09.20 |
| [jQuery] css() 메서드 (0) | 2023.09.13 |
| jQuery에 대하여 (0) | 2023.09.11 |