HOWTO · jQuery
jQuery를 사용하여 요소가 존재하는지 확인
이 튜토리얼은 jQuery를 사용하여 요소가 존재하는지 확인하는 방법을 보여줍니다.
jQuery를 사용하여 요소가 있는지 여부를 확인하는 두 가지 방법이 있습니다. 하나는 길이 속성이고 다른 하나는 메서드를 사용하여 자체 exist() 메서드를 만드는 것입니다. 이 튜토리얼은 요소의 존재 여부를 확인하는 방법을 보여줍니다.
Length 속성을 사용하여 jQuery를 사용하여 요소가 존재하는지 확인
jQuery의 length 속성은 요소의 존재 여부를 확인하는 데 사용할 수 있습니다. 일치하는 총 요소를 반환합니다. 길이가 0을 반환하면 요소가 존재하지 않으며 다른 값은 요소가 있음을 의미합니다.
length 속성의 구문은 다음과 같습니다.
($("element").length)
위의 구문은 0 또는 다른 숫자를 반환합니다.
length 속성을 사용하여 요소의 존재 여부를 확인하는 예제를 시도해보자. 예를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<title>jQuery Length</title>
<style>
body {
text-align: center;
}
h1 {
color: lightblue;
font-size: 4.5rem;
}
button {
cursor: pointer;
margin-top: 4rem;
}
</style>
</head>
<body>
<h1>Delftstack | The Best Tutorial Site</h1>
<p id="DemoPara1">This is paragraph 1</p>
<button id="DemoButton1"> Check Paragraph 1</button>
<button id="DemoButton2"> Check Paragraph 2 </button>
<button id="DemoButton3"> Check Heading 1 </button>
<script type="text/javascript">
$(document).ready(function () {
$("#DemoButton1").click(function () {
if ($("#DemoPara1").length) {
alert("Paragraph 1 exists");
}
else {
alert("Paragraph 1 does not exist");
}
});
$("#DemoButton2").click(function () {
if ($("#DemoPara2").length) {
alert("Paragraph 2 exists");
}
else {
alert("Paragraph 2 does not exist");
}
});
$("#DemoButton3").click(function () {
if ($("h1").length) {
alert("Heading 1 exists");
}
else {
alert("Heading 1 does not exist");
}
});
});
</script>
</body>
</html>
위의 코드는 다른 버튼을 눌러 단락과 제목이 있는지 여부를 확인합니다. 출력 참조:
jQuery를 사용하여 요소가 존재하는지 확인하는 사용자 정의 함수 만들기
이제 jQuery에 요소가 있는지 여부를 확인하는 고유한 메서드를 만들어 보겠습니다. 함수를 만드는 구문은 다음과 같습니다.
jQuery.fn.exists = function () {
return this.length > 0;
};
보시다시피 length 속성을 사용하여 jQuery로 exists 함수를 만들었습니다. length 속성은 요소의 존재 여부를 확인하지 않고 요소의 길이를 반환하는 데 사용됩니다. 그렇기 때문에 우리는 우리만의 방법을 한 번 만들고 어디에서나 사용할 수 있습니다.
예를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<title>jQuery Exists</title>
<style>
body {
text-align: center;
}
h1 {
color: lightblue;
font-size: 4.5rem;
}
button {
cursor: pointer;
margin-top: 4rem;
}
</style>
</head>
<body>
<h1>Delftstack | The Best Tutorial Site</h1>
<p id="DemoPara1">This is paragraph 1</p>
<button id="DemoButton1"> Check Paragraph 1</button>
<button id="DemoButton2"> Check Paragraph 2 </button>
<button id="DemoButton3"> Check Heading 1 </button>
<script type="text/javascript">
$(document).ready(function () {
jQuery.fn.exists = function () {
return this.length > 0;
};
$("#DemoButton1").click(function () {
if ($("#DemoPara1").exists()) {
alert("Paragraph 1 exists");
}
else {
alert("Paragraph 1 does not exist");
}
});
$("#DemoButton2").click(function () {
if ($("#DemoPara2").exists()) {
alert("Paragraph 2 exists");
}
else {
alert("Paragraph 2 does not exist");
}
});
$("#DemoButton3").click(function () {
if ($("h1").exists()) {
alert("Heading 1 exists");
}
else {
alert("Heading 1 does not exist");
}
});
});
</script>
</body>
</html>
위의 코드는 사용자 정의 함수 exists를 사용하여 요소가 있는지 여부를 확인합니다. 출력은 예제와 유사합니다.
출력 참조:
