728x90
반응형
이 포스트에서는 jQuery hasClass() 메소드를 어떻게 쓰는지 알아보겠습니다. hasClass() 메소드는 특정한 HTML 항목에 특정한 클래스 이름이 할당되어있는지 확인합니다.
hasClass() 메소드 문법
$(selector).hasClass(classname)여기서 classname은 확인할 클래스 이름입니다. 이 메소드는 선택자로 선택된 HTML 항목이 classname을 가지고 있을 경우 true를 리턴합니다.
jQuery hasClass() 메소드 예제
다음의 예제는 big 이라는 클래스 이름이 문장에 추가되어있고, 버튼 클릭 이벤트가 발생하면 hasClass() 메소드를 사용하여 화면에 표시된 문장 중 big 이라는 클래스 이름이 포함된 문장이 있는지 확인합니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.big {
font-size: 200%;
color: green;
}
</style>
</head>
<body>
<h1>jQuery hasClass() 예제</h1>
<p class="big">첫 번째 문장입니다.</p>
<p>두 번째 문장입니다.</p>
<p>마지막 문장입니다.</p>
<button>p 태그 중 클래스 이름이 big인 것 찾기</button>
<script>
$("button").click(function () {
alert($("p").hasClass("big"));
});
</script>
</body>
</html>위의 코드를 index.html에 입력하고 실행하면 다음과 같은 화면이 보입니다.
여기서 아래 쪽 버튼을 누르면 문장 중 big 이라는 클래스 이름이 있는지 검사하여 결과를 알려줍니다.
jQuery hasClass() 메소드 예제 - 결과 값을 화면에 보여주기
이번 예제는 hasClass() 메소드의 결과를 화면에 바로 표시하는 방법을 알아보겠습니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.green {
color: green;
}
.red {
color: red;
}
</style>
</head>
<body>
<h1>jQuery hasClass() 예제</h1>
<p class="green" id="para1">첫 번째 문장입니다.</p>
<p class="red" id="para2">두 번째 문장입니다.</p>
첫 번째 문장에 green 클래스가 있나?
<div id="result1"></div>
두 번째 문장에 green 클래스가 있나?
<div id="result2"></div>
<script type="text/javascript" language="javascript">
$("#result1").text($("p#para1").hasClass("green"));
$("#result2").text($("p#para2").hasClass("green"));
</script>
</body>
</html>위의 코드를 실행하면 문장에 green 클래스가 포함되어있는지 확인하여 바로 화면에 보여줍니다.
일단 body 안에 두개의 문장이 있습니다. 첫 번째 문장은 para1 이라는 id를 가지고 있고 두 번째 문장의 id는 para2 입니다. 여기서 javascript 코드를 보면 hasClass() 메소드를 사용해 앞의 두개 문장에 green 이라는 클래스가 포함되어 있는지 확인합니다. hasClass() 메소드의 결과를 text() 메소드를 통해 같은 화면에 바로 표시하도록 했습니다.
관련 글
반응형
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 특정 문자 모두 바꾸기 (replaceAll) (0) | 2022.10.28 |
|---|---|
| [jquery] 자바스크립트 클래스 이름 지우기 (2) | 2022.10.07 |
| [jquery] 자바스크립트 클래스 이름 추가하기 (0) | 2022.10.06 |
| [jquery] 자바스크립트 숨기기 보이기 (2) | 2022.10.05 |
| [jquery] 자바스크립트 버튼 클릭 (2) | 2022.10.05 |
댓글